@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,object) {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;}
@media (prefers-reduced-motion:no-prefence){html{interpolate-size:allow-keywords;}}
}

/*** 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;}}

/*** 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:#0053A6;}
@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 --lineheight{syntax:"<length-percentage>"; inherits:true; initial-value:24px;}
@property --header_minheight{syntax:"<length-percentage>"; inherits:false; initial-value:96px;}
@property --nav-width{syntax:"<length-percentage>"; inherits:false; initial-value:196px;}
@property --aside_width{syntax:"<length-percentage>"; inherits:false; initial-value:218px;}
@property --footer_minheight{syntax:"<length-percentage>"; inherits:true; initial-value:48px;}

@layer base{
	:root {
		font-size:133.33%; font-family:Meiryo, "Helvetica Neue", "Lucida Grande", Verdana, Arial, "Hiragino Kaku Gothic ProN", Osaka, "BIZ UDPGothic", sans-serif; color:var(--color-text-main);
		scroll-padding-block:var(--spacing-m);
		accent-color:var(--color-accent-low);
	}
	body {background:#03036A;}
	:where(.l-contents-grid) {
		font-size:0.75rem;
		--lineheight:calc(0.5rem + 1.4em);
		--footer_minheight:4em;
		line-height:var(--lineheight);
		background: var(--color-border);
	}
}

/*** layout ***/
@layer layout{
	:where(.l-contents-grid){
		inline-size:100%;
		min-block-size:100vh;
		contain:content;
		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;
		& > :where(header, main, aside, nav, aside, footer){
			contain:layout;
			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);}
	}
	:where(header){grid-area:header; order:10;}
	:where(main){
		container: maincontents / inline-size;
		grid-area:main; order:20;
		min-inline-size:min(600px, 100%); min-block-size:calc(100svb - var(--header_minheight) - var(--footer_minheight));
	}
	:where(nav.side-nav){grid-area:nav; order:40;}
	:where(aside){
		grid-area:aside; order:30;
		--aside_width:100%;
		inline-size:var(--aside_width);
	}
	:where(footer){
		grid-area:footer;order:50;
		min-block-size: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;
	}
	:is(.header_logo, .header_logo a){
		display:block;
		width:252px; height:23px;
		font-size:0;
		line-height:0;
	}
	.header_logo{
		margin-bottom:8px;
		color:transparent;
		background:url(images/style/spectra.gif) no-repeat;
		object-fit:contain; mix-blend-mode:darken;
	}
	.header_text{ /* トップページのみh1に適用 */
		font-size:0.75rem;
		margin:unset;
	}
	footer{text-align:center; align-content:center;}
}

/*** aside ***/
@layer base{
	:is(aside, nav.side-nav) :is(h2){
		margin-block:16px;
		text-align:center;
		font-size:0.75rem; 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;}
@property --menu_gradient{syntax:"<image>"; inherits:false; initial-value:linear-gradient(to top, #fff 2px, transparent 2px 100%);}

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

	.menu_s{
		text-align:center;
		list-style:none;
		& :where(li){padding:4px;}
		& 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(h1, h2, h3, h4, h5, h6){--lineheight:calc(0.5rem + 1.4em); line-height:var(--lineheight);}
		& :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)), video, iframe figure, picture) {
		text-align:center; margin-inline:auto; margin-block:var(--spacing-m);
	}
	a:has(img, div) ,li a {display:block;}
}

@layer base{
	h1 {
		font-size:1.25rem;
		margin-block:var(--spacing-m);
		&:not([class]){font-weight:bold; padding-block:8px;}
	}
	h2 {
		font-size:1rem;
		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; color:#000;
		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;
	}
	h3 {
		&:not([class]){color:var(--color-text-subheading);}
	}
	.top-contents h3{ /* トップページのみh3に適用 */
		font-size:0.875rem; font-weight:normal; 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;
		& a{
			text-decoration: underline var(--color-accent-high) 1px solid;
			text-underline-offset: 4px;
			&:where(:hover){text-decoration-color:unset;}
		   }
	}
	.formula {text-align:center; font-weight:bold;}
	iframe[src*="youtube"], video{
		margin-inline:auto;
		display:block;
		aspect-ratio:16 / 9 auto;
	}
}

/*** breadcrums ***/
@layer base{
	.breadcrumbs{
		padding-block:var(--spacing-s);
		border-bottom:1px var(--color-border) solid;
		font-weight:bold; color:var(--color-text-soft);
		& 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;
			& a::after{
				width:9px; height:12px;
				content:url("images/style/arrow-s.svg");
				display:inline-block;
				margin-inline:2px;
			}
		}
	}
}

/*** flex layout ***/
@property --content_width{syntax:"<length-percentage>"; inherits:true; initial-value:50%;}/*削除予定*/
@property --item-width{syntax:"<length-percentage>"; inherits:true; initial-value:50%;}

@layer base{
	:where(.content-wrapper, .flex-layout){/*divまたはページ内見出しリンクで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, figure){
			min-inline-size:min(16em, calc(100% - var(--spacing-s)));
			flex:1 1 auto;
			flex-basis:calc(var(--item-width) - var(--spacing-s) - 1lh);
		}
		& :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 style;
		margin-block:var(--spacing-m);
	}
	table{
		inline-size:max(620px, 100%);
		overflow-x:scroll;
		& :where(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:none;
		position:absolute;
	}
	@container tablewrapper (inline-size < 620px){
		table{margin-block-end:calc(1lh + var(--spacing-m));}
		table::after{
			display:table-caption;
			padding:var(--spacing-s);
		}
	}
}

/*** 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&{
			margin-inline-start:0;
			list-style:none;
		}
		& a::before{
			content:""; 
			display:inline-block;
			vertical-align:-4px;
			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;}
		& :where(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;}
		& :where(a[href$=".csv"])::before{background: url(images/style/icon.gif) 0 -54px no-repeat;}
		& :where(a[href$=".jpg"])::before{background: url(images/style/icon.gif) 0 -72px no-repeat;}
		& :where(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-box{}
	[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);
		overscroll-behavior-block:contain;
		background-color:var(--color-bg-main);
		opacity:0;
		transition:opacity, overlay allow-discrete, display allow-discrete; transition-duration:0.5s;
		&:popover-open{opacity:1;}
		&::backdrop{
			background-color:unset;
			opacity:0;
			transition:opacity, background-color; transition-duration:inherit;
		}
		&: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;}
	}
	.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:24px; margin-inline:auto;
		padding:var(--spacing-m);
		width:fit-content;
	}
}

/*** 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){
		contain:layout paint style;display:block grid;
		margin-block:var(--card-gap-outer);
		inline-size:100%;
		list-style:none;
		& li{
			display:block grid; grid-template-rows:subgrid;
			row-gap:var(--card-gap-inner);
			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));
		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);
			font-size:clamp(12px, 0.75rem, 16px);
			line-height:1;
		}
		& 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.04);}
				&::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;
		}
	}
}
/*** 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);
		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*/
		& :where(.itemize-list){
			columns:9em; column-gap:2px;
			padding-block:var(--spacing-s) 24px;
			font-size:clamp(8px, 0.9em, 16px); line-height:2em;
			list-style:none;
		}
		& > div:last-child{flex:0 1 400px;}/*applictaion and demo*/
		& :where(.itemize-icon){
			display:block grid;
			grid-template-columns:repeat(auto-fit, minmax(min(120px, 100%), 1fr));
			gap:10px; padding:8px;
			border:1px var(--color-border) solid;
			place-content:center; place-items:center;
			& :where(a, img){display:block;}
			& :where(img){background:var(--color-border);}
		}
	}
}

/*** company information ***/
@layer components{
	:where(dl){
		display:block flex; flex-flow:row wrap;
		gap:1em;
		@container (inline-size < 40em) {flex-flow:column;}
		& dt{
			flex:1 1 10em;
			text-align:end;
			@container (inline-size < 40em) {flex:auto; 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:100%;}
	}

	@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;
		}
		aside{--aside_width:218px;
			.top-contents + &{--aside_width:110px;}/* トップページのみ */
		}
	}
	/*** header ***/
	@layer base{
		header {
			padding-block:18px 4px; padding-inline:28px 180px;
			background:#EEE url(images/style/header.jpg) border-box right center/contain no-repeat;
		}
	}
	/*** navigation ***/
	@layer base{
		.menu_l{
			& ul{
				position:absolute;
				inset-block-start:0; inset-inline-start:100%;
				overflow:hidden;
				clip:rect(0,0,0,0); clip-path:inset(50%);
				& :where(li,a){inline-size:1px; block-size:1px;}
			}
			& li{
				contain:layout;
				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)));
				}
				&:hover{background:var(--menu_color2);}
			}
		}
		.menu_s{text-align:unset;}
	}
}

@media print{
	:root{font-size:100%;}
	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;}
}