/* ========================================================= SIGNAL — メインスタイル たかお / Takao Motoyama ========================================================= */ :root{ --bg:#08080a; --bg-2:#0e0e12; --ink:#f2f2f0; --ink-dim:#8b8b96; --ink-faint:#4a4a55; --acc:#d6ff3f; --acc-2:#ff3d81; --acc-3:#4de3ff; --line:rgba(255,255,255,.09); --body-ink:#dcdcd8; /* 記事本文 */ --hover:#14141a; /* カードのホバー面 */ --card:#0e0e12; /* カード地 */ --grain:.045; --max:1400px; /* コンテンツの最大幅 */ --pad:clamp(20px,6vw,92px);/* 左右の余白 */ --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --disp:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif; /* OS標準のUIフォント。アプリの画面と同じ見え方になり、読み込みもゼロ */ --jp:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN', 'Noto Sans JP','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif; --min:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN', 'Noto Sans JP','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif; --ease:cubic-bezier(.22,1,.36,1); } /* ========================================================= ライトテーマ が付いたときに変数を差し替える。 要素ごとの色指定はすべて変数経由なので、ここだけで全体が変わる。 ========================================================= */ html.sg-light{ --bg:#f7f5f0; /* 温かみのあるベージュ */ --bg-2:#efeae0; --ink:#1c1c19; --ink-dim:#5c5b54; --ink-faint:#9b9a90; --acc:#5f7a00; /* ライムを明背景で読める濃度に */ --acc-2:#b3175c; --acc-3:#0b6f96; --line:rgba(28,28,25,.14); --body-ink:#2a2a26; --hover:#ffffff; --card:#fffdf8; --grain:.022; color-scheme:light; } html:not(.sg-light){color-scheme:dark} /* テーマ切替時のちらつきを抑える */ body,.sg-cat,.sg-card,.sg-cta-box,.sg-banner,.sg-stat,.blogcard, .entry-card-wrap,.related-entry-card-wrap{ transition:background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)} @media(prefers-reduced-motion:reduce){*{transition:none !important}} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--ink); font-family:var(--jp); font-weight:400; letter-spacing:.01em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; margin:0; } .sg-hero .sub,.sg-cat p,.sg-abody,.sg-cta-box__lead,.sg-card__note{font-weight:400} body.sg-cursor{cursor:none} ::selection{background:var(--acc);color:#000} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} /* ---------- grain + cursor ---------- */ .sg-grain{position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); animation:sg-grain 6s steps(6) infinite} @keyframes sg-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}} #sg-cur{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--acc); z-index:9999;pointer-events:none;mix-blend-mode:difference;transition:width .25s var(--ease),height .25s var(--ease)} #sg-cur.big{width:56px;height:56px;margin:-24px 0 0 -24px} #sg-ring{position:fixed;top:0;left:0;width:34px;height:34px;margin:-13px 0 0 -13px; border:1px solid var(--acc);opacity:.45;border-radius:50%;z-index:9999;pointer-events:none} /* ---------- テーマ切替ボタン ---------- */ .sg-theme{display:inline-flex;align-items:center;gap:9px;background:transparent;border:0; padding:4px 0 4px 4px;font-family:var(--mono);font-size:11px;letter-spacing:.16em; color:var(--ink);cursor:pointer;transition:opacity .3s var(--ease)} .sg-theme:hover{opacity:.6} .sg-theme .ic{position:relative;width:13px;height:13px;border-radius:50%; border:1px solid currentColor;overflow:hidden;flex:0 0 auto} .sg-theme .ic::before{content:'';position:absolute;left:0;top:0;width:50%;height:100%; background:currentColor;transition:transform .45s var(--ease)} html.sg-light .sg-theme .ic::before{transform:translateX(100%)} .sg-theme .tx{min-width:38px;text-align:left} @media(max-width:760px){.sg-theme .tx{display:none}} @media(hover:none),(max-width:900px){body.sg-cursor{cursor:auto}#sg-cur,#sg-ring{display:none}} /* ---------- nav ---------- */ .sg-nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center; justify-content:space-between;padding:20px 32px;mix-blend-mode:difference} .sg-logo{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.22em; display:flex;align-items:center;gap:10px;color:var(--ink)} .sg-logo .dot{width:7px;height:7px;background:var(--acc);border-radius:50%;animation:sg-pulse 2.2s infinite} @keyframes sg-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.9);opacity:.35}} .sg-navlinks{display:flex;gap:26px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink)} .sg-navlinks a{position:relative;padding-bottom:3px} .sg-navlinks a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--acc);transition:width .4s var(--ease)} .sg-navlinks a:hover::after{width:100%} .sg-navlinks a.x{color:var(--acc)} @media(max-width:760px){.sg-navlinks{gap:14px;font-size:9.5px}.sg-nav{padding:16px 18px} .sg-navlinks a:not(.x){display:none}} .sg-progress{position:fixed;top:0;left:0;height:2px;background:var(--acc);z-index:950;width:0} /* ---------- hero ---------- */ .sg-hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:center;overflow:hidden} #sg-field{position:absolute;inset:0;width:100%;height:100%} .sg-hero-inner{position:relative;z-index:2;padding:0 var(--pad);width:100%; max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto} .sg-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--acc); margin-bottom:26px;display:flex;align-items:center;gap:12px} .sg-eyebrow::before{content:'';width:38px;height:1px;background:var(--acc)} .sg-hero h1{font-family:var(--disp);font-weight:300;font-size:clamp(46px,10.5vw,168px); line-height:.9;letter-spacing:-.045em;margin:0} .sg-hero h1 em{font-style:normal;color:var(--acc)} .sg-hero h1 .ln{display:block;overflow:hidden} .sg-hero h1 .ln>span{display:block;transform:translateY(105%);animation:sg-rise 1.15s var(--ease) forwards} .sg-hero h1 .ln:nth-child(2)>span{animation-delay:.09s} .sg-hero h1 .ln:nth-child(3)>span{animation-delay:.18s} @keyframes sg-rise{to{transform:translateY(0)}} .sg-hero .sub{margin-top:34px;max-width:490px;font-size:15px;line-height:2.05;color:var(--ink-dim); font-weight:300;opacity:0;animation:sg-fade 1s var(--ease) .55s forwards} @keyframes sg-fade{to{opacity:1}} .sg-hero .meta{position:absolute;right:max(var(--pad),calc((100% - var(--max))/2 + var(--pad))); bottom:96px;text-align:right; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint); line-height:2.1;opacity:0;animation:sg-fade 1s var(--ease) .8s forwards} .sg-hero .meta b{color:var(--acc-3);font-weight:400} @media(max-width:900px){.sg-hero .meta{display:none}} .sg-scrollcue{position:absolute;left:max(var(--pad),calc((100% - var(--max))/2 + var(--pad))); bottom:44px;font-family:var(--mono); font-size:10px;letter-spacing:.24em;color:var(--ink-faint);display:flex;align-items:center;gap:10px} .sg-scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--acc),transparent); animation:sg-cue 1.9s infinite} @keyframes sg-cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---------- ticker ---------- */ .sg-ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line); overflow:hidden;padding:16px 0;background:var(--bg-2)} .sg-ticker-track{display:flex;gap:52px;white-space:nowrap;animation:sg-slide 32s linear infinite; font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--ink-faint)} .sg-ticker-track b{color:var(--acc);font-weight:400} @keyframes sg-slide{to{transform:translateX(-50%)}} /* ---------- section ---------- */ .sg-sec{padding:clamp(80px,11vw,160px) var(--pad);position:relative; max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto} .sg-shead{display:flex;align-items:baseline;justify-content:space-between;gap:24px; border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:56px;flex-wrap:wrap} .sg-shead h2{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.6vw,44px); letter-spacing:-.02em;margin:0;border:0;padding:0;background:none} .sg-shead h2 .num{font-family:var(--mono);font-size:11px;color:var(--acc);letter-spacing:.2em; vertical-align:super;margin-right:14px} .sg-shead p{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim);margin:0} .sg-rv{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .sg-rv.in{opacity:1;transform:none} /* ---------- categories ---------- */ .sg-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px; background:var(--line);border:1px solid var(--line)} .sg-cat{background:var(--bg);padding:38px 30px 34px;position:relative;overflow:hidden; transition:background .45s var(--ease)} .sg-cat::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:var(--c); transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)} .sg-cat:hover{background:var(--bg-2)} .sg-cat:hover::before{transform:scaleX(1)} .sg-cat .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--c)} .sg-cat h3{font-family:var(--jp);font-weight:700;font-size:21px;margin:24px 0 12px;letter-spacing:.06em} .sg-cat p{font-size:13px;line-height:1.95;color:var(--ink-dim);font-weight:300;margin:0} .sg-cat .n{position:absolute;right:22px;top:26px;font-family:var(--mono);font-size:38px; color:rgba(255,255,255,.045);transition:color .45s var(--ease)} .sg-cat:hover .n{color:rgba(255,255,255,.1)} /* ---------- post list ---------- */ .sg-posts{display:flex;flex-direction:column} .sg-post{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:28px;align-items:center; padding:30px 8px;border-bottom:1px solid var(--line);position:relative;transition:padding .5s var(--ease)} .sg-post::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0; background:var(--acc);transition:width .6s var(--ease)} .sg-post:hover::after{width:100%} .sg-post:hover{padding-left:24px} .sg-post .d{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);letter-spacing:.1em} .sg-post .t{font-size:clamp(17px,2vw,26px);font-weight:400;letter-spacing:.01em;transition:color .4s var(--ease)} .sg-post:hover .t{color:var(--acc)} .sg-post .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;padding:5px 11px; border:1px solid var(--line);border-radius:100px;color:var(--ink-dim);white-space:nowrap} @media(max-width:700px){ .sg-post{display:block} .sg-post .d{display:block;margin-bottom:8px} .sg-post .t{display:block;margin-bottom:12px} .sg-post .tag{display:inline-block} } /* ---------- about ---------- */ .sg-about{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1.1fr) minmax(0,.8fr); gap:clamp(26px,4.5vw,64px);align-items:start} @media(max-width:1100px){.sg-about{grid-template-columns:minmax(220px,300px) minmax(0,1fr)} .sg-about .sg-stats{grid-column:1/-1}} @media(max-width:700px){ .sg-about{display:block} .sg-about>*+*{margin-top:40px} } .sg-pf{display:block;position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line)} .sg-pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:opacity .7s var(--ease),transform .9s var(--ease)} .sg-pf img.clr{opacity:0} .sg-pf:hover img.clr{opacity:1} .sg-pf:hover img{transform:scale(1.04)} .sg-pf::after{content:'HOVER — SIGNAL MODE';position:absolute;left:14px;bottom:12px; font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--acc);opacity:.75;mix-blend-mode:screen} .sg-pf .frame{position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(214,255,63,0); transition:box-shadow .5s var(--ease);pointer-events:none;z-index:2} .sg-pf:hover .frame{box-shadow:inset 0 0 0 2px rgba(214,255,63,.6)} .sg-pname{margin-top:20px} .sg-pname .nm{font-family:var(--jp);font-weight:700;font-size:19px;letter-spacing:.03em} .sg-pname .rd{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-dim); margin-top:7px;line-height:1.9} .sg-pname .rd b{color:var(--acc);font-weight:400} .sg-xbtn{display:inline-flex;align-items:center;gap:10px;margin:18px 8px 0 0;padding:12px 22px; border:1px solid var(--line);border-radius:100px;font-family:var(--mono);font-size:10.5px; letter-spacing:.16em;color:var(--ink);transition:.4s var(--ease)} .sg-xbtn:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)} .sg-xbtn .xm{font-weight:700;font-size:13px} .sg-lede{font-family:var(--min);font-size:clamp(20px,2.6vw,31px);line-height:1.95; font-weight:400;letter-spacing:.01em;margin:0} .sg-lede mark{background:none;color:var(--acc)} .sg-abody{margin-top:34px;font-size:14px;line-height:2.15;color:var(--ink-dim);font-weight:300;max-width:56ch} /* ---------- stats / countdown ---------- */ .sg-stats{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)} .sg-stat{background:var(--bg);padding:22px 26px;display:flex;justify-content:space-between; align-items:center;gap:16px;position:relative;overflow:hidden} .sg-stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-dim);line-height:1.5} .sg-stat .l em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.16em; color:var(--ink-faint);margin-top:6px} .sg-stat .v{font-family:var(--disp);font-size:34px;font-weight:300;letter-spacing:-.03em; white-space:nowrap;font-variant-numeric:tabular-nums} .sg-stat .v small{font-size:12px;color:var(--ink-faint);margin-left:6px; font-family:var(--mono);letter-spacing:.08em} .sg-stat.cd .v b{font-weight:300;color:var(--acc)} .sg-stat.cd::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:var(--p,0%); background:linear-gradient(90deg,transparent,var(--acc));transition:width 1.6s var(--ease)} /* ---------- CTA / footer ---------- */ .sg-cta{text-align:center;padding:clamp(90px,14vw,190px) var(--pad);border-top:1px solid var(--line); position:relative;overflow:hidden} .sg-cta h2{font-family:var(--disp);font-weight:300;font-size:clamp(34px,7vw,96px); letter-spacing:-.04em;line-height:1;margin:0;border:0;padding:0;background:none} .sg-cta h2 em{font-style:normal;color:var(--acc)} .sg-btn{display:inline-flex;align-items:center;gap:14px;margin-top:44px;padding:17px 34px; border:1px solid var(--acc);border-radius:100px;font-family:var(--mono);font-size:11.5px; letter-spacing:.18em;color:var(--acc);position:relative;overflow:hidden;transition:color .4s var(--ease)} .sg-btn span{position:relative;z-index:2} .sg-btn::before{content:'';position:absolute;inset:0;background:var(--acc); transform:translateY(101%);transition:transform .5s var(--ease)} .sg-btn:hover{color:#000} .sg-btn:hover::before{transform:translateY(0)} .sg-footer{padding:44px var(--pad) 92px;border-top:1px solid var(--line); max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto; display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint)} .sg-footer a{color:var(--acc)} /* ========================================================= プロフィールページ ========================================================= */ .sg-prof{padding:140px var(--pad) 64px;border-bottom:1px solid var(--line);position:relative} .sg-prof__in{max-width:var(--max);margin-inline:auto; display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:clamp(28px,5vw,68px);align-items:center} .sg-prof__media{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line)} .sg-prof__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:opacity .7s var(--ease),transform .9s var(--ease)} .sg-prof__media img.clr{opacity:0} .sg-prof__media:hover img.clr{opacity:1} .sg-prof__media:hover img{transform:scale(1.04)} .sg-prof__media .frame{position:absolute;inset:0;pointer-events:none;z-index:2; box-shadow:inset 0 0 0 1px rgba(214,255,63,0);transition:box-shadow .5s var(--ease)} .sg-prof__media:hover .frame{box-shadow:inset 0 0 0 2px var(--acc)} .sg-prof__name{font-family:var(--jp);font-weight:700;font-size:clamp(26px,4vw,46px); line-height:1.3;margin:14px 0 0;color:var(--ink);overflow-wrap:anywhere} .sg-prof__tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;line-height:1.9; color:var(--acc);margin:14px 0 0} .sg-prof__facts{list-style:none;margin:30px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px; background:var(--line);border:1px solid var(--line)} .sg-prof__facts li{background:var(--bg);padding:14px 16px;display:flex;flex-direction:column;gap:6px} .sg-prof__facts span{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--ink-faint)} .sg-prof__facts b{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; color:var(--ink);font-weight:400} .sg-prof__sns{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .sg-prof__sns a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:10px 18px; border:1px solid var(--line);border-radius:100px;color:var(--ink-dim);transition:.35s var(--ease)} .sg-prof__sns a:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)} @media(max-width:820px){ .sg-prof{padding:104px 20px 44px} .sg-prof__in{grid-template-columns:1fr;gap:26px} .sg-prof__media{max-width:210px} .sg-prof__name{font-size:24px} .sg-prof__tag{font-size:10.5px} .sg-prof__facts{margin-top:24px} } /* ---------- 01 NOW ---------- */ .sg-now{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:clamp(24px,5vw,64px);align-items:start} .sg-now__org{border-left:2px solid var(--acc);padding-left:20px} .sg-now__since{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--acc)} .sg-now__name{font-size:19px;font-weight:700;color:var(--ink);margin-top:12px;line-height:1.5} .sg-now__dept{font-family:var(--mono);font-size:10px;letter-spacing:.14em; color:var(--ink-dim);margin-top:8px} .sg-now__text{font-size:15px;line-height:2.15;color:var(--ink-dim);margin:0;max-width:60ch} @media(max-width:760px){.sg-now{grid-template-columns:1fr;gap:26px} .sg-now__text{font-size:14px}} /* ---------- 02 SKILLS ---------- */ .sg-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px; background:var(--line);border:1px solid var(--line)} .sg-skill{background:var(--bg);padding:28px 24px 26px;transition:background .45s var(--ease)} .sg-skill:hover{background:var(--bg-2)} .sg-skill__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--acc); margin-bottom:18px} .sg-skill ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .sg-skill li{font-size:14px;line-height:1.6;color:var(--ink);position:relative;padding-left:16px} .sg-skill li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px; border-radius:50%;background:var(--acc);opacity:.55} /* ---------- 03 CREDENTIALS ---------- */ .sg-certs{list-style:none;margin:0;padding:0;position:relative} .sg-cert{display:grid;grid-template-columns:58px 18px minmax(0,1fr);align-items:start; padding:0 0 30px;position:relative} .sg-cert .y{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--acc); padding-top:2px} .sg-cert .dot{position:relative;display:block;height:100%} .sg-cert .dot::before{content:'';position:absolute;left:50%;top:6px;width:7px;height:7px; margin-left:-3.5px;border-radius:50%;background:var(--bg); border:1px solid var(--acc);z-index:2;transition:background .35s var(--ease)} .sg-cert .dot::after{content:'';position:absolute;left:50%;top:6px;bottom:-30px;width:1px; margin-left:-.5px;background:var(--line)} .sg-cert:last-child .dot::after{display:none} .sg-cert:hover .dot::before{background:var(--acc)} .sg-cert .body{padding-left:14px;display:flex;flex-direction:column;gap:7px} .sg-cert .d{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-faint)} .sg-cert .n{font-size:16px;font-weight:500;line-height:1.55;color:var(--ink); transition:color .35s var(--ease);border:0;overflow-wrap:anywhere} a.n:hover{color:var(--acc)} .sg-cert .o{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-dim)} @media(max-width:600px){ .sg-cert{grid-template-columns:40px 16px minmax(0,1fr);padding-bottom:24px} .sg-cert .y{font-size:10px} .sg-cert .n{font-size:14.5px} .sg-cert .body{padding-left:10px} .sg-cert .dot::after{bottom:-24px} } /* ---------- 04 COMMUNITY ---------- */ .sg-comms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px; background:var(--line);border:1px solid var(--line)} .sg-comm{background:var(--bg);padding:32px 26px 30px;position:relative;overflow:hidden; transition:background .45s var(--ease);display:flex;flex-direction:column} .sg-comm::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px; background:var(--acc);transform:scaleX(0);transform-origin:left; transition:transform .55s var(--ease)} .sg-comm:hover{background:var(--bg-2)} .sg-comm:hover::before{transform:scaleX(1)} .sg-comm__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--acc)} .sg-comm h3{font-size:17px;font-weight:700;line-height:1.55;color:var(--ink);margin:16px 0 12px} .sg-comm p{font-size:13.5px;line-height:1.95;color:var(--ink-dim);margin:0} /* ---------- CONTACT ---------- */ .sg-contact__in{max-width:var(--max);margin-inline:auto} .sg-contact__lead{font-size:15px;line-height:2.1;color:var(--ink-dim);margin:0;max-width:56ch} .sg-contact__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .sg-contact__btns .sg-btn{margin-top:0} .sg-btn.ghost{border-color:var(--line);color:var(--ink-dim)} .sg-btn.ghost::before{background:var(--ink)} .sg-btn.ghost:hover{color:var(--bg);border-color:var(--ink)} @media(max-width:600px){ .sg-contact__lead{font-size:14px} .sg-contact__btns{flex-direction:column} .sg-contact__btns .sg-btn{justify-content:center} } /* 記事ページのサイドバーに置くプロフィールカード */ .sg-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:34px} .sg-sidecard{display:block;border:1px solid var(--line);border-radius:10px;padding:18px; background:var(--card);transition:.4s var(--ease)} .sg-sidecard:hover{border-color:var(--acc);transform:translateY(-2px)} .sg-sidecard img{width:52px;height:52px;object-fit:cover;border-radius:8px;display:block;margin-bottom:12px} .sg-sidecard b{display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.5} .sg-sidecard i{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px; letter-spacing:.12em;color:var(--ink-dim);margin-top:7px;line-height:1.7} .sg-sidecard .go{display:block;margin-top:14px;font-family:var(--mono);font-size:9.5px; letter-spacing:.16em;color:var(--acc)} @media(max-width:960px){.sg-side{display:none}} /* ========================================================= 一覧ページ（カテゴリ・検索・404） ========================================================= */ .sg-arch{position:relative;padding:150px var(--pad) 56px;border-bottom:1px solid var(--line); overflow:hidden} .sg-arch::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--c)} .sg-arch__in{max-width:var(--max);margin-inline:auto} .sg-arch__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--c); margin-bottom:16px} .sg-arch__t{font-family:var(--jp);font-weight:700;font-size:clamp(28px,5vw,58px); line-height:1.3;letter-spacing:-.01em;margin:0;color:var(--ink); overflow-wrap:anywhere;max-width:22ch} .sg-arch__d{margin-top:20px;font-size:14px;line-height:2;color:var(--ink-dim);max-width:58ch} .sg-arch__d p{margin:0} .sg-arch__n{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em; color:var(--ink-faint)} .sg-arch__form{display:flex;gap:8px;margin-top:26px;max-width:460px} .sg-arch__form input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line); border-radius:100px;padding:13px 18px;color:var(--ink);font-family:var(--jp);font-size:16px} .sg-arch__form input:focus{outline:0;border-color:var(--acc)} .sg-arch__form button{flex:0 0 auto;width:48px;border:1px solid var(--acc);border-radius:50%; background:transparent;color:var(--acc);font-size:15px;cursor:pointer} .sg-empty{color:var(--ink-dim);font-size:14px;line-height:2;padding:40px 0} /* ページ送り */ .pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center; margin-top:56px;align-items:center} .pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 12px;border-radius:100px} @media(max-width:600px){ .sg-arch{padding:104px 20px 40px} .sg-arch__t{font-size:24px;line-height:1.45;max-width:none} .sg-arch__k{font-size:9.5px;letter-spacing:.2em;margin-bottom:12px} .sg-arch__d{font-size:13.5px;margin-top:16px} .sg-arch__n{margin-top:20px;font-size:9.5px} .sg-arch__form{margin-top:20px} } /* ========================================================= 単一記事ページ（ダーク） ========================================================= */ .sg-art-hero{padding:150px var(--pad) 60px;border-bottom:1px solid var(--line); position:relative;overflow:hidden} /* 大画面でも中央に収める */ .sg-art-hero>*:not(.bar){max-width:var(--max);margin-inline:auto;width:100%} .sg-art-hero .bar{position:absolute;left:0;top:0;height:100%;width:3px; background:linear-gradient(var(--acc),var(--acc-2))} .sg-crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; color:var(--ink-faint);margin-bottom:26px} .sg-crumb b{color:var(--acc);font-weight:400} .sg-art-hero h1{font-family:var(--jp);font-weight:700;font-size:clamp(28px,4.6vw,54px); line-height:1.4;letter-spacing:-.005em;max-width:20ch;margin:0} .sg-art-metarow{display:flex;gap:28px;margin-top:34px;font-family:var(--mono);font-size:10.5px; letter-spacing:.13em;color:var(--ink-dim);flex-wrap:wrap} .sg-art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(30px,6vw,84px); padding:70px var(--pad) 130px;align-items:start; max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto} /* 狭い画面では grid をやめる。1fr は minmax(auto,1fr) なので 中身が画面より大きいとトラックごと膨らみ、横に溢れる原因になる */ @media(max-width:960px){ .sg-art-wrap{display:block;max-width:100%} .sg-toc{display:none} } /* Cocoonの本文コンテナ .entry-content に直接あてる */ .entry-content{max-width:min(74ch,100%);margin-inline:auto;font-size:16.5px;line-height:2.05;font-weight:400;color:var(--body-ink); font-family:var(--jp);letter-spacing:.015em} .entry-content h2{font-family:var(--jp);font-weight:700;font-size:24px;line-height:1.55; margin:64px 0 22px;padding:0 0 0 16px;border:0;border-left:3px solid var(--acc); letter-spacing:0;background:none;color:var(--ink)} .entry-content h3{font-weight:700;font-size:18px;margin:40px 0 14px;color:var(--ink); border:0;padding:0;background:none} .entry-content h4{font-weight:500;font-size:16px;margin:32px 0 12px;color:var(--ink);border:0;padding:0} .entry-content p{margin:0 0 28px} .entry-content strong{color:var(--acc);font-weight:500} .entry-content a{color:var(--acc-3);border-bottom:1px solid rgba(77,227,255,.35)} .entry-content a:hover{border-bottom-color:var(--acc-3)} .entry-content ul,.entry-content ol{margin:0 0 28px;padding-left:1.4em} .entry-content li{margin-bottom:10px} .entry-content blockquote{font-family:var(--min);font-size:19px;line-height:1.95;color:var(--ink); border:0;border-left:2px solid var(--acc);padding:6px 0 6px 26px;margin:40px 0;background:none} .entry-content pre{background:var(--bg-2);border:1px solid var(--line);border-radius:6px; padding:22px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.85; margin:0 0 28px;color:#c9c9c4} .entry-content code{font-family:var(--mono);font-size:.9em;background:var(--bg-2); padding:2px 6px;border-radius:3px;color:var(--acc)} .entry-content pre code{background:none;padding:0;color:inherit} .entry-content img{border-radius:4px} .entry-content figure{margin:44px 0} .entry-content figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; color:var(--ink-faint);margin-top:14px;text-align:left} .entry-content table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:14px} .entry-content th,.entry-content td{border:1px solid var(--line);padding:12px 14px;text-align:left} .entry-content th{background:var(--bg-2);font-family:var(--mono);font-size:11px; letter-spacing:.12em;color:var(--ink-dim);font-weight:400} .entry-content hr{border:0;border-top:1px solid var(--line);margin:56px 0} /* 引用風プルクオート（ショートコード sg_pull） */ .sg-pull{font-family:var(--min);font-size:22px;line-height:1.95;color:var(--ink); border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;margin:48px 0} /* 目次 */ .sg-toc{border-left:1px solid var(--line);padding-left:22px} .sg-toc .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em; color:var(--ink-faint);margin-bottom:18px} .sg-toc a{display:block;font-size:12.5px;line-height:1.7;color:var(--ink-dim);padding:7px 0; border-left:1px solid transparent;margin-left:-23px;padding-left:22px;transition:.35s var(--ease)} .sg-toc a.lv3{padding-left:36px;font-size:11.5px;color:var(--ink-faint)} .sg-toc a.on{color:var(--acc);border-left-color:var(--acc)} /* ========================================================= アフィリエイト・ブロック デザインを壊さずに広告を差し込むための共通パーツ ========================================================= */ /* --- 共通：PRラベル --- */ .sg-ad{position:relative;margin:52px 0} .sg-ad__pr{position:absolute;top:-9px;left:18px;z-index:2;background:var(--bg); padding:0 10px;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;color:var(--ink-faint)} /* --- 1. 商品カード（Amazon / 楽天） --- */ .sg-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:center; border:1px solid var(--line);background:var(--card);padding:26px 28px;position:relative; overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease)} .sg-card::before{content:'';position:absolute;left:0;top:0;width:2px;height:100%; background:linear-gradient(var(--acc),var(--acc-2));transform:scaleY(0);transform-origin:top; transition:transform .6s var(--ease)} .sg-card:hover{border-color:rgba(214,255,63,.28);transform:translateY(-3px)} .sg-card:hover::before{transform:scaleY(1)} .sg-card__img{aspect-ratio:1;display:flex;align-items:center;justify-content:center; background:#fff;border-radius:3px;overflow:hidden} .sg-card__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply; transition:transform .6s var(--ease)} .sg-card:hover .sg-card__img img{transform:scale(1.06)} .sg-card__kind{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--acc);margin-bottom:10px} .sg-card__title{font-size:16px;font-weight:500;line-height:1.6;color:var(--ink);margin-bottom:8px} .sg-card__note{font-size:12.5px;line-height:1.85;color:var(--ink-dim);font-weight:300;margin-bottom:16px} .sg-card__links{display:flex;gap:10px;flex-wrap:wrap} .sg-card__links a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:9px 16px; border:1px solid var(--line);border-radius:100px;color:var(--ink-dim); transition:.35s var(--ease);border-bottom:1px solid var(--line)} .sg-card__links a:hover{border-color:var(--acc);color:var(--acc);background:rgba(214,255,63,.05)} @media(max-width:620px){.sg-card{display:block} .sg-card__img{max-width:150px}} /* --- 2. CTAボタン（ASPテキストリンク用） --- */ .sg-cta-box{border:1px solid var(--line);background: radial-gradient(120% 160% at 0% 0%,rgba(127,160,0,.06),transparent 55%),var(--card); padding:38px 34px;text-align:center;position:relative;overflow:hidden} .sg-cta-box::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 40%,rgba(214,255,63,.07) 50%,transparent 60%); transform:translateX(-100%);transition:transform 1.1s var(--ease)} .sg-cta-box:hover::after{transform:translateX(100%)} .sg-cta-box__lead{font-size:14px;line-height:1.95;color:var(--ink-dim); font-weight:300;margin:0 0 22px;max-width:46ch;margin-inline:auto} .sg-cta-box__btn{display:inline-flex;align-items:center;gap:14px;padding:16px 34px; border:1px solid var(--acc);border-radius:100px;font-family:var(--mono);font-size:11px; letter-spacing:.18em;color:var(--acc);position:relative;overflow:hidden; transition:color .4s var(--ease);border-bottom:1px solid var(--acc)} .sg-cta-box__btn span{position:relative;z-index:2} .sg-cta-box__btn::before{content:'';position:absolute;inset:0;background:var(--acc); transform:translateY(101%);transition:transform .5s var(--ease)} .sg-cta-box__btn:hover{color:#000;border-color:var(--acc)} .sg-cta-box__btn:hover::before{transform:translateY(0)} .sg-cta-box__sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em; color:var(--ink-faint);margin-top:18px} /* --- 3. バナー枠（提供バナー・iframeを収める） --- */ .sg-banner{border:1px solid var(--line);background:var(--card);padding:26px; display:flex;justify-content:center;align-items:center;min-height:120px; transition:border-color .5s var(--ease)} .sg-banner:hover{border-color:rgba(255,255,255,.18)} .sg-banner iframe,.sg-banner img{max-width:100%;display:block; filter:saturate(.85) contrast(.95);transition:filter .5s var(--ease)} .sg-banner:hover iframe,.sg-banner:hover img{filter:none} /* --- 4. インラインのアフィリリンク（本文中に自然に混ぜる） --- */ .entry-content a.sg-aff{color:var(--acc);border-bottom:1px dashed rgba(214,255,63,.4); position:relative;padding-right:14px} .entry-content a.sg-aff::after{content:'↗';position:absolute;right:0;top:-.1em; font-size:.75em;opacity:.6} .entry-content a.sg-aff:hover{border-bottom-style:solid} /* --- 5. 記事末尾の広告ゾーン --- */ .sg-adzone{border-top:1px solid var(--line);margin-top:72px;padding-top:44px} .sg-adzone__lbl{font-family:var(--mono);font-size:9px;letter-spacing:.24em; color:var(--ink-faint);margin-bottom:26px} /* ========================================================= Cocoon既存パーツのダーク版 （旧 Cocoon Child のカスタマイズから、新デザインでも 生き残るパーツだけを移植したもの） ========================================================= */ .article,.comment-area,.author-box,.breadcrumb, .pager-post-navi,.page-numbers{background:transparent !important;color:var(--ink-dim)} input,textarea,select{background:var(--bg-2);border:1px solid var(--line);color:var(--ink); font-family:var(--jp)} ::placeholder{color:var(--ink-faint)} /* --- 記事内ブログカード（旧カスタマイズのダーク移植） --- */ .blogcard{padding-bottom:.8%;border:1px solid var(--line) !important;border-radius:4px; box-shadow:none !important;background:var(--card) !important;position:relative} .blogcard::before{display:none} .blogcard-wrap.a-wrap{transition:all .3s var(--ease)} .blogcard-wrap.a-wrap:hover{background:var(--hover) !important;box-shadow:none !important; transform:translateY(-2px)} .blogcard-title{font-size:1em;padding:.2em .2em 0;line-height:1.55em;text-align:left; color:var(--ink) !important} .blogcard-snippet{padding:0 .5em;color:var(--ink-dim) !important;text-align:left;font-size:.9em} .blogcard-content{max-height:none} .blogcard-date{display:none} .blogcard-footer{padding-top:2%} .blogcard-domain{color:var(--ink-faint) !important;font-family:var(--mono);font-size:.75em; letter-spacing:.08em} .internal-blogcard::after,.external-blogcard::after{ content:"続きを読む ≫";position:absolute;bottom:.7em;right:1em;font-size:.7em; background:transparent;border:1px solid var(--line);padding:.4em 1.6em;font-weight:400; color:var(--ink-dim);border-radius:100px;font-family:var(--mono);letter-spacing:.1em; transition:.35s var(--ease)} .blogcard-wrap:hover .internal-blogcard::after, .blogcard-wrap:hover .external-blogcard::after{border-color:var(--acc);color:var(--acc)} .blogcard-label{display:inline !important;background:var(--acc) !important;color:#000 !important; margin-left:.5em;font-family:var(--mono);font-size:.68em;letter-spacing:.12em;border-radius:3px} @media screen and (max-width:673px){.blogcard-snippet{display:none}} @media screen and (max-width:600px){.blogcard-label{margin-left:-.3em !important}} /* --- FAQブロック（旧カスタマイズのダーク移植） --- */ .faq.is-style-square{background:var(--bg-2);border:1px solid var(--line)} .is-style-square div.faq-question-label.faq-item-label{background:var(--acc-2);color:#fff; font-size:15px;padding:3px 9px;border-radius:3px;font-weight:700} .is-style-square div.faq-answer-label.faq-item-label{background:var(--acc-3);color:#000; font-size:15px;padding:3px 9px;border-radius:3px;font-weight:700} .is-style-accordion div.faq-question-label.faq-item-label{color:var(--acc-2);font-size:17px; padding:3px 8px;margin-right:.4em;font-weight:700;background:none} .is-style-accordion div.faq-answer-label.faq-item-label{color:var(--acc-3);font-size:17px; padding:3px 8px;font-weight:700;background:none} .is-style-accordion .faq-question{background:var(--bg-2);padding:1em 2em 1em 1em; border:1px solid var(--line)} .is-style-accordion .faq-answer{padding:1em;color:var(--ink-dim)} .is-style-accordion .faq-question-content.faq-item-content{color:var(--ink)} .faq p,.faq .wp-block-image{margin-bottom:0} /* --- 関連記事・アーカイブのエントリーカード --- */ .entry-card-wrap.a-wrap,.related-entry-card-wrap.a-wrap{ background:var(--card) !important;border:1px solid var(--line) !important;border-radius:4px; transition:all .35s var(--ease);box-shadow:none !important} .entry-card-wrap.a-wrap:hover,.related-entry-card-wrap.a-wrap:hover{ background:var(--hover) !important;border-color:rgba(214,255,63,.25) !important; transform:translateY(-2px);box-shadow:none !important} .entry-card-title,.related-entry-card-title{color:var(--ink) !important;font-weight:500; text-align:left;font-size:1.02em;line-height:1.6} .entry-card-snippet,.related-entry-card-snippet{color:var(--ink-dim) !important; text-align:left;border:0 !important;font-size:.88em} .entry-card-meta,.related-entry-card-meta,.post-date,.post-update{ color:var(--ink-faint) !important;font-family:var(--mono);font-size:.76em;letter-spacing:.08em} .eye-catch .cat-label,.cat-label,a.cat-link,a.tag-link{ font-family:var(--mono);font-size:.68em;letter-spacing:.12em;border-radius:100px;border:0; padding:3px 11px;background:var(--acc) !important;color:#000 !important} a.cat-link:hover,a.tag-link:hover{opacity:.7;transition:.3s} div.admin-pv{display:none} .eye-catch{box-shadow:none} /* --- 見出しラベル（SHARE / COMMENTS / 関連記事） --- */ .sns-share-message::before,.sns-follow-message::before, span.related-entry-main-heading.main-caption::before,.comment-title::before{ letter-spacing:.28em;border-radius:100px;border:1px solid var(--line);padding:6px 0; background:transparent;color:var(--ink-dim);display:inline-block;width:auto;min-width:230px; font-family:var(--mono);font-size:.72em} .sns-share-message,.sns-follow-message, span.related-entry-main-heading.main-caption,.comment-title{margin:20px 0 14px} .sns-share{margin:0 0 24px} .sns-share-buttons a,.sns-follow-buttons a{transition:.4s var(--ease); border:1px solid var(--line) !important;background:var(--bg-2) !important; color:var(--ink-dim) !important} .sns-share-buttons a:hover,.sns-follow-buttons a:hover{ border-color:var(--acc) !important;color:var(--acc) !important;transform:translateY(-2px)} .sns-share.ss-high-and-low-lc a .button-caption{display:none} /* --- コメント欄 --- */ .comment-btn{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-dim); transition:.35s var(--ease)} .comment-btn:hover{background:transparent;border-color:var(--acc);color:var(--acc);box-shadow:none} div#comment-area{margin-bottom:0} .comment-content p{margin:.3em !important} /* --- Cocoonの自動目次は非表示 --- single.php で自前の目次を出しているため二重になる。 さらにCocoonの目次は幅を持っていて、スマホで横に溢れる原因になる。 */ #toc,.toc,#toc-checkbox,.toc-checkbox,.toc-center,.toc-widget-box{display:none !important} /* --- Cocoonのモバイルメニューは自前のものに置き換えるので非表示 --- */ .mobile-footer-menu-buttons, .mobile-menu-buttons, .mobile-header-menu-buttons, #mobile-menu-content, .menu-drawer, .menu-close-button{display:none !important} /* ========================================================= スマホ用UI（下部バー・シート・検索） ========================================================= */ .sg-mbar,.sg-sheet,.sg-scrim,.sg-search{display:none} /* hidden属性より display 指定が強くならないようにする保険 */ [hidden]{display:none !important} @media(max-width:900px){ /* --- 下部の固定バー --- */ .sg-mbar{ display:grid;grid-template-columns:repeat(5,1fr); position:fixed;left:0;right:0;bottom:0;z-index:975; background:var(--bg); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)} .sg-mbar__i{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; background:transparent;border:0;padding:10px 2px 11px;cursor:pointer; color:var(--ink-dim);font-family:var(--jp);font-size:9.5px;letter-spacing:.02em; transition:color .3s var(--ease);-webkit-tap-highlight-color:transparent} .sg-mbar__i svg{width:20px;height:20px;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .sg-mbar__i span{pointer-events:none} .sg-mbar__i.on,.sg-mbar__i:active{color:var(--acc)} .sg-mbar__i span{white-space:nowrap} /* コンテンツがバーに隠れないように余白を足す */ .sg-footer{padding-bottom:120px} /* --- 背面の暗幕 --- */ .sg-scrim{display:block;position:fixed;inset:0;z-index:965; background:rgba(0,0,0,.6); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .4s var(--ease),visibility .4s var(--ease)} .sg-scrim.on{opacity:1;visibility:visible;pointer-events:auto} html.sg-light .sg-scrim{background:rgba(28,28,25,.42)} /* --- 下から上がるシート --- */ .sg-sheet{ display:block;position:fixed;left:0;right:0;bottom:0;z-index:970; background:var(--bg);border-top:1px solid var(--line); border-radius:16px 16px 0 0; max-height:84svh;overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateY(101%);visibility:hidden;pointer-events:none; transition:transform .48s var(--ease),visibility .48s var(--ease); padding-bottom:calc(84px + env(safe-area-inset-bottom))} .sg-sheet.on{transform:translateY(0);visibility:visible;pointer-events:auto} .sg-sheet__grip{position:sticky;top:0;z-index:2;background:var(--bg); padding:12px 0 8px;display:flex;justify-content:center} .sg-sheet__grip::before{content:'';width:38px;height:3px;border-radius:3px; background:var(--line)} .sg-sheet__body{padding:8px 20px 24px} .sg-sheet__lbl{font-family:var(--mono);font-size:9px;letter-spacing:.24em; color:var(--ink-faint);margin:26px 0 12px;display:block} .sg-sheet__body>.sg-sheet__lbl:first-child{margin-top:6px} /* プロフィール */ .sg-mprof{display:flex;gap:14px;align-items:center; border:1px solid var(--line);padding:14px;border-radius:10px;background:var(--card)} .sg-mprof img{width:54px;height:54px;object-fit:cover;border-radius:8px;flex:0 0 auto} .sg-mprof .go{margin-left:auto;font-style:normal;color:var(--acc);font-size:15px;flex:0 0 auto} .sg-mprof span{display:flex;flex-direction:column;gap:4px;min-width:0} .sg-mprof b{font-size:14px;font-weight:700;color:var(--ink)} .sg-mprof i{font-style:normal;font-family:var(--mono);font-size:8.5px; letter-spacing:.12em;color:var(--ink-dim);line-height:1.6} /* カテゴリ */ .sg-mcats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .sg-mcat{position:relative;border:1px solid var(--line);border-radius:10px; padding:16px 14px 14px;background:var(--card);overflow:hidden; display:flex;flex-direction:column;gap:6px} .sg-mcat::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:var(--c)} .sg-mcat .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--c)} .sg-mcat .jp{font-size:15px;font-weight:700;color:var(--ink)} .sg-mcat .n{position:absolute;right:12px;bottom:10px;font-family:var(--mono); font-size:11px;color:var(--ink-faint)} /* 配色切替とX */ .sg-mrow{display:flex;flex-direction:column;gap:10px} .sg-mbtn{display:flex;align-items:center;justify-content:center;gap:10px; border:1px solid var(--line);border-radius:100px;padding:14px;background:transparent; color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; cursor:pointer;-webkit-tap-highlight-color:transparent} .sg-mbtn.x{border-color:var(--acc);color:var(--acc)} .sg-mbtn .xm{font-size:14px;font-weight:700} .sg-mbtn .ic{position:relative;width:13px;height:13px;border-radius:50%; border:1px solid currentColor;overflow:hidden;flex:0 0 auto} .sg-mbtn .ic::before{content:'';position:absolute;left:0;top:0;width:50%;height:100%; background:currentColor;transition:transform .45s var(--ease)} html.sg-light .sg-mbtn .ic::before{transform:translateX(100%)} /* 最新記事 */ .sg-mpost{display:block;padding:15px 0;border-bottom:1px solid var(--line)} .sg-mpost .d{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em; color:var(--ink-faint);margin-bottom:7px} .sg-mpost .t{display:block;font-size:14.5px;line-height:1.6;color:var(--ink)} .sg-mall{display:block;margin-top:20px;text-align:center;font-family:var(--mono); font-size:10.5px;letter-spacing:.14em;color:var(--acc); border:1px solid var(--line);border-radius:100px;padding:14px} /* 検索 */ .sg-search{display:block;position:fixed;left:0;right:0;bottom:0;z-index:970; background:var(--bg);border-top:1px solid var(--line);border-radius:16px 16px 0 0; padding:22px 20px calc(96px + env(safe-area-inset-bottom)); transform:translateY(101%);visibility:hidden;pointer-events:none; transition:transform .48s var(--ease),visibility .48s var(--ease)} .sg-search.on{transform:translateY(0);visibility:visible;pointer-events:auto} .sg-search .sg-sheet__lbl{margin:0 0 12px} .sg-search__row{display:flex;gap:8px} .sg-search input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line); border-radius:100px;padding:14px 18px;color:var(--ink);font-family:var(--jp);font-size:16px} .sg-search input:focus{outline:0;border-color:var(--acc)} .sg-search button{flex:0 0 auto;width:50px;border:1px solid var(--acc);border-radius:50%; background:transparent;color:var(--acc);font-size:16px;cursor:pointer} /* シート表示中は背面をスクロールさせない */ body.sg-locked{overflow:hidden} } /* --- ページャー --- */ .page-numbers{border:1px solid var(--line) !important;color:var(--ink-dim) !important; background:transparent !important;font-family:var(--mono);font-size:.8em} .page-numbers.current,.page-numbers:hover{background:var(--acc) !important;color:#000 !important; border-color:var(--acc) !important} /* ========================================================= スマートフォン最適化 ========================================================= */ @media(max-width:600px){ .sg-sec{padding:64px 20px} .sg-shead{margin-bottom:36px;padding-bottom:16px} .sg-shead h2{font-size:26px} .sg-shead p{font-size:9.5px} /* ヒーロー */ .sg-hero{min-height:560px} .sg-hero h1{font-size:clamp(44px,15vw,72px)} .sg-eyebrow{font-size:9.5px;letter-spacing:.2em;margin-bottom:18px} .sg-eyebrow::before{width:22px} .sg-hero .sub{font-size:14px;line-height:1.95;margin-top:26px} /* カテゴリ */ .sg-cat{padding:28px 22px 26px} .sg-cat h3{font-size:19px;margin:18px 0 10px} .sg-cat .n{font-size:30px;right:16px;top:20px} /* 記事一覧 */ .sg-post{padding:22px 4px} .sg-post:hover{padding-left:4px} .sg-post .t{font-size:16.5px;line-height:1.65} /* プロフィール・統計 */ .sg-lede{font-size:20px;line-height:1.85} .sg-abody{font-size:13.5px;line-height:2} .sg-stat{padding:18px 18px;flex-wrap:wrap;gap:8px} .sg-stat .l{font-size:9px;letter-spacing:.14em} .sg-stat .v{font-size:28px} /* 記事ページ */ .sg-art-hero{padding:110px 20px 40px} .sg-art-hero h1{font-size:25px;line-height:1.5;max-width:none} .sg-art-metarow{gap:16px;font-size:9.5px;margin-top:24px} .sg-art-wrap{padding:44px 20px 80px} .entry-content{font-size:16px;line-height:2;max-width:none} .entry-content h2{font-size:20px;margin:44px 0 18px} .entry-content h3{font-size:17px;margin:32px 0 12px} .entry-content pre{padding:16px;font-size:11.5px} /* アフィリエイト部品 */ .sg-ad{margin:38px 0} .sg-cta-box{padding:28px 20px} .sg-card{padding:22px 20px} /* CTA・フッター */ .sg-cta{padding:80px 20px} .sg-footer{padding:32px 20px 64px;font-size:9.5px} } /* ========================================================= ブロックエディタ（Gutenberg）対応 新しい記事は wp-block-* のクラスで出力され、WordPress自身が 幅の指定を注入してくる。ここで打ち消して自前の設計に揃える。 ========================================================= */ /* WordPressが入れる幅指定を無効化し、.entry-content の設計に委ねる */ .entry-content .is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)), .entry-content .is-layout-flow>:where(:not(.alignleft):not(.alignright)){ max-width:none;margin-left:0;margin-right:0} .entry-content>*{max-width:100%} .entry-content .alignfull,.entry-content .alignwide{ width:auto;max-width:100%;margin-left:0;margin-right:0} .entry-content .aligncenter{margin-left:auto;margin-right:auto} /* 見出し・段落ブロック */ .entry-content .wp-block-heading{color:var(--ink)} .entry-content p.has-text-align-center{text-align:center} .entry-content p.has-text-align-right{text-align:right} /* 画像 */ .entry-content .wp-block-image{margin:44px 0} .entry-content .wp-block-image img{height:auto;max-width:100%;border-radius:4px} .entry-content .wp-block-image figcaption, .entry-content .wp-block-embed figcaption{font-family:var(--mono);font-size:10.5px; letter-spacing:.13em;color:var(--ink-faint);margin-top:14px;text-align:left} /* 引用 */ .entry-content .wp-block-quote{font-family:var(--min);font-size:19px;line-height:1.95; color:var(--ink);border:0;border-left:2px solid var(--acc);padding:6px 0 6px 26px; margin:40px 0;background:none} .entry-content .wp-block-quote cite{display:block;margin-top:14px;font-style:normal; font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-faint)} .entry-content .wp-block-pullquote{border:0;border-top:1px solid var(--line); border-bottom:1px solid var(--line);padding:34px 0;background:none;color:var(--ink)} /* コード */ .entry-content .wp-block-code, .entry-content .wp-block-preformatted{background:var(--bg-2);border:1px solid var(--line); border-radius:6px;padding:22px;overflow-x:auto;font-family:var(--mono);font-size:12.5px; line-height:1.85;margin:0 0 28px;color:var(--body-ink)} .entry-content .wp-block-code code{background:none;padding:0;color:inherit;white-space:pre} /* リスト・区切り・表 */ .entry-content .wp-block-list{margin:0 0 28px;padding-left:1.4em} .entry-content .wp-block-separator{border:0;border-top:1px solid var(--line);margin:56px 0; background:none;opacity:1;width:100%} .entry-content .wp-block-table{margin:0 0 28px;overflow-x:auto} .entry-content .wp-block-table table{width:100%;border-collapse:collapse;font-size:14px} .entry-content .wp-block-table td,.entry-content .wp-block-table th{ border:1px solid var(--line);padding:12px 14px} .entry-content .wp-block-table th{background:var(--bg-2);font-family:var(--mono);font-size:11px; letter-spacing:.12em;color:var(--ink-dim);font-weight:400} /* 埋め込み（YouTube・X など） WordPressもCocoonも「::before に padding-top:56.25%」という古い手法で 高さを確保している。自前で同じことをすると余白が二重に積まれるため、 その仕組みを止めて aspect-ratio に一本化する。 */ .entry-content .wp-block-embed{margin:44px 0} .entry-content .wp-block-embed__wrapper{position:static;padding-top:0;height:auto} .entry-content .wp-block-embed__wrapper::before, .entry-content .video-container::before{content:none !important;display:none !important;padding-top:0 !important} .entry-content .video-container, .entry-content .wp-block-embed__wrapper{padding-bottom:0 !important;height:auto !important} .entry-content .wp-block-embed iframe, .entry-content .video-container iframe, .entry-content iframe[src*="youtube"], .entry-content iframe[src*="youtu.be"], .entry-content iframe[src*="player.vimeo"]{ position:static !important;inset:auto !important; width:100% !important;height:auto !important; aspect-ratio:16/9;display:block;border:0;border-radius:4px} /* 16:9以外の比率にも対応 */ .entry-content .wp-embed-aspect-4-3 iframe{aspect-ratio:4/3} .entry-content .wp-embed-aspect-1-1 iframe{aspect-ratio:1/1} .entry-content .wp-embed-aspect-9-16 iframe{aspect-ratio:9/16} .entry-content .wp-embed-aspect-21-9 iframe{aspect-ratio:21/9} /* Xの埋め込みなど、比率を持たないものは高さを自動に戻す */ .entry-content .twitter-tweet, .entry-content .wp-block-embed-twitter iframe, .entry-content .wp-block-embed-x iframe{max-width:100% !important;aspect-ratio:auto} /* ボタン・グループ */ .entry-content .wp-block-button__link{background:transparent;border:1px solid var(--acc); color:var(--acc);border-radius:100px;font-family:var(--mono);font-size:11.5px; letter-spacing:.16em;padding:15px 30px;transition:.4s var(--ease)} .entry-content .wp-block-button__link:hover{background:var(--acc);color:#000} .entry-content .wp-block-group{max-width:100%} /* カラムはスマホで縦積みにする */ @media(max-width:600px){ .entry-content .wp-block-columns{flex-wrap:wrap !important;gap:20px} .entry-content .wp-block-column{flex-basis:100% !important;margin-left:0 !important} .entry-content .wp-block-image{margin:30px 0} .entry-content .wp-block-code, .entry-content .wp-block-preformatted{padding:16px;font-size:11.5px} .entry-content .wp-block-quote{font-size:17px;padding-left:18px} } /* 長い英数字・URLがはみ出すのを防ぐ */ .entry-content,.sg-post .t,.sg-art-hero h1,.sg-card__title{ overflow-wrap:anywhere;word-break:normal;line-break:strict} .entry-content table{display:block;overflow-x:auto;white-space:nowrap} .entry-content iframe,.sg-banner iframe{max-width:100%} /* ========================================================= 横はみ出しの最終防衛線 グリッド／フレックスの子要素は既定で min-width:auto のため、 中身が大きいと親を押し広げる。これを明示的に解除する。 ========================================================= */ #container,#content,#main,.content,.main,.wrap,.body, .sg-art-wrap,.sg-art-wrap>*,.sg-about,.sg-about>*, .sg-cats,.sg-cat,.sg-post,.sg-post>*,.sg-stats,.sg-stat,.sg-stat>*, .sg-card,.sg-card>*{min-width:0} .entry-content>*,.entry-content img,.entry-content video, .entry-content iframe,.entry-content pre,.entry-content table, .entry-content embed,.entry-content object{max-width:100%} .sg-art-wrap,.sg-sec,.sg-art-hero{overflow-x:clip} /* 狭い画面では、本文内のあらゆる要素を画面幅で頭打ちにする。 埋め込み動画・画像・表など、幅を自己主張する要素への保険。 */ @media(max-width:900px){ .sg-art-wrap,.sg-art-wrap>*, .entry-content,.entry-content>*{max-width:100% !important} .entry-content img,.entry-content video, .entry-content embed,.entry-content object, .entry-content .wp-block-embed__wrapper>*{ max-width:100% !important;height:auto} /* 埋め込みは幅いっぱい・高さは aspect-ratio に任せる */ .entry-content iframe{max-width:100% !important;width:100% !important;height:auto !important} .entry-content pre,.entry-content .wp-block-code, .entry-content .wp-block-preformatted{overflow-x:auto;white-space:pre} } /* スマホではナビが本文に重なるので、背景を敷いて可読性を確保する */ @media(max-width:900px){ .sg-nav{mix-blend-mode:normal;padding:14px 18px 30px; background:linear-gradient(180deg,var(--bg) 34%,transparent)} .sg-nav .sg-logo,.sg-nav .sg-navlinks,.sg-theme{color:var(--ink)} .sg-navlinks a.x{color:var(--acc)} }