@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: dark light;*/-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, canvas, 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:1px;}
}

/*** 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:#fcfdff;}
@property --color-text-main{syntax:"<color>"; inherits:false; initial-value:oklch(0.26 0.01 240.66);}
@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:#c33;}
@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:#c33;}
@property --color-border{syntax:"<color>"; inherits:false; initial-value:#ccc;}

@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:4em;}

@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);
	}
	body {background:#03036A;}
	:where(header, article, nav, aside, footer){font-size:1.2rem;}
}

/*** layout ***/
@layer layout{
	:where(#contents, .l-contents-grid){
		container: maincontents / inline-size;/*mainタグに移すことを検討*/
		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;
		background: var(--color-border);
		& > *{min-inline-size:100%;}
		& > :where(main,article, nav, aside, footer){background:var(--color-bg-main, #fff);}
		& > :where(main,article, nav, aside){padding-bottom:calc(env(safe-area-inset-bottom, 0) + 2em);}
		& > :where(main,article){
			order:20;
			min-inline-size:min(600px, 100%); min-block-size:calc(100svb - var(--header_minheight, 96px) - var(--footer_minheight, 4em));
		}
	}
	header{grid-area:header; order:10;}
	article, main{grid-area:main; order:20;}
	nav{grid-area:nav; order:40;}
	aside{
		grid-area:aside; order:30;
		--aside_width:100%;
		inline-size:var(--aside_width);
	}
	footer{
		grid-area:footer;order:50;
		min-block-size:var(--footer_minheight, 4em);
		line-height:var(--footer_minheight, 4em);
	}
}

/*** 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) :is(p, 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;
		}
	}
}

/*** 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{
	nav > :where(div, section, ul, ol, iframe){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:#fff;
	}
}

/*** content ***/
@layer base{
	article, main{
		& > :where(div,section,ul,ol,h1,h2,h3,h4,h5,h6,iframe,dl,form, p:last-child, .page_top){margin-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(article, article, .content-wrapper) :where(p):has(:where(img, video, svg)) {
		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, article) &{color:var(--color-text-heading);}
		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:light-dark(#2f77b1, #6992b3);}

	.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;
	}
}

/*** facebook ***/
/*@layer base{
	iframe[src*="facebook.com/plugins/page"]{display:block;margin-inline:auto;max-inline-size:100%;aspect-ratio: 18/25;}
}*/
/*** breadcrums ***/
@layer base{
	.breadcrumbs{
		padding-block:5px;
		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);}
	}
}

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

@layer base{
	.table-of-contents{
		& li{}
	}
}

/*** table ***/
@layer base{
	:where(main, article) div:has(> table),.table-wrapper{
		container:tablewrapper / inline-size;
		overflow-x:auto;
		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;
		}
	}
}

/*** link with icon ***/
@layer components{
	.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;}
	}
}

/*** modal ***/
@layer components{
	button.modal-trigger{}/*commandfor*/
	dialog.modal{/*id, closedby="any"*/
		border:1px solid var(--color-border);
		border-radius:var(--spacing-m);
		padding:var(--spacing-m);
		&::backdrop{
			background:var(--color-text-main);
			opacity:0.8;}
	}
}

/*** go to page top ***/
@layer base{
	:where(main, article) > p:last-child, .back-to-top{
		text-align: end; margin-block:48px 12px;
		& a{display: block;color:var(--color-text-soft);}
	}
}

/*** 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:max-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;}
	}
/*	.notice_title{
		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{
		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{
		margin-block:10px 30px;
		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;}
	}
}

/*** productlist ***/
@property --productcard-width{syntax:"<length-percentage>"; inherits:true; initial-value:224px;}
@property --productcard-height{syntax:"<length-percentage>"; inherits:true; initial-value:176px;}
@property --productcard-border-width{syntax:"<length>"; inherits:true; initial-value:2px;}
@property --productcard-surface-color{syntax:"<color> | <image>"; inherits:true; initial-value:#fff;}
@property --productcard-accent-color{syntax:"<color> | <image>"; inherits:true; initial-value:#317cb9;}
@property --productcard-duration{syntax:"<time>"; inherits:false; initial-value:0.5s;}
@layer components{
	:where(ul.productlist, ul.c-product-card){
		display:block grid;
		grid-template-columns:repeat(auto-fit, minmax(var(--productcard-width), 1fr));
		grid-template-rows:repeat(3, min-content auto min-content);
		inline-size:100%;
		gap:30px;
		padding-block:var(--spacing-m);
		writing-mode:horizontal-tb;
		& li{
			display:grid;
			grid-template-rows:subgrid;grid-row:span 3;
			row-gap:0;
			padding-block:0;
			max-height:var(--productcard-height); min-width:min(var(--productcard-width), 100%);
			background-color:var(--productcard-surface-color);
			list-style:none;
			line-height:1;
		}
		& a{
			display:grid;
			grid-template-rows:subgrid; grid-row:span 3;
			font-size:clamp(12px, 1rem, 16px);
			border: var(--productcard-border-width) solid var(--productcard-accent-color);
			overflow:hidden;
			text-decoration:none;
			&::before{/*フォーカス時のみ::beforeが可視化*/
				content:"";
				grid-area:1 / 1 / span 3 / 2;
				background:#333; opacity:0;
				transition:opacity var(--productcard-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(--productcard-height) - var(--productcard-border-width) * 2);
			place-self:center;
			object-fit:contain;
			transition:transform var(--productcard-duration);
		}
		& span, & a::after{
			display:block;
			background:var(--productcard-accent-color);
			color:var(--productcard-surface-color);
			z-index:10;
		}
		& span{
			grid-area:1 / 1 / span1 / 2;
			margin-right:auto; margin-bottom:auto; padding: calc(var(--productcard-border-width) * 2) calc(var(--productcard-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{
		--productcard-accent-color:var(--color-brand);
		margin-block:var(--spacing-m) 32px;
	}/* for toppage*/
	ul.modulekit{ /* newproduct for toppage */
		--productcard-width: 680px;
		--productcard-height: 121px;
		max-height: var(--productcard-height);
		& li{min-width:unset; width:min(calc(100svw - var(--spacing-m) * 3), var(--productcard-width));}
		& img{max-width:min(var(--productcard-width), 100%); max-height:117px;}
		& a::after{content:""; width:0;}
	}
}

/*** 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;
			margin-block: 8px 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);
			}
		}
	}
}

/*** card for toppage ***/
@property --topcard-width{syntax:"<length-percentage>"; inherits:true; initial-value:362px;}
@layer components{
	:where(section.top_card){
		display:block grid;
		grid-template-columns: repeat(auto-fill, minmax(var(--topcard-width), 1fr)); grid-template-rows: repeat(2, auto 1fr);
		row-gap:20px; margin-block:24px;
		place-items:center;
		text-decoration:none;
		@container maincontents (inline-size < 380px){
			grid-template-columns:auto;
			& img{inline-size:100%;}
		}
		& a{
			display:block grid; grid-template-rows: subgrid; grid-row: span 2;
			row-gap:2px; padding:1px;
			max-inline-size:var(--topcard-width);
			background-color:var(--color-bg-main);
			transition:box-shadow 0.3s;
			&:where(:hover, :focus){box-shadow:0 0 5px -1px var(--color-brand);}
		}
		& span{
			display:block;
			color:var(--color-text-main);
		}
	}
}

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

/*** form ***/
/*@layer base{
	:where(form){
		--form_border:1px solid var(--color-border);
		--form_shadow:3px;
		& div{
			margin-block:var(--spacing-m);
			&:has(input[type="radio"]){border:var(--form_border);}
			&:last-child{display:flex; flex-flow:row wrap;}
		}
		& label, .form_label{
			margin-inline:var(--spacing-m);
			line-height:calc(1lh + var(--spacing-s) * 3);
			& + span{
			color: var(--color-bg-main); line-height:1;
			background:var(--color-accent-point); border-radius: var(--spacing-s);
			display:inline-block;
			margin-inline:var(--spacing-s) auto;margin-block:auto;padding:var(--spacing-s);
			}
		}
	}
	:where(input[type="text"],input[type="email"],input[type="tel"],textarea){
		border:var(--form_border);
		padding:var(--spacing-s);
		font-size:1.2em;
		max-inline-size:100%; field-sizing:content;
	}
	input[type="radio"]{margin-inline:var(--spacing-m);block-size:1em;inline-size:1em;}
	textarea{inline-size:100%;min-block-size:6em;resize:none;}
	.inshort{min-inline-size: 8em;}
	.inlong{min-inline-size:12em;}
	input:user-invalid {border-color:var(--color-accent-point);}
}*/

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

	@layer layout{
		:where(#contents, .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;}
	aside, 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;}
}