@charset "UTF-8"; /* * お問い合わせセレクトページ用スタイル * * 【テーマへの組み込み例】 * header.php の 内、他ページ用CSSと同様に追記： * /css/contact-select-page.css" type="text/css" media="all" /> * * * または「カスタムHTML」ブロックのみで運用する場合は、 * 固定ページの「カスタムフィールド」や「追加CSS」欄に本ファイルの内容を貼り付け、 * 冒頭の .contact-select をより限定的なラッパーに変更しても構いません。 */ .contact-select { box-sizing: border-box; max-width: 920px; margin: 0 auto; padding: 28px 20px 48px; background-color: #f5f2eb; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #333; line-height: 1.75; } .contact-select *, .contact-select *::before, .contact-select *::after { box-sizing: border-box; } .contact-select__header { text-align: center; margin-bottom: 36px; padding: 0 8px; } .contact-select__title { margin: 0 0 16px; font-size: 1.375rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.45; color: #2e4979; } @media (min-width: 768px) { .contact-select__title { font-size: 1.5rem; } } .contact-select__lead { margin: 0 auto; max-width: 36em; font-size: 0.9375rem; font-weight: 400; line-height: 1.85; color: #444; } .contact-select__grid { display: grid; grid-template-columns: 1fr; gap: 20px; list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .contact-select__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 24px; } } .contact-select__item { margin: 0; padding: 0; display: flex; min-height: 100%; } /* カード全体クリック：アンカーを伸ばす */ .contact-select__card { display: flex; flex-direction: column; flex: 1; min-height: 100%; padding: 22px 22px 20px; background-color: #fff; border: 1px solid rgba(46, 73, 121, 0.12); border-radius: 4px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } @media (min-width: 768px) { .contact-select__card { padding: 24px 26px 22px; min-height: 168px; } } .contact-select__card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(46, 73, 121, 0.1); border-color: rgba(46, 73, 121, 0.22); } .contact-select__card:focus { outline: 2px solid #2e4979; outline-offset: 3px; } .contact-select__card:focus:not(:focus-visible) { outline: none; } .contact-select__card:focus-visible { outline: 2px solid #2e4979; outline-offset: 3px; } .contact-select__card-title { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #e8e4dc; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; color: #2e4979; } @media (min-width: 768px) { .contact-select__card-title { font-size: 1.0625rem; } } .contact-select__card-text { margin: 0; flex: 1; font-size: 0.875rem; font-weight: 400; line-height: 1.85; color: #444; }