@charset "utf-8";
@layer reset, layout, base, components;

/*** reset ***/
@layer reset{
*, *::before, *::after{margin:0;padding:0;box-sizing:border-box;min-inline-size:0;}
:where(:root){scrollbar-gutter:stable;/*color-scheme:light dark;*/-webkit-text-size-adjust:100%;text-size-adjust:100%;line-break:strict;overflow-wrap:anywhere;text-autospace:normal;}
html,body{min-block-size:100dvb;}
body{-webkit-font-smoothing:antialiased;}
:where(img, picture, svg, video, iframe, embed, object) {/*border:0;*/max-inline-size:min(100%, 100vi);block-size:auto;}
:where(ul,ol){list-style:none;}
:where(table){border-collapse:collapse;border:none;}
:where(th) {font-weight: normal;}
:where(p,h1,h2,h3,h4,h5,h6){font-weight:normal;}
:where(h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;text-wrap:pretty;}
:where(a){display:inline-block;text-decoration:none;outline:none;}
:where(sup,sub){line-height:1px;}
:where(input,textarea,select){font:inherit;color:inherit;text-align:unset;text-autospace:no-autospace;}
:where(button,label[for],select,summary,[role='tab'],[role='button'],[role='option'],:any-link){cursor:pointer;touch-action:manipulation;}
:where(:focus-visible){outline:2px solid var(--color-accent-high,Highlight); outline-offset:2px;}
}

/*** reduced motion どのレイヤーにも入れない ***/
@media (prefers-reduced-motion: reduce){*, *::before, *::after{transition-delay:0s !important;transition-duration:1ms !important;animation-delay:0s !important;animation-duration:1ms !important;animation-iteration-count: 0 !important;background-attachment:initial;}}
@media (prefers-reduced-motion: no-prefence){html{interpolate-size:allow-keywords;}}

/*** common ***/
@property --color-brand{syntax:"<color>"; inherits:false; initial-value:#317cb9;}
@property --color-bg-main{syntax:"<color>"; inherits:false; initial-value:light-dark(#fcfdff, #1d252b);}
@property --color-text-main{syntax:"<color>"; inherits:false; initial-value:light-dark(#1d252b, #dadee2);}
@property --color-text-soft{syntax:"<color>"; inherits:false; initial-value:oklch(0.45 0.01 240.66);}
@property --color-text-heading{syntax:"<color>"; inherits:false; initial-value:#0054A5;}
@property --color-text-subheading{syntax:"<color>"; inherits:false; initial-value:light-dark(#c33, #b24d4d);}
@property --color-text-link{syntax:"<color>"; inherits:false; initial-value:light-dark(#2f77b1, #6992b3);}
@property --color-accent-high{syntax:"<color>"; inherits:false; initial-value:#00A0EA;}
@property --color-accent-low{syntax:"<color>"; inherits:false; initial-value:#0054A5;}
@property --color-accent-point{syntax:"<color>"; inherits:false; initial-value:light-dark(#c33, #b24d4d);}
@property --color-border{syntax:"<color>"; inherits:false; initial-value:light-dark(#ccc,#333);}

@property --spacing-s{syntax:"<length>"; inherits:false; initial-value:4px;}
@property --spacing-m{syntax:"<length>"; inherits:false; initial-value:10px;}
@property --header_minheight{syntax:"<length-percentage>"; inherits:false; initial-value:96px;}
@property --nav-width{syntax:"<length-percentage>"; inherits:true; initial-value:196px;}
@property --aside_width{syntax:"<length-percentage>"; inherits:true; initial-value:218px;}
@property --footer_minheight{syntax:"<length-percentage>"; inherits:false; initial-value:48px;}

@property --content_width{syntax:"<length-percentage>"; inherits:true; initial-value:50%;}/*横並びコンテンツに適用　個別に変更される可能性あり*/
/*@property --movieratio_x{syntax:"<integer>"; inherits:false; initial-value:16;}*//*動画の縦横比　個別に変更される可能性あり*/
/*@property --movieratio_y{syntax:"<integer>"; inherits:false; initial-value:9;}*/

@layer base{
	:root {
		font-size:84%; font-family:Meiryo, "Helvetica Neue", "Lucida Grande", Verdana, Arial, "Hiragino Kaku Gothic Pro", Osaka, "BIZ UDPGothic", sans-serif; color:var(--color-text-main,#000);
		line-height:calc(0.5rem + 1.8em);
		scroll-padding-block:var(--common_spacing-m);
		text-autospace:normal;
		accent-color:var(--color-accent-low);
	}
	body {background:#03036A;}
	:where(.l-contents-grid) {
		font-size: 1.2rem;
		background: var(--color-border);
	}
}

/*** layout ***/
@layer layout{
	:where(.l-contents-grid){
		inline-size:100%;
		min-block-size:100vh;
		display:grid;
		grid-template:"header"
					"main"
					"aside"
					"nav"
					"footer" / 1fr;
		grid-auto-flow:row;
		place-content:stretch; place-items:stretch;
		gap: 1px; margin-inline: auto;
		& > *{min-inline-size:100%;}
		& > :where(main, nav.side-nav, aside, footer){background:var(--color-bg-main, #fff);}
		& > :where(main, nav.side-nav, aside){padding-bottom:calc(env(safe-area-inset-bottom, 0) + 2em);}
	}
	header{grid-area:header; order:10;}
	main{
		container: maincontents / inline-size;
		grid-area:main; order:20;
		min-inline-size:min(600px, 100%); min-block-size:calc(100svb - var(--header_minheight, 96px) - var(--footer_minheight, 4em));
	}
	:where(nav.side-nav){grid-area:nav; order:40;}
	aside{
		grid-area:aside; order:30;
		--aside_width:100%;
		inline-size:var(--aside_width);
	}
	footer{
		--footer_minheight:4em;
		grid-area:footer;order:50;
		min-block-size:var(--footer_minheight);
		line-height:var(--footer_minheight);
	}
}

/*** header and footer ***/
@layer base{
	header{
		padding:20px;
		background:linear-gradient(to top,var(--color-border) 4%, #EEE 88%);
		min-block-size:var(--header_minheight); block-size:fit-content;
		overflow-x:hidden;
	}
	.header_logo, .header_logo a{
		display:block;
		width:252px; height:23px;
		font-size:0;
		line-height:0;
	}
	.header_logo{
		margin-bottom:10px;
		color:transparent;
		background:url(images/style/spectra.gif) no-repeat;
		object-fit:contain;
		mix-blend-mode:darken;
	}
	.header_text{font-size: 1.2rem;} /* トップページのみh1に適用 */

	footer{text-align:center;}
}

/*** aside ***/
@layer base{
	:is(aside, nav.side-nav) :is(h2){
		margin-block:16px;
		text-align:center;
		font-size:1.2rem; font-weight:bold; color:var(--color-text-soft, currentColor);
		border:unset;
	}
	aside{
		& a:has(img){text-align:center;}
		& img {margin-inline:auto; margin-block:24px 2px;}
		& :where(div, ul){padding-inline:var(--spacing-m);}
		& div{margin-block:8px;}
		& ul li{
			height: 100%;
			margin-block:8px;
		}
	}
}

/*** global navigation ***/
@property --menu_color1{syntax:"<color>"; inherits:true; initial-value:#0054A5;}
@property --menu_color2{syntax:"<color>"; inherits:true; initial-value:#0054A5;}
@property --menu_color3{syntax:"<color> | <image>"; inherits:true; initial-value:#0054A5;}

@layer base{
	:where(nav.side-nav) > :where(div, ul, ol){padding-inline:var(--spacing-m);}

	a:has(.sc_logo){margin-inline:auto; margin-block:15px 20px;}
	:where(.sc_logo, a:has(.sc_logo)){width:96px; height:68px;}

	.menu_l{
		display:block flex; flex-flow:column wrap;
		color:#fff;
		font-weight:bold; line-height:1.8;
		text-shadow:0px 0px 1px #333, 1px 1px 4px #333;
		& :where(ul){
			position:static;
			display:block flow-root;
		}
		& li{
			list-style:none;
			background:var(--menu_color1);
			& li{background:var(--menu_color2)}
			& li a:where(:focus-visible, :active){background:linear-gradient(to top, currentColor 2px, transparent 2px 100%), linear-gradient(135deg, var(--menu_color3) 70%, oklch(from var(--menu_color3) l calc(c + 0.03) calc(h + 30)));}
			& li a:hover{ @media (any-hover:hover){background:linear-gradient(to top, currentColor 2px, transparent 2px 100%), linear-gradient(135deg, var(--menu_color3) 70%, oklch(from var(--menu_color3) l calc(c + 0.03) calc(h + 30)));}}
			& a{padding:1em;}
			&.new{
				--menu_color1:#F798A0;
				--menu_color2:#ED8990;
				--menu_color3:#E67F85;
			}
			&.machine{
				--menu_color1:#86C6CE;
				--menu_color2:#7CB0B8;
				--menu_color3:#72A2AA;
			}
			&.meter{
				--menu_color1:#FFC37B;
				--menu_color2:#FFAD71;
				--menu_color3:#FF9F67;
			}
			&.parts{
				--menu_color1:#7CB99B;
				--menu_color2:#72A58C;
				--menu_color3:#689781;
			}
		}
		& > li{padding:12px;}
		& a{color:currentColor;}
	}

	.menu_s{
		text-align:center;
		& :where(li){
			padding:4px;
			list-style:none;
		}
		& a{color:currentColor;
			&:where(:hover, :focus){color:var(--color-text-soft);}
		}
	}
}

@layer components{
	.contact{
		display:block;
		margin:2px;padding:8px;
		background:linear-gradient(135deg, var(--color-accent-low) 50%, oklch(from var(--color-accent-low) l c calc(h + 60)));
		font-weight:800; color:var(--color-bg-main);
		& a:where(:hover, :focus){
			color:unset;
		}
		&:has(a:where(:hover, :focus)){
			background:linear-gradient(135deg, oklch(from var(--color-accent-low) calc(l - 0.08) calc(c + 0.01) h) 30%, oklch(from var(--color-accent-low) calc(l - 0.08) calc(c + 0.01) calc(h + 60)));
		}
	}
}

/*** content ***/
@layer base{
	main{
		& > :where(div, section, ul, ol, h1,h2,h3,h4,h5,h6,iframe,dl, p:not(:has(img))){padding-inline:var(--spacing-m, 10px);}
		& :where(ol, ul) li:has(a) {padding-block: 2px;}
		& ol :where(li) {margin-inline-start:1lh;}/*ページ上部のidリンク、手順*/
		& > ul :where(li) {list-style-type: disc; margin-inline-start:1.4em;}
		& :where(span):not([class]){color:var(--color-accent-point);}
	}
	:where(main) :where(p):has(:where(img, video, svg, iframe)) {
		text-align:center; margin-inline:auto; margin-block:var(--spacing-m);
	}
/*		:where(main) > :where(img, video, svg, iframe) {
		text-align:center; margin-inline:auto; margin-block:var(--spacing-m);
	}*/
	a:has(img, div) ,li a {display:block;}
}

@layer base{
	h1 {
		font-size:2rem;
		margin-block:var(--spacing-m);
		&:not([class]){font-weight:bold; padding-block:8px;}
	}
	h2 {
		font-size:1.6rem;
		margin-block:32px 16px;
		:where(main) &{color:var(--color-text-heading);}
		&:not([class]){
			margin-inline:var(--spacing-m);
			padding-inline:var(--spacing-s);
			border-block-end:1px dashed currentcolor;
		}
	}
	.top-contents > .top_title { /* トップページのみh2に適用 */
		font-weight: bold;
		border: unset;
		border-inline-start:10px solid var(--color-accent-point);
		background: linear-gradient(to right, #ddd 8px, transparent 100%);
		padding-inline: 1em;
		padding-block: 0.6em;
		color: #000;
	}
	h3 {color:var(--color-text-subheading);}
	.top-contents h3{ /* トップページのみh3に適用 */
		font-weight:normal; font-size:1.4rem;
		color:currentColor;
		border:unset;
	}
	:is(h3,h4,h5,h6){font-weight:bold; margin-block:12px 2px;}
}

@layer base{
	hr {
		border: none;
		border-block-start:1px var(--color-border) solid;
		margin-block: 24px;
		block-size:0;
	}

	a {color:var(--color-text-link);}

	.link_decorate{
		& a{
			text-decoration: underline var(--color-accent-high) 1px solid;
			text-underline-offset: 4px;
			&:where(:hover){text-decoration-color:unset;}
		}
	}
	.text {margin-block:0.4lh;}
	.formula {text-align:center; font-weight: bold;}
	iframe[src*="youtube"], video {
		aspect-ratio: 16 / 9 auto;
	}
}

/*** breadcrums ***/
@layer base{
	.breadcrumbs{
		padding-block:var(--spacing-s);
		border-bottom:1px var(--color-border) solid;
		color:var(--color-text-soft);
		font-weight: bold;
		& a{font-weight: normal;color:currentColor;}
		& a:hover {color:var(--color-text-main);}
	}
}

/*** shortcut links ***/
@layer base{
	.product-nav{
		& li{
			margin-inline-start:1em;
			list-style:none;
		}
	}
}

/*** wrapper ***/
@layer base{
	.content-wrapper{/*ページ内見出しリンクでolにも使用*/
		display:block flex; flex-flow:row wrap;
		gap:var(--spacing-s);
		justify-content:space-around;
		align-items:start;
		& > :where(div, p, ol, ul, li){
			min-inline-size: min(16em, calc(100% - var(--spacing-s) - var(--spacing-m) * 2));
			flex: 1 1 auto;
			flex-basis:calc(var(--content_width) - var(--spacing-s) - 1lh - var(--spacing-m) * 2);
		}
		& :where(img){flex: 0 0 auto;}
		& :where(ul) li{
			list-style-type:disc;
			margin-inline-start:2em;
		}
	}
}

/*** table ***/
@layer base{
	div:has(> table),.table-wrapper{
		container:tablewrapper / inline-size;
		overflow-x:auto;
		contain:layout;
		margin-block:var(--spacing-m);
	}

	table{
		position:relative;
		inline-size:max(620px, 100%);
		overflow-x:scroll;
		& ul li{list-style-type:disc; margin-inline-start:1.2em;}
	}
	th {background: #ddd;}
	th, td{
		padding-inline:1em;
		padding-block: 0.4em;
		border:1px var(--color-text-soft) solid;
	} 
	table::after{
		content: "";
		display: inline flow-root;
		position: absolute;
		visibility: hidden;
	}
	@container tablewrapper (inline-size < 620px){
		table{margin-block-end:calc(1lh + var(--spacing-m));}
		table::after{
			content: "※画面幅より長い表はスクロールできます。";
			padding: var(--spacing-s);
			visibility: visible;
		}
	}
}

/*** go to page top ***/
@layer base{
	.back-to-top{
		text-align: end; margin-block:48px var(--spacing-m);
		& a{display: block;color:var(--color-text-soft);}
	}
}

/*** link with icon ***/
@layer base{
	.link_icon{
		li&{list-style:none;}
		& a::before{
			content: ""; 
			display:inline-block;
			vertical-align: middle;
			width:18px; height:18px;
			margin-inline-end: 4px;
		}
		& :where(a[href$=".htm"], a[href$=".html"])::before{background: url(images/style/icon.gif) 0 -18px no-repeat;}
		& a[href$=".pdf"]::before{background: url(images/style/icon.gif) 0 -36px no-repeat;}
		& :where(a[href$=".xls"], a[href$=".xlsx"])::before{background: url(images/style/icon.gif) 0 -54px no-repeat;}
		& a[href$=".csv"]::before{background: url(images/style/icon.gif) 0 -54px no-repeat;}
		& a[href$=".jpg"]::before{background: url(images/style/icon.gif) 0 -72px no-repeat;}
		& a[href$=".mp4"]::before{background: url(images/style/icon.gif) 0 -90px no-repeat;}
	}
}

/*** popover ***/
@layer base{
	.popover-trigger {
		display:block;
		color:var(--color-text-link);
		background:transparent;
		border:none;
	}
	[popover]{
		max-inline-size:min(100%, 100vi);max-block-size:100lvb;
		border:1px solid var(--color-border);
		border-radius:var(--spacing-m);
		margin:auto; padding:var(--spacing-m);
		background-color:var(--color-bg-main);
		opacity:0;
		transition:opacity 0.5s, overlay 0.5s allow-discrete, display 0.5s allow-discrete;
		&:popover-open{
			opacity:1;}
		&::backdrop{
			background-color:unset;
			opacity:0;
			transition:opacity 0.5s, overlay 0.5s allow-discrete, display 0.5s allow-discrete, background-color 0.5s;
		}
		&:popover-open::backdrop{
			background-color:var(--color-border);
			opacity:0.6;
		}
		& button{
			margin-inline-start:auto;
			padding:var(--spacing-m)
		}
	}
	@starting-style{
		[popover]:popover-open{opacity:0;}
		[popover]:popover-open::backdrop{opacity:0; background-color:unset;}
}
	.popover-box{}
	.drawing::after{/* 図面にidを型番として添える */
			content:"型番 "attr(id);
			display:block;
	}
}

/*** announcement area ***/
@layer components{
	.c-announcement-area:not(:empty){
		background:var(--color-brand);
		color:var(--color-bg-main);
		margin-block:2rem; margin-inline:auto;
		padding:var(--spacing-m);
		width:fit-content;
	}
}

/*** carousel ***/
@layer components{
	.carousel{
		display:flex;
		place-items:center;
		gap:var(--spacing-m);
		overflow-x:auto;
		block-size:fit-content;
		scroll-snap-type: x mandatory;
		scroll-marker-group:after;
		anchor-name:--carousel;
		& > li{
			list-style-type:none;
			flex:0 1 100%;
			min-width:min(100vw, 600px);
			scroll-snap-align:center;
			text-align:center;
	    }
		/* scroll buttons */
		&::scroll-button(*){
			position:fixed;
			position-anchor:--carousel;
			aspect-ratio:1;
			margin:8px;
			color:var(--color-text-soft);
			cursor:unset;
			&::hover, &::focus{opacity:1;}
			&::disabled{opacity:0.6;}
		}
		&::scroll-button(left){
			position-area: left center;
			content:"←";
		}
		&::scroll-button(right){
			position-area:right center;
			content:"→";
		}
		/* scroll markers */
		&::scroll-marker-group{
			margin:var(--spacing-m);
			display:flex; flex-flow:column nowrap;
			place-content:safe center;
			gap:var(--spacing-m);
			overflow:clip;
			scrollbar-width:none;
		}
		&::scroll-marker{
			content:"";
			border:1px solid var(--color-text-soft);
			border-radius:50%;
			&:is(:hover, :focus-visible){
				border-color:LinkText;
			}
		}
	}
}

/*** featured area for toppage ***/
@layer components{
	.top-news-featured{
		inline-size:min(100%, 680px);
		border:1px var(--color-border) solid;
		padding-inline:0;
		margin-inline:auto; margin-block:30px;
		& h2{text-align:center; font-weight:bold;}
	}
	.top-featured-banner-area{
		text-align:center;
		margin-inline:auto;
		& a{
			margin-block:var(--spacing-m);
			text-decoration:none;
		}
		& img{background:var(--color-border);}
	}
	.top-news-area{
		contain:layout;
		overflow:auto;
		margin:var(--spacing-m);
		inline-size: calc(100% - var(--spacing-m) * 2); block-size: 12em;
		border:1px var(--color-accent-low) solid;
		& li {padding-inline:1em; padding-block:0.8em; height:auto;
			& a{display:inline;}
			& p{font-weight:bold;}
		}
		& span {color:var(--color-text-subheading); margin-inline-start:1em;}
	}
}

/*** category for toppage ***/
@layer components{
	.category{
		padding-block:var(--spacing-s) var(--spacing-m);
		font-size:1.2em;
		& ul{display:block flex; flex-flow:row wrap; justify-content:start; align-items:start;}
		& li{flex:0 1 22em;
			list-style-type:disc;
			margin-inline-start:2em; padding-block:4px;}
	}
}

/*** productcard list style ***/
@property --card-width{syntax:"<length-percentage>"; inherits:true; initial-value:224px;}
@property --card-height{syntax:"<length-percentage>"; inherits:true; initial-value:176px;}
@property --card-gap-outer{syntax:"<length>"; inherits:true; initial-value:20px;}
@property --card-gap-inner{syntax:"<length>"; inherits:true; initial-value:0;}
@property --card-border-width{syntax:"<length>"; inherits:true; initial-value:2px;}
@property --card-surface-color{syntax:"<color> | <image>"; inherits:true; initial-value:#fff;}
@property --card-accent-color{syntax:"<color> | <image>"; inherits:true; initial-value:#317cb9;}
@property --card-duration{syntax:"<time>"; inherits:false; initial-value:0.5s;}

@layer components{
	:where(ul.c-card){
		display:block grid;
		inline-size:100%;
		list-style:none;
		& li{
			display:block grid; grid-template-rows:subgrid;
			row-gap:var(--card-gap-inner);
			list-style:none;
			margin-inline-start:unset;
		}
		& a{
			display:inherit; grid-template-rows:inherit;
			grid-row:inherit;
			text-decoration:none;}
		& img{
			inline-size:100%;
			object-fit:contain;
		}
		& span{display:block;}
	}
}

/*** card for toppage 製品名と製品写真を重ねる ***/
@layer components {
	:where(.c-card-panel) {
		--card-gap-outer:30px;
		--card-gap-inner:0;
		--card-accent-color: var(--color-brand);
		margin-block-end:var(--card-gap-outer);
		grid-template-columns:repeat(auto-fit, minmax(var(--card-width), 1fr)); grid-template-rows:repeat(3, min-content auto min-content);
		gap:var(--card-gap-outer);
		writing-mode: horizontal-tb;
		& li {
			grid-row:span 3;
			padding-block:var(--card-gap-inner);
			max-height:var(--card-height);
			min-width:min(var(--card-width), 100%);
			border:var(--card-border-width) solid var(--card-accent-color);
			background-color: var(--card-surface-color);
			line-height:1; font-size:clamp(12px, 1rem, 16px);
		}
		& a {
			overflow: clip;
			&::before { /*フォーカス時のみ::beforeが可視化*/
				content:"";
				grid-area: 1 / 1 / span 3 / 2;
				background:#333;
				opacity:0;
				transition:opacity var(--card-duration);
				z-index:5;
			}
			&:where(:any-link:hover, :focus){
				& img{transform:scale(1.05);}
				&::before{opacity:0.6;}
				@media (prefers-reduced-motion:reduce){
					& img{transform:unset;}
				}
			}
		}
		& img {
			grid-area: 1 / 1 / span 3 / 2;
			width:100%; height:calc(var(--card-height) - var(--card-border-width) * 2);
			place-self:center;
			transition:transform var(--card-duration);
		}
		& span, & a::after {
			display:block;
			background:var(--card-accent-color);
			color:var(--card-surface-color);
			z-index:10;
		}
		& span{
			grid-area: 1 / 1 / span1 / 2;
			margin-right:auto; margin-bottom:auto;
			padding:calc(var(--card-border-width) * 2) calc(var(--card-border-width) * 4);
			border-radius:1lh / 0 1lh 1lh 0;
			text-align:left;
			line-height:18px;
		}
		& a::after{
			content:"製品ページへ ＞" / "製品ページへ";
			grid-area: 3 / 1 / span 1 / 2;
			text-align:right;
			line-height:24px;
		}
	}
	.newproduct{padding-block: var(--spacing-m);}
	ul.modulekit{ /* newproduct for toppage */
		--card-width: 680px;
		--card-height: 121px;
		max-height: var(--card-height);
		& li{min-width:unset; width:min(calc(100svw - var(--spacing-m) * 3), var(--card-width));}
		& img{max-width:min(var(--card-width), 100%); max-height:117px;}
		& a::after{content:""; width:0;}
	}
}
/*** card for toppage 画像とテキストを並べる ***/
@layer components {
	:where(.c-card-block){
		--card-width:362px;
		--card-gap-outer:20px;
		--card-gap-inner:2px;
		grid-template-columns:repeat(auto-fill, minmax(var(--card-width), 1fr)); grid-template-rows:repeat(2, auto 1fr);
		row-gap:var(--card-gap-outer); column-gap:var(--card-gap-inner);
		padding-block:var(--card-gap-outer);
		place-items:center;
		@container maincontents (inline-size < calc(360px + 10px * 2)){/* var(--spacing-m) */
			grid-template-columns:auto;
		}
		& li{
			grid-row: span 2;
			padding:1px;
			max-inline-size:var(--card-width);
			background-color:var(--color-bg-main);
		}
		& a{
			transition:box-shadow var(--card-duration);
			&:where(:hover, :focus){box-shadow:0 0 5px -1px var(--color-brand);}
		}
		& span{color:var(--color-text-main);}
	}
}

/*** itemize for toppage ***/
@layer components{
	.itemize{
		display:block flex;
		flex-flow:row-reverse wrap;
		justify-content:start;
		gap:var(--spacing-s);
		& p{color:var(--color-text-heading);}
		& > div:first-child{flex: 1 10 max(300px, 100% - 400px - var(--spacing-s));} /*application list*/
		& .itemize_list{
			display:block grid;grid-template-columns:repeat(auto-fill, minmax(min(9em, 100%), 1fr)); column-gap:2px;
			padding-block: var(--spacing-s) 24px;
			& li{
				min-inline-size:fit-content;
				font-size:clamp(8px, 0.9em, 16px);
				list-style:none;
				}
		}
		& > div:last-child{flex: 0 1 400px;}/*applictaion and demo*/
		& .itemize_icon{
			display:block grid;
			grid-template-columns:repeat(auto-fit, minmax(min(120px, 100%), 1fr));
			gap:8px; padding:8px;
			border:1px var(--color-border) solid;
			place-content:center;
			& a{
				aspect-ratio: 1/1;
				margin:auto;
			}
			& img{background:var(--color-border);}
		}
	}
}

/*** company information ***/
@layer components{
	:where(dl){
		container-type: inline-size;
		inline-size: calc(100% - var(--spacing-m) * 2);
		display: block flex; flex-flow: row wrap;
		gap:1em;
		& dt{
			flex:1 1 10em;
			text-align:end;
			@container (max-inline-size: 40em) {text-align:unset;}
		}
		& dd{flex: 3 1 max(20em, 100% - 11em)}
		& li{
			margin-inline-start:1.2em;
			list-style-type:disc;
		}
	}
}

/*** information ***/
@layer components{
	:where(.privacy) ol li{list-style-type: decimal; margin-inline-start:2.4em;}
}

/*** sitemap ***/
@layer components{
	:where(.sitemap){
		& li{margin-inline-start: 2em; list-style-type: none;}
	}
}

/*** for PC ***/
@media screen and (width > 1080px) {
	/*** common and layout ***/
	@layer base{
	:root{font-size:62.5%;}
	}

	@layer layout{
		.l-contents-grid{
			inline-size: 1060px;
			grid-template:"nav header header" auto
							"nav main aside" 1fr
							"footer footer footer" auto/var(--nav-width, 196px) 1fr auto;
		}
		header{
			padding-block: 18px 4px; padding-inline: 30px 180px;
			min-block-size:unset;
		}
		aside{--aside_width:218px;
			.top-contents + &{--aside_width: 110px;}/* トップページのみ */
		}
	}
	/*** header ***/
	@layer base{
		header {background:#EEE url(images/style/header.jpg) 100% 50%/auto 100% no-repeat;}
	}
	/*** navigation ***/
	@layer base{
		.menu_l{
			& ul{
				position:absolute;
				inset-block-start:0; inset-inline-start:calc( var(--nav-width, 196px) - var(--spacing-m) * 2);
				overflow:hidden;
				clip:rect(0,0,0,0); clip-path:inset(50%);
				& :where(li,a){inline-size:1px; block-size:1px;}
			}
			& li{
				position:relative;
				cursor:pointer;
				&:is(:hover,:focus-visible,:focus-within) :where(ul,li,a){
					clip:unset; clip-path:unset;
					inline-size:100%; block-size:auto;
					overflow:unset;
				}
				&:is(:hover,:focus-visible,:focus-within) :where(ul){
					inline-size: min(30em, calc(100lvi - var(--nav-width, 196px)));
				}
				&:hover{background:var(--menu_color2);}
			}
		}
		.menu_s{text-align:unset;}
	}
}

@media print{
	:root{font-size:62.5%;}
	body{background-color:unset;}
	:where(aside, nav.side-nav){inline-size:0; block-size:0; contain:strict;overflow:hidden;padding:0;}
}

/*** blinking ***/
.blinking{
    animation:blink 1.5s ease-in-out infinite alternate;
}
@keyframes blink{
    0% {opacity:0; color: #ED1A3D;}
    100% {opacity:1; color: #ED1A3D;}
}