@charset "UTF-8"; /* * トップページ「News & Topics」欄のスタイル * * 2026-08-03 作成 → 同日「今風のデザインに」というご指示で全面改訂。 * * 🔴 blog_p.css は編集しない。 * .top-blog__list は tripguide/index.php（観光情報ページ）でも使われており、 * 共通CSSを直接触ると他ページに影響するため、トップページだけが読む本ファイルに分離した。 * 読み込み順は blog_p.css の後（index.php の 内）。 * * 改訂の考え方（何を「今風」としたか）: * 1. 余白を広げる … 行の padding を 10px → 18px。詰まった印象を解く * 2. 罫線を弱める … #DEE1EA の実線 → rgba(0,0,0,.07)。線で区切る主張を下げる * 3. 情報の強弱をつける … 日付とカテゴリは「添え物」なので彩度を落としてグレーに。 * 赤（#c1272d）はサイトのアクセントなので“ホバー時だけ”に取っておく * 4. バッジを塗りに … 赤い枠線の箱 → 角丸の薄いグレー塗り。枠線は線が増えて古く見える * 5. 日付をサンセリフに … 数字だけ游ゴシック系にして字間を開ける。明朝の数字は古典的に見える * 6. 矢印を細く … 2px の太い山形 → 1px。通常はグレー、ホバーで赤＋スライド * 7. タイトルは折り返しても左端をそろえる * … 日付＋バッジを dt にまとめ、dd 側の padding-left で桁を作る * * blog_p.css 側の元指定（上書き対象）: * .top-blog__list > dd border-bottom:1px solid #DEE1EA / font-size:14px / padding:10px 0 * .top-blog__list > dt color:#c1272d / position:absolute / margin:0.5vw 0 0 1.5em * .top-blog__list > dd > a padding:0.6vw 3em 0.7vw 7.5em / transition:color .1s linear * a:hover color:#F6921D（オレンジ） * a:after border 2px #c1272d の山形 / right:1em * a:hover:after @keyframes a-top-blog__list（right .5em → 1em） */ /* 色・寸法はここだけ直せば全体が変わる * 2026-08-03 改訂2: SUWAガラスの里様の実例（ユーザー提示）に合わせて調整 * - 日付を薄いグレー → 濃いめのグレー＋やや太字に（情報として読ませる） * - カテゴリバッジを「角丸の塗り」→「ピル型（楕円）＋細い枠線・背景透明」に * - 行の余白をさらに広げ、区切り線をもう少しはっきりさせる */ .top-blog__list { --tn-accent: #c1272d; /* サイトのアクセント赤（ホバー時のみ使う） */ --tn-date: #4a4a4a; /* 日付 */ --tn-cat-border: #c4c4c4; /* カテゴリバッジの枠線 */ --tn-cat-text: #5f5f5f; /* カテゴリバッジの文字 */ --tn-line: #ececec; /* 区切り線 */ --tn-title: #333; /* タイトル */ --tn-arrow: #b5b5b5; /* 矢印 */ --tn-pad: 20px; /* 行の上下余白 */ --tn-left: 14em; /* 日付＋バッジ列の幅（タイトルの開始位置） */ } /* ------------------------------------------------------------------ * 1. 行（dd）— 余白を広げ、罫線を弱める * ------------------------------------------------------------------ */ .top-blog__list > dd { border-bottom: 1px solid var(--tn-line); padding: 0; transition: background-color .25s ease; } .top-blog__list > dd:last-child { border-bottom: none; } /* ------------------------------------------------------------------ * 2. 日付＋カテゴリ（dt） * blog_p.css で position:absolute にされているので、その位置のまま * 横並びの1ブロックとして組み直す * ------------------------------------------------------------------ */ .top-blog__list > dt { color: inherit; margin: 0; padding: var(--tn-pad) 0 0 1.5em; display: flex; align-items: center; gap: .9em; line-height: 1; pointer-events: none; /* リンクはタイトル側。ここでクリックを吸わない */ } .top-blog__list > dt > .top-blog__date { color: var(--tn-date); font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; } /* ピル型（楕円）＋細い枠線・背景透明 */ .top-blog__list > dt > .top-blog__cat { display: inline-block; padding: .5em 1.15em; border: 1px solid var(--tn-cat-border); border-radius: 999px; background-color: transparent; color: var(--tn-cat-text); font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .04em; white-space: nowrap; transition: border-color .25s ease, color .25s ease, background-color .25s ease; } /* ------------------------------------------------------------------ * 3. タイトル（dd > a） * 折り返した2行目以降も1行目と左端がそろうよう padding-left で桁を作る * ------------------------------------------------------------------ */ .top-blog__list > dd > a { display: block; padding: var(--tn-pad) 3em var(--tn-pad) var(--tn-left); color: var(--tn-title); line-height: 1.7; transition: color .25s ease; } /* タイトル本体。ホバーで下線は出さない（ガラスの里様に合わせて撤去・上記5参照）ため 装飾は持たせず、色の変化は親の 側の transition に任せる */ .top-blog__list > dd > a > .top-blog__ttl { display: inline; } /* ------------------------------------------------------------------ * 4. 矢印 — 細く・通常はグレー * ------------------------------------------------------------------ */ .top-blog__list > dd > a:after { width: 6px; height: 6px; max-width: none; max-height: none; min-width: 0; min-height: 0; border-top: 1px solid var(--tn-arrow); border-right: 1px solid var(--tn-arrow); right: 1.2em; transition: transform .25s ease, border-color .25s ease; } /* ------------------------------------------------------------------ * 5. ホバー * * 🔴 2026-08-03 改訂3: SUWAガラスの里様（garasunosato.com の top-modern.css）の * 実装に合わせて「タイトルの色が変わる」「矢印が少し右へ動く」の2つだけにした。 * * 先方の指定（実物）はこれだけ: * .wp-news__link:hover .wp-news__title { color: var(--gc-green); } * .wp-news__link:hover::after { transform: translateX(4px); } * * それまで入れていた下記3つは「動きが多すぎる」ため撤去した: * × 行全体の背景色 （dd:hover の background-color） * × タイトルの下線が左から伸びる （.top-blog__ttl の background-size） * × カテゴリバッジが赤に変わる （.top-blog__cat の色反転） * * blog_p.css の変更前は「文字がオレンジ(#F6921D)＋矢印が @keyframes で right を動かす」。 * ------------------------------------------------------------------ */ /* タイトルの色が変わる */ html.no-touchevents .top-blog__list > dd > a:hover { color: var(--tn-accent); } /* 矢印が少し右へ動く。blog_p.css の @keyframes（right を動かす）は無効化する */ html.no-touchevents .top-blog__list > dd > a:hover:after { animation: none; transform: translate(calc(-50% + 4px), -50%) rotate(45deg); } /* ------------------------------------------------------------------ * 6. スマホ（640px以下） * blog_p.css 側で「日付が上・タイトルが下」に回り込む作りになっているので、 * その前提で余白だけ整える * ------------------------------------------------------------------ */ @media screen and (max-width: 640px) { .top-blog__list > dt { padding: 14px 0 0 1em; gap: .6em; } .top-blog__list > dt > .top-blog__date { font-size: 11px; } .top-blog__list > dt > .top-blog__cat { padding: .45em .95em; font-size: 10px; } .top-blog__list > dd > a { padding: 3.4em 2.4em 16px 1em; /* 上は日付＋バッジ1行ぶんの逃げ */ line-height: 1.65; } .top-blog__list > dd > a:after { right: .9em; } } /* ------------------------------------------------------------------ * 5. 見出し行と「一覧を見る」ボタン（2026-08-26 追加） * * ボタンの見た目は Instagram のフォローボタン（top_instagram.css §3）に合わせた * 黒ピル型。文言だけ「一覧を見る」＋矢印にしている。 * * 🔴 詳細度に注意：本ファイルは gfgs.css より「前」に読まれるため、 * .top-news__head h2（0,1,1）では gfgs.css の .item_m h2（0,1,1）に負ける。 * .item_m を前置して（0,2,1）にして確実に打ち消す。 * 🔴 下線と下余白は h2 から親（.top-news__head）へ移し、 * 見出しとボタンが同じ行に並んだ状態で1本の下線が引かれるようにする。 * ------------------------------------------------------------------ */ .item_m .top-news__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .item_m .top-news__head h2 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .item_m .top-news__more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.7em; border-radius: 999px; background: #262626; color: #fff !important; font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-decoration: none; white-space: nowrap; transition: opacity .25s ease, transform .25s ease; } .item_m .top-news__more::after { content: "\2192"; /* → 。文字化け回避のため Unicode escape で書く */ } html.no-touchevents .item_m .top-news__more:hover { opacity: .82; transform: translateY(-1px); } @media screen and (max-width: 640px) { .item_m .top-news__head { gap: 10px; } .item_m .top-news__more { padding: .7em 1.3em; font-size: 12px; } }