/* =========================================
   大学ノート風ポートフォリオ - 共通スタイル
   ========================================= */

/* ---------- リセット ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ---------- フォント ---------- */
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Yusei+Magic&family=Zen+Kurenaido&family=Caveat:wght@400;700&display=swap');

:root {
  --paper-base: #f6f0dc;          /* 古紙ベース */
  --paper-shade: #ece2c0;         /* 影色 */
  --rule-line: #8fb4d4;           /* 横罫線（青） */
  --margin-line: #d96363;         /* 赤マージン線 */
  --ink: #2a2a3a;                 /* 万年筆っぽい黒紺 */
  --ink-blue: #1d3f7a;            /* 青インク */
  --ink-red: #c0392b;             /* 添削赤 */
  --pencil: #4a4a4a;              /* 鉛筆 */
  --ring: #b8b8b8;                /* リング金属 */
  --ring-shadow: #6e6e6e;
  --tape-yellow: #fce67d;
  --tape-blue: #a3d4e8;
  --tape-pink: #f7b9c6;
  --sticky-yellow: #fff59d;
  --sticky-pink: #ffb3ba;
  --sticky-green: #b5e7a0;

  --rule-gap: 32px;               /* 罫線の間隔 */
  --margin-x: 110px;              /* 赤マージン線の位置 */
  --ring-pitch: 56px;             /* リングの間隔 */
  --ring-area: 70px;              /* リング描画領域の幅 */
}

/* ---------- 全体（机の上） ---------- */
body {
  font-family: 'Klee One', 'Yusei Magic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--ink);
  line-height: 1.8;
  min-height: 100vh;
  background-color: #6b4423;
  background-image:
    /* 木目グラデーション */
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.04) 0px,
      rgba(0, 0, 0, 0.04) 2px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 13px
    ),
    radial-gradient(ellipse at 30% 20%, #8b5a2b 0%, #6b4423 50%, #4a2f17 100%);
  padding: 40px 20px 80px;
  overflow-x: hidden;
}

/* ---------- ノート全体 ---------- */
.notebook {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background-color: var(--paper-base);
  /* 紙の質感（ノイズ＋しわ） */
  background-image:
    /* しわ */
    radial-gradient(ellipse 200% 80% at 50% 0%, rgba(0, 0, 0, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 80% 200% at 100% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 60%),
    /* シミ・汚れ */
    radial-gradient(circle at 85% 12%, rgba(120, 90, 30, 0.13) 0%, transparent 4%),
    radial-gradient(circle at 15% 88%, rgba(120, 90, 30, 0.10) 0%, transparent 5%),
    radial-gradient(circle at 70% 65%, rgba(140, 100, 40, 0.08) 0%, transparent 3%),
    /* 紙のテクスチャ（細かいノイズ） */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: 4px 8px 8px 4px;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 4px 0 12px rgba(0, 0, 0, 0.08);
  padding: 60px 60px 80px var(--margin-x);
  min-height: 1000px;
}

/* ---------- 紙の左端パンチ穴の影（紙の中に穴が空いている表現） ---------- */
.notebook .punch-holes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ring-area) - 18px);
  width: 28px;
  pointer-events: none;
  z-index: 2;
  background-image:
    /* 穴本体（暗い窪み） */
    radial-gradient(
      ellipse 14px 11px at 50% 50%,
      #1a1410 0%,
      #2c2218 35%,
      #5a4a36 60%,
      rgba(0,0,0,0) 72%
    );
  background-size: 28px var(--ring-pitch);
  background-repeat: repeat-y;
  background-position: 0 30px;
  /* 穴の縁の白いハイライト */
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6));
}
.notebook .punch-holes::before {
  /* 穴の上側のハイライト */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      ellipse 12px 3px at 50% 38%,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0) 100%
    );
  background-size: 28px var(--ring-pitch);
  background-repeat: repeat-y;
  background-position: 0 30px;
}

/* ---------- 横罫線＋赤マージン線（紙面背景） ---------- */
.notebook::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    /* 赤マージン縦線 */
    linear-gradient(
      to right,
      transparent calc(var(--margin-x) - 1px),
      var(--margin-line) calc(var(--margin-x) - 1px),
      var(--margin-line) calc(var(--margin-x) + 1px),
      transparent calc(var(--margin-x) + 1px)
    ),
    /* 横罫線 */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--rule-gap) - 1px),
      var(--rule-line) calc(var(--rule-gap) - 1px),
      var(--rule-line) var(--rule-gap)
    );
  background-position: 0 56px, 0 56px;
  background-repeat: no-repeat, repeat-y;
  background-size: 100% 100%, 100% calc(100% - 56px);
  opacity: 0.55;
  z-index: 0;
}

/* ---------- リング綴じ（スパイラルワイヤー） ----------
   構造：
   1) 紙の左にスパイラルが斜めに掛かる（前面の楕円）
   2) 紙の左端から少し外に出るワイヤー部分
   3) パンチ穴は別要素 .punch-holes で表現
*/
.notebook .spiral-rings {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ring-area);
  pointer-events: none;
  z-index: 3;
  /* 全体に薄い影（ノート左端の落ち影） */
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.35));
}

/* SVG 内のスパイラルパターンを CSS で重ねるかわりに、
   ::before / ::after で前面ワイヤーと背面ワイヤーを描画 */

.notebook .spiral-rings::before,
.notebook .spiral-rings::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat-y;
  background-size: var(--ring-area) var(--ring-pitch);
  background-position: 0 14px;
}

/* 背面ワイヤー：紙の裏から左に回り込む部分（細く・暗く） */
.notebook .spiral-rings::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='70' height='56' viewBox='0 0 70 56'>\
  <defs>\
    <linearGradient id='back' x1='0' x2='1' y1='0' y2='0'>\
      <stop offset='0' stop-color='%23252525'/>\
      <stop offset='0.5' stop-color='%234a4a4a'/>\
      <stop offset='1' stop-color='%23202020'/>\
    </linearGradient>\
  </defs>\
  <path d='M 60 8 C 30 8, 8 18, 8 28 C 8 38, 30 48, 60 48' \
        fill='none' stroke='url(%23back)' stroke-width='4' stroke-linecap='round' opacity='0.85'/>\
</svg>");
}

/* 前面ワイヤー：紙の前を斜めに走る部分（太く・金属光沢） */
.notebook .spiral-rings::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='70' height='56' viewBox='0 0 70 56'>\
  <defs>\
    <linearGradient id='wire' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%23e8e8ec'/>\
      <stop offset='0.15' stop-color='%23ffffff'/>\
      <stop offset='0.4' stop-color='%23a8a8ad'/>\
      <stop offset='0.6' stop-color='%23696970'/>\
      <stop offset='0.85' stop-color='%23303035'/>\
      <stop offset='1' stop-color='%23151518'/>\
    </linearGradient>\
    <linearGradient id='shine' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%23ffffff' stop-opacity='0'/>\
      <stop offset='0.45' stop-color='%23ffffff' stop-opacity='0.95'/>\
      <stop offset='0.55' stop-color='%23ffffff' stop-opacity='0.95'/>\
      <stop offset='1' stop-color='%23ffffff' stop-opacity='0'/>\
    </linearGradient>\
  </defs>\
  <!-- 前面ワイヤー本体（紙の前を左上から右下へ斜めに走る） -->\
  <path d='M 0 4 C 18 6, 38 14, 64 30 C 70 33, 70 38, 64 42 C 60 44, 56 46, 50 50' \
        fill='none' stroke='url(%23wire)' stroke-width='6.5' stroke-linecap='round'/>\
  <!-- 金属ハイライト -->\
  <path d='M 2 3 C 20 5, 40 13, 62 28' \
        fill='none' stroke='url(%23shine)' stroke-width='1.6' stroke-linecap='round'/>\
  <!-- 影の落ち（紙の上） -->\
  <path d='M 4 8 C 22 10, 42 18, 66 34' \
        fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' opacity='0.18'/>\
</svg>");
}

/* ---------- ノート上のコンテンツ ---------- */
.notebook-inner {
  position: relative;
  z-index: 1;
}

/* 罫線に沿わせるベース行高 */
.lined {
  line-height: var(--rule-gap);
}

/* ---------- 見出し ---------- */
h1, h2, h3 {
  font-family: 'Zen Kurenaido', 'Klee One', sans-serif;
  color: var(--ink-blue);
  font-weight: 600;
  line-height: var(--rule-gap);
  margin: 0;
}

h1 {
  font-size: 36px;
  color: var(--ink-blue);
  border-bottom: 2px double var(--ink-blue);
  padding-bottom: 4px;
  margin-bottom: calc(var(--rule-gap) * 1);
  display: inline-block;
}

h2 {
  font-size: 26px;
  color: var(--ink-red);
  margin-top: var(--rule-gap);
  margin-bottom: 8px;
  position: relative;
  padding-left: 8px;
}
h2::before {
  content: '◆';
  margin-right: 6px;
  color: var(--ink-red);
}

h3 {
  font-size: 20px;
  color: var(--ink);
  margin-top: var(--rule-gap);
  text-decoration: underline wavy var(--ink-blue);
  text-underline-offset: 6px;
}

/* ---------- 本文 ---------- */
p {
  font-size: 17px;
  line-height: var(--rule-gap);
  margin-bottom: var(--rule-gap);
  color: var(--ink);
}

ul, ol {
  margin: 0 0 var(--rule-gap) 1.6em;
  line-height: var(--rule-gap);
  font-size: 17px;
}
ul li::marker { color: var(--ink-red); }
ol li::marker { color: var(--ink-blue); font-weight: bold; }

a {
  color: var(--ink-blue);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}
a:hover { color: var(--ink-red); }

strong {
  background: linear-gradient(transparent 60%, rgba(252, 230, 125, 0.7) 60%);
  font-weight: 600;
}

em {
  font-style: normal;
  color: var(--ink-red);
  font-family: 'Caveat', cursive;
  font-size: 1.15em;
}

/* ---------- ページ番号 ---------- */
.page-number {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--pencil);
  z-index: 2;
}

/* ---------- 日付（右上） ---------- */
.note-date {
  position: absolute;
  top: 24px;
  right: 40px;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--ink-blue);
  transform: rotate(-2deg);
  z-index: 2;
}

/* ---------- ページの折れ（右下） ---------- */
.dog-ear {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  z-index: 3;
  background: linear-gradient(
    225deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.05) 30%,
    var(--paper-shade) 50%,
    var(--paper-base) 100%
  );
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.2) inset;
  pointer-events: none;
}

/* ---------- 破れ（上端） ---------- */
.torn-edge {
  position: absolute;
  top: -2px;
  left: 70px;
  right: 0;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0,8 L0,4 L3,2 L6,5 L10,1 L14,4 L18,2 L22,5 L26,1 L30,4 L34,2 L38,5 L40,3 L40,8 Z' fill='%23f6f0dc'/%3E%3C/svg%3E");
  background-size: 40px 8px;
  background-repeat: repeat-x;
  z-index: 2;
}

/* ---------- マスキングテープ ---------- */
.tape {
  position: absolute;
  width: 120px;
  height: 28px;
  background: var(--tape-yellow);
  opacity: 0.85;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 4;
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 20%,
      transparent 80%,
      rgba(255, 255, 255, 0.3) 100%
    ),
    repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 2px,
      transparent 2px,
      transparent 6px
    );
}
.tape::before, .tape::after {
  content: '';
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  background-image: linear-gradient(90deg,
    transparent 0%,
    var(--tape-yellow) 50%,
    transparent 100%);
  filter: blur(1px);
}
.tape::before { left: -3px; }
.tape::after { right: -3px; }

.tape--blue { background-color: var(--tape-blue); }
.tape--blue::before, .tape--blue::after {
  background-image: linear-gradient(90deg, transparent, var(--tape-blue), transparent);
}
.tape--pink { background-color: var(--tape-pink); }
.tape--pink::before, .tape--pink::after {
  background-image: linear-gradient(90deg, transparent, var(--tape-pink), transparent);
}

.tape--top-left { top: 16px; left: 130px; transform: rotate(-6deg); }
.tape--top-right { top: 14px; right: 60px; transform: rotate(4deg); }

/* ---------- 付箋 ---------- */
.sticky {
  position: relative;
  display: inline-block;
  background: var(--sticky-yellow);
  padding: 16px 18px 14px;
  font-family: 'Caveat', 'Klee One', cursive;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.4;
  box-shadow:
    2px 3px 6px rgba(0, 0, 0, 0.2),
    inset 0 -10px 14px rgba(0, 0, 0, 0.04);
  margin: 12px 8px;
  transform: rotate(-2deg);
  min-width: 140px;
  z-index: 2;
}
.sticky--pink { background: var(--sticky-pink); transform: rotate(2deg); }
.sticky--green { background: var(--sticky-green); transform: rotate(-1deg); }

/* ---------- ナビゲーション（タブ風） ---------- */
.nav-tabs {
  position: fixed;
  top: 60px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.nav-tab {
  display: block;
  padding: 12px 16px 12px 22px;
  background: linear-gradient(135deg, #f7d774 0%, #e8b94e 100%);
  color: var(--ink);
  text-decoration: none;
  font-family: 'Klee One', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 0 8px;
  box-shadow:
    -2px 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  border-left: 3px solid #b8932a;
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
  transition: transform 0.2s, padding 0.2s;
  min-width: 130px;
}
.nav-tab:hover {
  transform: translateX(-8px);
  padding-left: 30px;
  color: var(--ink-red);
}
.nav-tab--active {
  background: linear-gradient(135deg, #f7b9c6 0%, #e88aa0 100%);
  border-left-color: #b8536a;
  transform: translateX(-12px);
}
.nav-tab:nth-child(2) { background: linear-gradient(135deg, #a3d4e8 0%, #6fb3d2 100%); border-left-color: #3a7591; }
.nav-tab:nth-child(3) { background: linear-gradient(135deg, #b5e7a0 0%, #82c870 100%); border-left-color: #4a8a3a; }
.nav-tab:nth-child(4) { background: linear-gradient(135deg, #f7d774 0%, #e8b94e 100%); border-left-color: #b8932a; }
.nav-tab:nth-child(5) { background: linear-gradient(135deg, #f7b9c6 0%, #e88aa0 100%); border-left-color: #b8536a; }
.nav-tab:nth-child(6) { background: linear-gradient(135deg, #d4b8e8 0%, #b08fcf 100%); border-left-color: #6e4a8a; }

/* ---------- 表紙 ---------- */
.cover {
  background-color: #2c5282;
  background-image:
    /* レザー風テクスチャ */
    radial-gradient(ellipse at 30% 20%, #3d6ba3 0%, #2c5282 40%, #1e3a5f 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  color: #f6f0dc;
  border-radius: 4px 8px 8px 4px;
  padding: 80px 60px;
  min-height: 700px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 24px 48px rgba(0, 0, 0, 0.5),
    inset 4px 0 12px rgba(0, 0, 0, 0.3),
    inset 0 0 60px rgba(0, 0, 0, 0.2);
}
.cover::before {
  /* スパイラルリング綴じ（表紙用） */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='70' height='56' viewBox='0 0 70 56'>\
  <defs>\
    <linearGradient id='wire' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%23e8e8ec'/>\
      <stop offset='0.15' stop-color='%23ffffff'/>\
      <stop offset='0.4' stop-color='%23a8a8ad'/>\
      <stop offset='0.6' stop-color='%23696970'/>\
      <stop offset='0.85' stop-color='%23303035'/>\
      <stop offset='1' stop-color='%23151518'/>\
    </linearGradient>\
    <linearGradient id='shine' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%23ffffff' stop-opacity='0'/>\
      <stop offset='0.45' stop-color='%23ffffff' stop-opacity='0.95'/>\
      <stop offset='0.55' stop-color='%23ffffff' stop-opacity='0.95'/>\
      <stop offset='1' stop-color='%23ffffff' stop-opacity='0'/>\
    </linearGradient>\
  </defs>\
  <path d='M 60 8 C 30 8, 8 18, 8 28 C 8 38, 30 48, 60 48' \
        fill='none' stroke='%23202020' stroke-width='4' stroke-linecap='round' opacity='0.85'/>\
  <path d='M 0 4 C 18 6, 38 14, 64 30 C 70 33, 70 38, 64 42 C 60 44, 56 46, 50 50' \
        fill='none' stroke='url(%23wire)' stroke-width='6.5' stroke-linecap='round'/>\
  <path d='M 2 3 C 20 5, 40 13, 62 28' \
        fill='none' stroke='url(%23shine)' stroke-width='1.6' stroke-linecap='round'/>\
</svg>");
  background-size: 70px 56px;
  background-repeat: repeat-y;
  background-position: 0 14px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}
.cover::after {
  /* 縁の縫い目 */
  content: '';
  position: absolute;
  inset: 14px;
  border: 2px dashed rgba(246, 240, 220, 0.3);
  border-radius: 4px;
  pointer-events: none;
}

.cover-label {
  display: inline-block;
  background: var(--paper-base);
  color: var(--ink-blue);
  padding: 36px 50px;
  margin: 80px auto 40px;
  border: 2px solid var(--ink-blue);
  border-radius: 2px;
  position: relative;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.cover-label::before, .cover-label::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 40px;
  height: 14px;
  background: rgba(255, 255, 255, 0.6);
  filter: blur(1px);
}
.cover-label::before { left: 20px; transform: rotate(-4deg); }
.cover-label::after { right: 20px; transform: rotate(4deg); }

.cover-title {
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 48px;
  letter-spacing: 0.1em;
  color: var(--ink-blue);
  margin-bottom: 12px;
}
.cover-subtitle {
  font-family: 'Klee One', sans-serif;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 0;
}

.cover-fields {
  margin-top: 80px;
  font-family: 'Caveat', 'Klee One', cursive;
  font-size: 24px;
  color: #f6f0dc;
  line-height: 2;
  text-align: center;
}
.cover-field-line {
  display: block;
  border-bottom: 1px dashed rgba(246, 240, 220, 0.5);
  max-width: 480px;
  margin: 16px auto;
  padding-bottom: 4px;
}

.cover-enter-btn {
  display: inline-block;
  margin-top: 60px;
  padding: 14px 40px;
  background: var(--paper-base);
  color: var(--ink-red);
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 22px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid var(--ink-red);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.cover-enter-btn:hover {
  transform: translateY(-3px) rotate(-1deg);
  background: #fff8e7;
}

/* ---------- スキルバー ---------- */
.skill-list {
  list-style: none;
  margin-left: 0;
}
.skill-item {
  margin-bottom: var(--rule-gap);
}
.skill-name {
  font-family: 'Klee One', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-blue);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.skill-bar {
  position: relative;
  height: 14px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 19px,
      rgba(0, 0, 0, 0.1) 19px,
      rgba(0, 0, 0, 0.1) 20px
    ),
    rgba(255, 255, 255, 0.4);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.skill-fill {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--ink-red) 0,
    var(--ink-red) 4px,
    #d97777 4px,
    #d97777 8px
  );
  border-right: 2px solid var(--ink);
}

/* ---------- 作品カード ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-top: var(--rule-gap);
}
.work-card {
  position: relative;
  background: #fffbe8;
  padding: 16px 18px 18px;
  box-shadow:
    1px 2px 4px rgba(0, 0, 0, 0.2),
    3px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.25s;
}
.work-card:nth-child(odd) { transform: rotate(-1deg); }
.work-card:nth-child(even) { transform: rotate(1deg); }
.work-card:hover {
  transform: rotate(0) translateY(-4px) scale(1.02);
  z-index: 5;
}
.work-card::before {
  /* テープ */
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 70px;
  height: 18px;
  background: var(--tape-yellow);
  opacity: 0.85;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
.work-card:nth-child(3n)::before { background: var(--tape-blue); }
.work-card:nth-child(3n+1)::before { background: var(--tape-pink); }

.work-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: #888;
}
.work-title {
  font-family: 'Klee One', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink-blue);
  margin-bottom: 4px;
}
.work-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 8px;
}
.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.work-tag {
  font-size: 11px;
  background: var(--ink-blue);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
}

/* ---------- ブログ記事 ---------- */
.blog-entry {
  border-bottom: 1px dashed var(--ink);
  padding-bottom: var(--rule-gap);
  margin-bottom: var(--rule-gap);
}
.blog-date {
  font-family: 'Caveat', cursive;
  font-size: 20px;
  color: var(--ink-red);
}
.blog-title {
  font-family: 'Klee One', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-blue);
  margin: 4px 0;
}

/* ---------- フォーム ---------- */
.contact-form {
  margin-top: var(--rule-gap);
}
.form-row {
  margin-bottom: 24px;
}
.form-row label {
  display: block;
  font-family: 'Klee One', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-blue);
  margin-bottom: 4px;
}
.form-row input,
.form-row textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  padding: 6px 4px;
  font-family: 'Caveat', 'Klee One', cursive;
  font-size: 20px;
  color: var(--ink-blue);
  outline: none;
  line-height: var(--rule-gap);
}
.form-row textarea {
  border: 1.5px dashed var(--ink);
  background: rgba(255, 255, 255, 0.2);
  resize: vertical;
  min-height: calc(var(--rule-gap) * 5);
  padding: 8px 10px;
}
.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--ink-red);
  background: rgba(252, 230, 125, 0.2);
}
.btn-submit {
  background: var(--ink-red);
  color: #fff;
  border: none;
  padding: 12px 36px;
  font-family: 'Klee One', sans-serif;
  font-weight: 600;
  font-size: 17px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 2px 3px 0 var(--ink), 2px 3px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s;
}
.btn-submit:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 2px 0 var(--ink);
}

/* ---------- ページめくりアニメ ---------- */
.notebook {
  animation: pageOpen 0.6s ease-out;
  transform-origin: left center;
}
@keyframes pageOpen {
  0% {
    opacity: 0;
    transform: perspective(1500px) rotateY(-25deg) translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: perspective(1500px) rotateY(0) translateX(0);
  }
}

.cover {
  animation: coverFloat 0.7s ease-out;
  transform-origin: center;
}
@keyframes coverFloat {
  0% { opacity: 0; transform: scale(0.95) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
  :root {
    --margin-x: 56px; /* 左リング(幅50px)と本文が重ならないよう 50px 超を確保 */
    --rule-gap: 28px;
  }
  body { padding: 20px 6px 64px; }
  .notebook { padding: 40px 16px 60px var(--margin-x); }
  .notebook .spiral-rings { width: 50px; }
  .notebook .spiral-rings::before,
  .notebook .spiral-rings::after { background-size: 50px 44px; background-position: 0 12px; }
  .notebook .punch-holes { left: 32px; width: 22px; background-size: 22px 44px; background-position: 0 24px; }
  .notebook .punch-holes::before { background-size: 22px 44px; background-position: 0 24px; }
  .cover::before { width: 50px; background-size: 50px 44px; background-position: 0 12px; }
  .cover { padding: 60px 30px; min-height: 500px; }
  .cover-title { font-size: 32px; }
  .cover-label { padding: 24px 30px; margin-top: 40px; }
  /* 11 タブは折り返さず、1 段の横スクロールバーにする */
  .nav-tabs {
    top: auto; bottom: 0; right: 0; left: 0;
    flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;
    gap: 4px; padding: 6px 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: rgba(78, 53, 30, 0.5);
  }
  .nav-tab {
    min-width: 62px; flex: 0 0 auto;
    clip-path: none; border-radius: 8px;
    padding: 9px 10px; font-size: 12px;
    text-align: center; white-space: nowrap;
  }
  .nav-tab:hover { transform: none; padding-left: 10px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
}

/* ---------- 印字ハンコ風 ---------- */
.stamp {
  position: absolute;
  top: 80px;
  right: 60px;
  width: 110px;
  height: 110px;
  border: 3px double var(--ink-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 18px;
  color: var(--ink-red);
  transform: rotate(-15deg);
  opacity: 0.7;
  z-index: 3;
  text-align: center;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- ページめくりリンク（手書き風・左下/右下） ---------- */
.page-turn-link {
  position: absolute;
  bottom: 24px;
  font-family: 'Caveat', 'Klee One', cursive;
  font-size: 20px;
  color: var(--ink-blue);
  text-decoration: none;
  z-index: 5;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: rotate(-2deg);
  transition: transform 0.25s, color 0.25s;
  /* 鉛筆書きっぽいかすれ */
  text-shadow: 0.5px 0 0 rgba(29, 63, 122, 0.3);
}
.page-turn-link::after {
  /* 下線をつける（手書き風） */
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='6' viewBox='0 0 100 6'><path d='M0,3 Q25,0 50,3 T100,3' fill='none' stroke='%231d3f7a' stroke-width='1.2' stroke-linecap='round' opacity='0.7'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.7;
}
.page-turn-link:hover {
  color: var(--ink-red);
  transform: rotate(-2deg) translateX(0) scale(1.08);
}

.page-turn-link--prev {
  left: 60px;
}
.page-turn-link--prev .arrow {
  font-size: 26px;
  display: inline-block;
  transition: transform 0.25s;
}
.page-turn-link--prev:hover .arrow {
  transform: translateX(-4px);
}

.page-turn-link--next {
  right: 70px;
  transform: rotate(2deg);
}
.page-turn-link--next:hover {
  transform: rotate(2deg) scale(1.08);
}
.page-turn-link--next .arrow {
  font-size: 26px;
  display: inline-block;
  transition: transform 0.25s;
}
.page-turn-link--next:hover .arrow {
  transform: translateX(4px);
}

.page-turn-link .label-sub {
  font-size: 12px;
  color: var(--pencil);
  margin: 0 4px;
  font-family: 'Klee One', sans-serif;
  letter-spacing: 0.05em;
}

/* ---------- 見積：項目テーブル ---------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--rule-gap);
  margin-bottom: var(--rule-gap);
  font-size: 16px;
}
.price-table th,
.price-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1.5px dashed var(--ink);
  line-height: 1.6;
  vertical-align: top;
}
.price-table th {
  background: rgba(143, 180, 212, 0.2);
  font-family: 'Klee One', sans-serif;
  font-weight: 600;
  color: var(--ink-blue);
  border-bottom: 2px solid var(--ink-blue);
  font-size: 15px;
}
.price-table td.price {
  text-align: right;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--ink-red);
  white-space: nowrap;
  font-weight: 700;
}
.price-table td.note-text {
  font-size: 13px;
  color: var(--pencil);
  line-height: 1.4;
}
.price-table tr:hover td {
  background: rgba(252, 230, 125, 0.15);
}

/* ---------- 見積シミュレーター ---------- */
.simulator {
  margin-top: var(--rule-gap);
  padding: 24px 26px;
  background: rgba(255, 251, 232, 0.7);
  border: 2px solid var(--ink-blue);
  border-radius: 4px;
  position: relative;
  box-shadow: 3px 4px 0 rgba(29, 63, 122, 0.15), 4px 6px 12px rgba(0, 0, 0, 0.1);
}
.simulator::before {
  content: 'シミュレーション';
  position: absolute;
  top: -14px;
  left: 20px;
  background: var(--ink-blue);
  color: #fff;
  font-family: 'Klee One', sans-serif;
  font-size: 13px;
  padding: 3px 14px;
  border-radius: 2px;
  letter-spacing: 0.1em;
}
.sim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(29, 63, 122, 0.3);
}
.sim-row:last-of-type {
  border-bottom: none;
}
.sim-label {
  font-family: 'Klee One', sans-serif;
  font-size: 15px;
  color: var(--ink);
  flex: 1;
  min-width: 180px;
}
.sim-label .desc {
  display: block;
  font-size: 12px;
  color: var(--pencil);
  margin-top: 2px;
}
.sim-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sim-control select,
.sim-control input[type="number"] {
  font-family: 'Klee One', sans-serif;
  font-size: 15px;
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper-base);
  color: var(--ink-blue);
  border-radius: 2px;
  outline: none;
}
.sim-control input[type="number"] {
  width: 80px;
  text-align: right;
}
.sim-control input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ink-red);
  cursor: pointer;
}
.sim-control label {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--ink-blue);
  cursor: pointer;
  user-select: none;
}
.sim-price {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--ink-red);
  min-width: 90px;
  text-align: right;
  font-weight: 700;
}

.sim-total {
  margin-top: 16px;
  padding: 16px 0 4px;
  border-top: 3px double var(--ink-blue);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sim-total-label {
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 22px;
  color: var(--ink-blue);
}
.sim-total-amount {
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 38px;
  color: var(--ink-red);
  font-weight: 700;
  text-shadow: 1.5px 1.5px 0 rgba(192, 57, 43, 0.15);
}
.sim-total-amount .yen {
  font-size: 22px;
  margin-left: 4px;
}

.sim-note {
  font-size: 12px;
  color: var(--pencil);
  margin-top: 10px;
  text-align: right;
  font-family: 'Klee One', sans-serif;
}

/* ---------- 見積リセットボタン ---------- */
.btn-sim-reset {
  background: transparent;
  border: 1.5px solid var(--ink-blue);
  color: var(--ink-blue);
  padding: 6px 16px;
  font-family: 'Klee One', sans-serif;
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.2s;
}
.btn-sim-reset:hover {
  background: var(--ink-blue);
  color: #fff;
}

@media (max-width: 768px) {
  .page-turn-link { font-size: 16px; }
  .page-turn-link--prev { left: 16px; }
  .page-turn-link--next { right: 20px; }
  .price-table { font-size: 14px; }
  .price-table th, .price-table td { padding: 8px 6px; }
  .price-table td.price { font-size: 18px; }
  .sim-total-amount { font-size: 30px; }
}

/* ========================================
   裏表紙
   ======================================== */
.back-cover {
  background-color: #2c5282;
  background-image:
    radial-gradient(ellipse at 70% 80%, #3d6ba3 0%, #2c5282 40%, #1e3a5f 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  color: #f6f0dc;
  border-radius: 8px 4px 4px 8px;
  padding: 80px 60px 80px 90px;
  min-height: 700px;
  position: relative;
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 24px 48px rgba(0, 0, 0, 0.5),
    inset -4px 0 12px rgba(0, 0, 0, 0.3),
    inset 0 0 60px rgba(0, 0, 0, 0.2);
  animation: coverFloat 0.7s ease-out;
}
.back-cover::before {
  /* スパイラルリング（裏は左側のまま、表紙と統一） */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='70' height='56' viewBox='0 0 70 56'>\
  <defs>\
    <linearGradient id='wire' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%23e8e8ec'/>\
      <stop offset='0.15' stop-color='%23ffffff'/>\
      <stop offset='0.4' stop-color='%23a8a8ad'/>\
      <stop offset='0.6' stop-color='%23696970'/>\
      <stop offset='0.85' stop-color='%23303035'/>\
      <stop offset='1' stop-color='%23151518'/>\
    </linearGradient>\
    <linearGradient id='shine' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%23ffffff' stop-opacity='0'/>\
      <stop offset='0.45' stop-color='%23ffffff' stop-opacity='0.95'/>\
      <stop offset='0.55' stop-color='%23ffffff' stop-opacity='0.95'/>\
      <stop offset='1' stop-color='%23ffffff' stop-opacity='0'/>\
    </linearGradient>\
  </defs>\
  <path d='M 60 8 C 30 8, 8 18, 8 28 C 8 38, 30 48, 60 48' \
        fill='none' stroke='%23202020' stroke-width='4' stroke-linecap='round' opacity='0.85'/>\
  <path d='M 0 4 C 18 6, 38 14, 64 30 C 70 33, 70 38, 64 42 C 60 44, 56 46, 50 50' \
        fill='none' stroke='url(%23wire)' stroke-width='6.5' stroke-linecap='round'/>\
  <path d='M 2 3 C 20 5, 40 13, 62 28' \
        fill='none' stroke='url(%23shine)' stroke-width='1.6' stroke-linecap='round'/>\
</svg>");
  background-size: 70px 56px;
  background-repeat: repeat-y;
  background-position: 0 14px;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}
.back-cover::after {
  /* 縁の縫い目 */
  content: '';
  position: absolute;
  inset: 14px 14px 14px 84px;
  border: 2px dashed rgba(246, 240, 220, 0.3);
  border-radius: 4px;
  pointer-events: none;
}

/* バーコード風（裏表紙の "出版" 感） */
.barcode {
  display: inline-block;
  background: #f6f0dc;
  padding: 14px 16px 6px;
  border-radius: 2px;
  margin-top: 40px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.3);
  transform: rotate(-1deg);
}
.barcode-bars {
  display: flex;
  align-items: flex-end;
  height: 50px;
  gap: 1px;
}
.barcode-bars span {
  display: block;
  background: #1a1a1a;
  height: 100%;
}
.barcode-label {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #1a1a1a;
  letter-spacing: 0.2em;
  margin-top: 4px;
  text-align: center;
}

/* シークレットエリア */
.secret-area {
  position: relative;
  max-width: 560px;
  margin: 60px auto 0;
  background: var(--paper-base);
  color: var(--ink);
  padding: 36px 40px 32px;
  border-radius: 4px;
  box-shadow:
    3px 4px 8px rgba(0, 0, 0, 0.3),
    8px 10px 24px rgba(0, 0, 0, 0.25);
  transform: rotate(-1.5deg);
  /* 紙のテクスチャ */
  background-image:
    radial-gradient(circle at 80% 20%, rgba(120, 90, 30, 0.10) 0%, transparent 5%),
    radial-gradient(circle at 20% 80%, rgba(120, 90, 30, 0.08) 0%, transparent 6%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-color: var(--paper-base);
}
.secret-area::before {
  /* 上部のテープ */
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 140px;
  height: 28px;
  background: var(--tape-pink);
  opacity: 0.9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 20%,
      transparent 80%,
      rgba(255, 255, 255, 0.3) 100%
    );
}
.secret-area::after {
  content: 'SECRET';
  position: absolute;
  top: 14px;
  right: 24px;
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 14px;
  color: var(--ink-red);
  border: 2px solid var(--ink-red);
  padding: 2px 10px;
  border-radius: 2px;
  transform: rotate(8deg);
  letter-spacing: 0.15em;
  opacity: 0.8;
}

.secret-title {
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 26px;
  color: var(--ink-red);
  text-align: center;
  margin-bottom: 16px;
  border-bottom: 2px dashed var(--ink-red);
  padding-bottom: 10px;
}

.coupon {
  position: relative;
  border: 3px dashed var(--ink-blue);
  border-radius: 4px;
  padding: 18px 16px;
  margin: 20px 0;
  background: linear-gradient(135deg, #fffbe8 0%, #fff5d2 100%);
  text-align: center;
  box-shadow: inset 0 0 20px rgba(252, 230, 125, 0.4);
}
.coupon-discount {
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 56px;
  color: var(--ink-red);
  line-height: 1;
  font-weight: 700;
  text-shadow: 2px 2px 0 rgba(192, 57, 43, 0.2);
  letter-spacing: -0.02em;
}
.coupon-discount .pct {
  font-size: 38px;
}
.coupon-discount .off {
  font-size: 26px;
  margin-left: 4px;
  letter-spacing: 0.1em;
}
.coupon-desc {
  font-family: 'Klee One', sans-serif;
  font-size: 14px;
  color: var(--ink);
  margin-top: 8px;
  line-height: 1.6;
}
.coupon-code {
  margin-top: 14px;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  color: var(--ink-blue);
  background: #fff;
  border: 1.5px solid var(--ink-blue);
  padding: 8px 16px;
  display: inline-block;
  letter-spacing: 0.2em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  user-select: all;
}
.coupon-code:hover {
  background: var(--ink-blue);
  color: #fff;
}
.coupon-code::before {
  content: '🎫 ';
}

.secret-rules {
  font-family: 'Klee One', sans-serif;
  font-size: 13px;
  color: var(--pencil);
  line-height: 1.7;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--pencil);
}
.secret-rules ul {
  margin: 4px 0 0 1.4em;
  font-size: 13px;
}
.secret-rules li::marker { color: var(--ink-red); }

.back-cover-title {
  text-align: center;
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 34px;
  color: #f6f0dc;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.back-cover-subtitle {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: rgba(246, 240, 220, 0.85);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.back-cover-thanks {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: #f6f0dc;
  margin-top: 50px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.back-cover-footer {
  text-align: center;
  margin-top: 40px;
  font-family: 'Klee One', sans-serif;
  font-size: 12px;
  color: rgba(246, 240, 220, 0.6);
  letter-spacing: 0.15em;
  position: relative;
  z-index: 2;
}

/* コピー完了トースト */
.copy-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-red);
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: 'Klee One', sans-serif;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 1000;
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .back-cover { padding: 50px 24px 50px 60px; }
  .back-cover::before { width: 50px; background-size: 50px 44px; background-position: 0 12px; }
  .back-cover::after { inset: 10px 10px 10px 60px; }
  .back-cover-title { font-size: 26px; }
  .secret-area { padding: 28px 22px; }
  .coupon-discount { font-size: 44px; }
  .coupon-discount .pct { font-size: 30px; }
}

/* ============================================================
   拡張機能スタイル
   1.栞 / 2.赤ペン添削 / 3.SFX切替 / 4.ランダムシミ
   5.ダークモード / 6.タイピング / 7.作品モーダル / 8.目次
   9.訪問カウンター / 10.SNS付箋 / 11.PDFクリップ
   12.隠しページ / 13.ペンカーソル / 14.読了率バー
   ============================================================ */

/* ---------- 1. 栞（しおりリボン） ---------- */
.bookmark {
  position: absolute;
  top: -10px;
  right: 220px;
  width: 38px;
  height: 110px;
  background: linear-gradient(180deg, #c0392b 0%, #a93223 100%);
  z-index: 6;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3), inset -3px 0 6px rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
  cursor: pointer;
  transition: transform 0.3s, height 0.3s;
}
.bookmark:hover {
  transform: translateY(6px);
  height: 124px;
}
.bookmark--active {
  height: 130px;
  background: linear-gradient(180deg, #d4af37 0%, #a7841d 100%);
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.35), inset -3px 0 6px rgba(0, 0, 0, 0.25), 0 0 12px rgba(212, 175, 55, 0.55);
}
.bookmark--active:hover {
  height: 130px;
  transform: translateY(2px);
}
.bookmark--active::after {
  content: '✕ 外す';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Klee One', serif;
  font-size: 11px;
  color: #a93223;
  background: rgba(255, 252, 240, 0.92);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.bookmark--active:hover::after {
  opacity: 1;
}
.bookmark::before {
  /* 縫い目 */
  content: '';
  position: absolute;
  top: 6px;
  bottom: 16px;
  left: 50%;
  width: 1px;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 4px, transparent 4px, transparent 8px);
}
.bookmark-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  color: #fce;
  font-family: 'Caveat', cursive;
  font-size: 13px;
  letter-spacing: 0.15em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ---------- 2. 赤ペン添削風コメント・蛍光ペン ---------- */
.marker-yellow {
  background: linear-gradient(transparent 55%, rgba(252, 230, 125, 0.75) 55%, rgba(252, 230, 125, 0.75) 92%, transparent 92%);
  padding: 0 2px;
}
.marker-pink {
  background: linear-gradient(transparent 55%, rgba(247, 185, 198, 0.75) 55%, rgba(247, 185, 198, 0.75) 92%, transparent 92%);
  padding: 0 2px;
}
.marker-blue {
  background: linear-gradient(transparent 55%, rgba(163, 212, 232, 0.75) 55%, rgba(163, 212, 232, 0.75) 92%, transparent 92%);
  padding: 0 2px;
}

.red-pen {
  position: absolute;
  font-family: 'Caveat', cursive;
  color: var(--ink-red);
  font-size: 22px;
  line-height: 1.2;
  pointer-events: none;
  z-index: 3;
  text-shadow: 0.5px 0 0 rgba(192, 57, 43, 0.4);
  transform-origin: center;
}
.red-pen::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border-radius: 4px;
}
.red-pen--arrow::after {
  /* 矢印（手書き風） */
  content: '↗';
  display: inline-block;
  font-size: 24px;
  margin-left: 2px;
}
.red-pen--circle {
  /* 丸で囲み風 */
  padding: 4px 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'><ellipse cx='60' cy='25' rx='55' ry='20' fill='none' stroke='%23c0392b' stroke-width='2.5' stroke-dasharray='2,3' opacity='0.7'/></svg>") center/100% 100% no-repeat;
}
.wavy-underline {
  text-decoration: underline wavy var(--ink-red);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

/* ---------- 3. SFX・テーマ切替ボタン群（左下フローティング） ---------- */
.control-panel {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 8px;
  z-index: 110;
}
.ctrl-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper-base);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, background 0.2s;
  position: relative;
}
.ctrl-btn:hover { transform: translateY(-3px) rotate(-3deg); }
.ctrl-btn.is-off { opacity: 0.45; }
.ctrl-btn .tooltip {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-family: 'Klee One', sans-serif;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ctrl-btn:hover .tooltip { opacity: 1; }

/* ---------- 4. ランダムシミ ---------- */
.random-stain {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1;
  filter: blur(0.4px);
}
.random-stain--coffee {
  background: radial-gradient(ellipse, rgba(101, 67, 33, 0.18) 0%, rgba(101, 67, 33, 0.08) 60%, transparent 75%);
  border: 1.5px solid rgba(101, 67, 33, 0.15);
}
.random-stain--ink {
  background: radial-gradient(circle, rgba(29, 63, 122, 0.35) 0%, rgba(29, 63, 122, 0.12) 50%, transparent 70%);
}
.random-stain--smudge {
  background: radial-gradient(ellipse, rgba(74, 74, 74, 0.12) 0%, transparent 60%);
}

/* ---------- 5. ダークモード（夜の自習室） ---------- */
body.theme-dark {
  background-color: #1a1a24;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.2) 2px, transparent 2px, transparent 6px),
    radial-gradient(ellipse at 30% 20%, rgba(255, 220, 120, 0.18) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, #2a2a36 0%, #16161e 60%, #08080d 100%);
}
body.theme-dark .notebook {
  background-color: #e8dfc0;
  background-image:
    radial-gradient(ellipse 200% 80% at 50% 0%, rgba(0, 0, 0, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 200% at 100% 50%, rgba(0, 0, 0, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 85% 12%, rgba(120, 90, 30, 0.20) 0%, transparent 4%),
    radial-gradient(circle at 15% 88%, rgba(120, 90, 30, 0.15) 0%, transparent 5%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.6),
    0 -8px 30px 8px rgba(255, 220, 120, 0.18),
    inset 4px 0 12px rgba(0, 0, 0, 0.12);
}
body.theme-dark .cover,
body.theme-dark .back-cover {
  filter: brightness(0.85) saturate(0.9);
}
body.theme-dark .control-panel { filter: brightness(1.1); }
body.theme-dark .nav-tabs { filter: brightness(0.9); }

/* デスクライト効果 */
body.theme-dark::before {
  content: '';
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center top, rgba(255, 230, 150, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 6. タイピングアニメ（ペンで書く） ---------- */
.typewriter {
  display: inline;
  border-right: 2px solid var(--ink-blue);
  animation: blinkCaret 0.8s step-end infinite;
  white-space: pre-wrap;
}
.typewriter.done {
  border-right: none;
  animation: none;
}
@keyframes blinkCaret {
  from, to { border-color: transparent; }
  50% { border-color: var(--ink-blue); }
}

/* ---------- 7. 作品詳細モーダル ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 20px;
}
.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  background: #fffbe8;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 36px 40px;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 4px 6px 12px rgba(0, 0, 0, 0.3);
  transform: scale(0.85) rotate(-2deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  background-image:
    radial-gradient(circle at 80% 20%, rgba(120, 90, 30, 0.10) 0%, transparent 5%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.modal-backdrop.show .modal-card {
  transform: scale(1) rotate(0);
}
.modal-card::before {
  /* 上テープ */
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 140px;
  height: 26px;
  background: var(--tape-blue);
  opacity: 0.85;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  font-family: 'Klee One', sans-serif;
  color: var(--ink);
  transition: transform 0.2s, background 0.2s;
}
.modal-close:hover {
  background: var(--ink-red);
  color: #fff;
  border-color: var(--ink-red);
  transform: rotate(90deg);
}
.modal-img-large {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #d4e4f7 0%, #a3c4e8 100%);
  margin: 16px 0;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 40px;
  color: #666;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.08);
}
.modal-title {
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 26px;
  color: var(--ink-blue);
  margin: 12px 0 4px;
}
.modal-body {
  font-family: 'Klee One', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}
.modal-meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink);
  font-size: 13px;
  color: var(--pencil);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
}
.modal-meta dt { font-weight: 600; color: var(--ink-blue); }
.work-card { cursor: pointer; }

/* ---------- 8. 目次（INDEX）ページ用 ---------- */
.toc-list {
  list-style: none;
  margin: var(--rule-gap) 0;
  padding: 0;
  counter-reset: toc;
}
.toc-list li {
  counter-increment: toc;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--ink-blue);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap; /* 説明文(.toc-desc)を次の行へ折り返す */
  gap: 12px;
  font-family: 'Klee One', sans-serif;
  font-size: 17px;
  position: relative;
}
.toc-list li::before {
  content: counter(toc, decimal-leading-zero) '.';
  font-family: 'Caveat', cursive;
  color: var(--ink-red);
  font-size: 22px;
  font-weight: 700;
  min-width: 36px;
}
.toc-list a {
  color: var(--ink);
  text-decoration: none;
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.toc-list a:hover { color: var(--ink-red); }
.toc-list .toc-dots {
  flex: 1;
  border-bottom: 2px dotted var(--pencil);
  margin: 0 8px 4px;
  min-width: 30px;
}
.toc-list .toc-page {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--ink-blue);
}
.toc-list .toc-desc {
  display: block;
  flex-basis: 100%; /* 必ずリンクの下の行に全幅で表示 */
  font-size: 13px;
  color: var(--pencil);
  margin-top: 2px;
  margin-left: 48px;
}

/* ---------- 9. 訪問カウンター（来訪ハンコ） ---------- */
.visitor-stamp {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  border: 2.5px double var(--ink-red);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Zen Kurenaido', sans-serif;
  color: var(--ink-red);
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(-12deg);
  opacity: 0.75;
  z-index: 100;
  text-align: center;
  line-height: 1.1;
  padding: 6px;
  pointer-events: none;
}
.visitor-stamp .vs-label {
  font-size: 10px;
  letter-spacing: 0.05em;
}
.visitor-stamp .vs-num {
  font-size: 26px;
  font-weight: 700;
  margin: 2px 0;
}
.visitor-stamp .vs-sub {
  font-size: 9px;
  letter-spacing: 0.1em;
}

/* ---------- 10. SNS最新投稿（付箋） ---------- */
.sns-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: var(--rule-gap);
}
.sns-card {
  position: relative;
  background: var(--sticky-yellow);
  padding: 14px 16px 16px;
  font-family: 'Klee One', sans-serif;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
  transform: rotate(-1deg);
  min-height: 120px;
}
.sns-card:nth-child(even) { background: var(--sticky-pink); transform: rotate(1.5deg); }
.sns-card:nth-child(3n) { background: var(--sticky-green); transform: rotate(-0.5deg); }
.sns-card .sns-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--ink-blue);
  font-weight: 600;
}
.sns-card .sns-head .sns-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.sns-card .sns-time {
  font-size: 11px;
  color: var(--pencil);
  margin-top: 8px;
}

/* ---------- 11. PDF履歴書クリップ ---------- */
.pdf-clip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 30px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink-blue);
  font-family: 'Klee One', sans-serif;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.15);
  position: relative;
  margin: 12px 0;
  transition: transform 0.2s;
}
.pdf-clip::before {
  /* クリップ */
  content: '';
  position: absolute;
  top: -16px;
  left: 20px;
  width: 22px;
  height: 38px;
  background: linear-gradient(135deg, #999 0%, #ccc 40%, #888 60%, #aaa 100%);
  border-radius: 11px 11px 4px 4px;
  border: 1.5px solid #555;
  border-bottom: none;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
  z-index: -1;
}
.pdf-clip:hover {
  transform: translateY(-2px);
  color: var(--ink-red);
}
.pdf-clip .pdf-icon {
  background: var(--ink-red);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 700;
}

/* ---------- 12. 隠しページ（らくがき帳） ---------- */
.scratch-canvas {
  display: block;
  width: 100%;
  height: 500px;
  background: transparent;
  /* デフォルトカーソルを消し、JS で追従するカスタムペン要素で代替する（DPI/ブラウザ依存のズレを回避） */
  cursor: none;
  border: 1.5px dashed var(--ink-blue);
  margin-top: var(--rule-gap);
  border-radius: 2px;
}
/* 追従するペンカーソル */
.scratch-pen {
  position: fixed;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.35));
}
.scratch-pen.is-visible { opacity: 1; }
.scratch-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}
.color-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform 0.15s;
}
.color-btn.is-active { transform: scale(1.25); box-shadow: 0 0 0 2px var(--paper-base), 0 0 0 4px var(--ink); }

/* ---------- 13. ペン/鉛筆カーソル ---------- */
body.cursor-pen .notebook,
body.cursor-pen .notebook * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 28 L8 24 L24 8 L28 12 L12 28 Z' fill='%231d3f7a' stroke='%23000' stroke-width='1.2'/><path d='M24 8 L28 12' stroke='%23fff' stroke-width='1'/><path d='M4 28 L8 24' stroke='%23ccc' stroke-width='1'/></svg>") 2 30, auto;
}

/* ---------- 14. 読了率プログレスバー ---------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 200;
}
.read-progress-bar {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(45deg, var(--ink-red) 0, var(--ink-red) 6px, #d97777 6px, #d97777 12px);
  transition: width 0.2s;
  box-shadow: 0 0 6px rgba(192, 57, 43, 0.6);
}
.read-progress-label {
  position: fixed;
  top: 8px;
  right: 12px;
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: var(--ink-red);
  z-index: 200;
  background: rgba(246, 240, 220, 0.85);
  padding: 2px 8px;
  border-radius: 2px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .bookmark { right: 140px; width: 28px; height: 80px; }
  .visitor-stamp { width: 72px; height: 72px; top: auto; bottom: 110px; }
  .visitor-stamp .vs-num { font-size: 18px; }
  /* 下部ナビ（1段・約52px）の上にコントロールパネルを重ねず配置 */
  .control-panel { bottom: 64px; left: 10px; gap: 6px; z-index: 120; }
  .ctrl-btn { width: 34px; height: 34px; font-size: 15px; }
  .modal-card { padding: 24px 20px; }
  .scratch-canvas { height: 320px; }
  /* 目次：flex もフロートもやめてブロックで素直に流す。番号とページ番号は絶対配置 */
  .toc-list { font-size: 16px; }
  .toc-list li { display: block; position: relative; padding: 12px 44px 12px 38px; }
  .toc-list li::before { position: absolute; left: 2px; top: 12px; min-width: auto; }
  .toc-list a { display: block; }
  .toc-list .toc-dots { display: none; }
  .toc-list .toc-page { position: absolute; right: 6px; top: 12px; margin: 0; }
  .toc-list .toc-desc { margin-left: 0; margin-top: 4px; }
}

/* =========================================
   追加機能のスタイル（声 / FAQ / フロー / 方眼 / 引き継ぎ / シェア / 道具）
   ========================================= */

/* ---------- お客様の声（寄せ書き） ---------- */
.voice-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 28px;
  margin: var(--rule-gap) 0;
}
.voice-card {
  position: relative;
  padding: 20px 18px 14px;
  border-radius: 2px;
  font-family: 'Klee One', sans-serif;
  color: var(--ink);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
/* 上辺のマスキングテープ風 */
.voice-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 72px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.voice-card:nth-child(odd) { transform: rotate(-1.2deg); }
.voice-card:nth-child(even) { transform: rotate(1deg); }
.voice-card--yellow { background: var(--sticky-yellow); }
.voice-card--pink   { background: var(--sticky-pink); }
.voice-card--green  { background: var(--sticky-green); }
.voice-card--blue   { background: #bfe0ef; }
.voice-stars { color: #e8a33d; font-size: 18px; letter-spacing: 2px; margin-bottom: 6px; }
.voice-card blockquote { margin: 0 0 10px; padding: 0; border: none; font-size: 14.5px; line-height: 1.75; }
.voice-card figcaption { text-align: right; font-size: 14px; color: var(--pencil); font-family: 'Caveat', 'Klee One', cursive; }

/* ---------- FAQ（details / summary アコーディオン） ---------- */
.faq-list { margin: var(--rule-gap) 0; }
.faq-item { border-bottom: 1px dashed var(--rule-line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Klee One', sans-serif;
  font-weight: 600;
  color: var(--ink-blue);
  padding: 12px 30px 12px 30px;
  position: relative;
  font-size: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: 'Q';
  position: absolute; left: 0; top: 11px;
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  background: var(--ink-blue); color: #fff; border-radius: 50%; font-size: 12px;
}
.faq-item summary::after {
  content: '＋';
  position: absolute; right: 4px; top: 11px;
  color: var(--ink-red); font-weight: 700;
}
.faq-item[open] summary::after { content: '－'; }
.faq-a {
  padding: 2px 8px 16px 30px;
  font-family: 'Klee One', sans-serif;
  font-size: 14.5px; line-height: 1.85; color: var(--ink);
}

/* ---------- 制作フロー タイムライン ---------- */
.flow-timeline { list-style: none; margin: var(--rule-gap) 0; padding: 0; position: relative; }
.flow-timeline::before {
  content: '';
  position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ink-blue) 0 6px, transparent 6px 12px);
}
.flow-step { position: relative; padding: 0 0 20px 54px; min-height: 40px; }
.flow-num {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--paper-base); border: 2px solid var(--ink-blue);
  color: var(--ink-blue); font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2); z-index: 1;
}
.flow-title { font-family: 'Klee One', sans-serif; font-weight: 600; color: var(--ink-blue); font-size: 16px; }
.flow-desc { font-family: 'Klee One', sans-serif; font-size: 14px; line-height: 1.75; color: var(--ink); }

/* ---------- 方眼ノート切替（コントロールパネルの ▦ ボタン） ---------- */
body.note-grid .notebook::before {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule-gap) - 1px), var(--rule-line) calc(var(--rule-gap) - 1px), var(--rule-line) var(--rule-gap)),
    repeating-linear-gradient(to right, transparent 0, transparent calc(var(--rule-gap) - 1px), var(--rule-line) calc(var(--rule-gap) - 1px), var(--rule-line) var(--rule-gap));
  background-position: 0 56px;
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.4;
}

/* ---------- 御見積 → 相談 ボタン群 ---------- */
.sim-actions {
  display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 12px;
}
.btn-sim-contact { font-size: 15px; padding: 10px 22px; }

/* ---------- お問い合わせ：御見積の引き継ぎメモ ---------- */
.carried-note {
  background: var(--sticky-green);
  border-left: 4px solid var(--ink-blue);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-family: 'Klee One', sans-serif;
  font-size: 14px; line-height: 1.7; color: var(--ink);
  border-radius: 2px;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15);
  transform: rotate(-0.6deg);
}

/* ---------- SNSシェア特典（裏表紙） ---------- */
.share-block { margin-top: 26px; text-align: center; }
.share-title { font-family: 'Klee One', sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.share-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 4px; cursor: pointer;
  font-family: 'Klee One', sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; border: none;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.12s;
}
.share-btn:hover { transform: translate(1px, 1px); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.25); }
.share-btn--x { background: #1a1a1a; color: #fff; }
.share-btn--copy { background: var(--ink-blue); color: #fff; }
.share-bonus { margin-top: 16px; animation: popIn 0.4s ease; }
.coupon--gold {
  border-color: #c8a23a !important;
  background: linear-gradient(135deg, #fff7e0 0%, #ffe9b0 100%) !important;
}
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* ---------- らくがき帳：道具ボタン ---------- */
.tool-btn {
  background: var(--paper-base);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 6px 12px; border-radius: 2px; cursor: pointer;
  font-family: 'Klee One', sans-serif; font-size: 13px;
  transition: all 0.15s;
}
.tool-btn:hover { transform: translateY(-1px); }
.tool-btn.is-active {
  background: var(--ink-blue); color: #fff; border-color: var(--ink-blue);
  box-shadow: inset 0 0 0 1.5px #fff;
}

/* ---------- モーション軽減（OS設定を尊重） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 追加分のレスポンシブ ---------- */
@media (max-width: 768px) {
  .voice-board { grid-template-columns: 1fr; }
  .share-btns { flex-direction: column; align-items: stretch; }
  .sim-actions { justify-content: stretch; }
  .sim-actions .btn-sim-reset,
  .sim-actions .btn-sim-contact { flex: 1; }
}