/* 2026-10-06: 開発しているもの（3D コース・GPS イベント・ひとつのアプリ）を動画と事実で見せる。色は PEDAL QUEST の4色だけ。 */
.anime-world { --pq-navy:#132A35; --pq-paper:#FFFDF7; --pq-yellow:#F6C928; --pq-red:#B3261E; }

/* Hero: 文字数が増えたので段の大きさを合わせる */
.anime-world .hero-jp { font-size:clamp(28px,3vw,46px); }
.anime-world .hero-final { font-size:clamp(38px,4.3vw,66px); }
.anime-world .ride-hero .hero-title { max-width:none; }
.anime-world .hero-actions>a:first-child { gap:18px; }

/* 共通 */
.anime-world .build,.anime-world .courses,.anime-world .events,.anime-world .impact { padding-block:clamp(64px,7vw,112px); }
.anime-world .build .section-label,.anime-world .courses .section-label,.anime-world .events .section-label,.anime-world .impact .section-label { margin-bottom:clamp(30px,4vw,52px); }
.anime-world .build h2,.anime-world .courses h2,.anime-world .events h2,.anime-world .impact h2 { margin:0; font-size:clamp(30px,3.6vw,56px); line-height:1.32; letter-spacing:-.05em; }
.anime-world .build h2 em,.anime-world .courses h2 em,.anime-world .events h2 em,.anime-world .impact h2 em { font-style:normal; }
.build-head,.courses-head,.events-head,.impact-head { display:grid; grid-template-columns:1fr 1fr; gap:22px clamp(32px,5vw,80px); align-items:end; margin-bottom:clamp(32px,4vw,52px); }
.build-head>p,.courses-head>p,.events-head>p,.impact-head>p { margin:0; font-size:15px; line-height:1.95; max-width:620px; }

/* 01 開発しているもの */
.anime-world .build { background:var(--pq-navy); color:var(--pq-paper); }
.anime-world .build .section-label>span { color:var(--pq-yellow); }
.build-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.build-grid li { min-width:0; }
.build-grid a { display:flex; flex-direction:column; height:100%; padding:26px 24px 20px; border:1px solid #fffdf738; border-radius:8px; background:#fffdf708; color:inherit; text-decoration:none; }
.build-grid a:hover { border-color:var(--pq-yellow); background:#fffdf712; }
.build-grid a:focus-visible { outline:3px solid var(--pq-yellow); outline-offset:4px; }
.build-no { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--pq-yellow); }
.build-grid h3 { margin:16px 0 12px; font-size:clamp(18px,1.6vw,22px); line-height:1.55; letter-spacing:-.02em; }
.build-grid p { margin:0 0 22px; font-size:13.5px; line-height:1.9; }
.build-more { margin-top:auto; padding-top:14px; border-top:1px solid #fffdf738; font-size:12px; font-weight:700; min-height:30px; }

/* 02 3D バーチャルコース */
.anime-world .courses { background:var(--pq-paper); color:var(--pq-navy); border-top:8px solid var(--pq-red); }
.anime-world .courses .section-label>span,.anime-world .courses h2 em { color:var(--pq-red); }
.courses-kicker { margin:0 0 16px; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--pq-red); }
.course-videos { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,2.4vw,32px); align-items:start; }
.course-videos figure { margin:0; }
.video-side { display:grid; gap:4px; }
.video-cap { display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; margin-top:12px; font-size:12.5px; line-height:1.6; }
.video-cap strong { font-size:15px; }
.video-cap span { opacity:.78; }
.video-cap a { margin-left:auto; min-height:40px; display:inline-flex; align-items:center; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.course-facts { margin:18px 0 0; border-top:1px solid #132a3533; }
.course-facts div { display:grid; grid-template-columns:78px minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid #132a3520; font-size:13px; line-height:1.6; }
.course-facts dt { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--pq-red); padding-top:2px; }
.course-facts dd { margin:0; }
.note-info { font-size:12px; }
.note-info summary { cursor:pointer; list-style:none; min-height:44px; display:inline-flex; align-items:center; }
.note-info summary::-webkit-details-marker { display:none; }
.note-info p { margin:0 0 6px; line-height:1.8; }
.course-bridge { margin-top:clamp(48px,5vw,72px); padding-top:clamp(32px,4vw,44px); border-top:1px solid #132a3533; }
.course-bridge>h3 { margin:0 0 24px; font-size:clamp(21px,2vw,30px); letter-spacing:-.03em; }
.course-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.course-steps li { padding:22px 22px 24px; border-radius:8px; background:var(--pq-navy); color:var(--pq-paper); }
.course-steps span { font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--pq-yellow); }
.course-steps h4 { margin:12px 0 10px; font-size:18px; line-height:1.5; }
.course-steps p { margin:0; font-size:13px; line-height:1.85; }
.course-roadmap { margin-top:clamp(44px,5vw,64px); }
.roadmap-label { margin:0 0 20px; font-size:11px; font-weight:700; letter-spacing:.14em; }
.course-roadmap ol { position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.course-roadmap ol::before { content:''; position:absolute; left:8px; right:0; top:9px; height:2px; background:repeating-linear-gradient(90deg,var(--pq-navy) 0 8px,transparent 8px 14px); }
.course-roadmap li { position:relative; padding:36px 24px 0 0; }
.course-roadmap li::before { content:''; position:absolute; left:0; top:1px; width:14px; height:14px; border-radius:50%; background:var(--pq-paper); border:2px solid var(--pq-navy); }
.course-roadmap li.is-now::before { background:var(--pq-red); border-color:var(--pq-red); }
.course-roadmap span { display:block; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--pq-red); }
.course-roadmap strong { display:block; margin:6px 0 4px; font-size:clamp(17px,1.5vw,21px); line-height:1.45; }
.course-roadmap small { display:block; font-size:12.5px; line-height:1.7; }

/* YouTube（押すまで読み込まない） */
.yt { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:var(--pq-navy); }
.yt.is-vertical { aspect-ratio:9/16; }
.yt-play { position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:pointer; }
.yt-play img { display:block; width:100%; height:100%; object-fit:cover; }
.yt-icon { position:absolute; left:50%; top:50%; width:64px; height:44px; margin:-22px 0 0 -32px; border-radius:12px; background:var(--pq-red); box-shadow:0 4px 14px #132a3559; }
.yt-icon::after { content:''; position:absolute; left:25px; top:12px; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent var(--pq-paper); }
.yt.is-vertical .yt-icon { width:52px; height:36px; margin:-18px 0 0 -26px; border-radius:10px; }
.yt.is-vertical .yt-icon::after { left:20px; top:9px; border-width:9px 0 9px 14px; }
.yt-play:hover .yt-icon { background:var(--pq-navy); }
.yt-play:focus-visible { outline:3px solid var(--pq-yellow); outline-offset:-3px; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* 公開前の動画＝再生しない。サムネイルの題字の下（右の段）に公開日時 */
.yt.is-soon { container-type:inline-size; }
.yt.is-soon img { display:block; width:100%; height:100%; object-fit:cover; }
.yt-soon { position:absolute; left:61%; right:5.5%; bottom:4.5%; margin:0; padding:1.1cqw 0; border-radius:1cqw; background:var(--pq-yellow); color:var(--pq-navy); font-size:2.45cqw; font-weight:800; line-height:1.25; text-align:center; white-space:nowrap; }

/* 03 GPS イベント */
.anime-world .events { background:var(--pq-navy); color:var(--pq-paper); }
.anime-world .events .section-label>span,.anime-world .events h2 em { color:var(--pq-yellow); }
.event-flow { list-style:none; margin:0 0 clamp(40px,5vw,60px); padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:2px solid #fffdf740; }
.event-flow li { position:relative; padding:18px 14px 0 0; }
.event-flow li::before { content:''; position:absolute; left:0; top:-6px; width:10px; height:10px; border-radius:50%; background:var(--pq-yellow); }
.event-flow span { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--pq-yellow); }
.event-flow strong { display:block; margin:6px 0 4px; font-size:15px; line-height:1.5; }
.event-flow small { display:block; font-size:12px; line-height:1.7; }
.short-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.short-head h3 { margin:0; font-size:18px; }
.short-head a { min-height:40px; display:inline-flex; align-items:center; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.short-shelf { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.short-card { min-width:0; }
.short-card h3 { margin:12px 0 2px; font-size:13px; line-height:1.55; }
.short-card h3 small { display:block; margin-bottom:2px; font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--pq-yellow); }
.short-card>a { min-height:36px; display:inline-flex; align-items:center; font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.event-roles { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:clamp(40px,5vw,60px); }
.event-roles article { padding:24px 26px 14px; border:1px solid #fffdf738; border-radius:8px; }
.event-roles span,.impact-grid span { font-size:10.5px; font-weight:700; letter-spacing:.14em; }
.event-roles span { color:var(--pq-yellow); }
.event-roles h3,.impact-grid h3 { margin:8px 0 12px; font-size:20px; }
.event-roles ul,.impact-grid ul { margin:0; padding:0; list-style:none; }
.event-roles li,.impact-grid li { position:relative; padding:11px 0 11px 18px; font-size:13.5px; line-height:1.8; }
.event-roles li { border-top:1px solid #fffdf726; }
.event-roles li::before,.impact-grid li::before { content:''; position:absolute; left:0; top:20px; width:7px; height:7px; border-radius:50%; }
.event-roles li::before { background:var(--pq-yellow); }

/* 04 大会・走る人・地域 */
.anime-world .impact { background:var(--pq-yellow); color:var(--pq-navy); }
.anime-world .impact .section-label>span,.anime-world .impact h2 em { color:var(--pq-red); }
.impact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.impact-grid article { padding:24px 24px 12px; border-radius:8px; background:var(--pq-paper); }
.impact-grid span { color:var(--pq-red); }
.impact-grid li { border-top:1px solid #132a3520; }
.impact-grid li::before { background:var(--pq-red); }

/* 05 ひとつのアプリ（既存の PEDAL QUEST 欄の文字を足した分） */
.anime-world .product-statement { font-size:clamp(30px,3.8vw,58px); }
.anime-world .product-capabilities li { padding:18px 0; }
.anime-world .product-capabilities p { margin:6px 0 0; font-size:13px; line-height:1.75; color:var(--pq-paper); opacity:.86; }
.anime-world .quest-sign strong { font-size:clamp(20px,2vw,30px); }

@media(max-width:1000px) {
  .anime-world .hero-jp { font-size:30px; }
  .anime-world .hero-final { font-size:40px; }
  .build-grid,.course-steps,.impact-grid { grid-template-columns:1fr; gap:14px; }
  .course-videos { grid-template-columns:1fr; }
  .event-flow { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:26px; border-top:0; }
  .event-flow li { border-top:2px solid #fffdf740; }
  .short-shelf { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .anime-world .hero-jp { font-size:clamp(24px,6.6vw,40px); }
  .anime-world .hero-final { font-size:clamp(30px,8.6vw,52px); }
  .anime-world .build,.anime-world .courses,.anime-world .events,.anime-world .impact { padding:52px 20px; }
  .anime-world .build h2,.anime-world .courses h2,.anime-world .events h2,.anime-world .impact h2 { font-size:clamp(27px,7.6vw,36px); }
  .build-head,.courses-head,.events-head,.impact-head { grid-template-columns:1fr; gap:16px; }
  .build-head>p,.courses-head>p,.events-head>p,.impact-head>p { font-size:14px; line-height:1.85; }
  .build-grid a { padding:22px 20px 16px; }
  .video-cap a { margin-left:0; }
  .course-roadmap ol { grid-template-columns:1fr; }
  .course-roadmap ol::before { left:7px; right:auto; top:8px; bottom:8px; width:2px; height:auto; background:repeating-linear-gradient(180deg,var(--pq-navy) 0 8px,transparent 8px 14px); }
  .course-roadmap li { padding:0 0 22px 32px; }
  .course-roadmap li:last-child { padding-bottom:0; }
  .event-flow { grid-template-columns:1fr 1fr; gap:22px 16px; }
  .short-shelf { display:flex; gap:12px; margin:0 -20px; padding:0 20px 8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:20px; -webkit-overflow-scrolling:touch; }
  .short-card { flex:0 0 44%; scroll-snap-align:start; }
  .event-roles { grid-template-columns:1fr; }
  .event-roles article,.impact-grid article { padding:20px 18px 8px; }
  .anime-world .product-statement { font-size:clamp(26px,7.4vw,36px); }
}