@font-face {
  font-family: "ChoGokubosoGothic";
  src: url("fonts/chogokubosogothic_5.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --grid-color: #eceff2;
  --gray-text: #5a5f66;
  --dark-text: #2c2c2c;
  --grad-individuality: linear-gradient(90deg, #6a5acd 0%, #4bb543 45%, #a3e635 100%);
  --grad-technology: linear-gradient(90deg, #ff8c00 0%, #ff5f9e 100%);
  --grad-projects: #12ABE0;
  --red-1: #ff4b4b;
  --red-2: #ff8a8a;
  --blue-1: #234bff;
  --blue-2: #5f7dff;
  --footer-blue: #12ace0;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "ChoGokubosoGothic", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  font-weight: 700;
  -webkit-text-stroke: 0.4px currentColor;
  text-stroke: 0.4px currentColor;
  color: var(--dark-text);
  background-color: #ffffff;
  overflow-x: hidden;
  padding-top: 92px;
}

/* ---------- ページ遷移ブラー ---------- */
/* body自体にfilterをかけると、position:fixedな子要素（ヘッダーやイントロ演出）の
   基準位置(containing block)がビューポートからbodyに変わってしまい、
   ぼかし中だけ表示位置がずれる不具合が起きる。
   そのためbodyの「直接の子要素それぞれ」に個別にfilterをかける。
   各子要素（ヘッダー・グリッド背景・イントロ演出・main・footer）は
   内部にposition:fixedな要素を持たないため、この不具合を避けつつ
   実際にぼかった見た目を表示できる */

html.pt-blur body {
  pointer-events: none;
}

body > * {
  transition: filter 0.4s ease, opacity 0.4s ease;
}

html.pt-blur body > * {
  filter: blur(18px);
  opacity: 0;
}

/* 斜めに傾けたグリッド背景。要素全体が画面より大幅に大きいため、background-positionではなく
   transform: translate()でパン(タイル1つ分の範囲でループ)させ、毎フレームの再ペイントを避けてGPU合成だけで動かす */
#grid-bg {
  position: fixed;
  top: -60vw;
  left: -60vw;
  width: 220vw;
  height: 220vw;
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(-12deg) translate(0, 0);
  transform-origin: center center;
  will-change: transform;
  z-index: -1;
  pointer-events: none;
}

/* ---------- ヘッダー ---------- */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 2.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 700;
  transform: translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1), filter 0.4s ease, opacity 0.4s ease;
}

#site-header.visible {
  transform: translateY(0);
}

.site-logo-link {
  display: inline-flex;
  line-height: 0;
}

.site-logo {
  height: 48px;
  width: auto;
  display: block;
}

.header-divider {
  width: 1px;
  height: 36px;
  background: #d8dbe0;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.header-nav a {
  position: relative;
  color: var(--dark-text);
  text-decoration: none;
  font-size: 0.95rem;
  padding-bottom: 4px;
}

.header-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #10ACE0;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.header-nav a:hover {
  color: var(--blue-1);
}

.header-nav a:hover::after {
  width: 100%;
}

body.menu-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

body.menu-open #site-header {
  right: var(--scrollbar-width, 0px);
}

.header-menu-btn {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.header-menu-btn span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: #12ABE0;
  transition: transform 0.5s ease-in-out, opacity 0.3s ease;
}

.header-menu-btn.open span:nth-child(1) {
  transform: translateY(9px) rotate(315deg);
}

.header-menu-btn.open span:nth-child(2) {
  opacity: 0;
}

.header-menu-btn.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-315deg);
}

.mobile-nav-overlay {
  display: none;
}

@media (max-width: 760px) {
  .header-menu-btn {
    display: flex;
  }

  .header-nav {
    display: none;
  }

  .mobile-nav-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    background: #ffffff;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    z-index: 600;
    transition: transform 0.35s ease-in-out, visibility 0s linear 0.35s;
  }

  .mobile-nav-overlay.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.35s ease-in-out;
  }

  .mobile-nav-overlay a {
    width: auto;
    padding: 0;
    color: var(--dark-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    opacity: 0;
    transform: translateX(80px);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }

  .mobile-nav-overlay a:hover {
    color: #12ABE0;
  }

  .mobile-nav-overlay.open a {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-nav-overlay.open a:nth-child(1) { transition-delay: 0s; }
  .mobile-nav-overlay.open a:nth-child(2) { transition-delay: 0.1s; }
  .mobile-nav-overlay.open a:nth-child(3) { transition-delay: 0.2s; }
  .mobile-nav-overlay.open a:nth-child(4) { transition-delay: 0.3s; }
  .mobile-nav-overlay.open a:nth-child(5) { transition-delay: 0.4s; }
}

/* ---------- 見出し共通 ---------- */

.headline {
  margin: 0;
  font-family: "ChoGokubosoGothic", sans-serif;
  font-weight: 400;
  text-align: left;
  line-height: 1.15;
  white-space: nowrap;
}

.headline .line {
  display: block;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}

/* Our Projects等のセクション見出しと同じ「縁取りのみ」の表現にして、太さの印象を揃える */
.line-accelerate {
  color: transparent;
  -webkit-text-stroke: 2px var(--dark-text);
  text-stroke: 2px var(--dark-text);
}

/* Individuality/Technologyは常設(real-headline)・イントロ演出(1文字ずつのtspan)
   どちらもSVGの<text>/<tspan>で描画し、strokeにグラデーションを直接指定することで
   Accelerateと同じ「縁取りのみ」の太さのままグラデーションを保つ。
   CSSのtext-strokeは単色しか指定できないため、この2行だけSVGを使っている。
   tspanはstroke/fill等のSVGプロパティを親<text>から継承するので、個別指定は不要 */
svg.line-individuality,
svg.line-technology {
  display: block;
  width: 100%;
  height: 1.15em;
  overflow: visible;
}

svg.line-individuality text,
svg.line-technology text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  fill: none;
  stroke-width: 2px;
  stroke-linejoin: round;
}

svg.line-individuality text {
  stroke: url(#grad-individuality-line);
}

svg.line-technology text {
  stroke: url(#grad-technology-line);
}

/* 1文字ずつのspan/tspan（イントロ用）：自分の番が来るまでは非表示。
   番が来た瞬間にフェードなしで20px離れた位置に現れ、そこから最終位置へスライドする。
   opacityはspan/tspan両方に効くのでここで共通化するが、位置(transform)は
   通常のspan(Accelerate行)にだけ適用する。SVGのtspan(グラデーション行)は
   JS側でx/y属性を直接書き換えて動かしており、transformも併用するとWebKitで
   getStartPositionOfCharの測位置がズレて文字がバラバラになる不具合になるため。 */
.char {
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0s;
}

.char.in {
  opacity: 1;
}

span.char {
  display: inline-block;
  white-space: pre;
}

span.char.from-tl {
  transform: translate(-40px, -40px);
}

span.char.from-br {
  transform: translate(40px, 40px);
}

span.char.in {
  transform: translate(0, 0);
}

/* ---------- イントロオーバーレイ ---------- */

#intro-overlay,
#birthday-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}

#intro-headline {
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1);
  will-change: transform;
}

/* #intro-headlineはwill-change: transformにより自分自身がoffsetParentになるため、
   文字spanのoffsetLeftが.line基準の値になる。#birthday-headlineにも同じ効果を与えて
   position:fixedな#birthday-overlay基準にoffsetLeftがずれる(グラデーションが途中で
   はみ出して透明=枠線だけになる)のを防ぐ */
#birthday-headline {
  position: relative;
}

#birthday-overlay {
  transition: opacity 0.7s ease;
}

#birthday-overlay.fly-out {
  opacity: 0;
}

/* ---------- フェードイン要素 ---------- */

/* イントロの見出しからそのまま繋がるので、ここはフェードさせず即座に表示する */
.real-headline {
  opacity: 0;
}

.real-headline.visible {
  opacity: 1;
}

.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- レイアウト ---------- */

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: 2.5rem;
  align-items: start;
  padding: 7vh 1rem 6vh;
}

.real-headline {
  grid-column: 1;
  grid-row: 1 / 4;
}

.hero-desc {
  grid-column: 2;
  grid-row: 1;
  margin: 0.4rem 0 0;
  color: var(--gray-text);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.7;
}

.about-nav {
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.about-title {
  margin: 0 0 0.2rem;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 600;
  color: var(--dark-text);
}

.banner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 0.7rem 1.6rem 0.7rem 2.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 18px 50%);
}

.banner-red {
  background: linear-gradient(90deg, var(--red-1), var(--red-2));
}

.banner-blue {
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
}

/* ---------- Our Activities（独立ページ） ---------- */

.activities {
  padding: 4vh 1rem 10vh;
  text-align: center;
}

.activities-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.activities-header .projects-title {
  white-space: nowrap;
}

.activities-subtitle {
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--grad-projects);
  opacity: 0.7;
}

.activities-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.formula-word {
  font-family: "ChoGokubosoGothic", sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 600;
}

.formula-individuality {
  background: var(--grad-individuality);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #4bb543;
  /* bodyの手描き風の縁取り(-webkit-text-stroke)は、漢字のように線が細い字形だと
     グラデーションの塗りを覆い隠して単色に見えてしまうため、ここでは無効化する */
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0px transparent;
}

.formula-technology {
  background: var(--grad-technology);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff5f9e;
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0px transparent;
}

.formula-op {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--gray-text);
}

/* ∞は左右の正円（各3リング）を中心で接合して構成。座標は viewBox 140x70 を2倍した px。
   全体を少し小さく見せるため transform: scale() で縮小し、レイアウト上の余白は
   負のマージンで打ち消している。 */
.infinity-graphic {
  position: relative;
  top: 10px;
  width: 280px;
  height: 140px;
  flex: 0 0 auto;
  transform: scale(0.8);
  margin: -14px -28px;
}

/* 親（.inf-ring）はドーナツ形のマスクで位置は固定。
   子（.inf-fill）が conic の虹色を持って回転する。→ 色は回り続ける。
   左の円は、INFINITYの文字の下（下側の交差点、実際に重なる角度は約107°）を、
   右の円は、INFINITYの文字の上（上側の交差点、実際に重なる角度は約287°）を、
   それぞれ少しだけ削って開ける。
   3層とも中心同士の相対関係は同じ（斜めに平行移動しているだけ）なので、この角度は
   全レイヤー共通で正しい。 */
.inf-ring {
  position: absolute;
  border-radius: 50%;
}

.inf-left {
  -webkit-mask-image:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)),
    conic-gradient(from 0deg, #000 93deg, transparent 93deg 121deg, #000 121deg);
          mask-image:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)),
    conic-gradient(from 0deg, #000 93deg, transparent 93deg 121deg, #000 121deg);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.inf-right {
  -webkit-mask-image:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)),
    conic-gradient(from 0deg, #000 273deg, transparent 273deg 301deg, #000 301deg);
          mask-image:
    radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)),
    conic-gradient(from 0deg, #000 273deg, transparent 273deg 301deg, #000 301deg);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.inf-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* サイズは3つとも同じ（140px）。inf-i を基準に、inf-m は inf-i から、
   inf-o は inf-m から、それぞれ少し左上へずらして重ねる（段々にカスケードするレイアウト）。
   重なり順は小(i)が一番下、大(o)が一番上（z-indexで明示）。 */
.inf-o { width: 140px; height: 140px; top: -12px; z-index: 3; }
.inf-m { width: 140px; height: 140px; top: -6px;  z-index: 2; }
.inf-i { width: 140px; height: 140px; top: 0;     z-index: 1; }

/* 左の円・右の円それぞれの水平位置も、i を基準に m→o の順で少し左へずらす。 */
.inf-left.inf-o  { left: -9px; }
.inf-left.inf-m  { left: -3px; }
.inf-left.inf-i  { left: 3px; }
.inf-right.inf-o { left: 125px; }
.inf-right.inf-m { left: 131px; }
.inf-right.inf-i { left: 137px; }

/* 円周に沿ったグラデーション（conic）。子要素に付与して回転させる。
   大=赤系 / 中=黄系 / 小=緑系。始点と終点を同色にして回転の継ぎ目を消す。 */
.inf-o .inf-fill { background: conic-gradient(#ff4b6c, #ff4bd2, #ff4b6c, #e96bff, #ff4b6c); }
.inf-m .inf-fill { background: conic-gradient(#ffd23f, #ff8c00, #ffe98a, #f78e33, #ffd23f); }
.inf-i .inf-fill { background: conic-gradient(#4bb543, #56d34e, #5783eb, #53ca4a,#4bb543); }

/* 左は時計回り、右は反時計回り。中心で噛み合って色が循環する */
.inf-left  .inf-fill { animation: inf-spin-cw var(--inf-dur, 7s) linear infinite; }
.inf-right .inf-fill { animation: inf-spin-ccw var(--inf-dur, 7s) linear infinite; }
.inf-o { --inf-dur: 9s; }
.inf-m { --inf-dur: 7s; }
.inf-i { --inf-dur: 5.5s; }

@keyframes inf-spin-cw  { to { transform: rotate(360deg); } }
@keyframes inf-spin-ccw { to { transform: rotate(-360deg); } }

.infinity-label {
  position: absolute;
  /* リング自体が斜めに少しずつ左上へずれて重なっている（カスケード配置）ため、
     実際に見える∞マークの中心は箱の中心よりわずかに左上寄り。そこに合わせる。 */
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  transform: translate(-50%, -50%);
  z-index: 6;
  background: #ffffff;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  font-size: 2.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--dark-text);
  white-space: nowrap;
}

.activities-card {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  border: 1px solid var(--grid-color);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
}

.activities-desc {
  margin: 0;
  color: var(--gray-text);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.9;
  text-align: left;
}

@media (max-width: 760px) {
  /* 固定px構成なので全体を縮小して収める */
  .infinity-graphic {
    transform: scale(0.72);
    transform-origin: center;
    margin: -20px -39px;
  }

  .activities-card {
    padding: 1.5rem;
  }
}

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: 2.5rem;
  align-items: center;
  padding: 4vh 1rem 10vh;
}

.projects-title {
  grid-column: 1;
  margin: 0;
  font-family: "ChoGokubosoGothic", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--grad-projects);
  text-stroke: 2px var(--grad-projects);
}

.projects-desc {
  grid-column: 2;
  margin: 0;
  color: var(--blue-1);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.7;
}

/* ---------- プロジェクト一覧（リストの一番最後の項目が一番大きく表示される） ---------- */

.projects-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}

.project-card {
  --card-color: #999;
  position: relative;
  display: flex;
  gap: 1.2rem;
  padding: 1.2rem;
  border: 2px solid var(--card-color);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.project-view-btn {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--card-color);
  border-radius: 999px;
  background: #fff;
  color: var(--card-color);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.project-view-btn:hover {
  background: var(--card-color);
  color: #fff;
}

.project-card .project-icon {
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border: 2px solid var(--card-color);
  border-radius: 6px;
  color: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  padding: 0.3rem;
}

.project-card .project-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-card .project-body {
  height: 150px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-card .project-body h3 {
  margin: 0 0 0.4rem;
  color: var(--dark-text);
  font-size: 1.15rem;
  font-weight: 600;
}

.project-card .project-body p {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.9rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card.featured {
  grid-column: 1 / -1;
  padding: 2rem;
}

.project-card.featured .project-icon {
  font-size: 0.95rem;
}

.project-card.featured .project-body h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.project-card.featured .project-body p {
  font-size: 1rem;
}

@media (max-width: 760px) {
  .project-card {
    flex-direction: column;
  }

  .project-card .project-icon {
    align-self: center;
  }

  .project-view-btn {
    position: static;
    align-self: center;
    margin-top: 0.75rem;
  }
}

.view-all-btn {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 2.2rem;
  border: 2px solid var(--grad-projects);
  border-radius: 999px;
  color: var(--grad-projects);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  /* .fade-inのtransition(opacity/transform)と同じtransitionプロパティを
     ここで別の値(background/color)で上書きしてしまうと、後から出てくるほうの
     指定だけが有効になりフェードイン自体が瞬時に切り替わってしまうため、
     両方をまとめて1つのtransitionに指定する */
  transition: opacity 0.6s ease, transform 0.6s ease, background 0.25s ease, color 0.25s ease;
}

/* ---------- Our History ---------- */

.history {
  padding: 4vh 1rem 10vh;
}

.history-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.history-title {
  margin: 0;
  font-family: "ChoGokubosoGothic", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--grad-projects);
  text-stroke: 2px var(--grad-projects);
}

.history-subtitle {
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--grad-projects);
  opacity: 0.7;
}

.history-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 920px;
  margin: 0 auto;
  padding-left: 44px;
}

.history-timeline-line {
  position: absolute;
  left: 10.5px;
  width: 3px;
  background: linear-gradient(to bottom, #12ABE0, #C9ECF8);
  z-index: 0;
  pointer-events: none;
}

.history-item {
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.history-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

.history-dot {
  position: absolute;
  left: -42px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #12ABE0;
  box-sizing: border-box;
  z-index: 1;
}

.history-item-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.history-date {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--dark-text);
}

.history-item-title {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  color: var(--dark-text);
}

.history-card {
  padding: 1.6rem 2rem;
  border: 1px solid var(--grid-color);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
}

.history-card p {
  margin: 0;
  color: var(--gray-text);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.9;
  text-align: left;
}

@media (max-width: 760px) {
  .history-card {
    padding: 1.25rem 1.5rem;
  }
}

/* ---------- 404 ---------- */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 6vh 1rem 10vh;
}

.notfound-title {
  margin: 0;
  font-family: "ChoGokubosoGothic", sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.5rem);
  white-space: nowrap;
}

.notfound-title .notfound-404 {
  color: transparent;
  -webkit-text-stroke: 2px #ff3b1f;
  text-stroke: 2px #ff3b1f;
}

.notfound-title .notfound-text {
  color: transparent;
  -webkit-text-stroke: 2px #e08a1a;
  text-stroke: 2px #e08a1a;
}

.notfound-subtitle {
  margin: 0.5rem 0 3rem;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 600;
  background: linear-gradient(90deg, #ff5f7e, #f0a33c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f0a33c;
}

.notfound-box {
  max-width: 640px;
  width: 100%;
  padding: 1.8rem 2.4rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 91, 110, 0.85), rgba(230, 178, 118, 0.85));
  box-shadow: 0 14px 34px rgba(255, 120, 90, 0.2);
}

.notfound-box p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.7;
  text-align: left;
}

.notfound-home-link {
  margin-top: 2.5rem;
}

/* クリックした場所から飛び散る隠しネタ用の画像パーティクル */
.enychan-particle {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
  z-index: 2000;
  box-shadow: 0 6px 16px rgba(20, 30, 60, 0.2);
  animation: enychan-fly 0.9s cubic-bezier(0.22, 0.8, 0.24, 1) forwards;
}

@keyframes enychan-fly {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.5) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--nf-tx), var(--nf-ty)) scale(1) rotate(var(--nf-rot));
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .notfound-title {
    white-space: normal;
    line-height: 1.1;
  }

  .notfound-box {
    padding: 1.4rem 1.8rem;
  }
}

.view-all-btn:hover {
  background: var(--grad-projects);
  color: #ffffff;
}

/* ---------- メンバー一覧 ---------- */

/* スプレッドシートからの取得に数秒かかることがあるため、その間だけ表示する
   汎用の読み込み中スピナー（他ページでも使えるよう名前は一般化してある） */
.loading-spinner {
  grid-column: 1 / -1;
  width: 2.5rem;
  height: 2.5rem;
  margin: 3rem auto;
  border: 4px solid var(--grid-color);
  border-top-color: #4ebcff;
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.member-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 3rem;
}

.member-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  cursor: pointer;
  /* 表示時に真ん中から左右に伸びるように出す。transition-delayは行ごとにJS側で
     ずらして設定し、全員が同時に動くのではなく順番に現れるようにする */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.member-row.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

.member-icon {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  border: 1px solid var(--member-color, var(--dark-text));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dark-text);
  background: #ffffff;
  font-size: 0.85rem;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.member-row:hover .member-icon {
  background: var(--member-color, var(--dark-text));
  border-color: #ffffff;
  color: var(--member-contrast, #ffffff);
}

.member-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info {
  flex: 1;
  height: 110px;
  border: 1px solid var(--member-color, var(--dark-text));
  border-radius: 16px;
  padding: 1rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.member-row:hover .member-info {
  background: var(--member-color, var(--dark-text));
  border-color: #ffffff;
}

.member-row:hover .member-info h3,
.member-row:hover .member-info h3 a,
.member-row:hover .member-info p {
  color: var(--member-contrast, #ffffff);
}

.member-row:hover .member-info .member-department {
  color: var(--member-contrast, #ffffff);
  border-color: var(--member-contrast, #ffffff);
}

.member-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.3rem;
}

.member-info h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--dark-text);
  transition: color 0.2s ease;
}

.member-info h3 a {
  color: inherit;
  text-decoration: none;
}

.member-info h3 a:hover {
  color: var(--blue-1);
  text-decoration: underline;
}

.member-department {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue-1);
  border: 1px solid var(--blue-1);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.member-info p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--gray-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

/* ---------- プロジェクト詳細モーダル ---------- */

.project-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.project-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

body.project-modal-open {
  overflow: hidden;
}

.project-modal {
  --card-color: #999;
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}

.project-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--dark-text);
  cursor: pointer;
}

.project-modal-icon {
  width: 140px;
  height: 140px;
  margin: 0 auto 1rem;
  border: 2px solid var(--card-color);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--card-color);
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem;
}

.project-modal-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-modal-name {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--dark-text);
}

.project-modal-detail {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-text);
  text-align: left;
}

.project-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.75rem;
  border: 2px solid var(--card-color);
  border-radius: 999px;
  color: var(--card-color);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.project-modal-link:hover {
  background: var(--card-color);
  color: #ffffff;
}

@media (max-width: 760px) {
  .project-modal-backdrop {
    padding: 0;
  }

  .project-modal {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------- メンバー詳細モーダル ---------- */

.member-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.member-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

body.member-modal-open {
  overflow: hidden;
}

.member-modal {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}

.member-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--dark-text);
  cursor: pointer;
}

.member-modal-icon {
  width: 140px;
  height: 140px;
  margin: 0 auto 1rem;
  border: 1px solid var(--member-color, var(--dark-text));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--dark-text);
  font-size: 0.9rem;
}

.member-modal-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-modal-name {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--dark-text);
}

.member-modal-detail {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-text);
  text-align: left;
}

@media (max-width: 760px) {
  .member-icon {
    flex-basis: 90px;
    width: 90px;
    height: 90px;
  }

  .member-info {
    height: 90px;
    padding: 0.75rem 1rem;
    justify-content: flex-start;
  }

  .member-name-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .member-info p {
    display: none;
  }

  .member-modal-backdrop {
    padding: 0;
  }

  .member-modal {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---------- お知らせ ---------- */

/* .projects-gridは他ページ(Our Projects等)と共有しているため、列数はこちらで
   お知らせ専用に上書きする(PCは4列、スマホは2列固定)。固定pxで列幅を作ると
   スマホの画面幅からはみ出して横スクロールの原因になるため、1frの可変幅にし、
   カードの横幅はその列幅いっぱいまで伸ばす */
.news-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* メンバー一覧の行と同じく、真ん中から左右に伸びるように出す */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.news-card.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

.news-card-thumb {
  width: 100%;
  /* 244.65:137.61 = 16:9 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--grid-color);
}

.news-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card-title {
  margin: 1rem 0 0;
  color: var(--dark-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-meta {
  margin-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--grid-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gray-text);
  font-size: 0.85rem;
}

.news-card-arrow {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--grad-projects);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}

/* ---------- お知らせ詳細ページ ---------- */

.news-detail-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4vh 1rem 10vh;
}

.news-detail-back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--grad-projects);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.news-detail-back:hover {
  text-decoration: underline;
}

.news-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: start;
}

.news-detail-date {
  margin: 0 0 0.5rem;
  color: var(--grad-projects);
  font-weight: 600;
  font-size: 0.9rem;
}

.news-detail-title {
  margin: 0 0 1.5rem;
  color: var(--dark-text);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.4;
}

.news-detail-hero {
  margin-bottom: 1.5rem;
}

.news-detail-hero img {
  display: block;
  width: 100%;
  max-width: 240px;
  border-radius: 12px;
}

.news-detail-notfound {
  color: var(--gray-text);
}

.news-detail-sidebar-title {
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--grad-projects);
  color: var(--dark-text);
  font-size: 1.05rem;
  font-weight: 600;
}

.news-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-sidebar-item {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--grid-color);
  text-decoration: none;
}

.news-sidebar-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-sidebar-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--grid-color);
}

.news-sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-sidebar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.news-sidebar-title {
  margin: 0;
  color: var(--dark-text);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-sidebar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gray-text);
  font-size: 0.75rem;
}

@media (max-width: 900px) {
  .news-detail-layout {
    grid-template-columns: 1fr;
  }
}

.news-detail-content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-text);
}

.news-detail-content p {
  margin: 0 0 0.75rem;
}

.news-detail-content h1,
.news-detail-content h2,
.news-detail-content h3 {
  margin: 0 0 0.5rem;
  color: var(--dark-text);
  font-weight: 600;
  line-height: 1.3;
}

.news-detail-content h1 {
  font-size: 1.5rem;
}

.news-detail-content h2 {
  font-size: 1.25rem;
}

.news-detail-content h3 {
  font-size: 1.05rem;
}

.news-detail-content img {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  margin: 0 0 0.75rem;
}

.news-image-caption {
  margin: -0.4rem 0 0.75rem;
  color: var(--gray-text);
  font-size: 0.8rem;
  text-align: center;
}

.news-detail-content > *:last-child {
  margin-bottom: 0;
}

/* ---------- Join ---------- */

.join-panel {
  grid-column: 1 / -1;
  margin-top: 3rem;
  border: 2px solid var(--dark-text);
  border-radius: 24px;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.join-message {
  margin: 0;
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--gray-text);
}

.discord-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.8rem;
  border-radius: 999px;
  background: #12ABE0;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discord-join-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .join-panel {
    padding: 2.25rem 1.25rem;
  }
}

/* ---------- フッター ---------- */

#site-footer {
  margin-top: 8vh;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.4s ease;
}

#site-footer.visible {
  opacity: 1;
  transform: translateY(0);
}

/* #site-footer.visible の opacity:1 は ID セレクタで詳細度が高く、
   body > * のブラー用 opacity:0 だけでは上書きできないため個別に指定する */
html.pt-blur #site-footer.visible {
  opacity: 0;
}

.footer-blue {
  background-image: linear-gradient(to bottom, #ffffff 0%, var(--footer-blue) 90px);
}

.footer-top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 2.5rem 3rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.footer-logo {
  height: 76px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.footer-cols {
  display: flex;
  gap: 4.5rem;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col h3 {
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-bottom {
  background: #ffffff;
}

.footer-bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 2.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--footer-blue);
  font-size: 0.85rem;
}

.footer-bottom a {
  color: var(--footer-blue);
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .headline {
    white-space: normal;
  }

  .hero,
  .projects {
    grid-template-columns: 1fr;
  }

  .real-headline,
  .hero-desc,
  .about-nav,
  .projects-title,
  .projects-desc {
    grid-column: 1;
    grid-row: auto;
  }

  .about-nav {
    margin-top: 1rem;
  }
}

/* ---------- Pong（隠しページ） ---------- */

.pong-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

.pong-score {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "ChoGokubosoGothic", sans-serif;
  font-size: 2.5rem;
  color: var(--dark-text);
}

.pong-score-sep {
  color: var(--gray-text);
}

#pong-canvas {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 800 / 480;
  border-radius: 16px;
  border: 1px solid var(--dark-text);
  cursor: pointer;
  touch-action: none;
}

.pong-hint {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.9rem;
}

/* ---------- 星評価 ---------- */

.star-rating {
  display: inline-flex;
  gap: 0.15rem;
}

.star-rating-star {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: #d8dee8;
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0px transparent;
  transition: color 0.15s ease, transform 0.15s ease;
}

.star-rating.interactive .star-rating-star {
  cursor: pointer;
}

.star-rating.interactive .star-rating-star:hover {
  transform: scale(1.15);
}

.star-rating-star.filled {
  color: #f5b30d;
}

/* ---------- Bookshelf（電子本棚） ---------- */

.bookshelf {
  padding: 4vh 1rem 10vh;
}

.bookshelf-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bookshelf-subtitle {
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--grad-projects);
  opacity: 0.7;
}

/* 本の並び(flex-wrap)の各行の高さは.book-spineで固定しているため、行の切れ目に
   ちょうど棚板の線が来るよう、行の高さ+行間隔を1周期とした縞模様の背景で表現する */
.bookshelf-grid {
  --book-item-h: 15.9rem;
  --book-row-gap: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  column-gap: 2rem;
  row-gap: var(--book-row-gap);
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding: 0.5rem 1rem calc(var(--book-row-gap) - 0.6rem);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--book-item-h) + var(--book-row-gap) * 0.5 - 0.15rem),
    #12ABE0 calc(var(--book-item-h) + var(--book-row-gap) * 0.5 - 0.15rem),
    #12ABE0 calc(var(--book-item-h) + var(--book-row-gap) * 0.5 + 0.15rem),
    transparent calc(var(--book-item-h) + var(--book-row-gap) * 0.5 + 0.15rem),
    transparent calc(var(--book-item-h) + var(--book-row-gap))
  );
  background-size: 100% calc(var(--book-item-h) + var(--book-row-gap));
}

.bookshelf-empty {
  color: var(--gray-text);
  text-align: center;
}

.book-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 8.5rem;
  height: var(--book-item-h);
}

.book-spine-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.book-rating {
  height: 1rem;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-rating .star-rating-star {
  font-size: 0.85rem;
}

.book-cover {
  width: 8.5rem;
  height: 11.25rem;
  border: 2px solid #12ABE0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8rem;
  color: var(--gray-text);
  background: #ffffff;
  box-shadow: 0 10px 16px rgba(20, 30, 60, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.book-spine-link:hover .book-cover {
  transform: translateY(-4px);
  box-shadow: 0 16px 22px rgba(20, 30, 60, 0.24);
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-title {
  margin-top: 0.6rem;
  width: 100%;
  height: 2.65rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-text);
}

@media (max-width: 760px) {
  .bookshelf-grid {
    --book-item-h: 13.65rem;
    --book-row-gap: 2.75rem;
    column-gap: 1.25rem;
  }

  .book-spine,
  .book-cover {
    width: 6.8rem;
  }

  .book-cover {
    height: 9rem;
  }
}

/* ---------- Reader（電子書籍リーダー） ---------- */

/* 読書中はヘッダー・フッター・背景グリッドを持たないため、その分のスペースを詰めて
   本だけに集中できる画面いっぱいのレイアウトにする */
body.reader-page {
  padding-top: 0;
}

.reader {
  min-height: 100vh;
  /* モバイルはアドレスバーの出入りで100vhの基準がずれて本が見切れることがあるため、
     対応ブラウザでは実際の表示領域に追従する100dvhを優先する */
  min-height: 100dvh;
  padding: 4vh 1rem 6vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 本を画面いっぱい大きく見せるため、タイトル・戻るリンク・評価などは普段隠しておき、
   画面上端にカーソルを持っていく(PC)/画面上端をタップする(スマホ)と上から降りてくる。
   スマホ側の表示切り替えはreader.jsが.reader-header.is-visibleの付け外しで行う */
.reader-hover-zone {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 49;
}

.reader-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.4rem 2.5rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 55%, rgba(255, 255, 255, 0));
  z-index: 50;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.reader-header.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* マウスでのホバー表示はPC(pointer:fine)限定にする。スマホ(タッチ)はhover:hoverを
   満たさないブラウザが大半だが、iOS Safari等はタップ後に:hoverが「貼り付いた」まま
   になることがあり、範囲を絞らないとJS側でis-visibleを外してもタイトル欄だけ
   （:hoverで表示され続けるため）消えなくなる不具合になる */
@media (hover: hover) and (pointer: fine) {
  .reader-hover-zone:hover ~ .reader-header,
  .reader-header:hover {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.reader-rating {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}

.reader-rating .star-rating-star {
  font-size: 1.3rem;
}

.reader-zoom-controls {
  flex: 0 0 auto;
}

/* .reader-stage等と同様、hidden属性のON/OFFを繰り返す(縦スクロール⇄ページめくり切り替え)
   要素はdisplayを無条件に持たせない。持たせているとhidden属性より優先されてしまい、
   縦スクロール表示中もページめくり用のUIが表示され続けてしまう不具合になる */
.reader-zoom-controls:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.reader-zoom-btn {
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 50%;
  background: #f0f3f8;
  color: var(--blue-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.reader-zoom-btn::before {
  content: '';
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

#reader-zoom-in::before {
  -webkit-mask-image: url('assets/zoom_in.svg');
  mask-image: url('assets/zoom_in.svg');
}

#reader-zoom-out::before {
  -webkit-mask-image: url('assets/zoom_out.svg');
  mask-image: url('assets/zoom_out.svg');
}

.reader-zoom-btn:hover:not(:disabled) {
  background: var(--blue-1);
  color: #fff;
}

.reader-zoom-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.reader-zoom-level {
  min-width: 2.6rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-text);
  cursor: pointer;
}

.reader-anim-toggle {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  border: 1.5px solid var(--blue-1);
  border-radius: 999px;
  background: #fff;
  color: var(--blue-1);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reader-anim-toggle:hover {
  background: var(--blue-1);
  color: #fff;
}

.reader-anim-toggle[aria-pressed="false"] {
  background: #f0f3f8;
  color: var(--gray-text);
  border-color: #d8dee8;
}

.reader-back {
  flex: 0 0 auto;
  color: var(--blue-1);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.reader-back:hover {
  text-decoration: underline;
}

.reader-title {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 700;
  color: var(--dark-text);
}

.reader-stage {
  position: relative;
  width: 100%;
  max-width: 1300px;
  min-height: min(640px, 55vh);
  /* 拡大時にはみ出した分はスクロールではなくJS側でtranslateしてパンするため、
     ここは表示範囲を確定するだけのclip目的でhiddenにする */
  overflow: hidden;
}

/* 縦スクロールモードに切り替えた時にhidden属性でここを隠すが、display:flexを
   無条件につけていると要素によっては優先されて表示され続けてしまうため、
   hidden属性が無い時だけdisplay:flexにする */
.reader-stage:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.reader-stage.is-zoomed {
  cursor: grab;
}

.reader-stage.is-panning {
  cursor: grabbing;
}

.reader-book {
  position: relative;
  width: 100%;
  /* 起点を左上に固定することで、拡大しても右・下方向にしかはみ出さず、
     .reader-stageのスクロールで常にどの位置も辿り着けるようにする
     （中心基準だと上端側にはみ出た分がスクロールで届かなくなる） */
  transform-origin: top left;
  transition: transform 0.2s ease;
}


.reader-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* 読み込み中の"Loading"の文字を1文字ずつ、線が伸びる→文字がふわっと出る→
   全体がフェードアウトを繰り返すアニメーション表示にする */
.ml14 {
  margin: 0;
  font-weight: 200;
  font-size: 2rem;
  color: var(--dark-text);
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0px transparent;
  white-space: nowrap;
}

.ml14 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml14 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: var(--blue-1);
  transform-origin: 100% 100%;
  bottom: 0;
}

.ml14 .letter {
  display: inline-block;
  line-height: 1em;
}

.reader-loading-progress {
  margin: 0.75rem 0 0;
  color: var(--gray-text);
  font-size: 0.85rem;
}

.reader-controls {
  width: 100%;
  max-width: 420px;
  margin-top: 1.25rem;
}

/* hidden属性のON/OFFを繰り返す要素なので、displayは:not([hidden])の時だけ与える
   （常時display:flexだと縦スクロール表示中もめくり用UIが残って見えてしまう） */
.reader-controls:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* 実際のバー(塗り部分・つまみ)はJSでleft/widthを直接更新するdivとして描画し、
   <input type="range">はドラッグ操作を受け取るための透明な当たり判定として上に重ねる。
   ページ送り時にもこのdiv側のtransitionで自然に滑るアニメーションになる */
.reader-progress-wrap {
  position: relative;
  width: 100%;
  height: 14px;
}

.reader-progress-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #e3e7ee;
  pointer-events: none;
}

/* 本が右綴じ(1ページ目が右)なので、進捗バーも1ページ目=右端から左へ
   進んでいくように右基準で塗る・つまみを置く */
.reader-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--blue-1);
  transition: width 0.3s ease;
}

.reader-progress-thumb {
  position: absolute;
  top: 50%;
  right: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue-1);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.3);
  transform: translate(50%, -50%);
  transition: right 0.3s ease;
  pointer-events: none;
}

.reader-progress-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.reader-progress-bar::-webkit-slider-runnable-track {
  background: transparent;
}

.reader-progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.reader-progress-bar::-moz-range-track {
  background: transparent;
}

.reader-progress-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.reader-progress-bar:focus-visible {
  outline: 2px solid var(--blue-1);
  outline-offset: 4px;
  border-radius: 999px;
}

.reader-nav-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reader-nav-btn {
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--blue-1);
  border-radius: 50%;
  background: #fff;
  color: var(--blue-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.reader-nav-btn::before {
  content: '';
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

#reader-prev::before {
  -webkit-mask-image: url('assets/arrow_forward.svg');
  mask-image: url('assets/arrow_forward.svg');
}

#reader-next::before {
  -webkit-mask-image: url('assets/arrow_back.svg');
  mask-image: url('assets/arrow_back.svg');
}

.reader-nav-btn:hover {
  background: var(--blue-1);
  color: #fff;
  transform: scale(1.1);
}

.reader-page-indicator {
  min-width: 4rem;
  text-align: center;
  color: var(--gray-text);
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  /* 他ページ共通の<main>の左右2rem余白がそのままreaderにもかかってしまい、
     本の表示幅がその分（左右合計64px）無駄に狭くなっていたため、readerページだけ外す */
  body.reader-page main {
    padding: 0;
  }

  /* タイトル欄・進捗バーが常時レイアウトの高さを取らなくなる分、
     本の表示にできるだけ画面を使えるよう余白を最小限にする */
  .reader {
    padding: 0.5rem 0.15rem env(safe-area-inset-bottom, 0.5rem);
  }

  /* 読み込み中(本体がまだ無い状態)はreader-stage自体の高さが0になり、
     overflow:hiddenのせいで中央のLoading表示がクリップされて見えなくなるため、
     最低限の高さは確保しておく（本のサイズ自体はJS側のbounds計算で決まり、
     このmin-heightに制約されるわけではない） */
  .reader-stage {
    min-height: 320px;
  }

  /* 下の進捗バー・矢印ボタンも、PCでは常時表示のままだがスマホでは
     タイトル欄と同様に普段隠しておき、画面上端のタップで一緒に出し入れする
     （固定表示にすると本の表示できる高さがその分減ってしまうため） */
  .reader-controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    padding: 1rem 1.5rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 55%, rgba(255, 255, 255, 0));
    z-index: 50;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .reader-controls.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Reader モバイル専用機能（縦スクロール表示） ---------- */

.reader-mobile-toolbar {
  display: none;
}

.reader-scroll-view {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* .reader-stageと同様、hidden属性が無い時だけ表示用のdisplayを与える */
.reader-scroll-view:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reader-scroll-view img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

@media (max-width: 760px) {
  .reader-mobile-toolbar {
    display: flex;
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    gap: 0.5rem;
    z-index: 60;
  }

  .reader-mobile-btn {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--blue-1);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(20, 30, 60, 0.15);
    cursor: pointer;
  }
}