/* Theme Name: Saretsuma Original Description: サレ妻の記録 専用のオリジナルテーマ（自動生成。scripts/blog3/build_wp_theme.js が正本） Author: サレ妻の記録 Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.8 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: sare-tsuma */ /* ===== 記事の見た目（実際の記事HTMLから取り出したもの） ===== */ :root{ --ink:#2b2620; --ink-soft:#6b6072; --paper:#faf7f1; --card:#ffffff; --line:#e8e0d2; --plum:#6b5228; --plum-2:#8a6a3a; --gold:#b08a4e; --pink-bg:#f7f1e6; --blue-bg:#f2f5fa; --radius:12px; } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink); font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-size:17px;line-height:2.0;-webkit-font-smoothing:antialiased;letter-spacing:.01em} /* プレビュー用の枠（本番には出ません） */ /* ヘッダー */ @media(max-width:620px){} /* 記事 */ .wrap{max-width:820px;margin:0 auto;padding:0 20px 80px} .crumb{font-size:12.5px;color:var(--ink-soft);margin:20px 0 10px} h1{font-family:"Zen Old Mincho",serif;font-size:clamp(24px,4.6vw,33px);line-height:1.55;margin:0 0 14px;font-weight:600} .byline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);margin-bottom:6px;flex-wrap:wrap} .byline .ico{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#8a6a3a,#6b5228);display:inline-block} .pr{display:inline-block;font-size:11.5px;color:#8b7f92;border:1px solid var(--line);border-radius:4px;padding:1px 7px;margin-left:2px} p{margin:0 0 20px} h2{font-family:"Zen Old Mincho",serif;font-size:23px;font-weight:600;margin:48px 0 18px; padding:0 0 0 14px;border-left:5px solid var(--plum);line-height:1.6} h3{font-size:18.5px;font-weight:700;margin:32px 0 12px;color:var(--plum)} .lead{font-size:17px;background:var(--pink-bg);border-radius:var(--radius);padding:22px 24px;margin-bottom:26px} .lead p{margin-bottom:14px} .lead p:last-child{margin-bottom:0} .lead .lead-strong{background:#fff;border-left:4px solid var(--plum-2);border-radius:0 8px 8px 0; padding:12px 16px;margin:16px 0;font-size:16.5px} mark{background:linear-gradient(transparent 62%, #f6dfe9 62%);padding:0 2px} /* 目次 */ .toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:26px 0} .toc-t{font-weight:700;font-size:15px;margin-bottom:10px;color:var(--plum)} .toc ol{margin:0;padding-left:20px;font-size:15px} .toc li{margin-bottom:6px} .toc a{color:var(--ink);text-decoration:none} /* 吹き出し */ .voice{display:flex;gap:12px;margin:20px 0} .voice .av{flex:none;width:42px;height:42px;border-radius:50%;background:#e9dfe6;display:flex;align-items:center;justify-content:center;font-size:18px} .voice .bl{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 17px;position:relative;font-size:15.5px;line-height:1.85} .voice .bl::before{content:"";position:absolute;left:-7px;top:15px;width:12px;height:12px;background:var(--card); border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)} .voice .src{display:block;margin-top:7px;font-size:12px;color:#9a8fa2} /* 要点ボックス */ .box{background:var(--blue-bg);border:1px solid #dde5f0;border-radius:var(--radius);padding:18px 20px;margin:24px 0} .box-t{font-weight:700;color:#3d5a86;margin-bottom:8px;font-size:15.5px} .box ul{margin:0;padding-left:20px} .box li{margin-bottom:6px} /* 結末カード */ .ending{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin:22px 0;overflow:hidden} .ending-h{padding:12px 20px;color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px} .e1 .ending-h{background:linear-gradient(100deg,#7b6a8c,#5d4f6b)} .e2 .ending-h{background:linear-gradient(100deg,#8a6a3a,#6b5228)} .e3 .ending-h{background:linear-gradient(100deg,#b08a4e,#8a6a38)} .ending-h .n{background:rgba(255,255,255,.22);border-radius:999px;padding:1px 10px;font-size:12.5px} .ending-b{padding:18px 20px} .ending-b p:last-child{margin-bottom:0} /* CTA */ .cta{background:linear-gradient(160deg,#fdf8fa,#f6ecf2);border:1px solid #e8d6e0;border-radius:14px;padding:24px 22px;margin:34px 0;text-align:center} .cta .prlabel{display:inline-block;font-size:11px;color:#8b7f92;border:1px solid #ddd0da;border-radius:4px;padding:1px 8px;margin-bottom:10px;letter-spacing:.08em} .cta-t{font-family:"Zen Old Mincho",serif;font-size:19px;color:var(--plum);margin-bottom:8px;line-height:1.6} .cta-d{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.8} .cta-btn{display:inline-block;background:linear-gradient(135deg,#8a6a3a,#6b5228);color:#fff;text-decoration:none; padding:14px 34px;border-radius:999px;font-weight:700;font-size:16px;box-shadow:0 6px 16px rgba(0,0,0,.22)} .cta-note{font-size:12px;color:#9a8fa2;margin-top:10px} /* 関連記事カード */ .cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0} @media(max-width:620px){.cards{grid-template-columns:1fr}} .card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:14px 16px;text-decoration:none;color:var(--ink);display:block} .card .k{font-size:11.5px;color:var(--plum-2);font-weight:700;letter-spacing:.06em} .card .t{font-size:15px;line-height:1.65;margin-top:5px} /* FAQ */ .faq{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line);padding:16px 0} .faq-q{font-weight:700;font-size:16px;display:flex;gap:9px} .faq-q .mk{color:var(--plum);flex:none} .faq-a{display:flex;gap:9px;margin-top:9px;font-size:15.5px;color:var(--ink-soft);line-height:1.85} .faq-a .mk{color:var(--gold);flex:none;font-weight:700} .disclaimer{font-size:12.5px;color:#9a8fa2;background:var(--card);border:1px solid var(--line); border-radius:var(--radius);padding:14px 18px;margin:30px 0 0;line-height:1.85} /* ===== サイトの色と書体（見本の :root と同じもの） ===== ⚠️ 記事CSSの :root には --accent / --serif などが無い（見本のHTML側で定義していたため）。 ここで足さないと、色も書体も当たらない素のページになる。 */ :root{ --accent:#8a6a3a;--accent2:#a4844f;--light:#f4efe3; --soft:#6d6553;--faint:#a49b86; --serif:"Zen Old Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN","Noto Serif JP",serif; --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; } /* ===== サイトの見た目（承認済みの見本 案2） ===== */ body.home{background:#fff;color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:2.0;letter-spacing:.02em;padding-bottom:64px} .sk-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .sk-head-in{max-width:1100px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px} .sk-brand{text-decoration:none;color:inherit} .sk-brand b{display:block;font-family:var(--serif);font-size:20px;color:var(--accent);letter-spacing:.14em;font-weight:600} .sk-brand span{display:block;font-size:9.5px;letter-spacing:.26em;color:var(--faint);margin-top:3px} .sk-nav{display:flex;gap:22px;font-size:13px} .sk-nav a{color:var(--soft);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent;transition:border-color .3s,color .3s} .sk-nav a:hover{color:var(--accent);border-color:var(--accent2)} @media(max-width:940px){.sk-nav{display:none}} .sk-hero{position:relative;height:clamp(280px,42vw,420px);overflow:hidden} .sk-hero img{width:100%;height:100%;object-fit:cover;display:block} .sk-hero .sk-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.68) 100%)} .sk-hero .sk-txt{position:absolute;left:0;right:0;bottom:0;max-width:1100px;margin:0 auto;padding:0 26px 38px} .sk-hero h1{font-family:var(--serif);color:#fff;font-weight:600;margin:0 0 14px;letter-spacing:.06em; font-size:clamp(22px,3.6vw,38px);line-height:1.85;text-shadow:0 3px 18px rgba(0,0,0,.5)} .sk-hero p{margin:0;color:rgba(255,255,255,.9);font-size:13.5px;line-height:2.05;max-width:38em;text-shadow:0 2px 10px rgba(0,0,0,.6)} @media(max-width:640px){.sk-hero .sk-txt{padding-bottom:24px}} .sk-wrap{max-width:1100px;margin:0 auto;padding:0 26px 80px} .sk-sec{display:flex;align-items:center;gap:16px;margin:44px 0 0;font-size:11.5px;letter-spacing:.28em;color:var(--faint)} .sk-sec i{flex:1;height:1px;background:var(--line);font-style:normal} .sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:22px} .sk-item{text-decoration:none;color:inherit;display:block} .sk-thumb{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 12px 26px -20px rgba(0,0,0,.75)} .sk-thumb img{width:100%;height:172px;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .sk-item:hover .sk-thumb img{transform:scale(1.05)} .sk-thumb .sk-cap{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.6)); display:flex;align-items:flex-end;padding:14px} .sk-thumb .sk-cap span{font-family:var(--serif);color:#fff;font-size:14px;line-height:1.75;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.7)} .sk-thumb .sk-tag{position:absolute;left:0;top:12px;background:var(--accent);color:#fff;font-size:11px;letter-spacing:.08em;padding:4px 12px 4px 10px;border-radius:0 4px 4px 0} .sk-item h3{margin:13px 0 0;font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.8;letter-spacing:.02em;transition:color .3s} .sk-item:hover h3{color:var(--accent)} .sk-item p{margin:9px 0 0;font-size:13.5px;color:var(--soft);line-height:2.0} .sk-item .sk-date{display:block;margin-top:10px;font-size:11px;color:var(--faint);letter-spacing:.12em} .sk-voice{margin:46px 0 0;background:var(--light);border-left:4px solid var(--accent);padding:30px clamp(22px,4vw,40px)} .sk-voice p{margin:0;font-family:var(--serif);font-size:17px;line-height:2.2;letter-spacing:.04em} .sk-voice .sk-src{margin-top:13px;font-family:var(--sans);font-size:12px;color:var(--faint);letter-spacing:.06em} .sk-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-top:22px;background:var(--line);border:1px solid var(--line)} .sk-chips a{background:#fff;padding:22px 22px;text-decoration:none;color:inherit;transition:background .3s} .sk-chips a:hover{background:var(--light)} .sk-chips b{display:block;font-family:var(--serif);font-size:15.5px;letter-spacing:.04em} .sk-chips span{display:block;margin-top:7px;font-size:12px;color:var(--faint)} .sk-cta{margin:56px 0 0;border:1px solid var(--line);border-top:3px solid var(--accent);padding:34px clamp(22px,5vw,44px);text-align:center;background:var(--paper)} .sk-cta b{display:block;font-family:var(--serif);font-size:clamp(18px,2.6vw,23px);color:var(--accent);margin-bottom:12px;letter-spacing:.05em} .sk-cta p{margin:0 0 22px;font-size:13.5px;color:var(--soft);line-height:2.05} .sk-cta a{display:inline-block;background:var(--accent);color:#fff;border-radius:4px;padding:15px 46px;font-size:15.5px;font-weight:700;text-decoration:none; box-shadow:0 12px 26px -16px var(--accent);transition:transform .25s} .sk-cta a:hover{transform:translateY(-2px)} .sk-cta small{display:block;margin-top:13px;font-size:11.5px;color:var(--faint)} /* 画面の下にいつも出ているボタン（勝っているサイト6社中5社がこれを持っている） */ .sk-fixbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--accent);color:#fff; box-shadow:0 -8px 24px -16px rgba(0,0,0,.8)} .sk-fixbar-in{max-width:1100px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px} .sk-fixbar span{font-size:13px;letter-spacing:.04em} .sk-fixbar span small{display:block;font-size:10.5px;opacity:.8} .sk-fixbar a{background:#fff;color:var(--accent);border-radius:4px;padding:10px 22px;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap} @media(max-width:560px){.sk-fixbar span small{display:none}} .sk-foot{border-top:1px solid var(--line);background:var(--paper)} .sk-foot-in{max-width:1100px;margin:0 auto;padding:40px 26px 46px;font-size:12.5px;color:var(--soft);line-height:2.1} .sk-foot b{display:block;font-family:var(--serif);font-size:17px;color:var(--accent);letter-spacing:.14em;margin-bottom:14px} .sk-foot ul{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:22px;flex-wrap:wrap} .sk-foot a{color:var(--soft);text-decoration:none} .sk-foot a:hover{color:var(--accent)} /* ---- ここから下はテーマ用の追加分（見本には無い、一覧・記事下・ページ送り） ---- */ body{padding-bottom:62px} .sk-wrap{max-width:1100px;margin:0 auto;padding:0 26px 80px} .sk-phead{padding:38px 0 0} .sk-phead h1{font-family:var(--serif);font-size:clamp(21px,3vw,29px);font-weight:600;margin:0 0 8px;letter-spacing:.06em;border:0;padding:0} .sk-phead p{margin:0;font-size:13.5px;color:var(--soft)} .sk-heroimg{margin:18px 0 26px;border-radius:6px;overflow:hidden;line-height:0} .sk-heroimg img{width:100%;height:auto;display:block;max-height:380px;object-fit:cover} /* 本文中のリンク。既定の青い下線のままだと、記事の世界観から浮く （class の付いたボタン等はそれぞれの見た目があるので触らない） */ .crumb a,.wrap p > a:not([class]),.wrap li > a:not([class]){ color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s} .crumb a:hover,.wrap p > a:not([class]):hover,.wrap li > a:not([class]):hover{border-bottom-color:var(--accent)} .sk-related{margin:56px 0 0} /* ページ送り。 ⚠️ WordPressは外側の