@charset "utf-8";


@layer default{
	:where(.-nt3-main){
		& img{
			max-width: 100%;
		}
	}
}


@layer designsystem{
	
	
	/* stack */
	.-nt3-stack{
		& > *{
			--stack: 0;
			margin-block: 0;
		}
		& > * + *{
			margin-top: var(--stack, 0);
		}
		&:where(.-nt3-stack--lastchild) > :where(:last-child){
			margin-bottom: var(--stack, 0);
		}
		@media (min-width: 768px){
			&:where(.-nt3-stack--firstchild-forsp) > :where(:first-child){
				margin-top: calc(1rem * pow(1.25, 9));
			}
		}
		@media (max-width: 767px){
			&:where(.-nt3-stack--firstchild-forsp) > :where(:first-child){
				margin-top: calc(1rem * pow(1.25, 5));
			}
		}
		&:where(.-nt3-stack--page) > * + *{
			--stack: calc(1rem * pow(1.25, 9));
		}
		&:where(.-nt3-stack--section) > * + *{
			--stack: calc(1rem * pow(1.25, 6));
		}
		&:where(.-nt3-stack--content) > * + *{
			--stack: calc(1rem * pow(1.25, 3));
		}
		&:where(.-nt3-stack--sentence) > * + *{
			--stack: calc(1rem * pow(1.25, 0));
		}
	}
	
	
	/* ttl */
	.-nt3-ttl{
		--font-size-ratio: 0;
		--font-size: calc(1em * pow(1.25, var(--font-size-ratio)));
		--ruby-size: .75rem;
		
		font-size: var(--font-size, 1em);
		font-weight: bold;
		
		display: grid;
		
		&:where([data-ruby])::before{
			content: attr(data-ruby);
			font-size: var(--ruby-size, .75rem);
			text-transform: uppercase;
		}
	}
	.-nt3-ttl--page{
		--font-size-ratio: 5;
	}
	.-nt3-ttl--section{
		--font-size-ratio: 3;
	}
	.-nt3-ttl--content{
		--font-size-ratio: 2;
	}
	.-nt3-ttl--sentence{
		--font-size-ratio: 1;
	}
	
	
	/* link */
	.-nt3-link--context{
		font-weight: bold;
		color: #08223d;
		
		&:where(:not(:hover)){
			text-decoration: none;
		}
	}
	
	
	/* btn */
	.-nt3-btn{
		text-align: var(--btn-text-align, center);
		text-decoration: none;
		color: var(--btn-color, unset);
		background: var(--btn-bg, unset);
		border: var(--btn-border, unset);
		border-radius: var(--btn-radius, 0);
		padding: var(--btn-padding, 1em);
		
		display: grid;
		
		&:where(:hover){
			opacity: .78;
		}
		
		&:where(button){
			cursor: pointer;
		}
	}
	
	
	/* input */
	.-nt3-input{
		/* --theme: black; */
		
		background: #f4f4f4;
		border: none;
		padding: .5lh 1lh;
		border-radius: 1lh;
		box-sizing: border-box;
		max-width: 100%;
		
		&:where(:not([size], [cols], [type="radio"], [type="checkbox"])){
			width: 100%;
		}
		&:where(textarea){
			min-height: calc(8lh);
			field-sizing: content;
		}
		&:where( [type="checkbox"], [type="radio"] ){
			/* --theme: black; */
			/* accent-color: var(--theme); */
			
			font-size: 1.428em;
			vertical-align: text-bottom;
			padding: .5em; /* for safari sizing */
		}
		
		&:where(select){
			cursor: pointer;
			-webkit-appearance: none;
			appearance: none;
			background: #f4f4f4 conic-gradient(from -45deg at bottom, #666 90deg, transparent 0) no-repeat right 1em center / 1em .5em;
		}
	}
	
	
	/* hr */
	.-nt3-hr{
		color: #ccc;
		border-width: 0 0 1px;
	}
	.-nt3-hr--infinite{
		border-image: linear-gradient(currentcolor 0 0) 1 fill / 1 / 0 100vw;
	}
	
	
	/* box */
	.-nt3-box{
		color: var(--box-color, inherit);
		background: var(--box-bg, unset);
		border-radius: var(--box-radius, 0);
		padding: var(--box-padding, 1em);
	}
	
	
	/* with icon */
	.-nt3-withicon{
		display: var(--withicon-display, inline-flex);
		align-items: var(--withicon-align, center);
		gap: var(--withicon-gap, 1em);
	}
	
	
	/* split */
	.-nt3-split{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: var(--split-gap, 0);
		
		& > *{
			margin-block: 0;
		}
	}
	@media (max-width: 1023px){
		.-nt3-split{
			grid-auto-flow: row;
		}
	}
	
	
	/* cluster */
	.-nt3-cluster{
		display: flex;
		flex-wrap: wrap;
		gap: var(--cluster-gap, 1em);
		
		&:where(ul, ol){
			padding-left: 0;
			list-style: none;
		}
	}
	
	
	/* cards */
	.-nt3-cards{
		display: grid;
		grid-template-columns: repeat(var(--card-grid-step, 3), var(--card-grid-basis, 1fr));
		gap: var(--card-gap, 2.5em);
		
		&:where(ul, ol){
			list-style: none;
			padding-left: 0;
		}
	}
	
	
	/* accordion */
	.-nt3-accordion{
		
		& :where(.-nt3-accordion__toggle)::-webkit-details-marker{
			display: none;
		}
		
		& :where(.-nt3-accordion__toggle){
			list-style: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1em;
			
			&::after{
				content: "";
				width: 1em;
				height: 1em;
				background:
					linear-gradient(currentColor 0 0) no-repeat center / 100% .125em,
					linear-gradient(currentColor 0 0) no-repeat center / .125em 100%;
				
				transition:
					background-size 333ms ease,
					rotate 333ms ease;
			}
			&:where([open] > *)::after{
				background-size: 100% .125em, .125em 0;
				rotate: -180deg;
			}
			
			& + *{
				border-top: 1px solid #ccc;
				margin-top: 1em;
				padding-top: 1em;
			}
		}

		& :where(.-nt3-accordion__body){
			
		}
		
	}
	
	/* test */
	.-nt3-accordion::details-content{
		transition: 333ms ease;
		opacity: 0;
		clip-path: inset(0 0 100%);
	}
	.-nt3-accordion[open]::details-content{
		clip-path: inset(0);
		opacity: 1;
	}
	/* test */
	
	/* figure */
	.-nt3-figure{
		margin: 0;
		
		& > *{
			margin-block: 0;
		}
		& > * + *{
			margin-top: .666em;
		}
		
		& :where(img){
			border-radius: .5em;
		}
	}
	
	
}


@layer project{
	
	
	/* container */
	.-nt3-main{
		line-height: 1.5;
		
		position: relative;
		z-index: 0;
	}
	
	
	/* sitewidth */
	.-nt3-sitewidth{
		max-width: clamp(300px, 93.75vw, 1400px);
		margin-inline: auto;
	}
	
	
	/* ttl */
	.-nt3-ttl--color-main{
		color: #1067d1;
	}
	
	.-nt3-ttl--pagename{
		--font-size-ratio: 5;
		
		&::before{
			background: linear-gradient(#88b3e8) no-repeat left center / 1ch 1px;
			padding-left: 2ch;
		}
	}
	@media (max-width: 767px){
		.-nt3-ttl--pagename{
			--font-size-ratio: 4;
		}
	}
	
	.-nt3-ttl--section{
		&:where([data-ruby])::before{
			color: #1067d1;
		}
	}
	
	
	/* btn */
	.-nt3-btn--round{
		--btn-border: 1px solid #ccc;
		--btn-radius: 1.5lh;
		--btn-padding: 1em 2em;
	}
	
	
	/* fill */
	.-nt3-fill-asymmetry{
		--asymmetry-offset: 3.75em;
		--asymmetry-bg: #f5f5f5;
		
		padding-block: 7.4375em;
		position: relative;
		z-index: 0;
		
		&::before{
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			border-image: linear-gradient(var(--asymmetry-bg) 0 0) 1 fill / 0 / 0 100vw 0 var(--asymmetry-offset);
			clip-path: inset(0 -100vw 0 calc(var(--asymmetry-offset) * -1) round 50px 0 0 50px);
		}
	}
	@media (max-width: 767px){
		.-nt3-fill-asymmetry{
			padding-block: 3.75em;
			padding-block: 2.5em;
		}
	}
	
	
	/* table of content */
	.-nt3-sticky{
		position: sticky;
		z-index: var(--sticky-z-index, 1);
		inset-block: var(--sticky-top, auto) var(--sticky-bottom, auto);
	}
	.-nt3-sticky--toc{
		--sticky-top: calc(var(--header-height) + 4em);
	}
	@media (max-width: 767px){
		.-nt3-sticky--toc{
			--sticky-top: calc(var(--header-height) + 1em);
		}
	}
	.-nt3-toc-list{
		display: flex;
		flex-wrap: wrap;
		gap: 1em 1.875em;
		/* overflow: auto; */
		
		background: white;
		border-radius: 100vmax;
		padding: .5em 0;
		
		&:where(ul, ol){
			list-style: none;
			padding-left: 0;
		}
		& :where(:any-link){
			color: inherit;
		}
		
		&:where(.-nt3-sitewidth *){
			margin-inline: -3.125vw;
			padding-inline: 3.125vw;
		}
		
		/* & > *{
			flex: 0 0 auto;
		} */
	}
	.-nt3-toc{
		text-decoration: none;
		border-bottom: 1px solid #ddd;
		padding-bottom: .5em;
		
		display: grid;
		align-items: center;
		grid-template-columns: 1fr auto;
		gap: 1em;
		
		&:hover{
			color: #08223d;
			border-color: currentColor;
		}
		
		&::after{
			content: "";
			color: #ccc;
			background: white;
			border: 1px solid;
			border-radius: 100vmax;
			
			display: grid;
			place-items: center;
			
			width: 1.5em;
			aspect-ratio: 1;
			
			rotate: 45deg;
			background:
				linear-gradient(to top, currentColor 1px, transparent 0) no-repeat center / 26% 26%,
				linear-gradient(to left, currentColor 1px, transparent 0) no-repeat center / 26% 26%;
		}
		&:hover::after{
			color: #08223d;
		}
	}
	
	
}


@layer template{
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* breadcrumb */
	.-nt3-breadcrumb{
		--stack: calc(1rem * pow(1.25, 1));
		
		display: flex;
		gap: 1em;
		
		&:where(ul, ol){
			list-style: none;
			padding-left: 0;
		}
		& > *{
			font-size: .75em;
			display: flex;
			gap: 1em;
		}
		& > * + ::before{
			content: "›";
			color: #1067d1;
		}
		& :where(:any-link){
			color: inherit;
			
			&:not(:hover){
				text-decoration: none;
			}
		}
	}
	
	
	/* pagetop */
	.-nt3-pagetop{
		--offset: 0em;
		position: sticky;
		bottom: calc(var(--offset) + 1em);
		margin-bottom: 1em;
	}
	@media (max-width: 1023px){
		.-nt3-pagetop{
			--offset: var(--btm-quicknav-height);
		}
	}
	
	.-nt3-pagetop__btn{
		color: inherit;
		text-indent: -100vmax;
		overflow: hidden;
		
		background: white conic-gradient(from 135deg at center top, currentcolor 90deg, transparent 0) no-repeat center / 18% calc(18% / 2);
		border: 1px solid;
		border-radius: 100vmax;
		
		display: block;
		width: 3.75em;
		height: 3.75em;
		margin-left: auto;
		
		&:hover{
			color: white;
			background-color: #0070c3;
		}
	}
	
	
	
}

























/*------------------
 home > service > intermodal
------------------*/
.-nt3-box--intermodal-contact{
	--box-color: white;
	--box-bg: #ccc var(--bgi, none) no-repeat center / cover;
	--box-radius: .75em;
	--box-padding: 3.75em var(--offset) 3.75em 3.75em;
	--offset: clamp(3.75em, (100vw - 1400px) / 2 + 60%, 60%);
	
	font-size: 1.125em;
}
/* @media (max-width: 1400px){
	.-nt3-box--intermodal-contact{
		
	}
} */

.-nt3-ttl--intermodal-contact{
	--font-size: calc(.888888em * pow(1.25, var(--font-size-ratio)));
}

.-nt3-btn--intermodal-contact{
	--btn-color: #f3db00;
	--btn-bg: #08223d;
	--btn-radius: .5em;
	--btn-padding: 1.25em;
	
	font-weight: bold;
}

.-nt3-cards--intermodal-feature{
	counter-reset: i;
}
@media (max-width: 1023px) and (min-width: 768px){	
	.-nt3-cards--intermodal-feature{
		--card-grid-step: 2;
	}
}
@media (max-width: 767px){
	.-nt3-cards--intermodal-feature{
		--card-grid-step: 1;
	}
}

.-nt3-box--intermodal-feature-item{
	--box-radius: .5em;
	--box-bg: white;
	--box-padding: 2.5em;
	
	counter-increment: i;
	position: relative;
	z-index: 0;
	
	&:before{
		content: counter(i, decimal-leading-zero);
		line-height: 1;
		font-size: 2.5em;
		font-weight: bold;
		color: #1067d1;
		border: 3px solid transparent;
		border-top-color: currentColor;
		padding-top: .125em;
		position: absolute;
		top: 0;
	}
}

.-nt3-box--intermodal-feature-image{
	--box-padding: 1.5em;
	text-align: center;
}


/* with toc */
.-nt3-split--with-toc{
	grid-template-columns: 22% 1fr;
	gap: 3.75em 7.5em;
	
	& :where([id]){
		scroll-margin-top: calc(var(--header-height) + 1em + 2.5em);
	}
}
@media (max-width: 1023px){
	.-nt3-split--with-toc{
		grid-template-columns: none;
	}
}

.-nt3-sticky--section-toc{
	--sticky-top: calc(var(--header-height) + 4em + 3em);
}


/* section toc */
.-nt3-section-toc{
	
	color: white;
	background: #08223d;
	border-radius: .5em;
	padding: 2.5em;
	
	&:where(ul, ol){
		padding-left: 3.25em;
	}
	
	& > * + *{
		margin-top: 1em;
	}
	
	& :where(li){
		&:has(:any-link:hover)::marker{
			color: #1067D2;
		}
	}
	
	& :where(:any-link){
		text-decoration: none;
		color: inherit;
		color: #F3DB00;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		&::after{
			content: "›";
			line-height: 1;
			color: white;
		}
		&:hover::after{
			color: #1067D2;
		}
	}
	
}


/* ▼▼▼▼▼▼▼▼▼ debug @ 251212 ▼▼▼▼▼▼▼▼▼ */


/* flow */
.-nt3-flow{
	counter-reset: i;
	
	&:where(ul, ol){
		padding-left: 0;
		list-style: none;
	}
	
	& > *{
		counter-increment: i;
		margin-block: 0;
		
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 2.5em;
		
		& + *{
			margin-top: 1.875em;
		}
		
		& > *{
			grid-column: 2;
		}
		
		& > :only-child{
			grid-row: span 2;
		}
	}
	
	& > ::before{
		content: attr(data-ruby) " " counter(i, decimal-leading-zero);
		line-height: 1;
		font-size: .75em;
		grid-column: 1;
		text-align: center;
		text-transform: uppercase;
		align-content: center;
		color: white;
		background: #1067d2;
		border-radius: .5em;
		padding: 1em;
	}
	
	& > :where(:not(:last-child))::after{
		content: "";
		grid-column: 1;
		/* grid-row: 2 / calc(infinity); */ /* iosでクラッシュする */
		grid-row: 2 / 9999;
		border-left: 1px solid #1067d2;
		justify-self: center;
		margin-top: 1em;
	}
}

.-nt3-split--intermodal-flow{
	display: flex;
	gap: 1.25em 2.5em;
	
	& > *{
		flex: 1 1 0;
	}
	
	& > :where(.-nt3-figure--intermodal-flow){
		flex: 0 1 45%;
	}
}

@media (max-width: 767px){
	.-nt3-split--intermodal-flow{
		flex-direction: column;
	}
}

.-nt3-figure--intermodal-flow{
	& :where(img){
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}


/* ▲▲▲▲▲▲▲▲▲ debug @ 251212 ▲▲▲▲▲▲▲▲▲ */


/* case study */
@media (max-width: 1023px){
	.-nt3-cards--intermodal-casestudy{
		--card-grid-step: 2;
		--card-gap: 1.5em;
	}
}



/* faq */
.-nt3-split--intermodal-faq{
	--split-gap: 1em;
	
	grid-template-columns: 35% 1fr;
	align-items: start;
}
@media (max-width: 1023px){
	.-nt3-split--intermodal-faq{
		grid-template-columns: none;
	}
}

.-nt3-ttl--faq{
	--font-size-ratio: 1;
}

.-nt3-accordion--faq{
	background: white;
	border-radius: .5em;
	padding: 1.5em;
	
	& :where(.-nt3-accordion__toggle){
		justify-content: flex-start;
		
		&::before{
			content: "Q";
			line-height: 1;
			font-size: 1.5em;
			font-weight: bold;
			color: #1067d1;
		}
		
		&::after{
			margin-left: auto;
		}
	}
	
	& :where(.-nt3-accordion__body){
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1em;
		
		&::before{
			content: "A";
			line-height: 1;
			font-size: 1.5em;
			font-weight: bold;
			color: #999;
		}
		
		& > *{
			grid-column: 2;
		}
	}
}


/* other service */
.-nt3-cards--service{
	--card-grid-step: 4;
	
	& > *{
		display: contents;
	}
}
@media (max-width: 1023px) and (min-width: 768px){
	.-nt3-cards--service{
		--card-grid-step: 3;
		--card-gap: 1.666em;
	}
}
@media (max-width: 767px){
	.-nt3-cards--service{
		--card-grid-step: 2;
		--card-gap: 1.25em;
	}
}

/* archive */
.-nt3-archive{
	text-decoration: none;
	color: inherit;
	
	border: 1px solid #ccc;
	border-radius: .5em;
	display: block;
	overflow: hidden;
}
.-nt3-archive--service{}
.-nt3-archive__thumb{
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: 333ms ease;
	
	&:where(:any-link:not(:hover) *){
		opacity: .666;
	}
}
.-nt3-archive__body{
	padding: 1em;
	
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: 1rem;
	}
	
	&::after{
		line-height: 1;
		color: #ccc;
		border: 1px solid;
		border-radius: 100vmax;
		
		width: 1.5em;
		height: 1.5em;
		margin-left: auto;
		margin-top: 1em;
		
		display: grid;
		place-items: center;
	}
	&:where(:any-link *)::after{
		content: "";
		rotate: 45deg;
		background:
			linear-gradient(to bottom, currentColor 1px, transparent 0) no-repeat center / 26% 26%,
			linear-gradient(to left, currentColor 1px, transparent 0) no-repeat center / 26% 26%;
	}
	&:where(:any-link:hover *)::after{
		color: #08223d;
	}
}
.-nt3-ttl--archive{
	font-size: 1.25em;
}

/* intermodal footer contact */
.-nt3-box--intermodal-footer-contact{
	--box-color: white;
	--box-bg: #ccc var(--bgi, none) no-repeat center / cover;
	--box-radius: .75em;
	--box-padding: 3.75em;
}

.-nt3-split--intermodal-footer-contact{
	gap: 1.875em 3.75em;
	align-items: center;
}
@media (max-width: 1023px){
	.-nt3-split--intermodal-footer-contact{
		
	}
}

.-nt3-btn--intermodal-footer-contact{
	font-size: 1.25em;
	font-weight: bold;
	color: #1067D2;
	background: color-mix(in srgb, transparent, white 80%);
	border-radius: 100vmax;
	width: fit-content;
	aspect-ratio: 1;
	
	align-content: center;
}
@media (max-width: 1023px){
	.-nt3-btn--intermodal-footer-contact{
		margin-inline: auto;
	}
}









/*------------------
home > glossary
------------------*/

.-nt3-stack--page:where(.-nt3-main--glossary > *) > :where(header) + *{
	--stack: calc(1rem * pow(1.25, 6));
}

.-nt3-box--search-kw{
	--box-bg: #f4f4f4;
	--box-radius: 100vmax;
	--box-padding: 0 1.5em;
	
	max-width: 50em;
	box-sizing: border-box;
	
	display: flex;
	align-items: center;
	gap: 1em;
	
	&:where(:focus-within){
		outline: 2px solid;
	}
	
	& :where(input[type="text"], input[type="search"]){
		line-height: 2;
		
		flex: 1 1 0;
		width: 100%;
		
		border: 0;
		outline: none;
		background: none;
		padding: .25lh 0;
	}
}

.-nt3-btn--search-kw{
	--btn-padding: 0;
}


.-nt3-search-result{
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: 1rem;
	}
}

.-nt3-link--search-result{
	text-decoration: none;
	color: inherit;
}

.-nt3-ttl--search-result{
	/* font-size: 1.25em;
	font-size: 2.875em; */
	
	--font-size-ratio: 3;
	
	font-weight: bold;
	color: #1067d1;
	border-bottom: 2px solid;
	border-image: linear-gradient(90deg, currentcolor 2em, transparent 0) 1;
	padding-bottom: .5em;
}

.-nt3-glossaries{
	/* border-top: 1px solid #D7D7D7; */
	
	
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 0 3.75em;
	
	
	&:where(ul, ol){
		list-style: none;
		padding-left: 0;
	}
	
	& > *{
		/* border-bottom: 1px solid #D7D7D7; */
		border-block: 1px solid #D7D7D7;
		margin-top: -1px;
	}
	
	& :where(:any-link){
		text-decoration: none;
		color: inherit;
		
		display: flex;
		padding: 1em 1.5em;
	}
	& :where(:any-link:hover){
		background: #f5f5f5;
	}
}

.-nt3-glossary-backtotop{
	--stack: 2.5em;
}

.-nt3-link--glossary-backtotop{
	color: #acb8c4;
	
	&:not(:hover){
		text-decoration: none;
	}
}

.-nt3-pagination{
	font-weight: bold;
	color: #08223d;
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75em;
	
	& :where(:any-link){
		color: #ccc;
		
		&:not(:hover){
			text-decoration: none;
		}
	}
}

:is(.-nt3-link--pagination-back, .-nt3-link--pagination-next){
	overflow: hidden;
	text-indent: -100vmax;
	background:
		linear-gradient(to left, currentColor 2px, transparent 0) no-repeat center / 29% 29%,
		linear-gradient(to bottom, currentColor 2px, transparent 0) no-repeat center / 29% 29%;
	border: 1px solid currentColor;
	border-radius: 100vmax;
	width: 1.5em;
	height: 1.5em;
	
	&:where(:hover){
		opacity: .78;
	}
}

.-nt3-link--pagination-back{
	rotate: -135deg;
}
.-nt3-link--pagination-next{
	rotate: 45deg;
}

.-nt3-btn--glossary-related{
	color: #08223d;
}


.-nt-naviAnchorFrame--glossary-index{
	margin-top: inherit;
}
.-nt-button2:where(.-nt-naviAnchorFrame--glossary-index *){
	padding: .75em 1.5em;
}