/*
Theme Name: Game Sakusei Lab
Theme URI: https://game-sakusei.com/
Author: game-sakusei.com
Description: ゲーム作りラボ専用のオリジナルテーマ
Version: 1.1.0
Text Domain: game-sakusei-lab
*/

:root { --ink:#17305f; --muted:#687a98; --navy:#17366f; --navy-2:#eaf2ff; --cyan:#53cde2; --lime:#45d6a4; --blue:#3b74f2; --paper:#fff; --cloud:#f7faff; --line:#dce7f5; --radius:20px; --shadow:0 16px 42px rgba(41,90,164,.10); }
* { box-sizing:border-box; }
html,body,div,span,header,footer,main,nav,section,article,aside,h1,h2,h3,p,ul,ol,li,figure { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cloud); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased; }
a { color:inherit; transition:color .2s ease,opacity .2s ease,transform .2s ease; }
a:hover { color:var(--blue); }
img { max-width:100%; height:auto; }
ul,ol { list-style-position:inside; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.admin-bar .site-header { top:32px; }
#st-ami,#wrapper,#wrapper-in { width:100%; min-width:0; background:transparent; }
#wrapper { overflow:hidden; }
#content-w { background:transparent; }

/* Header */
.site-header { position:relative; z-index:30; color:var(--ink); background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); box-shadow:0 7px 25px rgba(38,82,149,.06); }
.site-header__inner { width:min(1180px,calc(100% - 48px)); min-height:82px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:36px; }
.site-brand { display:flex; align-items:center; text-decoration:none; color:var(--ink)!important; }
.site-brand__name { display:block; font-size:21px; font-weight:900; line-height:1.2; letter-spacing:.03em; }
.site-brand__tagline { display:block; margin-top:4px; color:#8292ac; font-size:10px; font-weight:700; letter-spacing:.09em; }
.site-nav { display:flex; align-items:center; gap:30px; }
.site-nav li { list-style:none; }
.site-nav a { color:#526887; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.03em; }
.site-nav a:hover { color:var(--blue); }

/* Main layout */
#content { width:min(1180px,calc(100% - 48px)); margin:48px auto 80px; display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:38px; }
#contentInner { width:auto; float:none; }
.st-main { width:100%; min-width:0; margin:0; padding:36px; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); }
#side { width:auto; float:none; }
.home #content { display:block; width:100%; max-width:none; margin:0; }
.home #contentInner { width:100%; }
.home .st-main { padding:0; background:transparent; border-radius:0; box-shadow:none; }
.home-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }

/* Home hero */
.hero { position:relative; color:var(--ink); background:linear-gradient(135deg,#f8fbff 0%,#eef8ff 52%,#f0fff9 100%); overflow:hidden; }
.hero:before,.hero:after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.hero:before { width:520px; height:520px; right:-120px; top:-250px; background:radial-gradient(circle,rgba(83,205,226,.22),transparent 68%); }
.hero:after { width:440px; height:440px; left:-230px; bottom:-280px; background:radial-gradient(circle,rgba(69,214,164,.18),transparent 68%); }
.hero__inner { position:relative; min-height:510px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:56px; padding:74px 0 84px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0 0 18px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow:before { content:""; width:28px; height:2px; background:currentColor; }
.hero h1 { margin:0; color:var(--ink); font-size:clamp(42px,4.8vw,64px); line-height:1.14; letter-spacing:-.045em; font-weight:900; background:none; border:0; box-shadow:none; }
.hero h1 em { display:inline-block; color:var(--blue); font-size:.78em; font-style:normal; letter-spacing:-.065em; white-space:nowrap; }
.hero__lead { max-width:620px; margin:25px 0 0; color:var(--muted); font-size:16px; line-height:2; }
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 23px; border-radius:999px; font-size:14px; font-weight:800; text-decoration:none; }
.button--primary { color:#fff!important; background:var(--blue); box-shadow:0 10px 28px rgba(59,116,242,.24); }
.button--ghost { color:var(--blue)!important; background:#fff; border:1px solid #bdd0f2; }
.button:hover { transform:translateY(-2px); }
.hero-console { position:relative; padding:25px; background:#fff; border:1px solid #d9e7f7; border-radius:28px; box-shadow:0 28px 70px rgba(42,91,165,.16); transform:rotate(1.5deg); }
.hero-console__bar { display:flex; gap:7px; margin-bottom:22px; }
.hero-console__bar i { width:9px; height:9px; border-radius:50%; background:#c9d6e7; }
.hero-console__bar i:first-child { background:var(--lime); }
.hero-console__screen { padding:28px; background:linear-gradient(145deg,#f3f8ff,#f2fffb); border:1px solid #dce9f5; border-radius:16px; }
.hero-console__screen span { display:block; color:#7b8fac; font:12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; }
.hero-console__screen strong { display:block; margin:9px 0 16px; color:var(--ink); font-size:25px; line-height:1.45; }
.hero-console__screen b { color:var(--blue); font-weight:800; }
.pixel-row { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:20px; }
.pixel-row i { aspect-ratio:1; background:#d8e4f3; border-radius:5px; }
.pixel-row i:nth-child(2),.pixel-row i:nth-child(5) { background:var(--cyan); }
.pixel-row i:nth-child(3),.pixel-row i:nth-child(6) { background:var(--lime); }

/* Home sections */
.home-section { padding:78px 0; }
.home-section--tint { background:#f1f7ff; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.section-head__kicker { display:block; margin-bottom:6px; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.section-head h2 { margin:0; padding:0; color:var(--ink); background:none; border:0; box-shadow:none; font-size:clamp(27px,3vw,39px); line-height:1.3; letter-spacing:-.035em; }
.section-head p { max-width:480px; margin:0; color:var(--muted); font-size:14px; }
.path-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.path-card { position:relative; min-height:220px; padding:28px; color:var(--ink)!important; background:#fff; border:1px solid var(--line); border-top:5px solid var(--blue); border-radius:var(--radius); text-decoration:none; overflow:hidden; box-shadow:0 12px 35px rgba(41,90,164,.08); }
.path-card:after { content:attr(data-number); position:absolute; right:16px; bottom:-25px; color:rgba(59,116,242,.06); font-size:110px; line-height:1; font-weight:900; }
.path-card:nth-child(2) { border-top-color:var(--lime); }
.path-card:nth-child(3) { border-top-color:var(--cyan); }
.path-card__icon { display:grid; place-items:center; width:45px; height:45px; margin-bottom:28px; color:var(--blue); background:#eaf2ff; border-radius:13px; font-size:16px; font-weight:900; }
.path-card:nth-child(2) .path-card__icon { color:#188962; background:#e7fbf3; }
.path-card:nth-child(3) .path-card__icon { color:#16879b; background:#e8fafe; }
.path-card h3 { margin:0 0 10px; color:var(--ink); font-size:20px; border:0; }
.path-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.path-card:hover { color:var(--ink); transform:translateY(-5px); box-shadow:0 20px 45px rgba(41,90,164,.15); }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.article-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 35px rgba(11,18,34,.05); }
.article-card__image { position:relative; display:block; aspect-ratio:16/10; background:#dbe4f1; overflow:hidden; }
.article-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.article-card:hover .article-card__image img { transform:scale(1.04); }
.article-card__fallback { display:grid; place-items:center; width:100%; height:100%; color:#8090a8; font-weight:900; background:linear-gradient(145deg,#e8eef7,#d3deed); }
.article-card__body { padding:22px; }
.article-card__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.article-card__category { color:var(--blue); font-weight:800; }
.article-card h3 { margin:12px 0 9px; padding:0; border:0; color:var(--ink); font-size:17px; line-height:1.65; }
.article-card h3 a { text-decoration:none; }
.article-card__excerpt { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.section-more { margin-top:32px; text-align:center; }
.section-more .button { color:var(--ink); border:1px solid #cbd5e2; background:#fff; }
.home-message { padding:78px 0; color:var(--ink); background:linear-gradient(135deg,#eef6ff,#effff9); border-top:1px solid #deebf7; }
.home-message__inner { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; }
.home-message h2 { margin:0; padding:0; color:var(--ink); background:none; border:0; box-shadow:none; font-size:clamp(29px,3.5vw,45px); line-height:1.4; }
.home-message__copy { color:var(--muted); }
.home-message__copy p { margin:0 0 14px; }

/* Archive and search */
.archive-header { margin-bottom:30px; }
.archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.navigation.pagination { margin-top:34px; }
.nav-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.page-numbers { display:grid; place-items:center; min-width:40px; min-height:40px; padding:0 12px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; text-decoration:none; }
.page-numbers.current { color:#fff; background:var(--navy); border-color:var(--navy); }
.single-column { display:block; max-width:900px; }
.error-404 { text-align:center; }
.error-404 p { margin:0 0 28px; }

/* Programming learning paths */
.programming-page { max-width:1180px; }
.programming-page .st-main { padding:54px; }
.programming-hero { max-width:760px; margin:0 auto 46px; text-align:center; }
.programming-hero .entry-title { margin-bottom:18px; }
.programming-hero p { color:var(--muted); font-size:15px; }
.course-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.course-card { position:relative; display:flex; min-height:290px; flex-direction:column; padding:30px; background:#fff; border:1px solid var(--line); border-top:5px solid var(--blue); border-radius:var(--radius); box-shadow:0 12px 35px rgba(41,90,164,.08); overflow:hidden; }
.course-card:nth-child(2) { border-top-color:var(--lime); }
.course-card:nth-child(3) { border-top-color:var(--cyan); }
.course-card:nth-child(4) { border-top-color:#9d7df2; }
.course-card:nth-child(5) { border-top-color:#f6aa4b; }
.course-card__top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:26px; }
.course-card__number { color:#b4c4db; font-size:13px; font-weight:900; letter-spacing:.12em; }
.course-card__level { padding:5px 11px; color:var(--blue); background:#edf3ff; border-radius:999px; font-size:11px; font-weight:800; }
.course-card h2 { margin:0 0 12px; color:var(--ink); font-size:27px; line-height:1.35; }
.course-card>p { margin:0 0 24px; color:var(--muted); font-size:13px; line-height:1.9; }
.course-card__footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.course-card__footer span { color:#8596af; font-size:11px; font-weight:700; }
.course-card__footer a { color:var(--blue); font-size:13px; font-weight:900; text-decoration:none; }
.course-card__footer a:hover { transform:translateX(3px); }

/* Posts and archives */
#breadcrumb { margin:0 0 24px; color:var(--muted); font-size:11px; }
#breadcrumb ol { margin:0; padding:0; }
#breadcrumb li { display:inline; }
.entry-title,.post .entry-title,#st-page .entry-title { margin:0 0 25px; padding:0; color:var(--ink); background:none; border:0; box-shadow:none; font-size:clamp(27px,3.3vw,42px); line-height:1.45; letter-spacing:-.035em; }
.st-catgroup { margin:0 0 12px; }
.catname { display:inline-block; padding:5px 10px; color:#245ae5; background:#edf3ff; border-radius:999px; font-size:11px; font-weight:800; }
.entry-content { font-size:16px; line-height:2; }
.entry-content p { margin:0 0 1.65em; }
.entry-content h2,.post h2 { margin:2.4em 0 1em; padding:18px 21px; color:var(--ink); background:#edf3ff; border:0; border-left:5px solid var(--blue); border-radius:8px; box-shadow:none; font-size:24px; line-height:1.5; }
.entry-content h3,.post h3 { margin:2.2em 0 1em; padding:0 0 10px; color:var(--ink); border:0; border-bottom:2px solid var(--cyan); font-size:20px; }
.entry-content a { color:#245ae5; text-decoration-thickness:1px; text-underline-offset:3px; }
.entry-content img { border-radius:10px; }
.entry-content blockquote { margin:2em 0; padding:22px 24px; color:#4c5a70; background:#f5f8fc; border-left:4px solid var(--cyan); }
.entry-content ul,.entry-content ol { margin:0 0 1.65em; padding-left:1.4em; }
.entry-content table { width:100%; margin:2em 0; border-collapse:collapse; }
.entry-content th,.entry-content td { padding:12px; border:1px solid var(--line); }
.post-meta { display:flex; flex-wrap:wrap; gap:14px; margin:-12px 0 26px; color:var(--muted); font-size:11px; }
.post-hero { margin:0 0 32px; }
.post-hero img { display:block; width:100%; border-radius:14px; }
.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:50px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; font-weight:800; }
.post-navigation div:last-child { text-align:right; }
.post-navigation a { text-decoration:none; }
.comments-area { margin-top:44px; padding-top:30px; border-top:1px solid var(--line); }
.comments-title,.comment-reply-title { margin:0 0 20px; font-size:20px; }
.comment-list { margin:0 0 30px; list-style:none; }
.comment-list li { margin:0 0 18px; padding:18px; background:var(--cloud); border-radius:12px; }
.comment-form p { margin:0 0 16px; }
.comment-form label { display:block; margin-bottom:5px; font-size:12px; font-weight:800; }
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:9px; font:inherit; }
.comment-form input[type="submit"] { padding:12px 20px; color:var(--navy); background:var(--lime); border:0; border-radius:999px; font-weight:800; cursor:pointer; }
.slim-line,.title-line { margin:36px 0 18px; padding:0; color:var(--ink); background:none; font-size:17px; font-weight:800; text-align:left; }
.kanren dl { display:grid; grid-template-columns:140px minmax(0,1fr); gap:18px; margin:0; padding:20px 0; border-bottom:1px solid var(--line); }
.kanren dt,.kanren dd { width:auto; float:none; margin:0; }
.kanren dt img { width:140px; height:92px; object-fit:cover; border-radius:10px; }
.kanren .kanren-t { margin:0 0 6px; font-size:16px; line-height:1.6; font-weight:800; }
.kanren .kanren-t a { color:var(--ink); text-decoration:none; }
.kanren .smanone2 p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.p-navi { margin:45px 0; padding:22px; background:var(--cloud); border-radius:14px; }
.hatenablogcard { width:100%; min-height:150px; }
.article-ad { display:flex; align-items:center; justify-content:center; min-height:250px; margin:46px 0 12px; padding-top:30px; border-top:1px solid var(--line); overflow:hidden; }
.article-ad .adsbygoogle { width:100%; }

/* Sidebar */
.side-panel { margin-bottom:22px; padding:24px; background:#fff; border-radius:18px; box-shadow:var(--shadow); }
.side-panel__title { display:flex; align-items:center; gap:10px; margin:0 0 18px; color:var(--ink); font-size:16px; font-weight:900; }
.side-panel__title:before { content:""; width:8px; height:8px; background:var(--lime); border:4px solid var(--blue); border-radius:3px; }
.side-ad { padding:18px; overflow:hidden; }
.side-ad__body { min-height:250px; display:flex; align-items:center; justify-content:center; }
.side-ad__body .adsbygoogle { width:100%; }
.side-categories ul { margin:0; padding:0; list-style:none; }
.side-categories li { position:relative; margin:0; padding:0; color:var(--muted); font-size:11px; font-weight:700; }
.side-categories li+li { border-top:1px solid var(--line); }
.side-categories a { display:inline-flex; align-items:center; max-width:calc(100% - 34px); padding:11px 0 11px 17px; color:var(--ink); font-size:13px; font-weight:800; line-height:1.45; text-decoration:none; transition:color .18s ease,transform .18s ease; }
.side-categories a:before { content:""; position:absolute; left:0; width:7px; height:7px; background:#dff5ff; border:2px solid var(--blue); border-radius:50%; }
.side-categories a:hover { color:var(--blue); transform:translateX(2px); }
.side-categories .children { margin:0 0 8px 14px; padding-left:13px; border-left:2px solid #e5edfa; }
.side-categories .children li { border-top:0; }
.side-categories .children a { padding-top:7px; padding-bottom:7px; font-size:12px; font-weight:700; }
.side-categories .children a:before { width:5px; height:5px; border-width:1px; }
#side .kanren dl { grid-template-columns:72px minmax(0,1fr); gap:12px; padding:13px 0; }
#side .kanren dt img { width:72px; height:58px; }
#side .kanren .kanren-t { font-size:12px; line-height:1.55; }
.sidebar-post { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.sidebar-post__image { display:grid; place-items:center; width:72px; height:58px; color:#637189; background:#e5ebf4; border-radius:9px; overflow:hidden; text-decoration:none; font-size:11px; font-weight:900; }
.sidebar-post__image img { width:100%; height:100%; object-fit:cover; }
.sidebar-post time { color:var(--muted); font-size:9px; }
.sidebar-post h3 { margin:3px 0 0; font-size:12px; line-height:1.55; }
.sidebar-post h3 a { text-decoration:none; }
.side-topad>div:first-child { margin-bottom:20px; }

/* Footer */
#footer { color:#b9cae7; background:#17366f; }
#footer-in { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:54px 0 28px; }
.footermenubox { margin:0 0 36px; }
.footermenust { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin:0; padding:0; }
.footermenust li { float:none; list-style:none; }
.footermenust a { color:#c5cee0; font-size:12px; text-decoration:none; }
.footer-wbox { padding:30px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.footer-c { text-align:center; }
.footerlogo { margin:0 0 7px; color:#fff; font-size:22px; font-weight:900; }
.footer-c p { margin:0; font-size:12px; }
.footer-c a { color:inherit; text-decoration:none; }
.copy { margin:24px 0 0; font-size:10px; text-align:center; }

@media (max-width:960px) {
  .site-header__inner { width:min(100% - 32px,1180px); min-height:72px; }
  .site-brand__tagline { display:none; }
  .site-nav { gap:18px; }
  .site-nav { display:none; }
  #content { width:min(100% - 32px,760px); grid-template-columns:1fr; }
  #side { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .hero__inner { grid-template-columns:1fr .72fr; gap:32px; }
  .article-grid { grid-template-columns:repeat(2,1fr); }
  .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .programming-page .st-main { padding:40px 30px; }
}
@media (max-width:700px) {
  body { font-size:15px; }
  .site-header__inner,.home-shell,#footer-in { width:calc(100% - 32px); }
  .site-brand__name { font-size:16px; }
  .hero__inner { min-height:auto; grid-template-columns:1fr; padding:60px 0 68px; }
  .hero h1 { font-size:40px; }
  .hero h1 em { font-size:.64em; }
  .hero__lead { font-size:14px; }
  .hero-console { max-width:400px; margin:6px auto 0; transform:none; }
  .home-section,.home-message { padding:58px 0; }
  .section-head { display:block; }
  .section-head p { margin-top:12px; }
  .path-grid,.article-grid,.archive-grid,.home-message__inner { grid-template-columns:1fr; }
  .course-grid { grid-template-columns:1fr; }
  .programming-page .st-main { padding:30px 19px; }
  .programming-hero { margin-bottom:34px; text-align:left; }
  .programming-hero .entry-title br { display:none; }
  .course-card { min-height:0; padding:24px; }
  .path-card { min-height:195px; }
  .home-message__inner { gap:28px; }
  #content { width:calc(100% - 24px); margin:28px auto 50px; }
  .home #content { width:100%; margin:0; }
  .st-main { padding:24px 19px; border-radius:14px; }
  #side { display:block; }
  .side-panel { padding:20px; }
  .kanren dl { grid-template-columns:105px minmax(0,1fr); gap:13px; }
  .kanren dt img { width:105px; height:76px; }
  .kanren .smanone2 { display:none; }
  .entry-content { font-size:15px; }
  .entry-content h2,.post h2 { font-size:20px; }
  .ad-box { text-align:center; }
}