News006

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Grid, HTML, Flex, Icon, Stack, Columns } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.astro';
import './_style.css';
---

<DemoLayout title='News006'>
	<Container isWrapper='l' bgc='base-2' py='50' hasGutter>
		<Grid gtr={['auto', null, 'auto auto 1fr']} gtc={['auto', null, 'auto 1fr']} g='30'>
			<Stack gr='1' gc='1' g='20' min-w={['auto', null, '12rem']}>
				<HTML.p class='u-trim' fz='2xl' fw='light' lts='l'>News</HTML.p>
				<HTML.h lv='2' class='u-trim' fz='xs' o='-20'>お知らせ</HTML.h>
			</Stack>
			<Grid layout='fluidCols' cols='22rem' gr={['2', null, '1 / -1']} gc={['1', null, '2']} g='30'>
				<Grid gtr='subgrid' gr='span 2' g='30' isLinkBox tag='a' href='#' bgc='white' p='30' bdrs='20' setTransition setHov hov='bxsh'>
					<Grid gtc='1fr auto' g='20' jc='start' ai='center'>
						<HTML.p fz='s'>2025.10.30</HTML.p>
						<HTML.p d='if' jc='center' fz='2xs' lh='1' bgc='base-2' c='text' p='10 20' bdrs='99'>COLUMN</HTML.p>
					</Grid>
					<Flex c='text' g='30'>
						<Stack class='u-trimItems' g='30'>
							<HTML.p setTransition hov='to:cLink'>デザインコラム更新「UIデザインにおけるアクセシビリティの重要性」</HTML.p>
							<HTML.p fz='s' o='-20'
								>デザインコラムを更新しました。「Webアクセシビリティ」の基本的な考え方と、
								今日から実践できるポイントについて解説します。</HTML.p
							>
						</Stack>
						<Flex ai='center' jc='center' aslf='e' p='15' bd bdc='black' bdrs='99' setTransition hov='to:reverse'>
							<Icon icon='caret-right' fz='xs' mx-s='auto' />
						</Flex>
					</Flex>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' isLinkBox tag='a' href='#' bgc='white' p='30' bdrs='20' setTransition setHov hov='bxsh'>
					<Grid gtc='1fr auto' g='20' jc='start' ai='center'>
						<HTML.p fz='s'>2025.10.30</HTML.p>
						<HTML.p d='if' jc='center' fz='2xs' lh='1' bgc='base-2' c='text' p='10 20' bdrs='99'>EVENT</HTML.p>
					</Grid>
					<Flex c='text' g='30'>
						<Stack class='u-trimItems' g='30'>
							<HTML.p setTransition hov='to:cLink'>「LOOS DESIGN CONFERENCE 2025」登壇のお知らせ</HTML.p>
							<HTML.p fz='s' o='-20'
								>2025年12月5日（金）に開催される国内最大級のデザインカンファレンスに、弊社アートディレクターの〇〇が登壇。「デザインがビジネスにもたらす価値」についてお話しします。</HTML.p
							>
						</Stack>
						<Flex ai='center' jc='center' aslf='e' p='15' bd bdc='black' bdrs='99' setTransition hov='to:reverse'>
							<Icon icon='caret-right' fz='xs' mx-s='auto' />
						</Flex>
					</Flex>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' isLinkBox tag='a' href='#' bgc='white' p='30' bdrs='20' setTransition setHov hov='bxsh'>
					<Grid gtc='1fr auto' g='20' jc='start' ai='center'>
						<HTML.p fz='s'>2025.10.30</HTML.p>
						<HTML.p d='if' jc='center' fz='2xs' lh='1' bgc='base-2' c='text' p='10 20' bdrs='99'>RELEASE</HTML.p>
					</Grid>
					<Flex c='text' g='30'>
						<Stack class='u-trimItems' g='30'>
							<HTML.p setTransition hov='to:cLink'>新サービス「スタートアップ向けブランディング支援パッケージ」提供開始</HTML.p>
							<HTML.p fz='s' o='-20'
								>スタートアップ企業様を対象としたスピーディーかつ高品質なブランディング支援パッケージの提供を開始しました。
								ロゴ、Webサイト、名刺までをワンストップでご提供します。</HTML.p
							>
						</Stack>
						<Flex ai='center' jc='center' aslf='e' p='15' bd bdc='black' bdrs='99' setTransition hov='to:reverse'>
							<Icon icon='caret-right' fz='xs' mx-s='auto' />
						</Flex>
					</Flex>
				</Grid>
				<Grid gtr='subgrid' gr='span 2' g='30' isLinkBox tag='a' href='#' bgc='white' p='30' bdrs='20' setTransition setHov hov='bxsh'>
					<Grid gtc='1fr auto' g='20' jc='start' ai='center'>
						<HTML.p fz='s'>2025.10.30</HTML.p>
						<HTML.p d='if' jc='center' fz='2xs' lh='1' bgc='base-2' c='text' p='10 20' bdrs='99'>NEWS</HTML.p>
					</Grid>
					<Flex c='text' g='30'>
						<Stack class='u-trimItems' g='30'>
							<HTML.p setTransition hov='to:cLink'>オフィス移転および電話番号変更のお知らせ</HTML.p>
							<HTML.p fz='s' o='-20'
								>業務拡大に伴いオフィスを下記住所へ移転いたしました。
								社員一同より一層の努力を重ねてまいります。今後とも変わらぬご愛顧を賜りますようお願い申し上げます。</HTML.p
							>
						</Stack>
						<Flex ai='center' jc='center' aslf='e' p='15' bd bdc='black' bdrs='99' setTransition hov='to:reverse'>
							<Icon icon='caret-right' fz='xs' mx-s='auto' />
						</Flex>
					</Flex>
				</Grid>
			</Grid>
			<Flex gr={['3', null, '2']} gc='1'>
				<Button href='#' jc='center' w={['stretch', null, 'auto']} min-w='8rem' fz='s' p='15' bdrs='99'>View All</Button>
			</Flex>
		</Grid>
	</Container>
</DemoLayout>

<style>
	@media (any-hover: hover) {
		.-hov\:to\:reverse {
			background-color: var(--_isHov, var(--black));
			color: var(--_isHov, var(--white));
		}
		.-hov\:to\:cLink {
			color: var(--_isHov, var(--link));
		}
	}
</style>