:root{

--main:#74C9F7;
--sub:#C8F2D0;
--yellow:#FFE58A;

--bg:#F6FBFF;

--text:#2D3748;

--card:#FFFFFF;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:"Segoe UI",sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.9;

}

.cover{

padding:90px 20px;

text-align:center;

background:linear-gradient(135deg,#74C9F7,#C8F2D0);

color:white;

}

.cover h1{

font-size:64px;

margin:15px 0;

}

.cover h2{

font-size:22px;

opacity:.9;

}

.cover h3{

font-size:36px;

margin-top:20px;

}

.version{

display:inline-block;

margin-top:20px;

padding:8px 18px;

border-radius:50px;

background:white;

color:#4A5568;

font-weight:bold;

}

main{

max-width:1100px;

margin:auto;

padding:60px 25px;

}

section{

background:white;

padding:35px;

border-radius:18px;

margin-bottom:35px;

box-shadow:0 10px 35px rgba(0,0,0,.08);

}

h2{

margin-bottom:20px;

color:#2B6CB0;

}

.next{

text-align:center;

margin:70px 0;

}

.next a{

display:inline-block;

padding:18px 40px;

border-radius:50px;

background:#74C9F7;

color:white;

text-decoration:none;

font-weight:bold;

transition:.25s;

}

.next a:hover{

transform:translateY(-4px);

box-shadow:0 12px 24px rgba(0,0,0,.15);

}

footer{

text-align:center;

padding:40px;

font-size:.9rem;

background:white;

border-top:1px solid #ddd;

color:#666;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:60px;

}

.card{

display:block;

padding:35px;

background:white;

border-radius:20px;

text-decoration:none;

color:#2d3748;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.25s;

}

.card:hover{

transform:translateY(-6px);

}

.disabled{

opacity:.55;

pointer-events:none;

}

.badge{

display:inline-block;

margin-top:20px;

padding:8px 20px;

background:white;

color:#3b82f6;

border-radius:999px;

font-weight:bold;

}

.button{

display:inline-block;

padding:14px 28px;

margin:10px;

background:#74C9F7;

color:white;

text-decoration:none;

border-radius:50px;

font-weight:bold;

}

.buttons{

text-align:center;

margin-top:40px;

}

table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}

th,td{

padding:14px;

border-bottom:1px solid #ddd;

text-align:left;

}

th{

width:180px;

background:#f8fbff;

}

ul{

padding-left:20px;

}

li{

margin:10px 0;

}
/* =========================================
   Hero
========================================= */

.hero{

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

padding:80px 10%;

background:linear-gradient(135deg,#74C9F7,#C8F2D0);

color:white;

overflow:hidden;

}

.hero-content{

flex:1;

}

.hero-image{

flex:1;

text-align:center;

}

.hero-image img{

max-width:100%;

width:420px;

height:auto;

filter:drop-shadow(0 20px 40px rgba(0,0,0,.15));

}

.official{

display:inline-block;

padding:6px 18px;

border-radius:999px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(8px);

font-size:.85rem;

letter-spacing:2px;

margin-bottom:25px;

}

.subtitle{

font-size:1.4rem;

font-weight:600;

margin:18px 0;

}

.hero-buttons{

margin-top:35px;

display:flex;

flex-wrap:wrap;

gap:15px;

}

.button.secondary{

background:white;

color:#2B6CB0;

}

/* =========================================
   Feature Grid
========================================= */

.feature-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:30px;

}

.feature{

padding:25px;

background:#FAFDFF;

border-radius:16px;

transition:.25s;

border:1px solid rgba(116,201,247,.15);

}

.feature:hover{

transform:translateY(-6px);

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.feature h3{

margin-bottom:12px;

color:#2B6CB0;

}

/* =========================================
   Profile Card
========================================= */

.profile-card{

display:flex;

gap:35px;

align-items:center;

background:white;

border-radius:20px;

padding:35px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.profile-card img{

width:220px;

border-radius:18px;

}

.profile-info{

flex:1;

}

.profile-info h2{

margin-bottom:10px;

}

.profile-tags{

margin-top:18px;

display:flex;

flex-wrap:wrap;

gap:10px;

}

.profile-tags span{

background:#E8F7FF;

padding:8px 14px;

border-radius:999px;

font-size:.9rem;

}

/* =========================================
   Gallery
========================================= */

.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:25px;

margin-top:25px;

}

.gallery-item{

background:white;

padding:20px;

border-radius:18px;

text-align:center;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.gallery-item img{

width:100%;

border-radius:14px;

margin-bottom:15px;

}

/* =========================================
   Timeline
========================================= */

.timeline{

display:flex;

flex-direction:column;

gap:22px;

margin-top:20px;

}

.timeline-item{

padding:22px;

background:#F9FDFF;

border-left:6px solid var(--main);

border-radius:12px;

}

/* =========================================
   What's New
========================================= */

.news{

display:flex;

flex-direction:column;

gap:18px;

margin-top:25px;

}

.news-item{

display:flex;

gap:20px;

align-items:flex-start;

padding:22px;

background:white;

border-radius:18px;

box-shadow:0 8px 22px rgba(0,0,0,.08);

}

.news-date{

min-width:120px;

font-weight:bold;

color:#2B6CB0;

}

.news-title{

font-size:1.05rem;

font-weight:600;

margin-bottom:5px;

}

.news-badge{

display:inline-block;

padding:5px 10px;

margin-left:10px;

background:#C8F2D0;

border-radius:999px;

font-size:.75rem;

font-weight:bold;

}

/* =========================================
   Quote
========================================= */

.quote{

padding:40px;

text-align:center;

font-size:1.3rem;

font-style:italic;

background:linear-gradient(135deg,#74C9F7,#C8F2D0);

color:white;

border-radius:20px;

}

/* =========================================
   Link Cards
========================================= */

.link-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.link-card{

display:block;

padding:30px;

background:white;

border-radius:20px;

text-decoration:none;

color:inherit;

box-shadow:0 8px 24px rgba(0,0,0,.08);

transition:.25s;

}

.link-card:hover{

transform:translateY(-6px);

}

/* =========================================
   Animation
========================================= */

.fade-up{

animation:fadeUp .7s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* =========================================
   Responsive
========================================= */

@media (max-width:900px){

.hero{

flex-direction:column;

text-align:center;

padding:60px 25px;

}

.hero-buttons{

justify-content:center;

}

.profile-card{

flex-direction:column;

text-align:center;

}

.profile-card img{

width:180px;

}

.news-item{

flex-direction:column;

}

.news-date{

min-width:0;

}

.cover h1{

font-size:48px;

}

.cover h3{

font-size:28px;

}

}

@media (max-width:600px){

main{

padding:35px 18px;

}

section{

padding:25px;

}

.button{

display:block;

width:100%;

margin:10px 0;

}

.hero-image img{

width:260px;

}

table{

display:block;

overflow-x:auto;

}

}
/* =========================================
   Dark Mode
========================================= */

/*
HTMLで有効化する方法

① OS設定に合わせる（自動）
→ そのままでOK

② 手動切り替え
<body class="dark">

JavaScript
document.body.classList.toggle("dark");
*/

html{

color-scheme:light dark;

transition:background .3s,color .3s;

}

body,
section,
.card,
.feature,
.gallery-item,
.profile-card,
.timeline-item,
.news-item,
.link-card,
footer,
table,
th,
td{

transition:
background .25s ease,
color .25s ease,
border-color .25s ease,
box-shadow .25s ease;

}

/* -----------------------------------------
OSのダークモード
----------------------------------------- */

@media (prefers-color-scheme: dark){

body{

background:#111827;

color:#E5E7EB;

}

section{

background:#1F2937;

}

footer{

background:#111827;

border-top:1px solid #374151;

color:#D1D5DB;

}

.card,
.feature,
.gallery-item,
.profile-card,
.timeline-item,
.news-item,
.link-card{

background:#1F2937;

color:#F3F4F6;

box-shadow:0 10px 30px rgba(0,0,0,.35);

}

table{

background:#1F2937;

}

th{

background:#2D3748;

color:#F9FAFB;

}

td{

color:#E5E7EB;

border-bottom:1px solid #374151;

}

h1,
h2,
h3{

color:#F9FAFB;

}

a{

color:#8DD8FF;

}

.button{

background:#38BDF8;

color:white;

}

.button.secondary{

background:#374151;

color:#F9FAFB;

}

.profile-tags span{

background:#2B6CB0;

color:white;

}

.feature{

border-color:#374151;

}

.timeline-item{

border-left-color:#38BDF8;

}

.news-date{

color:#8DD8FF;

}

.news-badge{

background:#14532D;

color:#DCFCE7;

}

.quote{

background:linear-gradient(
135deg,
#2563EB,
#059669
);

}

}

/* -----------------------------------------
手動ダークモード
<body class="dark">
----------------------------------------- */

body.dark{

background:#111827;

color:#E5E7EB;

}

body.dark section{

background:#1F2937;

}

body.dark footer{

background:#111827;

border-top:1px solid #374151;

color:#D1D5DB;

}

body.dark .card,
body.dark .feature,
body.dark .gallery-item,
body.dark .profile-card,
body.dark .timeline-item,
body.dark .news-item,
body.dark .link-card{

background:#1F2937;

color:#F9FAFB;

box-shadow:0 10px 30px rgba(0,0,0,.35);

}

body.dark table{

background:#1F2937;

}

body.dark th{

background:#2D3748;

color:white;

}

body.dark td{

color:#E5E7EB;

border-bottom:1px solid #374151;

}

body.dark h1,
body.dark h2,
body.dark h3{

color:white;

}

body.dark a{

color:#8DD8FF;

}

body.dark .button{

background:#38BDF8;

color:white;

}

body.dark .button.secondary{

background:#374151;

color:white;

}

body.dark .profile-tags span{

background:#2B6CB0;

color:white;

}

body.dark .feature{

border-color:#374151;

}

body.dark .timeline-item{

border-left-color:#38BDF8;

}

body.dark .news-date{

color:#8DD8FF;

}

body.dark .news-badge{

background:#14532D;

color:#DCFCE7;

}

body.dark .quote{

background:linear-gradient(
135deg,
#2563EB,
#059669
);

}

/* -----------------------------------------
ダークモード切替ボタン
----------------------------------------- */

.theme-toggle{

position:fixed;

right:24px;

bottom:24px;

width:56px;

height:56px;

border:none;

border-radius:50%;

background:var(--main);

color:white;

font-size:22px;

cursor:pointer;

box-shadow:0 12px 28px rgba(0,0,0,.25);

transition:.25s;

z-index:9999;

}

.theme-toggle:hover{

transform:scale(1.08);

}

body.dark .theme-toggle{

background:#2563EB;

}

/* ===== Breadcrumb ===== */

.breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.55rem;
font-size:.92rem;
margin:0 0 28px;
color:#64748b;
}

.breadcrumb a{
color:#2563eb;
text-decoration:none;
font-weight:600;
transition:.2s;
}

.breadcrumb a:hover{
color:#1d4ed8;
}

.breadcrumb span{
color:#94a3b8;
}

/* ===== Layout ===== */

.page-layout{
display:grid;
grid-template-columns:280px 1fr;
gap:40px;
align-items:start;
}

/* ===== TOC ===== */

.toc{
position:sticky;
top:90px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:20px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
max-height:calc(100vh - 120px);
overflow:auto;
}

.toc h3{
font-size:1rem;
margin-bottom:15px;
color:#2563eb;
}

.toc ul{
list-style:none;
padding:0;
margin:0;
}

.toc li{
margin:7px 0;
}

.toc a{
display:block;
padding:7px 10px;
border-radius:8px;
text-decoration:none;
color:#475569;
transition:.2s;
font-size:.93rem;
}

.toc a:hover{
background:#eff6ff;
color:#2563eb;
}

.toc a.active{
background:#dbeafe;
color:#1d4ed8;
font-weight:700;
}

/* ===== Markdown ===== */

.markdown{
font-size:1rem;
line-height:2;
}

.markdown h1,
.markdown h2,
.markdown h3{
scroll-margin-top:100px;
}

.markdown p{
margin:1rem 0;
}

.markdown img{
max-width:100%;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.markdown hr{
margin:40px 0;
border:none;
border-top:1px solid #e5e7eb;
}

/* ===== Code ===== */

pre{
background:#0f172a;
color:#e2e8f0;
padding:20px;
border-radius:16px;
overflow:auto;
margin:20px 0;
font-family:"Fira Code",monospace;
font-size:.9rem;
line-height:1.8;
}

code{
font-family:"Fira Code",monospace;
}

:not(pre)>code{
background:#e2e8f0;
padding:2px 6px;
border-radius:6px;
color:#1e293b;
}

/* ===== Alert ===== */

.alert{
padding:18px 20px;
border-radius:16px;
margin:24px 0;
display:flex;
gap:14px;
align-items:flex-start;
}

.alert i{
font-size:1.25rem;
margin-top:2px;
}

.alert.info{
background:#eff6ff;
color:#1d4ed8;
border-left:5px solid #2563eb;
}

.alert.tip{
background:#ecfdf5;
color:#047857;
border-left:5px solid #10b981;
}

.alert.warning{
background:#fff7ed;
color:#c2410c;
border-left:5px solid #f97316;
}

/* ===== Badge ===== */

.badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 10px;
border-radius:999px;
font-size:.74rem;
font-weight:700;
}

.badge.new{
background:#dcfce7;
color:#15803d;
}

.badge.beta{
background:#fef3c7;
color:#b45309;
}

.badge.official{
background:#dbeafe;
color:#1d4ed8;
}

.badge.alpha{
background:#f3e8ff;
color:#7e22ce;
}

/* ===== Fade ===== */

.fade{
opacity:0;
transform:translateY(25px);
transition:.7s;
}

.fade.show{
opacity:1;
transform:none;
}

/* ===== Responsive ===== */

@media(max-width:1000px){

.page-layout{
grid-template-columns:1fr;
}

.toc{
position:relative;
top:auto;
margin-bottom:30px;
}

}

/* ===== Lightbox ===== */

#lightbox{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.88);

z-index:99999;

padding:40px;

}

#lightbox.show{

display:flex;

}

#lightbox img{

max-width:95%;

max-height:90%;

border-radius:20px;

box-shadow:0 30px 60px rgba(0,0,0,.4);

animation:zoom .25s;

}

#lightbox-close{

position:absolute;

top:25px;

right:35px;

font-size:45px;

color:white;

cursor:pointer;

user-select:none;

}

.lightbox-img{

cursor:zoom-in;

transition:.25s;

}

.lightbox-img:hover{

transform:scale(1.02);

}

@keyframes zoom{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}
/* ===== Lightbox ===== */

#lightbox{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.88);

z-index:99999;

padding:40px;

}

#lightbox.show{

display:flex;

}

#lightbox img{

max-width:95%;

max-height:90%;

border-radius:20px;

box-shadow:0 30px 60px rgba(0,0,0,.4);

animation:zoom .25s;

}

#lightbox-close{

position:absolute;

top:25px;

right:35px;

font-size:45px;

color:white;

cursor:pointer;

user-select:none;

}

.lightbox-img{

cursor:zoom-in;

transition:.25s;

}

.lightbox-img:hover{

transform:scale(1.02);

}

@keyframes zoom{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.code-wrapper{

position:relative;

margin:20px 0;

}

.copy-btn{

position:absolute;

top:12px;

right:12px;

border:none;

padding:8px 14px;

background:#2563eb;

color:white;

border-radius:8px;

cursor:pointer;

font-size:.8rem;

transition:.2s;

}

.copy-btn:hover{

background:#1d4ed8;

}

html{

scroll-behavior:smooth;

}

blockquote{

margin:25px 0;

padding:18px 24px;

background:#eff6ff;

border-left:5px solid #3b82f6;

border-radius:12px;

font-style:italic;

color:#334155;

}