/* ========================================================= Gardenas - Clean Theme (Consolidated) 2025-09-02 ========================================================= */ /* [PATCH 2025-09-15 06:56] SP Nav 再改修：タイル段組+ロゴ下縦積み / OR開閉 / 旧SPドロワー削除 */ /* ============ Base ============ */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,Arial,sans-serif; color:#2b2f36;background:#fff;line-height:1.75;-webkit-text-size-adjust:100% } img{max-width:100%;height:auto;display:block} a{color:#0b66d6;text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0 0 .6rem;line-height:1.3} p{margin:.5rem 0} small{font-size:.875rem} .muted{color:#6b7280} .sub{color:#55637a} .container{max-width:1180px;margin:0 auto;padding:0 16px} /* ============ Tokens ============ */ :root{ --radius:16px; --border:#e6e9ef; --bg-soft:#fafbfc; --chip-bg:#f2f5f7; --chip-bd:#dde3e8; --shadow:0 8px 24px rgba(15,25,40,.08); --primary:#0b66d6; --hero-plate-bg:rgba(255,255,255,.62); --hero-plate-text:#263238; /* Anchor offset (site-wide): decided value */ --header-offset:35px; /* Tints */ --tint-sand:#faf5ef; --tint-mint:#f3faf6; --tint-sky:#f3f8ff; --tint-rose:#fdf6f7; --tint-wood:#fbf8f4; } /* ============ Header / Nav ============ */ header.site{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border)} header.site .nav{display:flex;align-items:center;gap:18px;padding:10px 0} .nav .brand{display:inline-flex;align-items:center} .logo{width:180px;max-width:45vw;height:auto} .mainnav{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .mainnav li{margin:0;padding:0} .nav-link{display:inline-flex;align-items:center;gap:6px;font-size:clamp(14px,1.15vw,15px);font-weight:600;line-height:1.2;white-space:nowrap;padding:8px 2px;border-bottom:2px solid transparent;color:#334155} .nav-link:hover{border-bottom-color:#cdd6e1;text-decoration:none} .nav-link .icon{width:22px;height:22px;display:block} .nav-toggle{display:none} @media (min-width:641px){.nav-toggle{display:none!important}} @media (max-width:640px){ header.site .nav{ position:relative; gap:10px; padding:6px 0; flex-wrap:wrap; align-items:center; } /* order: keep logo + toggle on first row (landscape touch) */ header.site .nav .brand{ order:1; } .nav-toggle{ order:2; margin-left:auto; } /* 既定は閉：フロー内・全幅 */ header.site .mainnav{ display:none; position:static; width:100%; margin:.5rem 0 0; padding:0; list-style:none; background:transparent; border:0; box-shadow:none; } /* 開：menu-open OR checkbox → タイル段組 */ html.menu-open header.site .mainnav, #navc:checked ~ .mainnav{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap:.25rem .5rem; order:3; width:100%; } /* ロゴ下に置くためヘッダを縦積み */ html.menu-open header.site .nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; } /* 枠なし・省スペース */ header.site .mainnav > li{ margin:0; } header.site .mainnav > li > a{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:.75rem .5rem; border:0; background:transparent; box-shadow:none; border-radius:0; font-weight:700; min-height:44px; line-height:1.2; } header.site .mainnav > li > a .icon{ display:block; margin:0; } } .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden} /* ============ Hero ============ */ .hero{background-size:cover;background-repeat:no-repeat;background-position:60% 54%;border-bottom:1px solid var(--border)} .hero .inner{padding:60px 0 72px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .eyebrow{font-weight:700;letter-spacing:.08em;color:#7a5530} .hero h1{font-size:clamp(26px,3.1vw,40px);color:#1f2937;margin:.2rem 0} .lead{max-width:720px;color:#374151} .cta{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 16px} .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid #cfd6dd;background:#fff;color:#0f172a;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:filter .15s ease,transform .02s ease,box-shadow .15s ease} .btn:hover{background:#f6f8fb;filter:brightness(.99) saturate(1.02);text-decoration:none} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:2px solid rgba(11,102,214,.25);outline-offset:2px} .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff} /* hero text plates */ .hero .inner .eyebrow, .hero .inner h1, .hero .inner .lead{ display:inline;background:var(--hero-plate-bg);color:var(--hero-plate-text); padding:.16em .52em;border-radius:.52em;border:1px solid rgba(255,255,255,.9); -webkit-box-decoration-break:clone;box-decoration-break:clone; backdrop-filter:blur(3px) saturate(105%);-webkit-backdrop-filter:blur(3px) saturate(105%); box-shadow:0 10px 30px rgba(0,0,0,.10) } .hero .inner .eyebrow::after, .hero .inner h1::after, .hero .inner .lead::after{content:"";display:block;height:.35rem} .hero .inner h1{max-width:24ch;line-height:1.22} .hero .inner .lead{max-width:60ch} /* hero brand colors by URL */ .hero .cta .btn{font-weight:900;font-size:clamp(15px,1.2vw,17px);padding:12px 18px;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.10)} .hero .cta .btn:hover{transform:translateY(-1px)} .hero .cta .btn:active{transform:translateY(0)} .hero .cta a[href*="amazon."]{background:#ff9900;border-color:#d98200;color:#111} .hero .cta a[href*="rakuten."]{background:#bf0000;border-color:#9f0000;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)} .hero .cta a[href*="shopping.yahoo."], .hero .cta a[href*="store.shopping.yahoo."], .hero .cta a[href*="yahoo.co.jp/"]{background:#ff0033;border-color:#d6002a;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)} /* --- Hero motion groundwork (no motion enabled by default) --- */ :root{ /* Default values; JS will override via data-hero-* → CSS variables if needed */ --hero-overlay: 0.1; /* 0–0.6 */ --hero-duration: 5s; /* seconds */ --hero-scale: 1.0; /* 1.0–1.6 */ } .hero{ position:relative; overflow:hidden; } #top.hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background: rgba(0,0,0,var(--hero-overlay)); transition: opacity .2s ease; opacity:1; /* background uses alpha; this keeps layer active */ } /* Keyframes (will be used when JS adds .motion-* classes) */ @keyframes hero-zoom { from { background-size: 100%; } to { background-size: calc(100% * var(--hero-scale)); } } @keyframes hero-pan-left { from{background-position:100% 50%} to{background-position:0% 50%} } @keyframes hero-pan-right { from{background-position:0% 50%} to{background-position:100% 50%} } @keyframes hero-pan-up { from{background-position:50% 100%} to{background-position:50% 0%} } @keyframes hero-pan-down { from{background-position:50% 0%} to{background-position:50% 100%} } @keyframes hero-pan-diag { from{background-position:0% 100%} to{background-position:100% 0%} } /* Motion classes (added by JS later) */ .hero.motion-zoom { animation: hero-zoom var(--hero-duration) linear forwards; } .hero.motion-kb-left { animation: hero-pan-left var(--hero-duration) linear forwards; } .hero.motion-kb-right { animation: hero-pan-right var(--hero-duration) linear forwards; } .hero.motion-kb-up { animation: hero-pan-up var(--hero-duration) linear forwards; } .hero.motion-kb-down { animation: hero-pan-down var(--hero-duration) linear forwards; } .hero.motion-kb-diag { animation: hero-pan-diag var(--hero-duration) linear forwards; } /* 往復（alternate） */ .hero.motion-kb-alt { animation: hero-pan-left var(--hero-duration) linear infinite alternate; } @media (prefers-reduced-motion: reduce){ .hero[class*="motion-"]{ animation: none !important; } } /* === [ADD] Hero: Triangular Pan (tri-pan) ================================ */ /* 背景画像レイヤー運用（gradient + image の2レイヤーにも対応） */ .hero.motion-tri-pan.motion-tri-pan--bg{ /* 2レイヤー: 1=グラデ, 2=画像（単一レイヤー時は先頭値のみ適用） */ background-size: auto auto, var(--hero-bg-zoom, 112%) auto; background-repeat: no-repeat, no-repeat; background-position: 0% 100%, 0% 100%; animation: hero-tri-pan-bg var(--hero-duration, 24s) linear infinite; } @keyframes hero-tri-pan-bg{ 0% { background-position: 0% 100%, 0% 100%; } 33.333% { background-position: 50% 0%, 50% 0%; } 66.666% { background-position: 100% 100%, 100% 100%; } 100% { background-position: 0% 100%, 0% 100%; } } /* 画像タグ運用のフォールバック（ / picture > img / .hero-img） */ .hero.motion-tri-pan > img, .hero.motion-tri-pan picture > img, .hero.motion-tri-pan .hero-img{ animation: hero-tri-pan-img var(--hero-duration, 24s) linear infinite; transform: scale(var(--hero-scale, 1.12)); transform-origin: center; } @keyframes hero-tri-pan-img{ 0% { object-position: 0% 100%; } 33.333% { object-position: 50% 0%; } 66.666% { object-position: 100% 100%;} 100% { object-position: 0% 100%; } } /* prefers-reduced-motion: tri-panの子要素アニメも停止 */ @media (prefers-reduced-motion: reduce){ .hero.motion-tri-pan > img, .hero.motion-tri-pan picture > img, .hero.motion-tri-pan .hero-img{ animation: none !important; } } /* === [/ADD tri-pan] ====================================================== */ /* ============ Trust strip ============ */ .strip{background:#fff;border-bottom:1px solid var(--border)} .trust{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);padding:14px 0} .trust .card{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center} @media (max-width:980px){.trust{grid-template-columns:repeat(2,1fr)}} /* ============ Sections ============ */ section{position:relative} section::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--border)} #products{background:var(--tint-sand);padding:28px 0} #features{background:var(--tint-mint);padding:28px 0} #use-cases{background:var(--tint-sky);padding:28px 0} #gallery{background:var(--tint-rose);padding:28px 0} #news{background:var(--tint-wood);padding:28px 0} #photo{background:var(--tint-mint);padding:28px 0} #contact{background:#fff;padding:28px 0} h2{font-size:1.6rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.35em;padding:.12em .5em;border-radius:.6em;background:rgba(255,255,255,.65);box-shadow:0 8px 22px rgba(15,25,40,.06);border:1px solid rgba(255,255,255,.95)} #products .sub,#features .sub,#use-cases .sub{margin-bottom:12px} /* ============ Cards grid ============ */ .products{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease} .card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,25,40,.10);border-color:#dfe5eb} .card:focus-within{outline:2px solid rgba(11,102,214,.18);outline-offset:2px} .card figure{margin:0} .card figure img{width:100%;height:220px;object-fit:cover} @media (max-width:640px){.card figure img{height:200px}} .card .body{padding:14px} .card h3{font-size:1.05rem;margin:.35rem 0 .3rem} .badges{display:flex;flex-wrap:wrap;gap:8px;margin:.35rem 0} .badge{background:var(--chip-bg);border:1px solid var(--chip-bd);padding:4px 8px;border-radius:999px;font-size:.85rem} /* ============ Products CTA & Store box ============ */ .channels{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .channels a{display:inline-block;padding:8px 10px;border:1px solid #cfd6dd;border-radius:10px;background:#fff;color:#0f172a} .channels a:hover{background:#f4f7fb} #products .cta.channels{display:block} /* gap between "詳しく見る" and store box */ #products .cta.channels>.btn:first-child{margin-bottom:.75rem} @media (min-width:960px){#products .cta.channels>.btn:first-child{margin-bottom:1.1rem!important}} /* store box */ #products .cta.channels .store-links{margin-top:.8rem;padding:.6rem;border:1px solid #e5e7eb;border-radius:.8rem;background:#fff} #products .cta.channels .store-links::before{content:"取扱いストア";display:block;font-size:.78rem;color:#6b7280;margin:-.1rem 0 .4rem} /* layout inside store box */ @media (min-width:960px){ #products .cta.channels .store-links{display:grid;gap:.6rem;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(9.4rem,1fr))} #products .cta.channels .store-links .btn{width:100%;min-width:0;padding:.44rem .64rem;font-size:.92rem;line-height:1.15;white-space:nowrap;text-align:center;min-height:2.4rem;display:flex;align-items:center;justify-content:center} } @media (max-width:959.98px){ #products .cta.channels .store-links{display:flex;flex-wrap:wrap;gap:.55rem} #products .cta.channels .store-links .btn{flex:1 1 auto;min-width:8.2rem;text-align:center;min-height:2.4rem;display:flex;align-items:center;justify-content:center} } /* brand colors inside store box and legacy .channels */ #products .cta.channels .store-links .btn, #products .channels a{font-weight:800;letter-spacing:.02em} #products .cta.channels .store-links .btn[href*="amazon."], #products .channels a[href*="amazon."]{background:#ff9900;border-color:#d98200;color:#111} #products .cta.channels .store-links .btn[href*="rakuten."], #products .channels a[href*="rakuten."]{background:#bf0000;border-color:#9f0000;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)} #products .cta.channels .store-links .btn[href*="shopping.yahoo."], #products .cta.channels .store-links .btn[href*="store.shopping.yahoo."], #products .cta.channels .store-links .btn[href*="yahoo.co.jp/"], #products .channels a[href*="shopping.yahoo."], #products .channels a[href*="store.shopping.yahoo."], #products .channels a[href*="yahoo.co.jp/"]{background:#ff0033;border-color:#d6002a;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)} #products .cta.channels .store-links .btn:hover, #products .channels a:hover{filter:brightness(.98);text-decoration:none} #products .cta.channels .store-links .btn:focus-visible, #products .cta.channels>.btn:focus-visible, #products .channels a:focus-visible{outline:3px solid currentColor;outline-offset:2px} /* ============ Feature grid ============ */ .feature-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:8px} .feature{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)} .feature h3{font-size:1.02rem;margin:0 0 .25rem;color:#1f2937} /* No crop & fixed ratio */ .feature figure{margin:.6rem 0 0!important;border-radius:12px;overflow:hidden;border:1px solid #e6e9ef;background:#fff;aspect-ratio:16/9} .feature figure img{width:100%;height:100%;object-fit:contain;object-position:center;display:block} @media (min-width:960px){.feature figure{aspect-ratio:4/3}} /* ============ News cards ============ */ #news.layout--cards .card .channels{margin-top:8px} #news.layout--cards .card .body>small+*{display:block} #news.layout--cards .card .body>small+*::first-line{font-weight:700} #news.layout--cards .card .body>:first-child:not(small){display:block} #news.layout--cards .card .body>:first-child:not(small)::first-line{font-weight:700} #news.layout--cards .card a.btn{background:#2e7d32;border-color:#2e7d32;color:#fff;text-decoration:none;padding:8px 12px;border-radius:10px} #news.layout--cards .card a.btn:hover{filter:brightness(.98)} #news.layout--cards .card:nth-of-type(5n+1) a.btn{background:#2e7d32;border-color:#2e7d32} #news.layout--cards .card:nth-of-type(5n+2) a.btn{background:#1e66d0;border-color:#1e66d0} #news.layout--cards .card:nth-of-type(5n+3) a.btn{background:#af7a1f;border-color:#af7a1f} #news.layout--cards .card:nth-of-type(5n+4) a.btn{background:#965f2d;border-color:#965f2d} #news.layout--cards .card:nth-of-type(5n+5) a.btn{background:#157f6d;border-color:#157f6d} #news.layout--cards .card .body p{margin:.45rem 0} /* ============ Forms & Flash ============ */ label{display:block;margin:.6rem 0} input[type="text"],input[type="email"],input[type="file"],input[type="url"],input[type="number"],textarea{width:100%;padding:10px;border:1px solid #cfd6dd;border-radius:12px;background:#fff;font:inherit;outline:none} textarea{min-height:120px;resize:vertical} .flash{margin: 8px 0;padding:10px 12px;border-radius:12px;background:#eefaf0;border:1px solid #c8e6cb;color:#1d5e31 ; font-weight:700; display:block;} /* ============ Footer ============ */ footer{border-top:1px solid var(--border);background:#fff;margin-top:26px} .foot-grid{display:grid;gap:18px;grid-template-columns:1.4fr .8fr;padding:18px 0} @media (max-width:640px){.foot-grid{grid-template-columns:1fr}} /* Admin tweaks → admin.css に移設（2025-09-13） */ /* ============ Readability ============ */ .container p{max-width:70ch} /* ============ Use-cases list tidy (LIST layout) ============ */ #use-cases ul,#use-cases ol{list-style:none;margin:12px 0 0;padding:0} #use-cases li{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 0!important;margin:0!important} #use-cases li+li{border-top:1px solid #e6e9ef} #use-cases li>*,#use-cases li a,#use-cases li span{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important} /* motion reduce */ @media (prefers-reduced-motion:reduce){.card,.btn{transition:none!important}} /* ============ Section-specific safe overrides ============ */ /* 主な用途：ボタン色（薄いブルーに固定） */ #use-cases a.btn{ background:#EEF6FF;border-color:#D7E6FF;color:#0B66D6;font-weight:800; } #use-cases a.btn:hover{background:#E3F0FF;text-decoration:none;filter:brightness(.99)} #use-cases a.btn:focus-visible{outline:3px solid rgba(11,102,214,.25);outline-offset:2px} /* 以前の補正を無効化（重複を回避） */ /* --- Upload preview / dropzone (Photo section) --- */ #photo .dropzone{ display:flex;align-items:center;justify-content:center;min-height:120px; border:2px dashed #CCD6E0;border-radius:12px;background:#F7F9FB;cursor:pointer; transition:border-color .15s, background .15s; margin:.5rem 0; } #photo .dropzone.is-dragover{border-color:#0B66D6;background:#EEF6FF} #photo .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #photo .thumb img{width:100%;height:100%;object-fit:cover;display:block} #photo .thumb .btn-x, #photo .thumb .btn-star{ position:absolute;top:4px;width:20px;height:20px;line-height:20px;text-align:center; font-size:12px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2); border:none;cursor:pointer; } #photo .thumb .btn-x{right:4px} #photo .thumb .btn-star{left:4px} #photo .thumb.is-primary{outline:2px solid #0B66D6; outline-offset:1px} /* エラー用フラッシュ色 */ .flash.error{background:#fff2f2;border:1px solid #f5c2c2;color:#9a1f1f} /* ===== Anchor offset fallback (JS不動時でも隠れない) ===== */ :root { --anchor-offset: 40px; } /* PC 既定 */ @media (max-width: 640px){ :root { --anchor-offset: 48px; } /* SP はやや大きめ */ } html { scroll-padding-top: 0 !important; } section[id] { scroll-margin-top: 0 !important; } section[id]::before{ content: ""; display: block; height: var(--anchor-offset); margin-top: calc(-1 * var(--anchor-offset)); visibility: hidden; } /* === Photo section overrides (append-only, safe) === */ /* カウンタの行（メタ情報） */ #photo .meta-row{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:#475569; margin:10px 0 8px; } #photo .meta-row .pill{ background:#eef2f7; border:1px solid #d9e0ea; border-radius:999px; padding:6px 10px; } /* 1段目に常に5枚：狭い幅では各サムネが少し縮む */ #photo .thumb-grid{ display:grid !important; grid-template-columns: repeat(5, minmax(48px, 64px)); gap:8px; } /* 既存の 64px 固定を上書き：グリッドのセルいっぱいに */ #photo .thumb-grid .thumb{ width:100% !important; height:auto !important; aspect-ratio: 1 / 1; } /* D&D：横長・右カラム幅に合わせつつ、5枚ぶんの幅に近づける（上限352px） */ #photo .dropzone{ width:100%; max-width:352px; /* = 64*5 + 8*4 */ min-height:220px; height:clamp(220px, 28vmin, 280px); padding:16px; /* 既存よりやや余裕 */ } /* 同意チェック（カード化＆視認性アップ） */ #photo .consent{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #d9e0ea; border-radius:10px; padding:10px 12px; } #photo .consent input[type="checkbox"]{ accent-color:#22a06b; width:18px; height:18px; } /* フラッシュは送信ボタン直前（明示テキスト用の軽いスタイルも） */ #photo .submit .flash{ margin-left:0; } #photo .flash-hint{ font-size:12px; color:#64748b; } /* === Photo: 2カラムレイアウト適用 === */ #photo .grid{ display: grid; grid-template-columns: 42% 58%; gap: 16px; align-items: start; } @media (max-width: 768px){ #photo .grid{ grid-template-columns: 1fr; } } /* （任意）D&Dをカウンターと同じ横幅＝右カラムいっぱいにする */ #photo .dropzone{ width: 100%; /* 下の1行が残っていると狭く見えるので、外します */ /* max-width:352px; */ } /* 左カラム：ラベル左・入力右（メッセージ以外） */ #photo .field.inline{ display: grid; grid-template-columns: 140px 1fr; /* ラベル幅はお好みで 120–160px */ column-gap: 12px; align-items: center; } #photo .field.inline .label{ margin: 0; font-weight: 600; color: #334155; white-space: nowrap; /* ラベルの折返し防止 */ } #photo .field.inline .input{ width: 100%; } /* モバイルは縦積みへ戻す */ @media (max-width: 768px){ #photo .field.inline{ grid-template-columns: 1fr; row-gap: 6px; } } /* ==== 導入事例：グループカード ==== */ .card.card-group { text-align:left; } .card.card-group .hero { margin: 0 0 10px; } .card.card-group .hero img { width:100%; height:auto; display:block; border-radius:10px; object-fit:cover; aspect-ratio: 16 / 9; } .card.card-group .thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .card.card-group .thumb-wrap { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; } .card.card-group .thumb { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; border-radius:8px; } .card.card-group .thumb-wrap.more::after { content: attr(data-more); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; font-weight:700; font-size:14px; } @media (max-width: 520px){ .card.card-group .thumb-wrap { width:64px; height:64px; } } /* 単枚投稿は固定比率を解除して全体を見せる */ .card.card-group.is-single .hero img{ width:100%; height:auto; aspect-ratio:auto; object-fit:contain; background:#fff; } /* 単枚でサムネは非表示（安全策） */ .card.card-group.is-single .thumbs{ display:none; } /* === 1) 代表画像エリアの高さを一定（比率で揃える） === */ .card.card-group .hero{ aspect-ratio: 4 / 3; /* ここを 16/9 にすると横長寄り。お好みでOK */ overflow: hidden; /* はみ出しカット */ } .card.card-group .hero img{ width: 100%; height: 100%; object-fit: cover; /* 複数枚グループは見栄え優先でトリミング */ } /* 単枚投稿は同じ高さを保ちつつ「全体を見せる」 */ .card.card-group.is-single .hero img{ object-fit: contain; /* レターボックス可 */ background: #fff; } /* === 2) サムネ行の“高さ”を常に確保して本文の開始位置を揃える === */ :root { --thumb-row-h: 76px; } /* サムネ1行ぶん（あなたの実測に合わせて微調整可） */ .card.card-group .thumbs{ min-height: var(--thumb-row-h); /* サムネが無くてもこの高さは確保 */ } /* 単枚投稿はサムネを非表示に見せつつ高さだけ確保 */ .card.card-group.is-single .thumbs{ visibility: hidden; /* display:none だと高さが消えるのでNG */ } /* もしサムネ画像の高さが規定とズレるときは明示的に揃える */ .card.card-group .thumb-wrap{ height: 72px; } /* 実物に合わせて 64〜80px 程度で */ .card.card-group .thumb{ height: 100%; object-fit: cover; } .hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden;} /* ===== Hero smartphone patch (minimal, motion-safe) ===== */ @media (max-width:640px){/* 1) キャンバスを少し確保（motion用の background-size/position には触れない） */ /* 2) 下抜けしないための余白（値は控えめ） */ .hero .inner{padding-top:28px; padding-bottom:36px; gap:8px;}.hero .inner > *:last-child{margin-bottom:0;}/* 3) 行ごとの角丸複製をOFF：複数行でも1つのプレートに見せる */ .hero .inner .eyebrow, .hero .inner h1, .hero .inner .lead{-webkit-box-decoration-break: slice !important; box-decoration-break: slice !important; display: inline-block; /* 複数行=単一矩形 */ max-width: 100%;}/* 4) CTAは2カラムにして縦の増加を抑える（横はみ出し無し） */ .hero .cta{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; margin-bottom:0;}.hero .cta .btn{width:100%; justify-content:center; white-space:normal; line-height:1.2; padding:10px 12px; font-size:.95rem;}} /* 1) ヒーローだけアンカー用ダミーを無効化（白帯の原因を除去） */ section.hero[id]::before, .hero::before{ height:0 !important; margin-top:0 !important; content:"" !important; display:block !important; visibility:hidden !important; } /* 2) スマホのキャンバス確保＋モーション見え方を強化（背景指定は触らない） */ @media (max-width:640px){ /* 60vh → 66vh でCTAも画像上に収める */ /* ※ --hero-scale は JS の inline var が優先。ここでは既定は触らない */ } /* ==== /PATCH ==== */ /* スマホ横向き（タッチ端末）でも、縦向きと同じ“開閉式”に統一する */ /* スマホ横向き（タッチ端末）でも、縦向きと同じ“開閉式”＋タイルに統一する */ @media (orientation: landscape) and (hover: none) and (pointer: coarse){ .nav-toggle{ display:inline-flex !important; } header.site .nav{ position:relative; gap:10px; padding:6px 0; flex-wrap:wrap; align-items:center; } /* order: keep logo + toggle on first row (landscape touch) */ header.site .nav .brand{ order:1; } .nav-toggle{ order:2; margin-left:auto; } header.site .mainnav{ position:static; width:100%; margin:.5rem 0 0; padding:0; list-style:none; background:transparent; display:none; border:0; box-shadow:none; } html.menu-open header.site .mainnav, #navc:checked ~ .mainnav{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:.25rem .5rem; order:3; width:100%; } html.menu-open header.site .nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; } header.site .mainnav > li{ margin:0; } header.site .mainnav > li > a{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:.75rem .5rem; border:0; background:transparent; box-shadow:none; border-radius:0; font-weight:700; min-height:44px; line-height:1.2; } header.site .mainnav > li > a .icon{ display:block; margin:0; } html.menu-open, body.menu-open{ overflow:initial; } } /* Hamburger icon: crisp across orientations (SVG mask) */ .nav-toggle::before{ content:"" !important; display:inline-block !important; width:20px !important; height:14px !important; background:none !important; /* 旧linear-gradientを無効化 */ background-color: currentColor !important; /* 色はテキスト色に追従 */ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / 100% 100% !important; mask: url('data:image/svg+xml;utf8,') no-repeat center / 100% 100% !important; vertical-align:middle !important; margin-right:.5em !important; } /* モバイル域ではトグル自体を表示（既存ルールがあっても上書き） */ @media (max-width:1024px){ .nav-toggle{ display:inline-flex !important; align-items:center; gap:.35em; } } /* PATCH: section-layouts v2025-09-06 BEGIN */ /* 共通フック（index側で data-list / data-item / data-thumb / data-title / data-meta / data-text / data-excerpt を付与予定） ※ 既存表示に影響を与えないよう、layout--{type} のセクション内＆data属性に限定 */ /* 1) cards：カードグリッド */ section.layout--cards [data-list]{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } section.layout--cards [data-item]{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .12s, box-shadow .12s, border-color .12s; } section.layout--cards [data-item]:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,25,40,.10); border-color:#dfe5eb; } section.layout--cards [data-thumb]{ display:block; width:100%; aspect-ratio: var(--thumb-aspect, 16/9); overflow:hidden; background:#fff; border-radius: var(--thumb-radius, 0); padding: var(--thumb-pad, 0);}section.layout--cards [data-thumb] img{ width:100%; height:100%; object-fit: var(--thumb-fit, cover); display:block; } section.layout--cards [data-body]{ padding:14px; } section.layout--cards [data-title]{ display:block; font-size:1.05rem; margin:.35rem 0 .3rem; color:#1f2937; font-weight:750;} section.layout--cards [data-meta]{ display:inline-block; margin:.1rem 0 .25rem; color:#6b7280; font-size:.9rem; } /* 2) list：左サムネの行型 */ section.layout--list [data-list]{ display:block; } section.layout--list [data-item]{ display:flex; gap:12px; padding:10px 0; border-top:1px solid #e6e9ef; align-items:flex-start; } section.layout--list [data-item]:first-child{border-top:0; } section.layout--list [data-thumb]{ flex:0 0 var(--thumbw,96px); width:var(--thumbw,96px); height:auto; aspect-ratio: var(--thumb-aspect, 3/2); border-radius: var(--thumb-radius, 8px); overflow:hidden; background:#fff; }section.layout--list [data-thumb] img{ width:100%; height:100%; object-fit: var(--thumb-fit, cover); } section.layout--list [data-title]{ font-weight:700; color:#111827; font-weight:750;} section.layout--list [data-meta]{ color:#6b7280; font-size:.9rem; } section.layout--list [data-excerpt]{ -webkit-line-clamp:2; line-clamp:2; } /* 3) media：左サムネ＋右テキスト（少し余白広め） */ section.layout--media [data-list]{ display:block; container-type: inline-size;} section.layout--media [data-item]{ display:grid; grid-template-columns: var(--thumbw, 140px) minmax(0,1fr); gap: var(--media-gap, 14px); padding:12px 0; align-items:start; } @media (max-width:640px){section.layout--media [data-item]{grid-template-columns:1fr;}} section.layout--media [data-thumb]{ width: var(--thumbw, 140px); aspect-ratio: var(--thumb-aspect, 4/3); border-radius: var(--thumb-radius, 10px); overflow:hidden; background:#fff; grid-row: var(--thumb-row, auto); align-self: var(--thumb-align, stretch);}section.layout--media [data-thumb] img{ width:100%; height:100%; object-fit: var(--thumb-fit, cover); } section.layout--media [data-title]{ font-size:1.05rem; font-weight:700; } section.layout--media [data-meta]{ color:#6b7280; font-size:.9rem; } /* 4) compact：情報密度高め（行間詰め） */ section.layout--compact [data-list]{ display:block; } section.layout--compact [data-item]{ display:flex; gap:10px; padding:8px 0; border-top:1px dashed #e5e7eb; } section.layout--compact [data-item]:first-child{border-top:0; } section.layout--compact [data-thumb]{ flex: 0 0 var(--thumbw, 72px); width: var(--thumbw, 72px); height:48px; border-radius:6px; overflow:hidden; }section.layout--compact [data-thumb] img{ width:100%; height:100%; object-fit:cover; } section.layout--compact [data-title]{ font-weight:700; } section.layout--compact [data-meta]{ color:#6b7280; font-size:.85rem; } section.layout--compact [data-excerpt]{ -webkit-line-clamp:2; line-clamp:2; } /* 5) feature：先頭だけ大きく＋以降はリスト */ section.layout--feature [data-list]{ display:block; } section.layout--feature [data-item]:first-child{background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:10px; } section.layout--feature [data-item]:first-child [data-thumb]{ width:100%; aspect-ratio:16/9; display:block; overflow:hidden; }section.layout--feature [data-item]:first-child [data-thumb] img{ width:100%; height:100%; object-fit:cover; } section.layout--feature [data-item]:first-child [data-title]{ font-size:1.2rem; font-weight:800; padding:10px 14px 0; display:block; } section.layout--feature [data-item]:first-child [data-body]{ padding:0 14px 12px; } section.layout--feature [data-item]:not(:first-child){display:flex; gap:10px; padding:8px 0; border-top:1px solid #e6e9ef; } section.layout--feature [data-item]:not(:first-child) [data-thumb]{ flex: 0 0 var(--thumbw, 88px); width: var(--thumbw, 88px); height:56px; border-radius:8px; overflow:hidden; }section.layout--feature [data-item]:not(:first-child) [data-thumb] img{ width:100%; height:100%; object-fit:cover; } /* 6) timeline：縦ライン＋ドット */ section.layout--timeline [data-list]{ position:relative; margin-left:14px; padding-left:18px; } section.layout--timeline [data-list]::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:#e5e7eb; border-radius:2px; } section.layout--timeline [data-item]{ position:relative; padding:10px 0; } section.layout--timeline [data-item]::before{ content:""; position:absolute; left:-19px; top:18px; width:10px; height:10px; border-radius:50%; background:#0b66d6; box-shadow:0 0 0 3px #fff; } section.layout--timeline [data-meta]{ color:#6b7280; font-size:.9rem; } /* 7) tiles：正方タイル（画像主体） */ section.layout--tiles [data-list]{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } section.layout--tiles [data-item]{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; } section.layout--tiles [data-thumb]{ width:100%; aspect-ratio:1/1; display:block; overflow:hidden; }section.layout--tiles [data-thumb] img{ width:100%; height:100%; object-fit:cover; } /* 8) masonry：CSSカラムの簡易版（JSなしフォールバック） */ section.layout--masonry [data-list]{ column-width:320px; column-gap:16px; } @media (max-width:640px){section.layout--masonry [data-list]{column-width:220px;}} section.layout--masonry [data-item]{break-inside:avoid; margin:0 0 16px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; } section.layout--masonry [data-thumb]{ width:100%; display:block; overflow:hidden; }section.layout--masonry [data-thumb] img{ width:100%; height:auto; display:block; } /* 9) table：表形式（データ量多い一覧に） */ section.layout--table table[data-table]{ table-layout:fixed; width:100%; border-collapse:collapse; } section.layout--table [data-table] th, section.layout--table [data-table] td{ padding:8px 10px; border-bottom:1px solid #e5e7eb; } section.layout--table [data-table] th{ text-align:left; font-weight:700; color:#374151; background:#f8fafc; } section.layout--table [data-table] td.thumb{ width:80px; } section.layout--table [data-table] td.thumb img{ width:72px; height:48px; object-fit:cover; border-radius:6px; border:1px solid #e5e7eb; background:#f1f5f9; } /* 10) strip：横帯の積み重ね */ section.layout--strip [data-list]{ display:block; } section.layout--strip [data-item]{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e6e9ef; border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); margin:8px 0; } section.layout--strip [data-thumb]{ width: var(--thumbw, 88px); aspect-ratio:16/9; border-radius:8px; overflow:hidden; flex: 0 0 var(--thumbw, 88px); background:#fff; }section.layout--strip [data-thumb] img{ width:100%; height:100%; object-fit:cover; } section.layout--strip [data-title]{ font-weight:800; } section.layout--strip [data-meta]{ color:#6b7280; font-size:.9rem; } /* PATCH: section-layouts v2025-09-06 END */ /* ==== [ADD 2025-09-12] MEDIA layout presets (normalized; variable-only) ==== */ /* 目的：レイアウトはそのまま、値の“受け口”だけを切り替える1トークン運用。 影響：.opt-media-* を付けた section.layout--media のみ。既定は不変。 */ /* square：正方サムネ（デフォルト同等） */ section.layout--media.opt-media-square{ --thumb-aspect: 1/1; --thumb-row: auto; --thumb-align: start; /* 幅は既定（--thumbw: clamp(120px, var(--thumb-fluid), 200px)）を使用 */ } @media (min-width:641px){ section.layout--media.opt-media-square{ /* PC default dials (moved from #news): square preset owns the values */ --thumbw: clamp(120px, var(--thumb-fluid, 32vw), 200px); --media-gap: 16px; } } /* balanced：やや横長（4/3）。テキストとのバランス重視 */ section.layout--media.opt-media-balanced{ --thumb-aspect: 4/3; --thumb-row: auto; --thumb-align: start; /* 必要なら将来 --thumb-fluid の係数だけ変更（単位は既存に準拠） */ } /* span：サムネを縦に2行ぶち抜き（メタ+タイトルの背丈に合わせる用途） */ section.layout--media.opt-media-span{ --thumb-aspect: 4/3; --thumb-row: 1 / span 2; /* ← 右側が2行以上になる場合に段差を抑える */ --thumb-align: start; } /* ==== [/ADD MEDIA layout presets] ==== */ /* トークンクラスは section 要素に付与される想定（例：
） */ /* 既存スタイルは維持し、必要なときだけ上書き（セレクタの詳細度を上げ過ぎない） */ /* 受け口：Excerpt clamp（既定3、トークンで上書き） */ section[class*="layout--"] [data-excerpt]{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: var(--excerpt-lines, 3); line-clamp: var(--excerpt-lines, 3); overflow:hidden; } /* folded: excerpt-dots inline fix (LIST/MEDIA only; keeps clamp) */ #news :where(.layout--list,.layout--media) article.card [data-excerpt] + :is(p,div):not(:has(img,figure,picture)){ display:inline !important; margin:0 !important; } /* 画像や figure/picture を含む1要素目はブロックのまま（重なり防止） */ #news :where(.layout--list,.layout--media) article.card [data-excerpt] + :is(p,div):has(img,figure,picture){ display:block !important; margin:.25rem 0 !important; } /* --- Title clamp (opt-title-*) --- */ section[class*="layout--"].opt-title-1 [data-title], section[class*="layout--"].opt-title-2 [data-title], section[class*="layout--"].opt-title-3 [data-title], section[class*="layout--"].opt-title-4 [data-title], section[class*="layout--"].opt-title-5 [data-title], section[class*="layout--"].opt-title-6 [data-title]{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } section[class*="layout--"].opt-title-1 [data-title]{ -webkit-line-clamp:1; line-clamp:1; } section[class*="layout--"].opt-title-2 [data-title]{ -webkit-line-clamp:2; line-clamp:2; } section[class*="layout--"].opt-title-3 [data-title]{ -webkit-line-clamp:3; line-clamp:3; } section[class*="layout--"].opt-title-4 [data-title]{ -webkit-line-clamp:4; line-clamp:4; } section[class*="layout--"].opt-title-5 [data-title]{ -webkit-line-clamp:5; line-clamp:5; } section[class*="layout--"].opt-title-6 [data-title]{ -webkit-line-clamp:6; line-clamp:6; } /* --- Excerpt tokens: set CSS var (--excerpt-lines) --- */ section[class*="layout--"].opt-excerpt-0{ --excerpt-lines: 0; } /* 0=非表示相当 */ section[class*="layout--"].opt-excerpt-1{ --excerpt-lines: 1; } section[class*="layout--"].opt-excerpt-2{ --excerpt-lines: 2; } section[class*="layout--"].opt-excerpt-3{ --excerpt-lines: 3; } section[class*="layout--"].opt-excerpt-4{ --excerpt-lines: 4; } section[class*="layout--"].opt-excerpt-5{ --excerpt-lines: 5; } section[class*="layout--"].opt-excerpt-6{ --excerpt-lines: 6; } /* --- Date show/hide --- */ section[class*="layout--"].opt-date-off [data-meta]{ display:none !important; } section[class*="layout--"].opt-date-on [data-meta]{ display:initial; } /* 明示ON */ /* --- Thumb ratio tokens → aspect-ratio 受け口 --- */ section[class*="layout--"].opt-thumb-16x9 { --thumb-aspect: 16/9; } section[class*="layout--"].opt-thumb-4x3 { --thumb-aspect: 4/3; } section[class*="layout--"].opt-thumb-1x1 { --thumb-aspect: 1/1; } section[class*="layout--"].opt-thumb-auto {--thumb-aspect: auto; } /* 受け口適用（既定は従来値。未指定時は影響なし） */ section.layout--cards [data-thumb]{ aspect-ratio: var(--thumb-aspect, 16/9); border-radius: var(--thumb-radius, 0); padding: var(--thumb-pad, 0);}section.layout--feature [data-item]:first-child [data-thumb]{ aspect-ratio: var(--thumb-aspect, 16/9); }section.layout--tiles [data-thumb]{ aspect-ratio: var(--thumb-aspect, 1/1); }section.layout--strip [data-thumb]{aspect-ratio: var(--thumb-aspect, 16/9); } /* --- Thumb width tokens for LIST（MEDIA撤廃） --- */ /* SENTINEL: opt-thumbw-* は後勝ち回避のため使用禁止（LISTのみ許容）。 MEDIAでの幅直指定（opt-thumbw-* / style="--thumbw:…") は S1.1 により無効化されます。 ※このコメントは告知のみで、挙動は一切変更しません。 */ section.layout--list.opt-thumbw-72{ --thumbw:72px; }section.layout--list.opt-thumbw-96{ --thumbw:96px; }section.layout--list.opt-thumbw-120{ --thumbw:120px; }section.layout--list.opt-thumbw-140{ --thumbw:140px; } /* --- Cards columns tokens --- */ @media (min-width: 1024px){ section.layout--cards.opt-cols-lg-1 [data-list]{ grid-template-columns: repeat(1, minmax(0,1fr)); } section.layout--cards.opt-cols-lg-2 [data-list]{ grid-template-columns: repeat(2, minmax(0,1fr)); } section.layout--cards.opt-cols-lg-3 [data-list]{ grid-template-columns: repeat(3, minmax(0,1fr)); } section.layout--cards.opt-cols-lg-4 [data-list]{ grid-template-columns: repeat(4, minmax(0,1fr)); } section.layout--cards.opt-cols-lg-5 [data-list]{ grid-template-columns: repeat(5, minmax(0,1fr)); } section.layout--cards.opt-cols-lg-6 [data-list]{ grid-template-columns: repeat(6, minmax(0,1fr)); } } @media (min-width: 768px) and (max-width: 1023.98px){ section.layout--cards.opt-cols-md-1 [data-list]{ grid-template-columns: repeat(1, minmax(0,1fr)); } section.layout--cards.opt-cols-md-2 [data-list]{ grid-template-columns: repeat(2, minmax(0,1fr)); } section.layout--cards.opt-cols-md-3 [data-list]{ grid-template-columns: repeat(3, minmax(0,1fr)); } section.layout--cards.opt-cols-md-4 [data-list]{ grid-template-columns: repeat(4, minmax(0,1fr)); } section.layout--cards.opt-cols-md-5 [data-list]{ grid-template-columns: repeat(5, minmax(0,1fr)); } section.layout--cards.opt-cols-md-6 [data-list]{ grid-template-columns: repeat(6, minmax(0,1fr)); } } @media (max-width: 640px){ section.layout--cards.opt-cols-sm-1 [data-list]{ grid-template-columns: repeat(1, minmax(0,1fr)); } section.layout--cards.opt-cols-sm-2 [data-list]{ grid-template-columns: repeat(2, minmax(0,1fr)); } section.layout--cards.opt-cols-sm-3 [data-list]{ grid-template-columns: repeat(3, minmax(0,1fr)); } section.layout--cards.opt-cols-sm-4 [data-list]{ grid-template-columns: repeat(4, minmax(0,1fr)); } section.layout--cards.opt-cols-sm-5 [data-list]{ grid-template-columns: repeat(5, minmax(0,1fr)); } section.layout--cards.opt-cols-sm-6 [data-list]{ grid-template-columns: repeat(6, minmax(0,1fr)); } } /* 目的：layout--list で .card の見た目（角丸・影・枠）を無効化し、行レイアウトに合う余白へ。 既存の cards / 他セクションには影響しないよう、強くスコープしています。 */ section.layout--list [data-item].card{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; overflow:visible; transform:none !important; } section.layout--list [data-item].card:hover{ transform:none !important; box-shadow:none !important; border-color:transparent !important; } section.layout--list [data-item].card:focus-within{ outline:none !important; } /* 内側の余白は本文側に集約。既定の .card .body の14pxは打ち消す */ section.layout--list [data-item].card .body{padding:0 !important; } /* サムネの角丸は list 側で指定済み（8px） */ section.layout--list [data-thumb]{ border-radius: var(--thumb-radius, 8px); } /* 最初の要素間の間隔を整える（既存marginの影響を最小化） */ section.layout--list [data-meta]{ margin:0 0 2px 0; } section.layout--list [data-title]{ margin:0 0 4px 0; } section.layout--list [data-excerpt]{ margin:0; } /* list / media / compact のとき、#news の cards系ルールより強くする */ #news.layout--list [data-list], #news.layout--media [data-list], #news.layout--compact [data-list]{ display:block; } /* list：行レイアウトを明示（#news固有のcards装飾を無力化） */ #news.layout--list [data-item]{ display:flex; gap:12px; padding:10px 0; border-top:1px solid #e5e7ef; align-items:flex-start; } #news.layout--list [data-item]:first-child{border-top:0; } #news.layout--list [data-thumb]{ flex:0 0 var(--thumbw,96px); width:var(--thumbw,96px); aspect-ratio: var(--thumb-aspect, 3/2); border-radius:8px; overflow:hidden; }#news.layout--list [data-thumb] img{ width:100%; height:100%; object-fit:cover; } /* #news内の cards 用装飾をlist時は打ち消し（背景/枠/影/内側余白） */ #news.layout--list .card{ background:transparent; border:0; box-shadow:none; border-radius:0; } #news.layout--list .card .body{ padding:0; } /* ==== [HARDEN] Cards styling applies only when .layout--cards is present ==== */ /* Neutralize .card chrome when section is not cards layout (affects only data-managed items) */ section:not(.layout--cards) [data-item].card{ background:transparent; border:0; box-shadow:none; border-radius:0; } section:not(.layout--cards) [data-item].card .body{ padding:0; } /* Hide excerpt & 'read more' button in cards layout; keep link button */ /* When link is moved under the body (JS), give spacing */ #news.layout--cards a.btn-link.after-more{ margin-top:.6rem; display:inline-flex; } /* ① CARD形式：本文ブロック([data-more])に左右余白を付与して可読性を改善（LIST等へは影響なし） */ #news.layout--cards article.card [data-more]{ padding: 0 14px 14px; /* 上0 / 左右14 / 下14 */ box-sizing: border-box; } /* ② LIST形式：リンク色の復帰＆「続きを読む」を軽量なピル型へ（LIST限定・既存JSは変更なし） */ #news.layout--list a.btn-link{ display:inline-flex; align-items:center; gap:.4rem; background: var(--btn-link-bg, var(--brand-500, #2e7d32)); /* 既定が無ければ緑でフェイルセーフ */ color:#fff; border:1px solid transparent; padding:.42rem .72rem; border-radius:9999px; font-weight:800; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.06); } #news.layout--list a.btn-link:hover{ filter:brightness(.98); text-decoration:none; } /* LIST：「続きを読む」を軽量化（見た目のみ調整） */ #news.layout--list [data-inline-actions] .more-btn{ background:#fff; color:#0f172a; border:1px solid #dbe3ea; padding:.36rem .66rem; border-radius:9999px; font-weight:600; /* 太さを抑える */ box-shadow:0 1px 0 rgba(0,0,0,.04); } #news.layout--list [data-inline-actions] .more-btn:hover{ background:#f6f9fc; text-decoration:none; } /* LISTの右側余白はJSが--actionsw:0を与えたカードで自然にゼロ化。フォールバックとして明示。 */ #news.layout--list [data-excerpt]{ padding-right: var(--actionsw, 0px); } /* ==== /PATCH ==== */ #photo .thumb{ position: relative; /* ★ 絶対配置(★/×)の基準にする */ overflow: hidden; border-radius: 8px; cursor: grab; } #photo .thumb.dragging{ opacity:.85; cursor:grabbing; } #photo .thumb .btn-x, #photo .thumb .btn-star{ z-index: 2; } /* ボタンを最前面に */ /* 既存の a.btn-link ルールや .btn の共通ルールより“確実に後勝ち”させるため、 [data-inline-actions] a.btn.btn-link + !important で上書きします。 */ #news.layout--list [data-inline-actions] a.btn.btn-link{ background:#EEF6FF !important; /* 薄い青地 */ border:1px solid #D7E6FF !important; /* 淡いブルー枠 */ color:#0B66D6 !important; /* 青テキスト */ padding:.30rem .60rem !important; /* 細身 */ border-radius:9999px; font-weight:600; line-height:1.1; box-shadow:0 2px 6px rgba(11,102,214,.08); text-decoration:none; } #news.layout--list [data-inline-actions] a.btn.btn-link:hover{ background:#E3F0FF !important; text-decoration:none; } /* 高さ感を合わせるため、続きを読むもわずかにスリム（LISTのみ） */ #news.layout--list [data-inline-actions] .more-btn{ padding:.30rem .56rem; font-weight:500; } /* ==== /PATCH ==== */ /* PC: サムネ左・本文／ボタン右。展開本文[data-more]も右カラムに配置 */ /* SP: 展開本文は全幅（既存のLIST/CARDSには影響なし） */ /* ==== /PATCH ==== */ /* 目的：展開“前”でも本文が画像に重ならないよう、右カラムを明示。 既存の LIST/CARDS・他セクション・写真投稿(#photo)には影響しません。 */ /* PC：サムネ列を固定し、本文側(minmax)で適切に折返し */ /* SP：全幅展開（既存維持）＋念のため本文の折返しを保証 */ /* --- MEDIA専用：ボタンを軽めのピル型に（LISTの青細身と揃え） --- */ #news.layout--media [data-inline-actions]{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-start; } #news.layout--media [data-inline-actions] .more-btn{ background:#fff; color:#0f172a; border:1px solid #dbe3ea; padding:.30rem .56rem; border-radius:9999px; font-weight:500; box-shadow:0 1px 0 rgba(0,0,0,.04); } #news.layout--media [data-inline-actions] a.btn.btn-link{ background:#EEF6FF; border:1px solid #D7E6FF; color:#0B66D6; padding:.30rem .60rem; border-radius:9999px; font-weight:600; line-height:1.1; text-decoration:none; box-shadow:0 2px 6px rgba(11,102,214,.08); } #news.layout--media [data-inline-actions] a.btn.btn-link:hover{ background:#E3F0FF; text-decoration:none; } /* ==== /PATCH ==== */ /* ==== /FINAL FIX ==== */ /* NEWS: 見出し([data-title])を太字に */ :is(#news, section#news).layout--list [data-title], :is(#news, section#news).layout--media [data-title], :is(#news, section#news).layout--cards [data-title]{ font-weight: 700; } /* ==== /PATCH ==== */ /* ===== [NEWS] SPスコープ整理（CARDを除外） ===== */ @media (max-width:640px){/* 汎用SP 2カラム指定は LIST / MEDIA に限定 */ #news.layout--list article.card[data-item]{display: grid; grid-template-columns: var(--thumbw,96px) 1fr;}#news.layout--list article.card[data-item] .body{grid-column: 1 / -1; min-width: 0;}#news.layout--list article.card[data-item] [data-inline-actions]{grid-column: 2 / -1; min-width: 0;}/* ===== CARD 専用：SPは1カラム化＋アクションぶち抜き ===== */ #news.layout--cards article.card[data-item]{display: grid; grid-template-columns: 1fr; gap: var(--gap,12px);}/* .body 内にアクションがある構造でも grid の直下に昇格させる */ #news.layout--cards article.card[data-item] .body{display: contents; /* 影響範囲：この階層のみ */}/* アクション行は本文と同幅（ぶち抜き）＆中央寄せ */ #news.layout--cards article.card[data-item] [data-inline-actions]{grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; position: static !important; /* 旧absolute残骸対策（限定適用） */ min-width: 0;}/* サムネはフル幅 */ #news.layout--cards article.card[data-item] .thumb{grid-column: 1 / -1;} #news.layout--cards article.card[data-item] .thumb img{width: 100%; height: auto; display: block; object-fit: cover;}} /* === [NEWS] SP×CARD：ボタン文字を中央寄せ === */ @media (max-width:640px){/* ボタン本体（a / button / .btn）が幅いっぱいのときに中央寄せ */ #news.layout--cards [data-inline-actions] a, #news.layout--cards [data-inline-actions] button, #news.layout--cards [data-inline-actions] .btn{text-align: center; /* 左寄りを解除して中央に */ display: inline-flex; /* アイコン付きでも中央に配置しやすい */ justify-content: center; /* 横方向の中央寄せ */ align-items: center; /* 縦方向の中央寄せ */ width: 100%; /* すでに全幅ならこのままでOK */ gap: .5em; /* アイコン＋テキストの間隔 */}/* もしボタン内にラベル要素があり、それがflexで左寄せされている場合の保険 */ #news.layout--cards [data-inline-actions] .btn > *{justify-content: center;}} /* 目的：SPのLISTで「続きを読む」後に、画像を横幅いっぱいで表示し、本文とボタンを全幅の下段に配置する。 影響：#news.layout--list × SP × 拡張時のみ。PC/他レイアウト/他セクションは非対象。 */ @media (max-width:640px){/* 拡張状態の検知：.is-thumb-expanded もしくは [data-more]:not([hidden]) */ #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))){display: grid !important; grid-template-columns: 1fr !important; /* ← 1カラム全幅に戻す */ gap: 12px; align-items: start;}/* 画像は全幅：引き伸ばしなし（比率は自然に） */ #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) [data-thumb]{grid-column: 1 / -1 !important; width: 100% !important; aspect-ratio: var(--thumb-aspect-list-expanded, auto) !important;}#news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) [data-thumb] img{width: 100% !important; height: auto !important; /* ← 歪み防止（引き伸ばさない） */ object-fit: contain; /* 画像の全体を見せたい場合。必要に応じて cover に変更可 */ display: block;}/* 本文と展開本文は全幅の下段 */ #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) .body, #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) [data-more]{grid-column: 1 / -1 !important; min-width: 0;}/* ボタン行は全幅・中央寄せ（既存のabsolute等は無効化） */ #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) [data-inline-actions]{grid-column: 1 / -1 !important; position: static !important; display: flex; justify-content: center; gap: .5rem; margin-top: 8px; width: 100%; box-sizing: border-box;}} /* ==== /FIX ==== */ @media (max-width:640px){/* 拡張時のみ：2カラム維持（左カラム=サムネ幅、右カラム=本文） */ #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))){grid-template-columns: var(--thumbw,96px) 1fr !important; align-items: start; gap: var(--gap, 12px);}/* 左カラムのサムネは幅そのまま、比率だけ下げて“縦に伸ばす” */ #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) [data-thumb]{grid-column: 1 !important; width: var(--thumbw,96px) !important; max-width: var(--thumbw-sp-max,44vw); aspect-ratio: var(--thumb-aspect-list-expanded, 3/4) !important; /* ←お好みで 1/1, 4/3, 3/4 等 */ overflow: hidden; border-radius: var(--radius, 8px);}#news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) [data-thumb] img{width: 100% !important; height: 100% !important; object-fit: cover; /* “雰囲気重視”なら cover、全体見せたいなら contain に変更可 */ display: block;}/* 本文は右カラム、ボタン行は2カラムぶち抜き中央寄せ */ #news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) .body{grid-column: 2 !important; min-width: 0;}#news.layout--list article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden]))) [data-inline-actions]{grid-column: 1 / -1 !important; position: static !important; display: flex; justify-content: center; gap: .5rem; margin-top: 8px; width: 100%; box-sizing: border-box;}} /* ───── MEDIA：PC（ヒーローだけど“巨大すぎ防止”＆見切れ無し） ───── */ @media (min-width:641px){ /* layout--media と data-media の両方を受ける */ #news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])){ display: grid !important; grid-template-columns: 1fr !important; gap: var(--gap,14px) !important; } /* .body を昇格させて grid-column 指定を効かせる */ #news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) .body{ display: contents !important; } /* 旧float/absoluteの保険（展開時だけ） */ #news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) *{ float:none !important; } #news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-inline-actions]{position: static !important; } /* 画像＝中央寄せ・見切れ無し・巨大すぎ防止 */ #news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-thumb]{ grid-column: 1 / -1 !important; width: min(100%, var(--media-hero-maxw, 980px)) !important; margin-inline: auto; /* 中央揃え */ aspect-ratio: auto !important; /* 画像の元比率に追従 */ overflow: visible; }#news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-thumb] img{ width: 100% !important; height: auto !important; /* ← 見切れ無し（contain 相当） */ object-fit: contain !important; max-height: var(--media-hero-maxh, 72vh); /* 画面高で抑制 */ display: block; } /* タイトル/本文/続きを読む/ボタン＝全幅 & ボタン中央寄せ */ #news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) :is([data-title],[data-excerpt],[data-more],[data-inline-actions]){ grid-column: 1 / -1 !important; min-width: 0; } #news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-inline-actions]{ display:flex !important; justify-content:center !important; gap:.5rem; margin-top: 8px; } } /* ───── MEDIA：SP（確実に全幅・見切れ無し） ───── */ @media (max-width:640px){#news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-thumb]{width: 100% !important; aspect-ratio: auto !important;}#news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-thumb] img{width: 100% !important; height: auto !important; object-fit: contain !important; max-height: var(--media-hero-maxh-sp, 60vh);}#news.opt-media-hero :is(.layout--media,[data-media]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-inline-actions]{display:flex !important; justify-content:center !important; gap:.5rem; margin-top:8px;}} /* ───── LIST：拡張時の“縦伸び”を控えめにするダイヤル（必要なら） ───── */ @media (max-width:640px){#news.opt-media-hero :is(.layout--list,[data-list]) article.card[data-item]:is(.is-thumb-expanded, :has([data-more]:not([hidden])))[data-item] [data-thumb]{/* 高さの上限を設けて“やり過ぎ”を抑える。値だけで微調整可 */ max-height: var(--list-expanded-maxh, 44vh);}} /* ==== /OVERRIDE ==== */ /* === [SWAP STEP1 - FIX v2 | 2025-09-09] PC only / #news only 目的: PCの「続きを読む」展開後だけを LIST ⇄ MEDIA で入れ替え。 注意: display:contents は使用せず、.body 等を明示的に grid-column へ配置。 影響: #news の article.card が .is-expanded もしくは .is-thumb-expanded の時のみ。 ================================================================= */ /* === [/SWAP STEP1 - FIX v2] === */ /* === [PC専用・MEDIA拡張のみ配置確定] 画像=左／右上=見出し+ボタン／その下=本文・展開 === */ /* ==== PC×MEDIA：拡張時 左画像の“割合つまみ”を設置（既存を壊さない最小差分） ==== */ /* 使い方：style.css の末尾にそのまま追記。%を変えたい場合は --media-expanded-left を変更 */ /* ==== END ================================================================ */ /* removed: first-line bold (LIST/MEDIA) */ /* ==== SP(<=640px)｜MEDIA：画像→見出し→ボタンの縦並び ==== */ /* ==== SP(<=640px)｜MEDIA：サムネ画像サイズの“つまみ” ==== */ /* ==== PC×MEDIA：拡張時も 2カラム化＋ボタンを見出し直下へ ==== */ /* ===== END ===== */ /* ==== PC×MEDIA：拡張時は「左1列＋右4行」レイアウト ==== */ /* ==== PC×LIST：ボタンを見出しの右横に（被らない・オーバーレイ禁止） ==== */ @media (min-width:641px){ /* LISTカードを3カラム化：左=サムネ / 中=本文 / 右=ボタン */ /* [STEP L] PC×LIST 正規化ブロック（トークン接続・見た目ゼロ差分） */ #news.layout--list article.card{display:grid !important; grid-template-columns: var(--pc-list-thumbw, clamp(72px,10vw,120px)) 1fr auto !important; gap: var(--pc-list-gap, 12px) var(--news-gap-pc, 16px) !important; /* row / column gap */ align-items:start !important; } /* 左サムネは行をまたぐ */ #news.layout--list article.card [data-thumb]{ grid-column:1 !important; grid-row:1 / -1 !important; margin:0 !important; } /* 本文（見出しを含む）は中カラムの先頭行 */ #news.layout--list article.card .body{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; margin:0 !important; } /* ボタンは右カラム／見出し行の右横へ。絶対配置を無効化 */ #news.layout--list article.card [data-inline-actions]{ grid-column:3 !important; grid-row:1 !important; position:static !important; /* オーバーレイ禁止 */ margin:0 !important; align-self:start !important; display:flex !important; gap:.5rem !important; white-space:nowrap; /* ボタン折返し防止（不要なら削除可） */ } /* 見出し横の空きが出ないよう右逃げパディングは殺す */ #news.layout--list article.card [data-excerpt]{ padding-right:0 !important; } /* “続きを読む”は本文の次行全幅に */ #news.layout--list article.card [data-more]{ grid-column:2 / -1 !important; grid-row:auto !important; margin-top:.5rem !important; } } /* ========================================================================== [STEP F] PC×MEDIA 正規化ブロック（内蔵化・一元変数） 目的：#news.layout--media（PC）における拡張時のレイアウトを 左＝サムネ縦ぶち抜き、右＝①日付 ②見出し ③ボタン ④本文 に固定。 既存の外付けFIXはこのブロックが後勝ちで内製化します。 注意：他セクション／SP表示には影響しません（@media >=641px）。 変数：必要に応じて値だけを調整してください。 ========================================================================== */ @media (min-width:641px){ /* === STEP F: 展開時（PC×MEDIA）— 左=サムネ縦ぶち抜き／右=①日付 ②見出し ③ボタン ④本文 === */ /* 0) 変数の受け口（無ければフォールバック） */ #news.layout--media{/* Canonical PC MEDIA dials (finalized) */ --pc-media-gap: 16px; --pc-media-left-min: 260px; --pc-media-left-max: 32vw; /* Legacy aliases (read-only) */ --media-gap: var(--pc-media-gap); --media-left-min: var(--pc-media-left-min); --media-left-max: var(--pc-media-left-max); } /* 1) 展開トリガーの広域検知（JSやDOM差異を吸収） */ #news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])){display:grid !important; grid-template-columns: minmax(var(--pc-media-left-min), var(--pc-media-left-max)) minmax(0,1fr); grid-template-rows: auto auto !important; /* ① body ② more */ gap: var(--pc-media-gap) !important; align-items:start !important; grid-auto-rows:auto !important; } /* 2) 左＝サムネは縦ぶち抜き */ #news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])) [data-thumb]{ grid-column:1 !important; grid-row:1 / -1 !important; float:none !important; margin:0 !important; padding:0 !important; aspect-ratio:auto !important; justify-self: stretch !important; align-self: stretch !important; width: 100% !important; max-width: none !important; min-width: 0 !important;}#news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])) [data-thumb] > *{ display:block !important; width:100% !important; height:auto !important; aspect-ratio:auto !important; object-fit: var(--pc-media-thumb-fit, cover) !important;} /* 3) 右＝①日付 ②見出し ③ボタン ④本文（LIST側のスコープ漏れを無効化） */ #news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])) [data-meta]{ grid-column:2 !important; grid-row:1 !important; margin-top:0 !important; } #news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])) :is(.is-expanded, [data-title],[data-excerpt]){ grid-column:2 !important; grid-row:2 !important; padding-right:0 !important; min-width:0 !important; } #news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])) [data-inline-actions]{ grid-column:2 !important; grid-row:3 !important; position:static !important; margin:.5rem 0 0 !important; display:inline-flex !important; gap:.5rem !important; flex-wrap:wrap !important; align-self:start !important; } #news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])) .body{ /* 右カラム上段に「要約ブロック（日時/見出し/抜粋/ボタン）」を固定 */ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; margin:0 !important; } #news.layout--media article.card[data-item]:is(.is-expanded, [data-expanded], :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded=\"true\"])) [data-more]{ /* 展開本文は必ず要約ブロックの下へ */ grid-column:2 !important; grid-row:2 !important; width:100% !important; box-sizing:border-box; margin-top:.5rem !important; } #news.layout--media article.card[data-item]:is(.is-expanded, .is-thumb-expanded, [data-expanded], :has([data-more][hidden])) [data-more][hidden]{display:none !important; } /* === STEP F（内包・再注入） === */ #news.layout--media article.card[data-item]:is(.is-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-thumb]{ width:100% !important; justify-self:stretch !important; align-self:stretch !important; max-width: none !important; min-width: 0 !important;}#news.layout--media article.card[data-item]:is(.is-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])) [data-thumb] > *{ height:100% !important; object-fit: var(--pc-media-thumb-fit, cover) !important; width: 100% !important;} #news.layout--media article.card[data-item]:is(.is-expanded, :has([data-more]:not([hidden])), :has([data-inline-actions] [aria-expanded="true"])){ column-gap: var(--pc-media-gap, 16px) !important; } /* === /STEP F（内包・再注入） === */ } /* === [/STEP F] ============================================================ */ /* ========================================================================== [STEP I] SP×MEDIA 正規化ブロック（#news 限定・追記のみ・後勝ち） 目的：SP幅（≤640px）で #news.layout--media の並びを ①見出し → ②画像 → ③日付 → ④ボタン → ⑤本文 → ⑥展開本文 に固定。 画像の“縦方向に途切れがち”を緩和し、一回り大きく見せる調整つまみを提供。 注意：他レイアウト（LIST/CARDS 等）・他セクションには影響しません。 既存のJS/HTML構造に依存せず、CSSだけで順序を安定化。 ========================================================================== */ @media (max-width:640px){ /* 一元変数（必要に応じて値だけ調整） */ #news.layout--media{ --sp-media-gap: 10px; --sp-media-thumb-min: 220px; /* 画像の最小幅 */ --sp-media-thumb-w: 86vw; /* 画像の基準幅（%） */ --sp-media-thumb-max: 480px; /* 画像の最大幅 */ --sp-media-thumb-maxh: 62vh; /* 画像の最大高（縦切れ対策＆“一回り大きく”表示） */ } /* 記事カード＝単純1カラムのグリッド化（順序を安定化） */ #news.layout--media article.card[data-item]{display:grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto auto auto auto auto !important; /* ①〜⑥ */ gap: var(--sp-media-gap) !important; align-items:start !important; } /* ② 画像：中央寄せ・幅は clamp、縦の見切れ抑制用に max-height と contain を採用 */ #news.layout--media article.card[data-item] [data-thumb]{ grid-column: 1 !important; grid-row: 2 !important; width: clamp(var(--sp-media-thumb-min), var(--sp-media-thumb-w), var(--sp-media-thumb-max)) !important; margin: 0 auto .25rem !important; /* 中央寄せ＋下マージン少し */ float: none !important; padding: 0 !important; }#news.layout--media article.card[data-item] [data-thumb] > *{ display:block !important; width:100% !important; height:auto !important; max-height: var(--sp-media-thumb-maxh) !important; object-fit: contain !important; /* ← 縦方向の途切れ（トリミング）を抑制 */ } /* ③ 日付 */ #news.layout--media article.card[data-item] [data-meta]{ grid-column: 1 !important; grid-row: 3 !important; margin-top:0 !important; } /* ① 見出し（複数行にも対応） */ #news.layout--media article.card[data-item] [data-title]{ grid-column: 1 !important; grid-row: 1 !important; min-width:0 !important; } /* ④ ボタン行：見出し直下・横並び・折返し対応、オーバーレイ無効化 */ #news.layout--media article.card[data-item] [data-inline-actions]{ grid-column: 1 !important; grid-row: 4 !important; position: static !important; margin:.25rem 0 0 !important; display:flex !important; gap:.5rem !important; flex-wrap:wrap !important; justify-content:flex-start !important; align-self:start !important; } /* ⑤ 本文（短文のときも段差が出ないように） 注：HTML上では本文一式が .body 内にあるため、SPでは .body を display:contents にして 子要素（見出し/日付/本文/ボタン）をグリッド直下に“昇格”させて順序制御します。 */ #news.layout--media article.card[data-item] .body{ display: contents !important; /* 影響範囲：#news.layout--media × SP のみ */ } /* ⑤ 本文（抜粋） */ #news.layout--media article.card[data-item] [data-excerpt]{ grid-column: 1 !important; grid-row: 5 !important; min-width:0 !important; margin:0 !important; } /* ⑥ 展開本文：存在するときだけ末尾に全幅で表示 */ #news.layout--media article.card[data-item] [data-more]{ grid-column: 1 !important; grid-row: 6 !important; width:100% !important; box-sizing:border-box; margin-top:.25rem !important; } #news.layout--media article.card[data-item] [data-more][hidden]{ display:none !important; } } /* === [/STEP I] ============================================================ */ /* ========================================================================== [STEP G] #news トークン化（MEDIA/LIST 共通・追記のみ・後勝ち） 目的：#news（MEDIA/LIST）の“数値バラつき”を変数化し、PC/SPで再利用可能にする。 既存の STEP F / STEP I はそのまま活かし、本ブロックで「橋渡し」変数を宣言。 方針：見た目ゼロ差分。物理削除なし。旧変数名 ←→ 新トークンを双方向で alias。 ========================================================================== */ /* ---- 共通（#news 全体） ---- */ #news{ /* 共通ギャップ（既定値。各レイアウト側で上書き可） */ --news-gap-pc: 16px; --news-gap-sp: 10px; /* 角丸などサイト既定の再露出（将来の#news独自差し替え用） */ --news-radius: var(--radius, 16px); } /* ---- PC域（>=641px） MEDIA/LIST のトークン化 ---- */ @media (min-width:641px){ /* MEDIA（PC） */ #news.layout--media{ /* 新トークン（正準） */ --pc-media-gap: var(--media-gap, 16px); --pc-media-left-min: var(--media-left-min, 260px); --pc-media-left-max: var(--media-left-max, 32vw); /* 旧名へのブリッジ（STEP F の互換維持） */ --media-gap: var(--pc-media-gap); --media-left-min: var(--pc-media-left-min); --media-left-max: var(--pc-media-left-max); } /* LIST（PC） */ #news.layout--list{ /* サムネ幅・行間の標準化（既存の clamp や固定値を吸収） */ --pc-list-gap: 12px; --pc-list-thumbw: var(--thumbw, clamp(72px,10vw,120px)); /* 既存ルール（--thumbw）へのブリッジ */ --thumbw: var(--pc-list-thumbw); } } /* ---- SP域（<=640px） MEDIA/LIST のトークン化 ---- */ @media (max-width:640px){ /* MEDIA（SP） */ #news.layout--media{ /* 新トークン（正準）…既存 STEP I の既定値を受け継ぐ */ --sp-media-gap-std: var(--sp-media-gap, 10px); --sp-media-thumb-min: var(--sp-media-thumb-min, 220px); --sp-media-thumb-w: var(--sp-media-thumb-w, 86vw); --sp-media-thumb-max: var(--sp-media-thumb-max, 480px); --sp-media-thumb-maxh:var(--sp-media-thumb-maxh, 62vh); /* 既存名（STEP I）へのブリッジ */ --sp-media-gap: var(--sp-media-gap-std); } /* LIST（SP） */ #news.layout--list{--sp-list-gap: 10px; --sp-list-thumbw: var(--thumbw, 96px); /* 既存ルール（--thumbw）へのブリッジ */ --thumbw: var(--sp-list-thumbw); } } /* === [/STEP G] ============================================================ */ /* ========================================================================== [R1-cleanup] CARDS 整理統合（#news の重複ルール削減） 2025-09-12 内容： - #news.layout--cards の [data-list]/[data-thumb]/[data-thumb] img/[data-meta] の 重複定義を削除し、共通の section.layout--cards ベースへ集約。 - 既存の「excerpt/続きを読む 非表示」二重定義は R1 に一本化。 影響：見た目ゼロ差分（#news.layout--cards の色/ボタン等の固有差分は維持）。 ========================================================================== */ /* ========================================================================== [R1C] NEWS / CARDS 正規化：excerpt と「続きを読む」を強制OFF（後勝ち・限定スコープ） 目的：CARDSでは抜粋・続きを読むを表示しない契約をCSSで担保。 tokens（opt-excerpt-* 等）が付与されても #news.layout--cards では無効化。 影響：#news.layout--cards のみ。LIST/MEDIA/他セクションには一切影響なし。 ========================================================================== */ #news.layout--cards [data-excerpt]{ display:none !important; } #news.layout--cards [data-inline-actions] [data-toggle="more"]{ display:none !important; } /* Shield（将来の誤適用予防。視覚差分なし） */ section.layout--cards [data-excerpt]{ -webkit-line-clamp: initial; line-clamp: initial; } /* ==========================================================================/R1C */ /* ========================================================================== [R3-1] PC×MEDIA 左カラムの変数ダイヤル最終化（#news 限定・PC>=641px） 2025-09-12 目的：左列幅を最小/最大/ギャップの3ダイヤルに統一。 grid-template-columns: minmax(var(--pc-media-left-min), var(--pc-media-left-max)) 1fr 既定：--pc-media-left-min:260px / --pc-media-left-max:32vw / --pc-media-gap:16px 互換：旧名（--media-*）は読み取り専用の alias として残置（物理削除なし）。 影響：#news.layout--media の PC 表示のみ。SP/他レイアウトは非影響。 ========================================================================== */ /* ========================================================================== [B-1] Thumb dials（受け口）— LIST/MEDIA/CARDS 2025-09-12 目的：サムネイルの比率・角丸・fit 等を変数で制御（ゼロ見た目差分）。 変数： --thumb-aspect … 画像比率（例：16/9, 4/3, 1/1, auto） --thumb-radius … 角丸（px / inherit など） --thumb-fit … object-fit（cover|contain 等） --thumb-pad … サムネ枠の内側余白（必要時のみ） --thumbw … LIST/MEDIA での幅（既存tokenとの互換維持・フォールバック=現状値） 使い方：値を与えたセクションだけが変化（例） #news.layout--list { --thumb-aspect: 3/2; --thumb-radius: 8px; } #news. #news.layout--cards{ --thumb-aspect: 16/9; } // 従来通りなら指定不要 備考：既存の .opt-thumb-* / .opt-thumbw-* トークンとも併用可（後勝ち競合なし）。 ========================================================================== */ /* === [TOKEN] opt-subtitle-strong — LIST/MEDIA の副題1行目だけ太字（任意で付与） === */ section.layout--list.opt-subtitle-strong [data-excerpt]::first-line, section.layout--media.opt-subtitle-strong [data-excerpt]::first-line{ font-weight: var(--subtitle-strong-w, 700); } /* ========================================================================== [B-2] Action-row dials（受け口）— LIST / MEDIA / CARDS 2025-09-12 目的：アクション行([data-inline-actions])の並び・間隔・折返し等を 変数で制御できる受け口を追加（既定=現状値／ゼロ見た目差分）。 対象：section.layout--{cards|list|media} 内にある [data-inline-actions] 変数： --actions-display … display（flex/none/contents など） [既定:flex] --actions-gap … 子要素間の間隔 [既定:.5rem] --actions-wrap … 折返し（wrap/nowrap） [既定:wrap] --actions-justify … 主軸整列（flex-start/center/right…） [既定:flex-start] --actions-align … 交差軸整列（start/center/baseline…） [既定:flex-start] --actions-mt … 上マージン（トリガー直下の余白） [既定:auto] --actionsw … 本文右よけ幅（LIST等で使用済み） [既存を尊重] 備考：#news 向けの既存ルール（色/形/!important など）はそのまま優先。 本受け口は“値を与えた時だけ”効きます。既定は現状と同等。 ========================================================================== */ section[class*="layout--"] [data-inline-actions]{ display: var(--actions-display, flex); gap: var(--actions-gap, .5rem); flex-wrap: var(--actions-wrap, wrap); justify-content: var(--actions-justify, flex-start); align-items: var(--actions-align, flex-start); margin-top: var(--actions-mt, auto); /* 既定は既存ルールに委ねる */ } /* LIST/MEDIA で本文右側に予約スペースを持つ場合の受け口（既存 #news を尊重） */ section.layout--list [data-excerpt], section.layout--media [data-excerpt]{ padding-right: var(--actionsw, initial); } /* === [APPLY 2025-09-12] PC×MEDIA (#news): widen left column and span thumb vertically === */ /* === [S5] Nav/Brand design tokens (no-op defaults) ============================= */ /* 既定値は現状と同じ挙動。ADMINからの拡張に備え、変数を導入（未設定なら従来の見た目のまま） */ :root{ --nav-axis: row; /* row | column */ --logo-size: 180px; /* 既定: 180px */ --ui-font: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; } .logo { width: var(--logo-size, 180px); } .mainnav { flex-direction: var(--nav-axis, row); } body { font-family: var(--ui-font, system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif); } /* === [/S5] ====================================================================== */ /* ========================================================================== [ADD] Link strip under hero — Store → SNS (scoped) ========================================================================= */ .link-strip{ background:#fff; border-top:1px solid var(--border, #e5e7eb); border-bottom:1px solid var(--border, #e5e7eb); padding-block: clamp(8px, 1.6vw, 14px); } /* 共通の section::after を帯では無効化（二重線防止） */ section.link-strip::after{ content:none; } .link-strip .inner, .link-strip > .container{ display:flex; gap:12px 16px; align-items:center; padding:10px 0; flex-wrap:wrap; justify-content:center;} @media (min-width: 861px){ .link-strip .inner, .link-strip > .container{ display:block; /* A案：PCはblockでコンテナ幅いっぱいに → 子gridが中央基点で散開 */ } } .link-strip .group, .link-strip [data-group]{ display:flex; flex-wrap:wrap; justify-content: space-evenly; align-items:center; gap: 12px 0; /* row gap 12px, column gap 0 → 行内は余白だけ均等に */ } .link-strip .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.56rem .9rem; min-height:2.4rem; border-radius:9999px; border:1px solid #dbe3ea; background:#fff; color:#0f172a; font-weight:700; text-decoration:none; box-shadow:0 2px 8px rgba(15,25,40,.06); transition:filter .15s ease, transform .02s ease; } .link-strip .btn:hover{ filter:brightness(.985); text-decoration:none; } .link-strip .btn:active{ transform:translateY(1px); } .link-strip .btn:focus-visible{ outline:3px solid rgba(11,102,214,.25); outline-offset:2px; } /* Store = filled, SNS = outline */ .link-strip [data-group="store"] .btn{ background:var(--primary, #111827); border-color:var(--primary, #111827); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.10); } .link-strip [data-group="sns"] .btn{ background:#fff; border-color:#dbe3ea; color:#0f172a; font-weight:600; } /* Brand accents within the strip only */ .link-strip [data-group="store"] a.btn[href*="amazon."]{ background:#ff9900; border-color:#d98200; color:#111; } .link-strip [data-group="store"] a.btn[href*="rakuten."]{ background:#bf0000; border-color:#9f0000; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.22); } .link-strip [data-group="store"] a.btn[href*="shopping.yahoo."], .link-strip [data-group="store"] a.btn[href*="store.shopping.yahoo."], .link-strip [data-group="store"] a.btn[href*="yahoo.co.jp/"]{ background:#ff0033; border-color:#d6002a; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.22); } /* Mobile: horizontal scroll with snapping */ @media (max-width:640px){ .link-strip .inner, .link-strip > .container{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:8px 16px; } .link-strip .group, .link-strip [data-group]{ display:flex; flex-wrap:nowrap; } .link-strip .btn{ white-space:nowrap; scroll-snap-align:start; } } /* Link-strip: image/both variants (front-only; scoped) */ .link-strip a.btn[data-variant="image"], .link-strip a.btn[data-variant="both"]{ background:transparent; border-color:transparent; box-shadow:none; padding:0; min-height:auto; border-radius:12px; text-decoration:none; } .link-strip a.btn[data-variant="image"]{ display:inline-flex; } .link-strip a.btn[data-variant="image"] > img{ width:56px; height:56px; object-fit:contain; display:block; } .link-strip a.btn[data-variant="both"]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:6px 8px; } .link-strip a.btn[data-variant="both"] > img{ width:56px; height:56px; object-fit:contain; display:block; } .link-strip a.btn[data-variant="both"] > .txt{ font-weight:700; line-height:1.15; white-space:nowrap; } /* a11y: screen reader label */ .link-strip .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0; clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden; } /* ==== PATCH 2025-10-20: footer channels image sizing ==== */ footer .channels{ --ls-img-h: clamp(28px, 5vw, 48px); } footer .channels a[data-variant="image"]{ display:inline-flex; align-items:center; justify-content:center; padding: clamp(6px, 1.2vw, 10px) clamp(12px, 2vw, 18px); } footer .channels a[data-variant="image"] img{ display:block; height: var(--ls-img-h); width: auto; } /* ==== /PATCH ==== */ /* ==== PATCH 2025-10-20: link-strip image sizing v2 (CSS-only, overrides inline) ==== */ .link-strip{ --strip-img-h: clamp(40px, 5.8vw, 64px); } .link-strip a.btn[data-variant="image"], .link-strip a.btn[data-variant="both"]{ padding: clamp(4px, 0.8vw, 8px) clamp(8px, 1.4vw, 12px); } .link-strip a.btn[data-variant="image"] > img, .link-strip a.btn[data-variant="both"] > img{ height: var(--strip-img-h) !important; width: auto !important; display:block; } /* Footer: unify knob & override inline */ footer .channels{ --ls-img-h: var(--strip-img-h, clamp(36px, 5.2vw, 56px)); } footer .channels a[data-variant="image"] img{ height: var(--ls-img-h) !important; width: auto !important; display:block; } /* ==== /PATCH ==== */ /* ========================================================================== [FIX 2025-10-29] #news「お知らせ」：サムネ左列に本文が“にじむ”件（STEP1/CSSのみ） 方針：① 本文側コンテナを常に右列（列2）へ固定 ② 抜粋直後の先頭ブロックを必ず block に 影響範囲：#news × layout--list / layout--media のみ。既存は物理削除せず末尾追記。 ロールバック：このブロックを削除するだけで元に戻せます。 ========================================================================== */ /* ① 本文を右列へ固定（PC域のみ）。展開状態の既存指定と同値のため見た目差分なし。 */ @media (min-width:641px){ #news :where(.layout--list,.layout--media) article.card .body, #news :where(.layout--list,.layout--media) article.card [data-more]{ grid-column: 2 / -1 !important; } } /* ② 抜粋直後の先頭ブロックは必ず block 扱い。 既存の「p/div を inline 化」ルールは尊重するため、非 p/div のみを対象に限定。 */ #news :where(.layout--list,.layout--media) article.card [data-excerpt] + :not(:is(p,div)){ display:block !important; } /* ========================================================================== [FIX 2025-10-29 v2] #news「お知らせ」：左カラム“にじみ”最終対策（CSSのみ） 追加方針： A) 「抜粋の直後の先頭要素」を右列へ明示配置（PC域のみ） B) “匿名テキストノード”が article.card 直下に混入した場合でも視覚的に遮断する ⇒ 左カラム全面にホワイトのオーバーレイを 1枚（疑似要素）敷き、サムネを上に重ねる 影響範囲：#news × layout--list / layout--media（PC>=641px） ロールバック：このブロックを削除するだけで元に戻ります。 ========================================================================== */ /* A) 抜粋直後の先頭要素は必ず右列（列2）へ */ @media (min-width:641px){ #news :where(.layout--list,.layout--media) article.card [data-excerpt] + *{ grid-column: 2 / -1 !important; } } /* B) 左カラム全面を“白い幕”でカバー（サムネはその上に重ねる） */ @media (min-width:641px){ #news :where(.layout--list,.layout--media) article.card{ position: relative; /* z-index基準 */ } /* 左カラム全面のホワイトカバー（Grid参加させる） */ #news :where(.layout--list,.layout--media) article.card::before{ content:""; display:block; grid-column: 1 !important; grid-row: 1 / -1 !important; background:#fff; position: relative; z-index: 1; /* ← 匿名テキストより前、サムネより後ろにしたいので 1 に設定 */ pointer-events: none; /* イベントは通す */ } /* サムネは常に最前面に（白い幕の上） */ #news :where(.layout--list,.layout--media) article.card [data-thumb]{ position: relative; z-index: 2; } } .hidden{display:none!important;}