/
- /
- なので、
`.gm-art-body p`(0,1,1) のような本文のルールに `.gm-list__title`(0,1,0) では負け、
本文段落のマージン(0 0 18px)が付いて行が間延びする（実際に踏んだ）。
※ 縦線の意匠は使わない。本文のh3が左に3pxの縦線を持ち、リストの各行が見出しに見える。 */
.gm-list{
margin:32px 0;
border:1px solid var(--gm-line);
border-radius:10px;
overflow:hidden;
background:var(--gm-paper);
}
.gm-list .gm-list__caption{
margin:0;
padding:11px 16px;
font-size:11.5px;
color:#4f6d6c;
letter-spacing:.03em;
line-height:1.6;
background:#f3faf9;
border-bottom:1px solid var(--gm-line);
}
.gm-list .gm-list__item{border-bottom:1px solid var(--gm-line);}
.gm-list .gm-list__item:last-child{border-bottom:0;}
/* ラベル（1列目）。旧サイトの
にあたる */ .gm-list .gm-list__title{ margin:0; padding:10px 16px; background:#f3faf9; font-size:12.5px; font-weight:700; color:#2f4f4e; line-height:1.6; } /* 値（2列目以降）。旧サイトの にあたる */ .gm-list .gm-list__fields{margin:0;padding:11px 16px 12px;} /* 長いURLや英単語で枠を突き破らないようにする */ .gm-list .gm-list__val{margin:0;font-size:13.5px;color:#4c5153;line-height:1.8;overflow-wrap:anywhere;} /* 3列以上（早見表など）: 「項目名 → 値」を1組ずつ箱にして、幅に応じて折り返す。 縦一列に積むと8項目の早見表が延々と縦に伸びる（13行で約2,900pxになった）。 数字が縦に揃うよう tabular-nums（年齢・西暦が並ぶ表が多い）。 */ .gm-list .gm-list__fields--keyed{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:7px 18px; } .gm-list .gm-list__pair{display:flex;gap:8px;align-items:baseline;min-width:0;} .gm-list .gm-list__fields--keyed .gm-list__key{ margin:0; flex:0 0 auto; font-size:10.5px; color:var(--gm-muted); font-weight:500; letter-spacing:.02em; white-space:nowrap; } .gm-list .gm-list__fields--keyed .gm-list__val{ font-size:13px; line-height:1.6; font-variant-numeric:tabular-nums; } @media (min-width:601px){ /* 広い画面はラベル左／値右。 リスト全体を1つのグリッドにして**ラベル列の幅を全行で揃える** （行ごとにグリッドを作ると行ごとに違う幅になって列が揃わない）。 fit-content(13em) は「一番長いラベルに合わせる。ただし13emで頭打ちにして折り返す」。 固定幅にすると「漢字」(2文字)にも「小学校低学年（6〜8歳頃）」(13文字)にも同じ幅を 与えることになり、短いラベルの行が間延びする。 */ .gm-list .gm-list__rows{display:grid;grid-template-columns:fit-content(13em) 1fr;} .gm-list .gm-list__item{display:contents;} .gm-list .gm-list__title{ display:flex; align-items:center; border-right:1px solid var(--gm-line); padding:11px 16px; } /* display:contents で行の箱が消えるので、罫線はセル側に持たせる */ .gm-list .gm-list__title, .gm-list .gm-list__fields{border-bottom:1px solid var(--gm-line);} .gm-list .gm-list__item:last-child > *{border-bottom:0;} } /* エディタでも公開ページと同じ見え方にする（食い違わないように） */ .gm-list--editor .gm-list__item{position:relative;} .gm-list--editor .gm-list__ops{ position:absolute;right:6px;top:6px; display:flex;gap:1px;opacity:.3;transition:opacity .15s; background:rgba(255,255,255,.9);border-radius:4px; } .gm-list--editor .gm-list__item:hover .gm-list__ops{opacity:1;} /* ===== フッター固定広告（memoco/footer-ad）===== 画面下に固定するバー。左に2段テキスト（下段を大きく）＋右端にボタン、または画像1枚。 背景色・文字色・ボタン色は管理画面から入るのでインラインstyleで当たる。 ※ 管理画面のプレビューは同じHTML・同じCSSを使う（別々に書くと見た目がずれる）。 */ .gm-fixad{position:fixed;left:0;right:0;bottom:0;z-index:90;box-shadow:0 -2px 16px rgba(0,0,0,.16);} /* 内側は記事本文と同じ幅に収める（バーだけ広いと本文と揃わず、文言とボタンが離れて見える） */ .gm-fixad__link{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto;padding:10px 18px;text-decoration:none;box-sizing:border-box;} .gm-fixad__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;} .gm-fixad__top{font-size:11.5px;font-weight:500;line-height:1.4;opacity:.9;} .gm-fixad__bottom{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:.01em;} /* 右端ボタンは押しやすいよう幅広に。文言が短くても最低幅を確保する */ .gm-fixad__btn{flex:none;min-width:190px;padding:13px 28px;border-radius:999px;font-size:14px;font-weight:700; text-align:center;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.14);} .gm-fixad__close{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:26px;height:26px; display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer; background:rgba(0,0,0,.22);color:#fff;font-size:15px;line-height:1;padding:0;} .gm-fixad--image .gm-fixad__link{padding:0 44px 0 0;justify-content:center;} .gm-fixad__img{display:block;max-width:100%;height:auto;} /* 記事末尾がバーに隠れないように、固定分の高さを空ける */ body.single .gm-site-footer{padding-bottom:84px;} @media (max-width:600px){ .gm-fixad__link{gap:10px;padding:8px 38px 8px 12px;} .gm-fixad__top{font-size:10.5px;} .gm-fixad__bottom{font-size:14px;} .gm-fixad__btn{min-width:132px;padding:11px 16px;font-size:12.5px;} } /* 管理画面のプレビュー: 固定配置と影を外し、枠の中に収める */ .gm-fixad--preview{position:relative;box-shadow:none;border-radius:8px;overflow:hidden;} .gm-fixad--preview .gm-fixad__close{cursor:default;} /* ===== 記事下の関連記事（横スクロール2段）===== 1段目=タイトルが似ている記事 / 2段目=同じカテゴリの記事。10件ずつ。 カード幅は固定にして、はみ出した分を横スクロールで見せる（JS不使用）。 ※ .gm-after .gm-grid（3列グリッド）とは別物。こちらは track を flex で流す。 */ .gm-rel{margin-bottom:34px;} .gm-rel__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity; padding:2px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;} .gm-rel__card{flex:0 0 220px;width:220px;scroll-snap-align:start;} /* 3列グリッド前提の高さ指定に負けないよう、横スクロール側で上書きする */ .gm-rel__track .gm-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;} .gm-rel__track .gm-card .ct{ /* タイトルは3行で打ち切る。カードの高さが揃わないと横スクロールがガタつく */ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } /* 「まだ右にカードがある」ことを示す白のグラデーション。 中身の最後に置いた span を position:sticky で右端に張り付かせている。 末尾までスクロールすると自分の定位置（最後のカードの右の空き48px）に着地して自然に消えるので、 「もう続きが無いのに霞んだまま」にならない（常時のオーバーレイだとそうなる）。JS不使用。 ※ 高さは .gm-rel__card と揃える（align-self:stretch だとスクロールバー分ずれる）。 */ .gm-rel__fade{flex:0 0 48px;align-self:stretch;position:sticky;right:0;pointer-events:none; background:linear-gradient(to right, rgba(255,255,255,0), var(--gm-paper) 72%);} /* スクロールバーを控えめに（消さない。動くことが分からないと触られない） */ .gm-rel__track::-webkit-scrollbar{height:6px;} .gm-rel__track::-webkit-scrollbar-thumb{background:#dfe4e5;border-radius:99px;} .gm-rel__track::-webkit-scrollbar-track{background:transparent;} @media (max-width:600px){ /* モバイルは画面端まで流して「まだ続く」ことを見せる */ .gm-rel__track{margin-inline:-16px;padding-inline:16px;gap:12px;} .gm-rel__card{flex-basis:168px;width:168px;} /* モバイルはカードが画面端まで流れること自体が「続きがある」合図。フェードは出さない */ .gm-rel__fade{display:none;} } /* ===== 旧サイトから引き継いだ広告枠（inc/memoco-tags.php の memoco_ad_slot）===== 中身は旧サイトの実クリエイティブをそのまま出している（HTMLに意味がありIDに分解できない）。 旧HTMLは幅640px固定のiframe等を含むため、**ここで必ず枠に収める**。 素で置くとモバイルでページ全体が横スクロールする（本文は横スクロールさせない方針）。 */ .gm-adslot{margin:26px 0;max-width:100%;} .gm-adslot :where(iframe,img,ins,video){max-width:100%;} /* 幅・高さが属性で固定されたiframe（Vimeo等）を比率を保って収める */ .gm-adslot iframe{width:100%;aspect-ratio:4/3;height:auto;display:block;} /* AdSense の ins は自前で幅を測るので触らない（aspect-ratio を当てると描画が壊れる） */ .gm-adslot ins.adsbygoogle{display:block;width:100%;aspect-ratio:auto;} /* TOPのピンク帯: 旧HTMLの padding-top:50px / font-size:36px はモバイルで大きすぎる */ .gm-adslot--top-pc-7{margin:0 0 24px;} .gm-adslot--top-pc-7 .top{padding:0 16px 16px;} .gm-adslot--top-pc-7 .top-title{padding-top:28px !important;font-size:clamp(20px,4.4vw,36px) !important;padding-bottom:16px;} .gm-adslot--top-pc-7 iframe{max-width:640px;margin:0 auto;} /* ===== 記事のキーワード（タグ）===== 旧サイトが持っていた「記事→キーワード→記事」の回遊導線。新テーマで丸ごと落ちていた。 置き場所は記事の末尾（読み終わった読者を次へ送るのが役目。ヘッダに30個並べると主役が埋もれる）。 */ .gm-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:30px 0 0; padding-top:20px;border-top:1px solid var(--gm-line);} .gm-tags__label{font-size:11px;color:var(--gm-muted);letter-spacing:.08em;margin-right:2px;} .gm-tags__item{display:inline-block;font-size:12px;line-height:1;color:#4a5152;text-decoration:none; padding:7px 12px;border:1px solid var(--gm-line);border-radius:999px;background:var(--gm-paper); transition:border-color .15s, color .15s;} .gm-tags__item:hover{border-color:var(--gm-tiff);color:var(--gm-tiff);} /* 本文のリンク色(.gm-art-body a)に負けないよう詳細度を確保する */ .gm-article .gm-tags a.gm-tags__item{text-decoration:none;} /* ============================================================ タグ一覧（tag-index.php /articles/tag） ============================================================ */ .gm-tagidx__head{ text-align:center; margin-top:26px; } .gm-tagidx__lead{ font-size:13px; color:#6b7072; line-height:1.9; margin:10px auto 0; max-width:560px; } .gm-tagidx__anchors{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:22px 0 4px; } .gm-tagidx__anchors a{ font-size:11px; color:var(--gm-tiff); border:1px solid var(--gm-tiff); border-radius:999px; padding:5px 13px; text-decoration:none; } .gm-tagidx__anchors a:hover{ background:var(--gm-tiff); color:#fff; } .gm-tagidx__sec{ scroll-margin-top:20px; } .gm-tagidx__chips{ display:flex; flex-wrap:wrap; gap:8px; } .gm-tagidx__chip{ display:inline-flex; align-items:center; gap:5px; background:#f6f8f8; border-radius:999px; color:#33383a; text-decoration:none; } .gm-tagidx__chip .n{ font-size:.75em; color:var(--gm-tiff); font-weight:600; } .gm-tagidx__chip:hover{ background:var(--gm-tiff-bg); color:var(--gm-tiff); } .gm-tagidx__chip--l{ font-size:13.5px; padding:8px 15px; background:var(--gm-tiff-bg); font-weight:500; } .gm-tagidx__chip--m{ font-size:12px; padding:6px 13px; } .gm-tagidx__chip--s{ font-size:10.5px; padding:4px 11px; color:#6b7072; } /* .jp を div から h2 化（見出しアウトライン付与）したことで出るUA既定marginを消す。 front-page 等の div 版(.gm-sec-head .jp)には影響させないよう .gm-tagidx でスコープする。 */ .gm-tagidx .gm-sec-head .jp{ margin:0; } /* ============================================================ TOP ヒーロービュー＋充実化セクション（2026-07-18 刷新） 設計: docs/superpowers/specs/2026-07-18-top-hero-redesign-design.md ============================================================ */ /* --- ヒーロービュー: ヘッダー＋ヒーロー＝ちょうど1画面 --- .gm-hv（flex縦積み）にヘッダーとヒーローを入れ、ヒーローに flex:1 を与える。 ヘッダーの実高さを数値で持たない＝ナビの折返し・フォント差で高さが変わっても 常に「残り全部」がヒーローになる。svh はモバイルのアドレスバー対策（vhはフォールバック）。 */ .gm-hv{ display:flex; flex-direction:column; min-height:100vh; min-height:100svh; } .gm-hero{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:420px; } /* 背景はCSS backgroundではなく （preload/LCP計測・出し分けが効く）。装飾なのでalt空。 */ .gm-hero__pic{ position:absolute; inset:0; } .gm-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* 墨色テキストのコントラスト確保。画像は中央が明るい構図で生成しているので薄い膜だけ重ねる */ .gm-hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.12) 44%, rgba(255,255,255,.46) 100%); } .gm-hero__inner{ position:relative; text-align:center; padding:0 22px 34px; max-width:760px; } .gm-hero__title{ font-size:clamp(27px,4.4vw,42px); font-weight:700; color:var(--gm-ink); line-height:1.62; letter-spacing:.05em; margin:0; } /* 「｜MEMOCO」はロゴと同じセリフ体＝ワードマークとして見せる */ /* MEMOCO は見出しと同じ書体で組む（2026-07-18 ユーザー指定。ロゴのPlayfairは使わない）。 区切りの「｜」も外したので、和文の直後に欧文が詰まらないよう左に少しだけ間を取る （letter-spacing は字の右側にしか効かないため左は margin で取る）。 */ .gm-hero__brand{ margin-left:.28em; } .gm-hero__lead{ font-size:clamp(13px,1.6vw,15px); line-height:2.1; color:#454a4c; margin:16px auto 0; max-width:560px; } .gm-hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; } .gm-hero__btn{ display:inline-block; padding:13px 30px; border-radius:999px; font-size:13.5px; font-weight:700; letter-spacing:.04em; text-decoration:none; } .gm-hero__btn--fill{ background:var(--gm-tiff); color:#fff; box-shadow:0 8px 22px rgba(10,186,181,.32); } .gm-hero__btn--fill:hover{ opacity:.92; } .gm-hero__btn--line{ background:rgba(255,255,255,.72); color:var(--gm-ink); border:1.5px solid var(--gm-ink); } .gm-hero__btn--line:hover{ background:#fff; } /* スクロールキュー（JS不使用。細い縦線が伸びて消える） */ .gm-hero__scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; color:var(--gm-ink); } .gm-hero__scroll span{ font-size:9px; letter-spacing:.3em; } .gm-hero__scroll::after{ content:""; width:1px; height:32px; background:var(--gm-ink); transform-origin:top; animation:gm-scrollcue 2.2s ease-in-out infinite; } @keyframes gm-scrollcue{ 0%{ transform:scaleY(0); opacity:1; } 55%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } } /* 読み込み時のフェードアップ（1回だけ・控えめ） */ .gm-hero__inner > *{ animation:gm-rise .7s ease-out backwards; } .gm-hero__title{ animation-delay:.05s; } .gm-hero__lead{ animation-delay:.18s; } .gm-hero__cta{ animation-delay:.3s; } @keyframes gm-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .gm-hero__inner > *, .gm-hero__scroll::after{ animation:none; } } @media (max-width:600px){ .gm-hero__title{ font-size:clamp(23px,6.9vw,29px); } .gm-hero__inner{ padding-bottom:64px; } .gm-hero__btn{ padding:12px 24px; font-size:12.5px; } } /* --- 横スクロール帯（おすすめ特集・人気ギフト共通の入れ物） --- 意匠は記事下の関連記事(.gm-rel__track)と同じ流儀（固定幅カード＋右端stickyフェード）。 */ .gm-strip{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 0 12px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .gm-strip::-webkit-scrollbar{ height:6px; } .gm-strip::-webkit-scrollbar-thumb{ background:#dfe4e5; border-radius:99px; } .gm-strip::-webkit-scrollbar-track{ background:transparent; } .gm-strip__fade{ flex:0 0 48px; align-self:stretch; position:sticky; right:0; pointer-events:none; background:linear-gradient(to right, rgba(255,255,255,0), var(--gm-paper) 72%); } /* 特集カード（ピラー） */ .gm-strip__card{ flex:0 0 220px; width:220px; scroll-snap-align:start; display:block; border:1px solid #eee; border-radius:10px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.04); background:#fff; text-decoration:none; color:inherit; } .gm-strip__card img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; } .gm-strip__noimg{ display:block; width:100%; aspect-ratio:3/2; background:linear-gradient(135deg,#edf3f4,#e8f0f1); } .gm-strip__t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; font-weight:500; color:var(--gm-ink); line-height:1.5; padding:11px 13px 0; } .gm-strip__n{ display:block; font-size:10px; color:var(--gm-tiff); letter-spacing:.06em; padding:5px 13px 12px; } .gm-strip__card:hover .gm-strip__t{ color:var(--gm-tiff); } /* 末尾の「すべての特集を見る」カード */ .gm-strip__more{ display:flex; align-items:center; justify-content:center; background:var(--gm-tiff-bg); border-color:var(--gm-tiff-soft); box-shadow:none; } .gm-strip__more span{ font-size:12.5px; font-weight:700; color:var(--gm-tiff); padding:16px; } .gm-strip__more:hover{ background:#def2ef; } /* 人気ギフトカード（商品）。EC写真は白背景が多いので白枠+contain（.gm-thumbと同じ理由） カードは
（中に特集リンクと購入ボタンの2種類のリンクが入るため）。 .gm-pick__link を flex:1 にして、名前の行数が違っても購入ボタンの上端が揃うようにする。 */ .gm-pick{ flex:0 0 180px; width:180px; scroll-snap-align:start; display:flex; flex-direction:column; } .gm-pick__link{ display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit; } .gm-pick__buy{ margin-top:8px; display:flex; flex-direction:column; gap:5px; } .gm-pick__img{ display:block; width:180px; height:180px; border-radius:10px; border:1px solid var(--gm-line); background:#fff; overflow:hidden; } .gm-pick__img img{ width:100%; height:100%; object-fit:contain; display:block; } .gm-pick__votes{ font-size:9.5px; color:var(--gm-tiff); font-weight:700; letter-spacing:.04em; margin-top:9px; } .gm-pick__brand{ font-size:10px; color:var(--gm-muted); margin-top:4px; } .gm-pick__name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; color:var(--gm-ink); line-height:1.5; margin-top:2px; } /* #タグ は「特集ページへの入口」＝カード本体（販売ページ行き）とは別のリンク。 下線は出さないが hover で色を変えて、押せることが分かるようにする。 */ .gm-pick__tag{ display:block; font-size:10px; color:var(--gm-muted); margin-top:6px; margin-bottom:2px; text-decoration:none; } .gm-pick__tag:hover{ color:var(--gm-tiff); } .gm-pick__link:hover .gm-pick__name{ color:var(--gm-tiff); } /* --- タグから探す（TOP版。チップの意匠は /articles/tag と共通の .gm-tagidx__chip） --- */ .gm-tagsec{ margin-top:18px; } .gm-tagsec__label{ font-size:12px; font-weight:700; color:#4f5456; letter-spacing:.06em; margin-bottom:10px; } .gm-tagsec__all{ text-align:center; margin:24px 0 0; } .gm-tagsec__all a{ font-size:12px; color:var(--gm-tiff); letter-spacing:.06em; text-decoration:none; } .gm-tagsec__all a:hover{ text-decoration:underline; } /* --- 記事下の「みんなが選んだ人気ギフト」（帯・カードはTOPの .gm-strip/.gm-pick を再利用） --- */ .gm-artpicks{ margin:34px 0 8px; } .gm-artpicks__label{ font-size:12px; font-weight:700; color:#4f5456; letter-spacing:.06em; margin:14px 0 10px; } /* 商品説明。閉じているときは2行に抑え、クリックで全文（JS不使用の）。 実測で127〜181字あるので、そのまま出すとカードが縦に伸びて帯が破綻する。 */ .gm-pick__more{ margin-top:8px; } .gm-pick__desc{ list-style:none; cursor:pointer; font-size:11.5px; line-height:1.65; color:var(--gm-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gm-pick__desc::-webkit-details-marker{ display:none; } .gm-pick__desc:hover{ color:var(--gm-ink); } .gm-pick__more[open] .gm-pick__desc{ display:none; } .gm-pick__descfull{ font-size:11.5px; line-height:1.65; color:var(--gm-ink); } /* 帯末尾の「＞」＝続きは特集ページにある（ピラーの棚の .mc-next と同じ意匠） */ .gm-pick--next{ align-items:center; justify-content:center; gap:8px; text-decoration:none; border:1px solid var(--gm-tiff-soft,#bfe9e6); border-radius:10px; background:var(--gm-tiff-bg,#eefaf9); min-height:180px; transition:background .2s ease; } .gm-pick--next:hover{ background:#def2ef; } .gm-pick--next__ar{ font-size:30px; line-height:1; color:var(--gm-tiff); } .gm-pick--next__t{ font-size:12px; font-weight:700; color:var(--gm-tiff); } @media (max-width:600px){ /* 帯は画面端まで流して「まだ続く」ことを見せる（.gm-rel__trackと同じ） */ .gm-strip{ margin-inline:-16px; padding-inline:16px; gap:12px; } .gm-strip__card{ flex-basis:180px; width:180px; } .gm-pick{ flex-basis:150px; width:150px; } .gm-pick__img{ width:150px; height:150px; } .gm-strip__fade{ display:none; } } /* ============================================================ 記事下部のセクション見出しを、ピラーの「Editors' Picks」と同じ意匠に揃える （ユーザー指示 2026-07-20: 左寄せ・内容も大きさも合わせる）。 同じ記事ページに2つの意匠が同居していた: ピラー側 .mc-sec-head = 左寄せ / 英字11px letter-spacing:.26em 700 大文字 / 見出し clamp(19px,2.4vw,26px) 800 / 注記12.5px テーマ側 .gm-sec-head = 中央寄せ / 英字10px / 見出し15-16px / 下線30px 後者を前者に合わせる。色は目標側と同じ深いティファニー(#067E7A)を使う （--gm-tiff #0ABAB5 は白地の小文字だと薄いため、ピラーも深い方を使っている）。 ★front-page・タグ一覧など他ページの中央寄せ版は変えないよう .gm-article-page でスコープ。 ★.gm-after .gm-sec-head（0,2,0）と同じ詳細度なので、必ずそれより後ろに置いて勝たせる。 ============================================================ */ .gm-article-page .gm-sec-head{ text-align:left; margin:34px 0 20px; } .gm-article-page .gm-sec-head .en{ font-size:11px; letter-spacing:.26em; font-weight:700; text-transform:uppercase; color:#067E7A; margin:0 0 6px; } .gm-article-page .gm-sec-head .jp{ font-size:clamp(19px,2.4vw,26px); font-weight:800; letter-spacing:.02em; line-height:1.3; margin-top:0; } /* 下線は目標の意匠に無い */ .gm-article-page .gm-sec-head .u{ display:none; } /* ===================================================== TOPの記事帯（新着記事・人気の記事）と「すべて見る」導線。 ⚠️ このマークアップ（.gm-artstrip / .gm-seeall）は **商品DBセッションが 2026-07-20 16:43 にデプロイした front-page.php** が参照しているもので、 CSSだけが未着だったため素のまま描画されていた（＝TOPの崩れの実体）。 ユーザー判断で本セッションが補った。あちらでも同名を定義した場合は 重複するので、どちらか一方に寄せて整理すること。 操作感は front-page.php のコメント指定どおり商品の帯(.mc-shelf__grid)に合わせる ＝横スクロール＋スナップ＋右端を霞ませて「まだ続く」を示す。 カード幅は front-page.php の sizes 指定「(max-width:600px) 74vw, 260px」と一致させる （ずれると srcset が実寸と噛み合わず、無駄に大きい画像が落ちてくる）。 ============================================================ */ .gm-artstrip{ list-style:none; margin:0; padding:4px 2px 12px; /* 幅280px: コンテンツ920pxに対し 3枚＋2割の覗き（280*3+14*2=868 → 残り52px≒19%）。 260pxだと4枚目が43%も出て「中途半端に切れた」ように見えていた。 */ display:grid; grid-auto-flow:column; grid-template-rows:auto; grid-auto-columns:280px; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:thin; -webkit-mask-image:linear-gradient(90deg,#000 96%,transparent); mask-image:linear-gradient(90deg,#000 96%,transparent); } .gm-artstrip > li{ scroll-snap-align:start; min-width:0; } .gm-artstrip .gm-card{ height:100%; } /* タイトルは2行で切る。3〜4行とばらつくとカード下部が重く、高さも不揃いに見える。 */ .gm-artstrip .gm-card .ct{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.55; } .gm-artstrip::-webkit-scrollbar{ height:6px; } .gm-artstrip::-webkit-scrollbar-thumb{ background:#dfe4e5; border-radius:99px; } .gm-artstrip::-webkit-scrollbar-track{ background:transparent; } .gm-seeall{ margin:14px 0 0; } .gm-seeall__link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#067E7A; text-decoration:none; } .gm-seeall__link::after{ content:"→"; font-size:12px; } .gm-seeall__link:hover{ opacity:.72; } /* main側の工夫を取り込み（2026-07-21 マージ時に統合）: ①上位3件だけブランド色で強調＝1位が一目で分かる ②「一覧へ」をボタン型に＝横スクロールし切らない人にも入口が目立つ ※帯の幅・タイトル行数・順位バッジの基本形は、実ブラウザで実測して決めた側を採用。 */ .gm-artstrip > li:nth-child(-n+3) .gm-card__rank{ background:var(--gm-tiff,#0ABAB5); } .gm-seeall{ text-align:center; } .gm-seeall__link{ padding:11px 26px; border-radius:999px; border:1px solid var(--gm-line,#e6e8e9); background:#fff; color:var(--gm-ink,#16191a); transition:border-color .2s ease, color .2s ease, transform .2s ease; } .gm-seeall__link:hover{ border-color:var(--gm-tiff,#0ABAB5); color:var(--gm-tiff,#0ABAB5); transform:translateY(-1px); } @media (prefers-reduced-motion:reduce){ .gm-seeall__link{ transition:none; } } @media(max-width:600px){ /* 商品帯の確定仕様と同じ「1.2枚見え」に揃える（min(78vw,300px)＝390px幅で約1.25枚）。 260pxだと1.43枚見えて、2枚目が中途半端に出ていた。 画面端まで帯を伸ばして、切れ目が「まだ続く」ことを示す。 */ .gm-artstrip{ grid-auto-columns:min(78vw,300px); gap:12px; margin-inline:-16px; padding-inline:16px; } } /* 人気の記事の順位バッジ。 ⚠️ .gm-card--rank / .gm-card__rank も front-page.php にマークアップだけあってCSSが無く、 素の数字が画像の上に落ちて白い帯を作っていた（.gm-artstrip と同じ取りこぼし）。 画像の左上に小さく重ねる。ブランド色の円＋白文字で「順位」と一目で分かるようにし、 どんな写真の上でも読めるよう淡い影を敷く。 */ .gm-artstrip .gm-card--rank{ position:relative; } .gm-artstrip .gm-card__rank{ position:absolute; top:8px; left:8px; z-index:1; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--gm-tiff); color:#fff; font-size:13px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 2px 8px rgba(0,0,0,.18); } @media(max-width:600px){ /* ============================================================ モバイルのヘッダーメニュー（プルダウン）を押しやすく・読みやすく。 実測: 文字11px / タップ領域23px しかなく、推奨44pxの半分だった。 パネルはモバイルでは position:static（アコーディオン式）なので、 開いたときに **行いっぱい** へ広げると一覧性が上がる。 ============================================================ */ .gm-nav__dd[open]{ flex:1 0 100%; } .gm-nav__panel{ width:100%; padding:6px 12px 10px; gap:0 12px; } /* 上下paddingで44px目安のタップ領域を確保しつつ、文字も11→13pxへ */ .gm-nav__panel a{ font-size:13px; line-height:1.5; padding:12px 6px; white-space:normal; } .gm-nav__panel--search .gm-nav__all, .gm-nav__all{ padding:14px 6px 4px; font-weight:700; } /* 検索パネル。★入力の font-size が16px未満だと iOS はフォーカス時に ページを勝手に拡大する（戻せず操作しづらくなる）ので16pxを死守する。 */ .gm-navsearch input[type=search]{ font-size:16px; padding:11px 12px; } .gm-navsearch button{ padding:11px 18px; font-size:13px; } .gm-navsearch__lbl{ font-size:11px; margin-bottom:7px; } .gm-navsearch__chips{ gap:8px; } .gm-navsearch__chips a{ font-size:12.5px; padding:9px 13px; line-height:1; } } /* ============================================================ モバイルのハンバーガーメニュー（ロゴ左・ボタン右）。 JSは使わない。details ではなくチェックボックス方式にしているのは、 「デスクトップでは常時展開」をCSSだけで確実に作るため （閉じた details の中身はブラウザが描画しないので display で戻せない）。 ============================================================ */ /* デスクトップでは存在しないものとして扱う（ナビは常時表示） */ .gm-burger__cb, .gm-burger__btn{ display:none; } @media(max-width:600px){ /* ロゴ左・バーガー右の一行に組み替える */ .gm-header__inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; text-align:left; padding:12px 16px; column-gap:12px; } .gm-logo, .gm-logo-h1{ margin:0; } .gm-logo{ font-size:22px; } /* ボタン本体（3本線）。チェックボックスは見えないがフォーカス可能なまま残す ＝Tabで到達しSpaceで開閉できる（display:none にすると操作できなくなる）。 */ .gm-burger__cb{ display:block; position:absolute; right:16px; width:44px; height:44px; margin:0; opacity:0; z-index:2; cursor:pointer; } .gm-burger__btn{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 8px; cursor:pointer; } .gm-burger__btn span{ display:block; height:2px; background:var(--gm-ink); border-radius:2px; transition:transform .18s, opacity .18s; } /* 開いている間は×に変える（状態が一目で分かる） */ .gm-burger__cb:checked + .gm-burger__btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .gm-burger__cb:checked + .gm-burger__btn span:nth-child(2){ opacity:0; } .gm-burger__cb:checked + .gm-burger__btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .gm-burger__cb:focus-visible + .gm-burger__btn{ outline:2px solid var(--gm-tiff); outline-offset:2px; border-radius:6px; } /* 閉じている間はナビごと隠す。開いたら全幅の縦リストで出す。 */ .gm-nav{ display:none; } .gm-burger__cb:checked ~ .gm-nav{ display:flex; flex-direction:column; align-items:stretch; flex-basis:100%; gap:0; margin-top:8px; padding:0 0 10px; } /* 検索を最上部へ（DOM順は変えず表示順だけ入れ替える＝使用頻度が高い） */ .gm-nav__dd--search{ order:-1; } /* 行はすべて左寄せ・区切り線つき・44pxのタップ領域 */ .gm-nav > a, .gm-nav .gm-nav__dd > summary{ text-align:left; font-size:14px; padding:13px 4px; border-top:1px solid var(--gm-line); } .gm-nav .gm-nav__dd{ border:0; } }