/*
Theme Name: App DIY Lab Pop
Theme URI: https://app-diy-lab.com/
Author: App DIY Lab
Description: ド素人会社員のアプリDIY専用。親しみやすいポップなレスポンシブブログテーマ。
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: app-diy-lab
License: GPL-2.0-or-later
*/
:root{--purple:#635bff;--purple-dark:#4b43db;--orange:#ffb84d;--mint:#55c9ac;--ink:#242b45;--muted:#65708a;--bg:#f7f8ff;--line:#e6e9f5;--white:#fff;--radius:22px;--shadow:0 12px 35px rgba(38,43,84,.07)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Noto Sans JP',Meiryo,sans-serif;line-height:1.8}a{color:var(--purple-dark);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}button,input{font:inherit}.wrap{width:min(1120px,calc(100% - 36px));margin:auto}.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}.admin-bar .site-header{top:32px}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:900;line-height:1.4}.brand:hover{text-decoration:none}.brand-icon{display:grid;place-items:center;width:46px;height:46px;background:var(--purple);color:#fff;border-radius:15px;font-size:23px;transform:rotate(-6deg)}.brand-text{font-size:17px}.brand-sub{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.08em}.nav-list{display:flex;gap:25px;list-style:none;margin:0;padding:0;align-items:center}.nav-list a{color:var(--ink);font-weight:800;font-size:14px}.nav-list a:hover{color:var(--purple)}.menu-toggle{display:none;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:7px 12px;color:var(--ink);cursor:pointer}.hero{position:relative;overflow:hidden;padding:80px 0 72px;background:radial-gradient(circle at 92% 20%,#d7fff1 0,transparent 32%),radial-gradient(circle at 12% 80%,#ffe9c8 0,transparent 33%),linear-gradient(135deg,#f4f1ff,#f8faff)}.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}.eyebrow{display:inline-block;border-radius:50px;background:#e9e6ff;color:var(--purple-dark);padding:6px 17px;font-size:13px;font-weight:900}.hero h1{font-size:clamp(31px,4.3vw,54px);line-height:1.35;letter-spacing:-.04em;margin:20px 0}.hero h1 span{color:var(--purple)}.hero p{font-size:17px;color:var(--muted);max-width:560px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.btn{display:inline-block;background:var(--purple);color:#fff;border-radius:14px;padding:12px 23px;font-weight:900;box-shadow:0 7px 0 #e3e0ff}.btn:hover{background:var(--purple-dark);text-decoration:none}.btn-outline{background:#fff;color:var(--purple);border:2px solid var(--purple);box-shadow:none}.hero-art{position:relative;min-height:300px;display:grid;place-items:center}.art-panel{width:min(350px,100%);background:#fff;border:3px solid var(--ink);border-radius:25px;box-shadow:15px 16px 0 #cfc9ff;transform:rotate(4deg);padding:20px}.art-dots{display:flex;gap:7px;margin-bottom:20px}.art-dots i{width:11px;height:11px;border-radius:50%;background:#ff8e8e}.art-dots i:nth-child(2){background:var(--orange)}.art-dots i:nth-child(3){background:var(--mint)}.art-line{height:15px;border-radius:8px;background:#e8e7ff;margin:13px 0}.art-line:nth-of-type(2){width:75%;background:#d7f8ee}.art-line:nth-of-type(3){width:55%;background:#ffe6bc}.art-app{margin-top:25px;background:var(--purple);color:#fff;text-align:center;border-radius:13px;padding:18px;font-weight:900;font-size:21px}.float-tag{position:absolute;top:4px;right:0;background:var(--orange);padding:10px 16px;border-radius:16px;font-weight:900;transform:rotate(10deg)}.section{padding:66px 0}.section-heading{margin-bottom:26px}.section-heading h2{font-size:clamp(24px,3vw,34px);margin:0;line-height:1.4}.section-heading p{color:var(--muted);margin:6px 0}.section-heading h2:before{content:'✦';color:var(--orange);margin-right:9px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.post-card,.feature-card,.article,.sidebar-widget,.empty-state{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.post-card{overflow:hidden;transition:transform .2s}.post-card:hover{transform:translateY(-4px)}.post-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.post-placeholder{display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,#e8e4ff,#d7f8ee);font-size:58px}.post-body{padding:22px}.pill{display:inline-block;border-radius:30px;background:#eae8ff;color:var(--purple-dark);padding:3px 12px;font-size:12px;font-weight:900}.post-card h3{font-size:19px;line-height:1.55;margin:12px 0}.post-card h3 a{color:var(--ink)}.post-card p{color:var(--muted);font-size:14px;margin:0}.post-meta{color:var(--muted);font-size:12px;margin-top:12px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-card{padding:30px}.feature-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#ebe8ff;font-size:29px}.feature-card:nth-child(2) .feature-icon{background:#fff0d6}.feature-card:nth-child(3) .feature-icon{background:#dff8ef}.feature-card h3{font-size:20px}.feature-card p{color:var(--muted);font-size:14px}.feature-card a{font-weight:900}.cta{background:var(--ink);border-radius:30px;padding:40px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}.cta h2{margin:0 0 8px}.cta p{margin:0;color:#dfe2f5}.cta .btn{background:var(--orange);color:var(--ink);box-shadow:none}.site-footer{background:#242b45;color:#e8eaf8;padding:48px 0 22px;margin-top:40px}.site-footer a{color:#e8eaf8}.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.copyright{border-top:1px solid #424966;margin-top:28px;padding-top:18px;color:#c2c7dc;font-size:12px}.page-header{padding:52px 0 20px}.page-header h1{font-size:clamp(27px,4vw,42px);margin:0}.page-header p{color:var(--muted)}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start}.article{padding:clamp(22px,4vw,44px);overflow-wrap:anywhere}.article h1{font-size:clamp(25px,3vw,38px);line-height:1.45;margin:10px 0 16px}.entry-content{font-size:16px}.entry-content h2{margin-top:2em;border-left:6px solid var(--purple);padding:8px 0 8px 15px;background:#f6f5ff;border-radius:0 10px 10px 0}.entry-content h3{border-bottom:2px solid var(--line);padding-bottom:8px;margin-top:1.7em}.entry-content a{text-decoration:underline}.entry-content pre{overflow-x:auto;padding:18px;background:#20263d;color:#fff;border-radius:12px}.entry-content code{overflow-wrap:anywhere}.entry-content blockquote{margin:25px 0;padding:12px 22px;background:#f5f3ff;border-left:5px solid var(--purple)}.entry-content table{display:block;overflow-x:auto;border-collapse:collapse}.entry-content td,.entry-content th{border:1px solid var(--line);padding:10px}.entry-content img{border-radius:12px}.sidebar-widget{padding:24px;margin-bottom:20px}.sidebar-widget h2{font-size:18px;margin:0 0 10px}.sidebar-widget ul{padding-left:20px}.sidebar-widget li{margin:8px 0}.pagination{margin:32px 0}.pagination .page-numbers{display:inline-block;background:#fff;padding:7px 13px;border-radius:8px;margin:3px}.pagination .current{background:var(--purple);color:#fff}.empty-state{padding:30px}.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden}.screen-reader-text:focus{position:static;clip:auto;height:auto;width:auto}.alignwide{max-width:100%}.alignfull{max-width:none}.wp-block-image img{height:auto}@media(max-width:850px){.hero-inner{grid-template-columns:1fr}.hero-art{min-height:250px}.cards,.features{grid-template-columns:repeat(2,minmax(0,1fr))}.content-layout{grid-template-columns:1fr}.sidebar{display:none}}@media(max-width:640px){.admin-bar .site-header{top:46px}.header-inner{min-height:68px}.brand-text{font-size:14px}.brand-icon{width:40px;height:40px}.menu-toggle{display:block}.site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:15px 18px}.site-nav.is-open{display:block}.nav-list{display:block}.nav-list li{padding:9px 0}.hero{padding:48px 0}.hero p{font-size:15px}.cards,.features{grid-template-columns:1fr}.section{padding:42px 0}.cta{display:block;padding:26px}.cta .btn{margin-top:20px}.art-panel{max-width:260px}.float-tag{right:10px}.footer-inner{display:block}.footer-links{margin-top:18px}}

.cards-two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:640px){.cards-two{grid-template-columns:1fr}}

/* v1.1: 開発日記を中心としたホーム */
.hero-compact{padding:50px 0 45px}.hero-compact h1{font-size:clamp(29px,4vw,45px);margin:14px 0}.hero-compact p{margin:0 0 24px}.section-latest{padding-top:42px}.progress-list{display:flex;flex-direction:column;gap:12px}.progress-item{display:flex;align-items:flex-start;gap:22px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px 23px;box-shadow:var(--shadow)}.progress-date{color:var(--purple-dark);font-weight:900;min-width:92px;font-size:14px;padding-top:5px}.progress-main{flex:1;min-width:0}.progress-main h3{margin:0 0 5px;font-size:19px;line-height:1.5}.progress-main h3 a{color:var(--ink)}.progress-main p{font-size:14px;color:var(--muted);margin:0 0 9px}.progress-tags{display:flex;gap:6px;flex-wrap:wrap}.progress-arrow{font-size:24px;align-self:center}.section-apps{background:#eeedff}.app-card .app-link{display:inline-block;margin-top:14px;font-weight:800}.tag-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tag-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;justify-content:space-between;gap:10px;align-items:center}.tag-tile strong{overflow-wrap:anywhere}.tag-tile small{color:var(--muted);white-space:nowrap}@media(max-width:700px){.progress-item{display:block;padding:17px}.progress-date{margin-bottom:5px}.progress-arrow{display:none}.tag-directory{grid-template-columns:1fr 1fr}}@media(max-width:480px){.tag-directory{grid-template-columns:1fr}}

/* APP DIY LAB — vivid pop edition 1.2 */
:root{--primary:#ed2474;--secondary:#08bfc5;--accent:#ffe600;--ink:#20213c;--muted:#51566b;--surface:#fff;--bg:#fff9ed}
body{background:var(--bg);color:var(--ink)}
a{color:#a31663}
a:hover{color:#075c8e}
.site-header{background:#fff;border-bottom:5px solid #ffe000;box-shadow:0 3px 0 #08bfc5}
.brand-icon{background:#ffe000!important;color:#ef2270!important;transform:rotate(-12deg)}
.site-nav a:hover,.site-nav .current-menu-item a{color:#e81969}
.hero.hero-compact{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(116deg,#ffeb00 0%,#ffe600 44%,#ff8d27 100%);color:#20213c;border-bottom:9px solid #09bfc8}
.hero.hero-compact:before{content:"";position:absolute;z-index:-1;inset:-45px -4% -40px 35%;opacity:.92;background:
radial-gradient(circle at 14% 27%,#fff 0 12px,transparent 13px),
radial-gradient(circle at 78% 12%,#e92b77 0 32px,transparent 33px),
radial-gradient(circle at 83% 83%,#00b9c9 0 55px,transparent 56px),
radial-gradient(circle at 38% 74%,#fff 0 19px,transparent 20px),
repeating-linear-gradient(135deg,transparent 0 40px,#ed2575 41px 68px,transparent 69px 118px,#04b6c5 119px 150px,transparent 151px 190px);
transform:skewX(-14deg)}
.hero.hero-compact:after{content:"★  ●  ✦  ★";position:absolute;right:4%;top:12%;font-size:clamp(28px,5vw,70px);letter-spacing:16px;color:#fff;transform:rotate(-10deg);pointer-events:none}
.hero.hero-compact .wrap{position:relative;z-index:1}
.hero h1{color:#20213c!important;text-shadow:3px 4px 0 #fff}
.hero p{color:#20213c!important;max-width:720px;font-weight:700}
.eyebrow{background:#fff!important;color:#b40065!important;border:3px solid #24223a;border-radius:30px;padding:8px 17px;font-weight:800}
.btn,.app-link{background:#ec2275!important;color:#fff!important;border-radius:14px!important;border:3px solid #24223a!important;box-shadow:5px 5px 0 #24223a!important;font-weight:800}
.btn:hover,.app-link:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #24223a!important}
.section-heading h2{display:inline-block;background:#fff;padding:8px 14px;border-left:9px solid #ed2575;border-bottom:4px solid #ffe000;border-radius:7px}
.section-latest{background:#fffdf5}
.section-apps{background:#e9fbf9;border-top:7px solid #00bdc5;border-bottom:7px solid #ffe000}
.progress-item,.post-card,.tag-tile{background:#fff;border:2px solid #22243b!important;border-radius:16px!important;box-shadow:5px 5px 0 #ffe000!important}
.progress-item:nth-child(3n+2){box-shadow:5px 5px 0 #00bfc5!important}
.progress-item:nth-child(3n){box-shadow:5px 5px 0 #ed2575!important}
.pill{background:#ffe600!important;color:#27243c!important;border-radius:100px;font-weight:800}
.tag-tile{box-shadow:4px 4px 0 #08bfc5!important}
.tag-tile:nth-child(3n+2){box-shadow:4px 4px 0 #ed2575!important}
.site-footer{background:#20213c!important;color:#fff!important;border-top:10px solid #ed2474;position:relative}
.site-footer:before{content:"";display:block;height:12px;background:repeating-linear-gradient(90deg,#ffe600 0 55px,#08bfc5 55px 110px,#ed2474 110px 165px)}
.site-footer a,.site-footer p,.site-footer strong{color:#fff!important}
.site-footer a:hover{text-decoration:underline;color:#ffe600!important}
.footer-links .nav-list{display:flex;flex-wrap:wrap;gap:12px 22px;list-style:none;padding:0;margin:0}
.footer-links .nav-list li{margin:0}
.footer-title{font-size:1.2rem;font-weight:900}
.footer-subtitle{font-weight:700;color:#ffe600!important}
.footer-policy{margin-top:22px;padding-top:18px;border-top:1px solid #74748a}
.footer-policy ul{display:flex;gap:12px 22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-policy a{font-size:.9rem}
@media(max-width:700px){.hero.hero-compact:before{inset:0 -30% 0 45%;opacity:.27}.hero.hero-compact:after{font-size:30px;right:0;top:5%;letter-spacing:4px}.hero h1{text-shadow:2px 2px 0 #fff}.footer-inner{gap:18px}.footer-policy ul{gap:10px 14px}}

/* v1.3: colorful image logo, navigation and reader-first layout */
.site-header{position:relative;top:auto!important;z-index:50;background:#fff}
.header-inner{flex-direction:column;justify-content:center;gap:0;padding:8px 0 0;min-height:0}
.brand-logo{display:block;width:min(820px,100%);line-height:0;text-align:center;margin:0 auto}
.brand-logo img{display:block;width:100%;height:auto;max-height:250px;object-fit:contain}
.site-nav{width:100%;border-top:2px dashed #eceaf1;padding:10px 0}
.site-nav .nav-list{justify-content:center;gap:clamp(12px,2.6vw,32px);flex-wrap:wrap}
.site-nav .nav-list a{font-size:14px;color:#20213c}
.site-nav .nav-list a:hover,.site-nav .nav-list a:focus-visible{color:#bc145b;text-decoration:underline}
.hero.hero-compact{padding:44px 0 38px}
.hero.hero-compact h1{font-size:clamp(26px,3.4vw,43px);max-width:760px;line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.hero .btn-secondary{background:#fff!important;color:#20213c!important}
.section-latest{padding-top:40px}
.section-about{background:#fff;border-top:7px solid #ed2474}
.about-box{display:flex;align-items:center;justify-content:space-between;gap:28px}
.about-box h2{font-size:clamp(23px,3vw,32px);margin:12px 0}
.about-box p{max-width:700px}
.about-link{display:inline-block;font-weight:900;text-decoration:underline}
.about-art{font-size:58px;white-space:nowrap}
.entry-content{line-height:1.95}
.entry-content a{color:#a31663;text-decoration:underline;text-underline-offset:3px}
.entry-content a:focus-visible,.btn:focus-visible,.site-nav a:focus-visible{outline:3px solid #005fcc;outline-offset:4px}
.entry-content img{max-width:100%;height:auto}
.footer-policy{min-height:24px}
@media(max-width:700px){.header-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:5px 0;gap:5px}.brand-logo{width:calc(100% - 108px);margin:0}.brand-logo img{max-height:110px}.menu-toggle{display:block;flex-shrink:0;font-size:13px;padding:6px 8px}.site-nav{display:none;position:static;width:100%;order:3;padding:10px 0;border-top:1px solid #ddd}.site-nav.is-open{display:block}.site-nav .nav-list{display:flex;flex-direction:column;align-items:stretch;gap:0}.site-nav .nav-list li{padding:8px 4px}.hero.hero-compact{padding:36px 0}.about-box{display:block}.about-art{font-size:35px;margin-top:20px}.hero-actions{gap:12px}.hero-actions .btn{font-size:14px;padding:10px 14px}}
@media(max-width:400px){.brand-logo{width:calc(100% - 95px)}.menu-toggle{font-size:12px}}

/* v1.4: discoverable trust and onboarding links */
.footer-policy a:hover,.footer-policy a:focus-visible{text-decoration:underline;text-underline-offset:4px}