@charset "utf-8"; /* ========================================================= utility.css — 単体タグで完結するユーティリティ（u-） ========================================================= */ /* ---- inner フレーム（docs/design-direction.md 3章）-------------------- 標準 1200 / _wide 1400（実績グリッド・画像帯・KV画像）/ _max 1600（ヘッダー・パンくず）/ _fluid 左右余白つきのフルサイズ（KV・CTA帯） / _text 800（読み物） フルブリードは inner を使わない。背景色・罫線・装飾のみに使い、コンテンツは置かない。 ------------------------------------------------------------------ */ .u-inner { width: min(var(--w-inner), 100% - var(--gutter) * 2); margin-inline: auto; &._wide { width: min(var(--w-wide), 100% - var(--gutter) * 2); } &._max { width: min(var(--w-max), 100% - var(--gutter) * 2); } &._fluid { width: calc(100% - var(--gutter) * 2); } &._text { width: min(var(--w-text), 100% - var(--gutter) * 2); } } /* 幅だけ読み物幅に制限する（中央寄せしない）。セクション内の本文ブロック用 */ .u-mwText { max-width: var(--w-text); } /* ---- 余白 ----------------------------------------------------------- */ .u-mt-xs { margin-block-start: var(--sp-xs); } .u-mt-s { margin-block-start: var(--sp-s); } .u-mt-m { margin-block-start: var(--sp-m); } .u-mt-l { margin-block-start: var(--sp-l); } /* ---- 表示切替 -------------------------------------------------------- SP / PC の出し分け。表示側は display を指定せず要素本来の値に任せるので、
（SPだけで改行）のようにインライン要素にも使える */ .u-only-pc { display: none; } @media print, screen and (min-width: 640px) { .u-only-sp { display: none; } .u-only-pc { display: revert; } } /* ---- アイコン（Lucide・ISC）------------------------------------------ 装飾として置くアイコン（カード・CTA・featureList の見出し横）は --cl-text（黒）で固定（§8）。 リンクとして機能するアイコン（矢印・SNS・パンくずの家・丸矢印）だけ、各パーツ側で 文字色（currentColor）に追従させ、ホバーでオレンジにする。 状態を示すアイコンだけ例外：肯定・推奨は --cl-accent、否定・非推奨は --cl-text-sub。SVGは assets/images/common/icons/ に置く。 */ .u-ico { display: inline-block; width: 1em; height: 1em; flex: none; background-color: var(--cl-text); -webkit-mask: var(--u-ico) no-repeat center / contain; mask: var(--u-ico) no-repeat center / contain; } .u-ico-shield-check { --u-ico: url(../images/common/icons/shield-check.svg); } .u-ico-megaphone { --u-ico: url(../images/common/icons/megaphone.svg); } .u-ico-target { --u-ico: url(../images/common/icons/target.svg); } .u-ico-pen-tool { --u-ico: url(../images/common/icons/pen-tool.svg); } .u-ico-file-text { --u-ico: url(../images/common/icons/file-text.svg); } .u-ico-download { --u-ico: url(../images/common/icons/download.svg); } .u-ico-handshake { --u-ico: url(../images/common/icons/handshake.svg); } .u-ico-camera { --u-ico: url(../images/common/icons/camera.svg); } .u-ico-monitor-cog { --u-ico: url(../images/common/icons/monitor-cog.svg); } .u-ico-messages-square { --u-ico: url(../images/common/icons/messages-square.svg); } .u-ico-arrow-right { --u-ico: url(../images/common/icons/arrow-right.svg); } .u-ico-chevron-right { --u-ico: url(../images/common/icons/chevron-right.svg); } .u-ico-check { --u-ico: url(../images/common/icons/check.svg); } .u-ico-x { --u-ico: url(../images/common/icons/x.svg); } .u-ico-rocket { --u-ico: url(../images/common/icons/rocket.svg); } .u-ico-search { --u-ico: url(../images/common/icons/search.svg); } .u-ico-sns-x { --u-ico: url(../images/common/icons/sns-x.svg); } .u-ico-sns-instagram { --u-ico: url(../images/common/icons/sns-instagram.svg); } .u-ico-sns-facebook { --u-ico: url(../images/common/icons/sns-facebook.svg); } .u-ico-sns-line { --u-ico: url(../images/common/icons/sns-line.svg); } .u-ico-sns-google { --u-ico: url(../images/common/icons/sns-google.svg); } .u-ico-mail-check { --u-ico: url(../images/common/icons/mail-check.svg); } .u-ico-send { --u-ico: url(../images/common/icons/send.svg); } .u-ico-users { --u-ico: url(../images/common/icons/users.svg); } .u-ico-user-plus { --u-ico: url(../images/common/icons/user-plus.svg); } .u-ico-book-open { --u-ico: url(../images/common/icons/book-open.svg); } .u-ico-library-big { --u-ico: url(../images/common/icons/library-big.svg); } .u-ico-newspaper { --u-ico: url(../images/common/icons/newspaper.svg); } .u-ico-message-square-quote { --u-ico: url(../images/common/icons/message-square-quote.svg); } .u-ico-layout-grid { --u-ico: url(../images/common/icons/layout-grid.svg); } .u-ico-building { --u-ico: url(../images/common/icons/building.svg); } .u-ico-map-pin { --u-ico: url(../images/common/icons/map-pin.svg); } .u-ico-lightbulb { --u-ico: url(../images/common/icons/lightbulb.svg); } .u-ico-trending-up { --u-ico: url(../images/common/icons/trending-up.svg); } .u-ico-spd { --u-ico: url(../images/common/spd_mark.svg); } /* 目では見せず、読み上げには残す */ .u-visuallyHidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- テキスト -------------------------------------------------------- */ .u-txt-s { font-size: var(--fs-s); } .u-txt-gr { color: var(--cl-text-sub); } .u-txt-center { text-align: center; } .u-read { line-height: var(--lh-body); } /* ---- スクロールフェードイン（design-direction §10）------------------------ 動きは1種類だけ：opacity 0→1 ＋ 下から --fade-y、--fade-t、ease-out。scale・blur・横・回転は使わない。 既定は表示。 のときだけ透明で待たせ、base.js が .is-shown を付けたら出す （JS が動かない環境・検索エンジン・スクショでは最初から表示）。 u-fade＝塊そのもの／u-fade-group＝直下の子を --fade-step ずつ遅らせる（7個目以降は6個目と同時）。 白カードのホバー（transition・translate）とぶつけないため、transition ではなく animation と transform で動かす。 ページ側に遅延や距離を書かない */ @keyframes u-fade { from { opacity: 0; transform: translateY(var(--fade-y)); } to { opacity: 1; transform: none; } } .js :is(.u-fade, .u-fade-group > *) { opacity: 0; } .js :is(.u-fade.is-shown, .u-fade-group.is-shown > *) { opacity: 1; animation: u-fade var(--fade-t) ease-out both; } /* 上の animation の一括指定で遅延が 0 に戻らないよう、同じ強さで後ろに書く */ .js .u-fade-group > :nth-child(2) { animation-delay: var(--fade-step); } .js .u-fade-group > :nth-child(3) { animation-delay: calc(var(--fade-step) * 2); } .js .u-fade-group > :nth-child(4) { animation-delay: calc(var(--fade-step) * 3); } .js .u-fade-group > :nth-child(5) { animation-delay: calc(var(--fade-step) * 4); } .js .u-fade-group > :nth-child(n + 6) { animation-delay: calc(var(--fade-step) * 5); } /* 動きを減らす設定：最初から全部表示（animation は base.css で止めている）*/ @media (prefers-reduced-motion: reduce) { .js :is(.u-fade, .u-fade-group > *) { opacity: 1; } }