/* ========================================================= 裕平ホームページ — 共通スタイル温かみのある家族のフォトアルバム ========================================================= */ :root { --cream: #fdf8f1; --cream-2: #f6ecdf; --paper: #ffffff; --ink: #3b322b; --ink-soft: #6f6358; --muted: #9a8c7e; --line: #ece0cf; --baby: #e87fa0; /* 1期：ピンク */ --baby2: #e9a14f; /* 2期：アンバー */ --child: #5fa8c4; /* 3期：スカイ */ --home: #e0795f; /* トップ：コーラル */ --accent: var(--home); --accent-ink: #ffffff; --shadow: 0 6px 22px rgba(80, 60, 40, .10); --shadow-sm: 0 2px 10px rgba(80, 60, 40, .08); --radius: 18px; --radius-sm: 12px; --maxw: 1080px; --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, -apple-system, sans-serif; } /* 各ページがを持ち、テーマ色を切替 */ body[data-blog="baby"] { --accent: var(--baby); } body[data-blog="baby2"] { --accent: var(--baby2); } body[data-blog="child"] { --accent: var(--child); } body[data-blog="home"] { --accent: var(--home); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--cream); line-height: 1.85; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- 共通ヘッダー（常時表示・上部固定） ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(253, 248, 241, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: var(--maxw); margin: 0 auto; padding: .6rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: baseline; gap: .5rem; font-weight: 800; letter-spacing: .02em; color: var(--ink); white-space: nowrap; } .brand:hover { text-decoration: none; } .brand__mark { font-size: 1.15rem; } .brand__sub { font-size: .72rem; color: var(--muted); font-weight: 600; } .nav { display: flex; align-items: center; gap: .35rem; } .nav a { display: inline-flex; flex-direction: column; align-items: center; padding: .35rem .8rem; border-radius: 999px; color: var(--ink-soft); font-weight: 700; font-size: .9rem; line-height: 1.2; transition: background .15s, color .15s; } .nav a small { font-weight: 600; font-size: .62rem; color: var(--muted); } .nav a:hover { background: var(--cream-2); text-decoration: none; } .nav a[data-key="baby"].is-active { background: var(--baby); color: #fff; } .nav a[data-key="baby2"].is-active { background: var(--baby2); color: #fff; } .nav a[data-key="child"].is-active { background: var(--child); color: #fff; } .nav a.is-active small { color: rgba(255,255,255,.85); } .nav__toggle { display: none; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; width: 42px; height: 38px; font-size: 1.2rem; cursor: pointer; color: var(--ink); } /* ---------- レイアウト ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; } main { min-height: 60vh; padding-bottom: 3rem; } /* ---------- ブログ別ヒーロー ---------- */ .blog-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--cream)), var(--cream)); border-bottom: 1px solid var(--line); padding: 2.4rem 0 2rem; margin-bottom: 2rem; } .blog-hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; } .blog-hero h1 { margin: 0 0 .4rem; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .02em; } .blog-hero .lead { margin: 0; color: var(--ink-soft); font-weight: 600; } .blog-hero .period { display: inline-block; margin-top: .7rem; background: var(--paper); color: var(--accent); border: 1px solid var(--line); padding: .2rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; } /* ---------- 記事一覧（カードグリッド） ---------- */ .entry-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card__media { aspect-ratio: 4 / 3; background: var(--cream-2); overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card__media--empty { display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 2rem; opacity: .5; } .card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; } .card__date { font-size: .76rem; color: var(--muted); font-weight: 700; letter-spacing: .03em; } .card__title { margin: 0; font-size: 1.05rem; line-height: 1.5; } .card__title a { color: var(--ink); } .card__title a:hover { color: var(--accent); text-decoration: none; } .card__excerpt { margin: 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.7; } /* 一覧上部の見出し帯 */ .list-meta { margin: 0 0 1.4rem; color: var(--muted); font-size: .9rem; font-weight: 600; } /* ---------- 記事本文 ---------- */ .article { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); max-width: 760px; margin: 0 auto; padding: 2rem clamp(1.1rem, 4vw, 2.6rem) 2.4rem; } .article__date { color: var(--accent); font-weight: 700; font-size: .85rem; letter-spacing: .04em; } .article__title { margin: .3rem 0 1.2rem; font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.45; border-bottom: 2px solid var(--cream-2); padding-bottom: .8rem; } .article__meta { color: var(--muted); font-size: .8rem; margin-bottom: 1.4rem; } .article__meta .cat { display: inline-block; background: var(--cream-2); color: var(--ink-soft); border-radius: 999px; padding: .1rem .7rem; font-weight: 700; } .article__body { font-size: 1.02rem; } .article__body p { margin: 0 0 1.1rem; } .article__body img { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); margin: .4rem 0; cursor: zoom-in; } .article__body h2, .article__body h3 { line-height: 1.5; } /* 記事内ページ送り */ .post-nav { display: flex; justify-content: space-between; gap: 1rem; max-width: 760px; margin: 1.6rem auto 0; font-size: .9rem; font-weight: 700; } .post-nav a { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem; box-shadow: var(--shadow-sm); } .post-nav a:hover { text-decoration: none; background: var(--cream-2); } /* ---------- 記事下：同月ナビ ---------- */ .month-nav { max-width: 760px; margin: 1.6rem auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.2rem clamp(1.1rem, 4vw, 1.8rem) 1.4rem; } .month-nav__title { margin: 0 0 .8rem; font-size: 1.05rem; border-bottom: 2px solid var(--cream-2); padding-bottom: .6rem; } .month-nav__title a { color: var(--ink); } .month-nav__title a:hover { color: var(--accent); } .month-list { list-style: none; margin: 0 0 1rem; padding: 0; columns: 2; column-gap: 1.6rem; } .month-list li { break-inside: avoid; font-size: .9rem; line-height: 1.5; padding: .25rem 0; } .month-list a { color: var(--ink-soft); } .month-list a:hover { color: var(--accent); text-decoration: none; } .month-list .month-list__d { display: inline-block; min-width: 3.1em; color: var(--muted); font-weight: 700; font-size: .8rem; margin-right: .3rem; } .month-list li.is-current { font-weight: 800; color: var(--accent); } .month-list li.is-current::before { content: "▶ "; font-size: .7em; } .month-jump { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--cream-2); padding-top: 1rem; } .month-jump a { background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem; font-size: .85rem; font-weight: 700; color: var(--ink-soft); } .month-jump a:hover { background: var(--cream-2); text-decoration: none; color: var(--accent); } .month-jump__cur { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } .month-jump__next { margin-left: auto; } @media (max-width: 560px) { .month-list { columns: 1; } .month-jump { justify-content: center; } .month-jump__next { margin-left: 0; } } /* ---------- 汎用（フォールバックページ） ---------- */ .plain { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); max-width: 820px; margin: 0 auto; padding: 1.8rem clamp(1.1rem,4vw,2.4rem); } .plain img { border-radius: var(--radius-sm); } /* ---------- フッター ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--cream-2); color: var(--muted); text-align: center; padding: 2rem 1.2rem; font-size: .82rem; } .site-footer .foot-nav { margin-bottom: .6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .site-footer .foot-nav a { color: var(--ink-soft); font-weight: 700; } /* ---------- ランディング（トップ） ---------- */ .home-hero { text-align: center; padding: 3.4rem 1.2rem 2.6rem; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--home) 18%, var(--cream)), var(--cream)); } .home-hero h1 { margin: 0 0 .6rem; font-size: clamp(1.9rem, 6vw, 3rem); letter-spacing: .03em; } .home-hero p { margin: 0 auto; max-width: 620px; color: var(--ink-soft); font-weight: 600; } .home-hero .years { margin-top: 1rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; font-size: .85rem; } .blog-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; margin: 2.4rem auto 3.5rem; } .blog-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; text-decoration: none; background: var(--cream-2); transition: transform .2s; } .blog-card:hover { transform: translateY(-6px); text-decoration: none; } .blog-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .blog-card__overlay { position: relative; z-index: 1; padding: 1.4rem; background: linear-gradient(to top, rgba(40,28,20,.82), rgba(40,28,20,.15) 70%, transparent); } .blog-card__no { font-size: .72rem; font-weight: 800; letter-spacing: .15em; opacity: .9; } .blog-card__ttl { font-size: 1.45rem; font-weight: 800; margin: .15rem 0 .25rem; } .blog-card__desc{ font-size: .82rem; opacity: .92; line-height: 1.6; } .blog-card__period { font-size: .74rem; opacity: .85; margin-top: .5rem; font-weight: 700; } .blog-card[data-key="baby"] { box-shadow: 0 8px 28px color-mix(in srgb, var(--baby) 35%, transparent); } .blog-card[data-key="baby2"] { box-shadow: 0 8px 28px color-mix(in srgb, var(--baby2) 35%, transparent); } .blog-card[data-key="child"] { box-shadow: 0 8px 28px color-mix(in srgb, var(--child) 35%, transparent); } /* ---------- ライトボックス ---------- */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(25, 18, 12, .9); display: none; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 95vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); } /* ---------- レスポンシブ ---------- */ @media (max-width: 720px) { .nav { position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: .5rem; display: none; } .nav.is-open { display: flex; } .nav a { flex-direction: row; justify-content: space-between; border-radius: 10px; padding: .7rem 1rem; } .nav a small { font-size: .7rem; } .nav__toggle { display: inline-block; } .site-header__inner { position: relative; } .brand__sub { display: none; } .entry-list { grid-template-columns: 1fr; } }