/* * プロジェクト事例(/project)用スタイル。 * ブログ(blog.css)の hero / grid / l-main / 背景を流用し、 * 事例カード（画像枠を2行テキストに置換）とモーダル詳細だけをここで定義する。 * ページのは class="page-blog page-project" を付与する。 */ /* アクセント色（青）。--blog-accent が無い環境でも破綻しないようフォールバック。 */ .page-project { --proj-accent: #2563eb; --proj-pill-bg: #e8f0fe; --proj-pill-fg: #1b59c9; } /* ===== Grid（白カードを2カラムで） ===== */ .page-project .proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } /* ===== Card（白・枠線・ホバー/選択で青枠） ===== */ .proj-card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 22px 24px; box-shadow: 0 4px 16px rgba(20, 35, 63, 0.05); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; font: inherit; color: inherit; } .proj-card:hover, .proj-card:focus-visible { transform: translateY(-3px); border-color: var(--proj-accent); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.16); outline: none; } /* カテゴリpiル（theme を流用） */ .proj-card_cat { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--proj-pill-bg); color: var(--proj-pill-fg); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .proj-card_headline { margin-top: 14px; font-size: 18px; line-height: 1.55; font-weight: 800; color: #16233d; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .proj-card_client { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--blog-sub, #6b7280); } .proj-card_more { margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 700; color: var(--proj-accent); } .proj-card_more::after { content: " →"; } /* ===== Modal ===== */ .proj-modal[hidden] { display: none; } .proj-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .proj-modal_overlay { position: absolute; inset: 0; background: rgba(12, 20, 38, 0.6); backdrop-filter: blur(2px); } .proj-modal_inner { position: relative; width: min(960px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(12, 20, 38, 0.35); animation: projModalIn 0.22s ease; } @keyframes projModalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ヘッダーバー（紺・カテゴリ / 企業様 / 年） */ .proj-modal_bar { display: flex; align-items: center; gap: 14px; padding: 16px clamp(20px, 4vw, 40px); /* 右上の閉じる(×)ボタン(右端から約52px)と年表示が重ならないよう、余裕を持った右余白を確保 */ padding-right: 72px; background: linear-gradient(135deg, var(--blog-navy) 0%, var(--blog-navy-2) 100%); color: #fff; border-radius: 16px 16px 0 0; } .proj-modal_cat { flex-shrink: 0; padding: 5px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .proj-modal_client { font-size: 14px; font-weight: 600; } .proj-modal_year { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 13px; opacity: 0.8; } .proj-modal_content { padding: 28px clamp(20px, 4vw, 44px) 36px; } .proj-modal_label { font-size: 13px; font-weight: 700; color: var(--proj-accent); margin-bottom: 10px; } .proj-modal_title { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.5; font-weight: 800; color: #16233d; } /* タグchips */ .proj-modal_tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; } .proj-modal_tag { padding: 5px 14px; border-radius: 999px; background: #f1f3f7; color: #4a5365; font-size: 12.5px; font-weight: 600; } /* 本文（左） + 画像（右）の2カラム */ .proj-modal_main { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 3vw, 36px); margin-top: 22px; align-items: start; } .proj-modal_body p { margin: 0 0 16px; font-size: 15px; line-height: 1.95; color: #2a3240; } .proj-modal_body p:last-child { margin-bottom: 0; } .proj-modal_figure { margin: 0; } .proj-modal_figure[hidden] { display: none; } .proj-modal_figure img { width: 100%; height: auto; border-radius: 12px; background: #f6f7f9; } /* ストアボタン + CTA（3要素を同じ高さで横並び。ストアはCTAの左に配置） */ .proj-modal_actions { --action-h: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #eef1f5; } .proj-store { display: inline-flex; align-items: center; height: var(--action-h); } .proj-store[hidden] { display: none; } .proj-store img { height: 100%; width: auto; display: block; } .proj-modal_cta { display: inline-flex; align-items: center; height: var(--action-h); padding: 0 24px; border-radius: 8px; background: linear-gradient(135deg, var(--blog-navy) 0%, var(--blog-navy-2) 100%); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: opacity 0.2s; } .proj-modal_cta:hover { opacity: 0.9; } .proj-modal_close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s; } .proj-modal_close:hover { background: rgba(255, 255, 255, 0.34); } .proj-modal_close { z-index: 4; } body.proj-modal-open { overflow: hidden; } /* ローディング（画像を含む全要素が整うまで中身を隠してスピナーのみ表示） */ .proj-modal_loading { display: none; } .proj-modal_inner.is-loading { min-height: 300px; } .proj-modal_inner.is-loading > .proj-modal_bar, .proj-modal_inner.is-loading > .proj-modal_content { visibility: hidden; } .proj-modal_inner.is-loading .proj-modal_loading { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; background: #fff; border-radius: 16px; z-index: 3; } .proj-modal_spinner { width: 40px; height: 40px; border: 4px solid #e3e8ef; border-top-color: var(--proj-accent, #2563eb); border-radius: 50%; animation: projSpin 0.8s linear infinite; } @keyframes projSpin { to { transform: rotate(360deg); } } /* ===== Responsive ===== */ @media (max-width: 860px) { .proj-modal_main { grid-template-columns: 1fr; } /* 画像は本文の上に来るよう順序を入れ替える */ .proj-modal_figure { order: -1; } } @media (max-width: 600px) { .page-project .proj-grid { grid-template-columns: 1fr; gap: 16px; } .proj-card_headline { font-size: 17px; } .proj-modal_bar { flex-wrap: wrap; gap: 8px 12px; } .proj-modal_year { width: 100%; margin-left: 0; } .proj-modal_actions { gap: 14px; } .proj-modal_cta { margin-left: 0; width: 100%; justify-content: center; } }