/* AIしんどい部。FORGE の絵「案1 部室の壁新聞」を組んだもの。外部の書体は副題と記録ページの見出し（Yusei Magic・Google Fonts）だけ。
   絵の部品（題字・ロボ）は comp からの切り出し（assets\p_*.png）。紙の縁・穴・付箋・テープ・札・下線・矢印・写真は FORGE の透過部品（cut3.py）。 */
:root {
  --ground: #dbe957;
  --ink: #3b2030;
  --paper: #f4eedd;
  --paper2: #f8f4e6;
  --cream: #f2ecd9;
  --red: #cc3d3b;
  --note: #f1cc65;
    --gray: #6f6068;
  --hand: "Yusei Magic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
  --ink-hand: #2c1222;
  --olive: #8a8540;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: rgba(241, 204, 101, .5); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.skip { position: absolute; left: 8px; top: 0; transform: translateY(-150%); background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { transform: none; top: 8px; }

.wrap { container-type: inline-size; max-width: 1190px; margin: 0 auto; }

/* ---------- 上の帯 ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 4.2cqw 8px; min-height: 62px; }
.top .brand { display: block; width: clamp(150px, 20cqw, 215px); }
.top .brand:hover { background: none; }
.top nav { margin-left: auto; }
.top ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 3.2cqw; font-size: clamp(13px, 1.25cqw, 15px); font-weight: 700; letter-spacing: .04em; }
.top li { margin: 0; }
.top a { text-decoration: none; }
.top a:hover { text-decoration: underline; background: none; text-decoration-color: var(--red); }

main { display: block; }

/* ---------- 紙（ちぎったノート）。縁・穴・付箋・テープ・札・赤い下線・矢印は comp からの切り出し画像 ---------- */
.paperwrap { position: relative; margin: 3.4cqw 2.4cqw 3.6cqw; filter: drop-shadow(0 1px 2px rgba(59, 32, 48, .2)); }
.paperwrap.first { margin-top: 0; }
.paper {
  position: relative;
  background:
    url(p_e_left.webp) left top / 5.3cqw auto repeat-y,
    url(p_e_right2.png) right top / 2.78cqw 10.09cqw repeat-y,
    linear-gradient(var(--cream), var(--cream)) 5.15cqw 0 / calc(100% - 7.85cqw) 100% no-repeat;
  padding: 3.4cqw 5.6cqw 3.6cqw 8cqw;
}
.paper::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 3px); height: 2.23cqw; background: url(p_e_top.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.paper::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 3px); height: 2.1cqw; background: url(p_e_bot.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.paper > * { position: relative; }

.sticky {
  position: relative; display: block; color: var(--ink);
  background: url(p_sticky_a.webp) 0 0 / 100% 100% no-repeat;
  padding: 17% 12% 13% 11%; font-weight: 700; font-size: clamp(14px, 1.42cqw, 17px); line-height: 1.7; text-decoration: none;
  filter: drop-shadow(2px 4px 3px rgba(59, 32, 48, .22));
}
.sticky .tape { position: absolute; left: 50%; top: 0; width: 30%; transform: translate(-50%, -52%) rotate(-3deg); pointer-events: none; }
.sticky .tape img { width: 100%; height: auto; }
.tagimg { display: inline-block; height: auto; }
.tagimg.t1 { width: 9.2cqw; min-width: 88px; }
.tagimg.tr { width: 12.3cqw; min-width: 108px; }
.tagimg.trn { height: 5.35cqw; min-height: 47px; width: auto; }
.tagimg.tn { width: 9.8cqw; min-width: 92px; height: 3.2cqw; min-height: 30px; object-fit: contain; object-position: left center; flex: none; }
.ul { background: url(p_uline.png) 0 100% / 100% .3em no-repeat; padding-bottom: .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.arrowimg { flex: none; }

/* ---------- トップ：ヒーロー ---------- */
.hero { position: relative; }
.hero-in { position: relative; min-height: 80.1cqw; }
.hero .tt { margin: 1.5cqw 0 0 2.6cqw; width: 77%; }
.hero .tt img { width: 100%; }
.hero h1.sub { margin: 0 0 0 3.45cqw; width: 40%; font-family: var(--hand); font-weight: 400; color: var(--ink-hand); font-size: 3.08cqw; line-height: 1.5; letter-spacing: 0; -webkit-text-stroke: .02em currentColor; paint-order: stroke fill; transform: rotate(-3.5deg); transform-origin: 0 100%; }
.hero h1.sub .l { display: block; white-space: nowrap; }
.hero h1.sub .spbr { display: none; }
.hero h1.sub { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.5em - .17em), var(--olive) calc(1.5em - .17em), var(--olive) calc(1.5em - .05em), transparent calc(1.5em - .05em), transparent 1.5em); padding-bottom: .1em; }
.hero .lead { margin: 1.7cqw 0 0 4.2cqw; width: 29%; font-size: clamp(13px, 1.26cqw, 15px); line-height: 1.9; }
.hero .lead p { margin: 0; }
.hero .robot { position: absolute; left: 47.7%; bottom: -1.3cqw; width: 52.3%; z-index: 2; pointer-events: none; }

/* ---------- トップ：活動記録 ---------- */
.ph { display: flex; align-items: flex-start; gap: 2.4cqw; margin: 0 0 1.4cqw; }
.ph h2 { margin: 0; flex: none; width: 12.6cqw; min-width: 96px; }
.ph p { margin: .4cqw 0 0; font-size: clamp(13px, 1.28cqw, 15px); line-height: 1.8; }
.reclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqw; }
.rec { display: block; text-decoration: none; border: 1.5px solid var(--ink); background: var(--paper2); position: relative; padding: .7cqw 1.6cqw .7cqw; border-radius: 2px; }
.rec:hover { background: #fbf7ea; }
.rec.row { display: flex; align-items: center; gap: 1.6cqw; }
.rec.row .q { flex: 1; margin: 0; font-size: clamp(13px, 1.3cqw, 15.5px); font-weight: 700; line-height: 1.55; padding: .2cqw 0; }
.rec.row::after { content: ""; flex: none; width: 2.1cqw; min-width: 20px; height: 1.5cqw; min-height: 14px; background: url(p_arrow2.png) center / contain no-repeat; margin-right: .6cqw; }
.reclist li { margin: 0; }
.bigrow { display: grid; grid-template-columns: minmax(0, 1fr) 19cqw; gap: 2.4cqw; align-items: start; text-decoration: none; margin-bottom: 1cqw; }
.bigrow:hover { background: none; }
.bigrow:hover .rec.big { background: #fbf7ea; }
.rec.big { padding: 2cqw 2cqw 2.2cqw 2.2cqw; display: grid; grid-template-columns: minmax(0, 1fr) 22cqw; gap: 2cqw; align-items: center; min-height: 17cqw; }
.rec.big .photos { width: 100%; height: auto; }
.rec.big .main { min-width: 0; }
.rec.big .q { display: block; margin: 1.1cqw 0 1.1cqw; font-size: clamp(19px, 2.7cqw, 32px); font-weight: 800; line-height: 1.42; }
.rec.big .s { margin: 0; font-size: clamp(13px, 1.3cqw, 15.5px); line-height: 1.85; }
.bigrow .sticky { margin: 1.6cqw 0 0 0; width: 100%; }
.rec.big .arrow { display: block; margin-top: 1.2cqw; width: 2.1cqw; min-width: 22px; height: 1.5cqw; min-height: 15px; background: url(p_arrow2.png) center / contain no-repeat; }
.first-visit { margin-top: 3cqw; padding-top: 1.6cqw; border-top: 1.5px dashed rgba(59, 32, 48, .45); max-width: 46rem; }
.first-visit h2 { font-size: clamp(16px, 1.7cqw, 19px); margin: 0 0 .4em; font-weight: 800; }
.first-visit p { margin: 0; font-size: clamp(14px, 1.3cqw, 15.5px); }
.footnote { margin: 2.4cqw 0 0 3.6cqw; width: 17.5cqw; min-width: 120px; }

/* ---------- 記録ページ ---------- */
.rec-head { position: relative; padding-right: 0; }
.rec-head h1 { margin: 1.6cqw 0 0; font-size: clamp(24px, 5cqw, 60px); line-height: 1.3; font-weight: 900; letter-spacing: .01em; max-width: 80%; word-break: auto-phrase; text-wrap: balance; overflow-wrap: break-word; }
.rec-head h1.long { font-size: clamp(22px, 3.7cqw, 46px); max-width: 84%; }
.rec-head h1.mid { font-size: clamp(23px, 4.4cqw, 54px); }
.rec-head .bandaid { position: absolute; right: 2%; top: 46%; width: 12cqw; min-width: 70px; transform: rotate(0deg); }
.rec-head.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) 33cqw; gap: 0 2.4cqw; align-items: start; }
.rec-head.has-photo h1, .rec-head.has-photo h1.long, .rec-head.has-photo h1.mid { max-width: 100%; font-size: clamp(22px, 4.1cqw, 50px); }
.rec-head.has-photo .photos { width: 100%; height: auto; margin-top: 1.2cqw; }
.rec-head.has-photo .meta { grid-column: 1 / -1; }
.rec-head .tagimg { display: block; }
.rec-head .meta { margin: 1.4cqw 0 0; font-size: 13.5px; }
.rec-head .ul, .plain .ul { background-image: url(p_uline.png); background-size: 100% .3em; padding-bottom: .14em; }
.rec-head hr, .rule { border: 0; border-top: 1.5px solid rgba(59, 32, 48, .75); margin: 2.4cqw 0 0; }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 25cqw; gap: 0 3.4cqw; }
.rec-grid .secs { grid-column: 1; grid-row: 1; min-width: 0; }
.rec-grid .aside { grid-column: 2; grid-row: 1; border-left: 1.5px solid rgba(59, 32, 48, .75); padding: 2.6cqw 0 0 2.6cqw; }
.aside .sticky { background-image: url(p_sticky_b.webp); padding: 17% 13% 16% 12%; margin: 1.6cqw 0 2.2cqw; font-size: clamp(15px, 1.65cqw, 20px); }
.aside .label { margin: 0 0 .3em; font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.aside .answer p { margin: .4em 0; font-size: clamp(13.5px, 1.3cqw, 15px); line-height: 1.85; }
.secs section { padding: 1.6cqw 0 1.8cqw; border-top: 1.5px solid rgba(59, 32, 48, .25); }
.secs section:first-child { border-top: 0; }
.secs h2.hd { margin: 0 0 .5cqw; padding-left: 1.6cqw; position: relative; min-height: clamp(30px, 4cqw, 48px); display: flex; align-items: center; font-family: var(--hand); font-weight: 400; color: var(--ink-hand); font-size: clamp(24px, 2.9cqw, 35px); line-height: 1.35; letter-spacing: .02em; -webkit-text-stroke: .02em currentColor; paint-order: stroke fill; }
.secs h2.hd::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: .75cqw; min-width: 6px; background: var(--red); border-radius: 1px; }
.secs h2.small { font-size: 14.5px; margin: 1.8cqw 0 .3em; font-weight: 800; padding-left: 1.6cqw; border-left: .75cqw solid var(--red); line-height: 1.5; }
.secs section p, .secs section ul, .secs section ol { margin: .5em 0 .5em 1.6cqw; }
.secs .scope { font-size: 14.5px; margin-left: 1.6cqw; }
.pn { list-style: none; margin: 1.6em 0 0 1.6cqw; padding: 12px 0 0; border-top: 1.5px solid rgba(59, 32, 48, .25); font-size: 14.5px; }
.pn li { margin: .4em 0; }
.next { font-size: 14.5px; margin-left: 1.6cqw; }
.crumb { font-size: 13px; margin: 0 0 1.4cqw; }
.rec-robot { position: absolute; right: -.2cqw; bottom: -1.5cqw; width: 34cqw; z-index: 2; pointer-events: none; }
.paper.rec-paper { padding-bottom: 12cqw; }

/* ---------- この部について・よくある質問 ---------- */
.plain h1 { margin: 1.4cqw 0 0; font-size: clamp(24px, 3.9cqw, 46px); line-height: 1.32; font-weight: 900; max-width: 92%; }
.plain .meta { margin: 1.4cqw 0 0; font-size: 13.5px; }
.plain .answer { margin: 2.4cqw 0 1.4cqw; background: var(--paper2); border: 1.5px solid var(--ink); border-left: .75cqw solid var(--red); padding: 1.6cqw 2.2cqw 1.4cqw; max-width: 46rem; }
.plain .answer p { margin: .4em 0; }
.plain .answer .label { font-size: 13px; font-weight: 800; letter-spacing: .1em; margin: 0; }
.plain .body { max-width: 46rem; }
.plain h2 { font-size: clamp(18px, 2cqw, 23px); line-height: 1.5; margin: 2em 0 .5em; padding-left: 1.6cqw; border-left: .75cqw solid var(--red); font-weight: 800; }
.plain p { margin: .8em 0; }
.plain .lead2 { margin-top: 1.4cqw; }
.qa { margin: 0; }
.plain .paper { padding-bottom: 5cqw; }

.foot { padding: 2.4cqw 4.2cqw 5cqw; font-size: 13.5px; }
.foot p { margin: .35em 0; }

/* ---------- スマホ ---------- */
@media (max-width: 819px) {
  body { font-size: 16px; }
  .top { padding: 12px 16px 6px; }
  .top ul { gap: 0 4.4cqw; font-size: 13.5px; }
  .top .brand { width: 150px; }
  .paperwrap { margin: 0 1.6cqw; }
  .paperwrap { margin: 6cqw 1.6cqw 7cqw; }
  .paper { padding: 5cqw 5cqw 6cqw 11.5cqw;
    background:
      url(p_e_left.webp) left top / 5.6cqw auto repeat-y,
      url(p_e_right2.png) right top / 2.5cqw 9.1cqw repeat-y,
      linear-gradient(var(--cream), var(--cream)) 5.5cqw 0 / calc(100% - 7.9cqw) 100% no-repeat; }
  .paper::before { height: 5.45cqw; background-size: auto 100%; background-position: 0 0; }
  .paper::after { height: 5.13cqw; background-size: auto 100%; background-position: 0 0; }
  .hero-in { min-height: 0; }
  .hero-in { display: flex; flex-direction: column; }
  .hero .titleblock { position: relative; height: 61.2cqw; }
  .hero .tt { position: absolute; left: 3cqw; top: 1cqw; width: 92.3cqw; margin: 0; }
  .hero h1.sub { position: absolute; left: 41.5cqw; top: 37.7cqw; width: 53cqw; margin: 0; font-size: 5.5cqw; }
  .hero h1.sub .spbr { display: inline; }
  .hero h1.sub .l { white-space: normal; }
  .hero .robot { position: relative; left: auto; bottom: auto; width: 99.2%; margin-top: 0cqw; order: 2; }
  .hero .lead { margin: 3cqw 5cqw 6cqw; width: auto; font-size: 15px; order: 3; }
  .ph { flex-wrap: wrap; gap: 8px; }
  .ph h2 { width: 22.6cqw; }
  .ph p { flex: 1 1 60%; font-size: 14px; }
  .rec { padding: 8px 12px; }
  .tagimg.t1 { width: 26cqw; }
  .tagimg.tr { width: 30cqw; }
  .tagimg.tn { width: 24cqw; height: 8cqw; min-height: 0; min-width: 0; }
  .tagimg.trn { height: 11.5cqw; }
  .rec.big { grid-template-columns: 1fr; }
  .bigrow { grid-template-columns: 1fr; gap: 3cqw; }
  .rec.big .photos { width: 80%; margin: 0 auto; }
  .rec.row .q { font-size: 14px; }
  .rec.big { padding: 4cqw 4cqw 5cqw; gap: 3cqw; }
  .rec.big .q { font-size: 20px; margin: 8px 0; }
  .rec.big .s { font-size: 14.5px; }
  .bigrow .sticky { margin: 3cqw 8cqw 0 8cqw; width: auto; font-size: 14.5px; }
  .first-visit p { font-size: 14.5px; }
  .footnote { margin: 5cqw 0 0 6cqw; width: 34cqw; }
  .rec-head h1, .rec-head h1.long, .rec-head h1.mid { font-size: clamp(22px, 6.8cqw, 30px); max-width: 100%; }
  .rec-head .bandaid { display: none; }
  .rec-head.has-photo { grid-template-columns: 1fr; }
  .rec-head.has-photo h1, .rec-head.has-photo h1.long, .rec-head.has-photo h1.mid { font-size: clamp(22px, 6.8cqw, 30px); }
  .rec-head.has-photo .photos { width: 84%; margin: 3cqw auto 0; }
  .rec-grid { grid-template-columns: 1fr; }
  .rec-grid .secs, .rec-grid .aside { grid-column: 1; }
  .rec-grid .aside { grid-row: 1; border-left: 0; padding: 4cqw 0 0; }
  .rec-grid .secs { grid-row: 2; }
  .aside .sticky { font-size: 16px; margin: 14px 8cqw 18px 6cqw; }
  .aside .answer p { font-size: 15px; }
  .secs h2.hd { min-height: 34px; padding-left: 12px; font-size: 24px; }
  .secs h2.hd::before { width: 6px; }
  .secs section p, .secs section ul, .secs section ol, .secs .scope, .next, .pn { margin-left: 0; }
  .secs h2.small { padding-left: 12px; border-left-width: 6px; }
  .rec-robot { width: 62cqw; bottom: -2cqw; }
  .paper.rec-paper { padding-bottom: 36cqw; }
  .top nav { margin-left: 0; width: 100%; }
  .top ul { justify-content: flex-start; }
  .plain h1 { font-size: 24px; max-width: 100%; }
  .plain h2 { padding-left: 12px; border-left-width: 6px; font-size: 18px; }
  .plain .answer { padding: 14px 16px; margin-top: 20px; border-left-width: 6px; }
  .foot { padding: 12px 16px 32px; }
}
.rec.big .q, .rec-head h1, .plain h1 { -webkit-text-stroke: .035em currentColor; paint-order: stroke fill; }