@charset "utf-8";
@layer designsystem, project, default;



/*------------------
  import
------------------*/



/*------------------
 @ design system
------------------*/
@layer designsystem{
	
	/*------------------
	vars
	------------------*/
	:root{
		/* --tp-header-height: 0; */
		/* --tp-container-max: 0; */
		
		--font-size-root: 1rem;
		--font-size-page: calc(1em * pow(var(--scale), 8) * var(--device-ratio));
		--font-size-section: calc(1em * pow(var(--scale), 5) * var(--device-ratio));
		--font-size-content: calc(1em * pow(var(--scale), 2) * var(--device-ratio));
		--font-size-heading: calc(1em * pow(var(--scale), 1) * var(--device-ratio));
		--font-size-sentence: calc(1em * pow(var(--scale), 0) * var(--device-ratio));
		--font-size-notice: calc(1em * pow(var(--scale), -1) * var(--device-ratio));
		
		--color-main: blue;
		--color-accent: lime;
		--color-alert: red;
		--color-neutral: gray;
		--color-neutral-bg: whitesmoke;
		
		--stack-page: calc(1rem * var(--device-ratio) * pow(var(--scale), 9));
		--stack-section: calc(1rem * var(--device-ratio) * pow(var(--scale), 6));
		--stack-content: calc(1rem * var(--device-ratio) * pow(var(--scale), 3));
		--stack-sentence: calc(1rem * pow(var(--scale), 0));
		
		--anim-duration: 64ms;
		--anim-duration-end: calc(var(--anim-duration) * pow(var(--scale), 3));
		--anim-ease: ease;
		
		@media (min-width: 1920px){
			--font-size-root: calc(100vw / 1920 * 16);
		}
		
		@media (max-width: 768px){
			--device-ratio: pow(var(--scale), -2);
			--font-size-root: 3.75vw;
		}
	}
	
	
	
	/*------------------
	Animation
	------------------*/

	@media screen{
		[data-onscreen]:not([data-onscreen="active"]){
			visibility: hidden;
		}
		[data-onscreen="active"]{
			animation: kf-onscreen calc(var(--anim-duration) * 2) var(--anim-ease) both;
		}
	}
	
	@keyframes kf-onscreen{
		from{
			opacity: 0;
			translate: 0 1rem;
		}
	}
	
	@keyframes fadein{
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	
	
	
	
	
	/*------------------
	initialize
	------------------*/
	:root{
		line-height: 1.5;
		font-size: var(--font-size-root);
		font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
		
		accent-color: var(--color-accent);
		
		scroll-behavior: smooth;
		scroll-padding-top: var(--tp-header-height, 0);
		
		@media (prefers-reduced-motion: reduce){
			--anim-duration: 0ms;
		}
	}
	
	body{
		margin: 0;
	}
	
	:any-link{
		transition: var(--anim-duration) var(--anim-ease);
		
		&:not(:hover){
			text-decoration-color: transparent;
			--anim-duration: var(--anim-duration-end);
		}
	}
	
	address:where([class]){
		font-style: normal;
	}
	
	figure{
		margin: 0;
		
		& > :where(:not(table)){
			font-size: calc(1em * pow(var(--scale), -1));
			margin-block: 0;
		}
		& > * + *{
			margin-top: calc(1lh - 1em);
		}
	}
	
	:is(ul, ol){
		--marker: initial;
		margin: 0 0 0 1.25em;
		padding-left: 0;
		
		&:where( [class]:not([role="list"]) ){
			--marker: none;
			margin-left: 0;
		}
		& > :where( li ){
			list-style: var(--marker);
		}
	}
	dd{
		margin-left: 1.25em;
		&:where( dl[class] > * ){
			margin-left: 0;
		}
	}
	
	img, svg, iframe, video, audio, select{
		vertical-align: middle;
		max-width: 100%;
	}
	
	img:where([width][height]){
		height: auto;
	}
	
	:is(
		input:where( [type="checkbox"], [type="radio"], [type="file"]),
		select,
		button,
		label:where( [for], :has(input, select, textarea) ),
		summary
	){
		cursor: pointer;
	}
	
	button{
		color: inherit;
		touch-action: manipulation;
	}
	
	input, textarea, button, select{
		line-height: inherit;
		font-size: max(1em, 16px);
		font-weight: inherit;
		font-family: inherit;
		
		&:where( :disabled ){
			opacity: .333;
			cursor: default;
			cursor: not-allowed;
		}
	}
	
	input:where( [type="checkbox"], [type="radio"] ){
		vertical-align: text-bottom;
		width: max(1em, 16px);
		height: max(1em, 16px);
		margin: 0;
	}
	
	::placeholder{
		opacity: .333;
	}
	
	:focus::placeholder{
		opacity: .1;
	}
	
	[hidden]{
		display: none !important;
	}
	
	[inert]{
		opacity: .333;
	}
	
	
	/* breakpoint */
	@media (min-width: 769px){ .g-for-sp{ display: none !important; } }
	@media (max-width: 768px){ .g-for-pc{ display: none !important; } }
	
	
	/* stack */
	.g-stack{
		& > *{
			--stack: calc(1rem * var(--device-ratio) * pow(var(--scale), 3));
			margin-block: 0;
		}
		& > * + *{
			margin-top: var(--stack);
		}
		&.g-stack-page > *{
			--stack: var(--stack-page);
		}
		&.g-stack-section > *{
			--stack: var(--stack-section);
		}
		&.g-stack-content > *{
			--stack: var(--stack-content);
		}
		&.g-stack-sentence > *{
			--stack: var(--stack-sentence);
		}
		&.g-stack-fit > *{
			--stack: 0;
		}
		& > .g-stack__exclude + *{
			--stack: 0;
		}
	}
	
	/* centering */
	.centering{
		margin-inline: auto;
		
		&:where(img){
			display: block;
		}
	}
	
	/* sitewidth */
	.g-sitewidth{
		--sitewidth-gutter: 0em;
		--sitewidth: calc(var(--tp-container-max, 1280) * .0625em);
		
		display: grid;
		grid-template-columns:
			[screen-start]
			minmax(max(var(--sitewidth-gutter), env(safe-area-inset-left)), 1fr)
			[site-start]
			minmax(0, var(--sitewidth))
			[site-end]
			minmax(max(var(--sitewidth-gutter), env(safe-area-inset-right)), 1fr)
			[screen-end];
		
		&:where(.g-sitewidth--article){
			--sitewidth: calc(800 * .0625em);
		}
		
		& > *{
			grid-column: site;
		}
		
		& > .g-sitewidth__fit{
			grid-column: screen;
		}
	}
	
	/* table scroller */
	@media (width <= 768px){
		.g-tbl-scroller:has(table){
			overflow: auto;
			overscroll-behavior: contain;
			
			& > table{
				min-width: 48rem;
			}
		}
	}
	
	/* define */
	.g-define{
		display: grid;
		gap: .75em;
	}
	
	/* list */
	.g-list{
		list-style: var(--marker, initial);
		line-height: var(--list-line-height, 1.5);
		font-size: var(--list-font-size, 1em);
		margin-left: 1.25em;
	}
	
	/* title */
	.g-ttl{
		font-size: max(1em, var(--ttl-font-size, 1em));
		font-weight: var(--ttl-font-weight, bold);
		font-feature-settings: "palt";
		text-align: var(--ttl-text-align, inherit);
		color: var(--ttl-color, inherit);
		
		&:where([data-ruby])::before{
			content: attr(data-ruby);
			font-size: calc(1em * pow(var(--scale), -2));
			color: var(--ttl-ruby-color, inherit);
			display: block;
		}
	}
	
	/* note */
	.g-note{
		line-height: calc(1lh * pow(var(--scale), 1));
		
		&:where(.g-note--center){
			text-align: center;
		}
		
		&:where(.g-note--right){
			text-align: right;
		}
	}
	
	.jump{
		font-size: var(--jump, 1.25em);
	}
	
	/* btn */
	.g-btn{
		font-size: var(--btn-font-size, inherit);
		font-weight: var(--btn-font-weight, inherit);
		text-align: center;
		
		color: var(--btn-color, inherit);
		background: var(--btn-bg, none);
		border-radius: var(--btn-radius, .5em);
		
		padding: var(--btn-padding, .666em 1em);
		
		
		display: grid;
		
		&:where(button){
			border: unset;
			width: 100%;
		}
		
		&:hover{
			text-decoration: none;
			opacity: .64;
		}
		
		&:where([data-icon-rear]){
			grid-template-columns: 1fr auto;
		}
	}
	
	/* box */
	.g-box{
		text-align: var(--box-text-align, inherit);
		color: var(--box-color, inherit);
		background: var(--box-bg, none);
		border: var(--box-border, 1.25em solid var(--color-main));
		border-radius: var(--box-radius, 1em);
		padding: var(--box-padding, calc(1em * pow(var(--scale), 6) * var(--device-ratio)));
	}
	
	/* card */
	.g-card{
		display: grid;
		grid-template-columns: repeat(var(--card-grid-step, 3), var(--card-grid-basis, 1fr));
		gap: var(--card-gap, calc(1.875em * var(--device-ratio)));
	}
	
	/* icon */
	:is([data-icon-front], [data-icon-rear]){
		--icon: "";
		
		display: inline-grid;
		grid-auto-flow: column;
		gap: .25em;
		
		&:is(
			[data-icon-front="mail"],
			[data-icon-rear="mail"],
			[href^="mailto:"]:is(
				[data-icon-front],
				[data-icon-rear]
			)
		){
			--icon: "✉️";
		}
		
		&:is(
			[data-icon-front="tel"],
			[data-icon-rear="tel"],
			[href^="tel:"]:is(
				[data-icon-front],
				[data-icon-rear]
			)
		){
			--icon: "☎";
		}
		
		&:is(
			[data-icon-front="blank"],
			[data-icon-rear="blank"],
			[target="_blank"]:is(
				[data-icon-front],
				[data-icon-rear]
			)
		){
			--icon: "❏";
		}
		
		&:is(
			[data-icon-front="pdf"],
			[data-icon-rear="pdf"],
			[href*=".pdf"]:is(
				[data-icon-front],
				[data-icon-rear]
			)
		){
			--icon: "📃";
		}
		
		&:is(
			[data-icon-front="next"],
			[data-icon-rear="next"]
		){
			--icon: "›";
		}
		
		&:is(
			[data-icon-front="prev"],
			[data-icon-rear="prev"]
		){
			--icon: "‹";
		}
		
	}
	[data-icon-front]::before,
	[data-icon-rear]::after{
		content: var(--icon);
		line-height: 1;
		font-size: 1.5em;
	}
	
	
}



/*------------------
 @ project.vars
------------------*/
@layer project{
	
	/*------------------
	vars
	------------------*/
	:root{
		--scale: 1.25;
		--device-ratio: 1;
		
		--tp-header-address-height: 60px;
		--tp-header-address-height: 3.75em;
		--tp-header-offset: min(1.875rem, 30px);
		--tp-header-height: 80;
		/* --tp-container-max: 1300; */
		
		--color-main: #f39800;
		--color-accent: lime;
		--color-alert: red;
		--color-neutral: #ccc;
		--color-neutral-bg: #eee;
		
		--anim-duration: 333ms;
		--anim-duration-end: calc(var(--anim-duration) * pow(var(--scale), 3));
		--anim-ease: cubic-bezier(.17, .84, .44,1);
	}
	
	@media (max-width: 1199px){
		:root{
			--tp-header-height: 60;
		}
	}

	@media (max-width: 1023px) and (min-width: 769px){
		:root{
			--device-ratio: pow(var(--scale), -1);
			--font-size-root: 1.5625vw;
		}
	}
	
	@media (max-width: 768px){
		:root{
			--device-ratio: pow(var(--scale), -2);
		}
	}
	
	
	
	/*------------------
	components
	------------------*/
	
	/* @ sitewidth */
	.g-sitewidth{
		--sitewidth: calc(1300 * .0625em);
		--sitewidth-gutter: calc(3em * var(--device-ratio));
		
		&.g-sitewidth--article{
			--sitewidth: calc(960 * .0625em);
		}
	}

	/* @ ttl */
	.g-ttl-page{
		--ttl-font-size: var(--font-size-page);
	}
	
	.g-ttl-section{
		--ttl-font-size: var(--font-size-section);
	}

	.g-ttl-content{
		--ttl-font-size: var(--font-size-content);
	}

	.g-ttl-sentence{
		--ttl-font-size: var(--font-size-heading);
	}
	
	.g-ttl-none{
		--ttl-font-size: var(--font-size-sentence);
		--ttl-font-weight: normal;
	}

	.g-ttl-underline{
		--ttl-color: var(--color-main);
		
		border-bottom: 3px solid;
		border-image: linear-gradient(90deg, currentcolor 4em, #eee 0) 1;
		padding-bottom: .666em;
	}
	
	.g-ttl-with-subtitle{
		--ttl-text-align: center;
		max-width: fit-content;
		margin-inline: auto;
		
		& > *{
			font-size: .25em;
		}
	}
	
	/* @ marker */
	.g-marker{
		color: var(--marker-text-color, white);
		background: var(--marker-bg, black);
		padding: var(--marker-padding, .5em);
	}
	
	/* @ note */
	.jump{
		font-size: var(--jump, 1.333em);
	}
	
	/* @ split */
	.g-split{
		display: flex;
		align-items: var(--split-align, unset);
		gap: var(--split-gap, 0);
		
		& > *{
			flex: 1 1 0;
		}
	}
	
	@media (max-width: 768px){
		.g-split{
			flex-direction: column;
		}
	}
	
	/* radius */
	.radius{
		border-radius: var(--radius, .75em);
	}
	
	/* section */
	.fill-section{
		background: #f1f4f5;
		padding-block: calc(5.625em * var(--device-ratio));
		
		:where(.g-stack-page > & + &){
			--stack: 0;
		}
	}
	
	/* tab */
	.g-tab{
		display: flex;
		
		& > *{
			flex: 1 1 0;
		}
	}
	.g-tab__content{
		animation: fadein var(--anim-duration) var(--anim-ease);
	}
	
	/* hr */
	.g-hr{
		color: #b2b2b2;
		border: 0;
		background: currentcolor;
		height: 1px;
	}
	
	/* with icon */
	.with-icon{
		display: flex;
		align-items: center;
		gap: var(--with-icon-gap, 1em);
		
		& > :where(img){
			width: var(--with-icon-size, 1.5em);
			aspect-ratio: 1;
			object-fit: contain;
		}
	}
	
	/* button list */
	.g-btnlist{
		display: flex;
		flex-wrap: wrap;
		justify-content: var(--btnlist-justify, center);
		gap: var(--btnlist-gap, 1em);
		
		& > *{
			flex: 0 0 var(--btnlist-basis, min(320px, 100%));
		}
	}
	
	/* form > input */
	.g-input{
		border: 0;
		border-radius: .5em;
		padding: .75em;
		
		&:not([type="checkbox"], [type="radio"]):not([size]){
			width: 100%;
			box-sizing: border-box;
		}
		
		&:where(textarea):not([size]){
			min-height: 12em;
		}
		
		&::placeholder{
			font-size: .875em;
		}
	}
	
	/* form > prompt */
	.prompt{
		font-size: .875em;
		
		&:where(.prompt--error){
			color: var(--color-alert);
		}
		
		&:where(.field legend > *){
			margin-left: 1em;
		}
	}
	
	/* form > field */
	.field{
		padding: 0;
		border: 0;
		
		& > *{
			margin-block: 0;
		}
		
		& > * + *{
			margin-top: .5rem;
		}
	}
	
	/* form > required */
	.g-required{
		color: var(--color-alert);
	}
	
}



/*------------------
 @ default
------------------*/

@media (min-width: 1200px){ .h-for-sp{ display: none !important; } }
@media (max-width: 1199px){ .h-for-pc{ display: none !important; } }

:root{
	scroll-padding-top: calc( var(--tp-header-height) * .0625em + var(--tp-header-offset) * 1 );
}



/* Animation
------------------*/
@keyframes kf-hero{
	to{
		/* scale: 1.25; */
		/* scale: 1.125; */
		scale: 1.0625;
	}
}



/* Header
------------------*/
.g-header{
	position: absolute;
	inset: 2em 0 auto;
}

.g-sitewidth--header{
	--sitewidth: calc(100% - var(--sitewidth-gutter));
}

.g-sitelogo--header{
	margin-block: 0;
	
	& :where(.g-sitelogo__img){
		max-width: 84px;
	}
}


/* sticky contact */
.g-sticky-contact{
	position: sticky;
	z-index: 1;
	top: 2em;
	height: 0;
	
	max-width: fit-content;
	margin-left: auto;
}
.g-sticky-contact__inner{
	max-width: fit-content;
	margin-left: auto;
}



/* Footer
------------------*/
.g-footer{
	text-align: center;
	color: white;
	background: black;
	padding-block: calc(1em * pow(var(--scale), 7));
	
	& :where(:any-link){
		color: inherit;
	}
}

.g-sitelogo--footer{
	& :where(.g-sitelogo__img){
		max-width: 140px;
	}
	
	& + *{
		--stack: var(--stack-section);
	}
}



/* Main
------------------*/
.g-stack-page:where(.g-main) > :last-child{
	margin-bottom: var(--stack);
}



/* Components
------------------*/

/* site logo */


/* sns */
.g-sns{
	display: flex;
	justify-content: center;
	gap: calc(1.5em * var(--device-ratio));
}

.g-sns__permalink{}

.g-sns__logo{}


/* hr > flow */
.g-hr-flow{
	width: 1px;
	height: 7.5em;
}


/* contact area */
.g-ttl-home-contact{
	&:where(.g-ttl-section){
		font-size: calc(2.625em * var(--device-ratio));
	}
}

.g-box-home-contact{
	--box-text-align: center;
	--box-border: 0;
	--box-bg: #f2f2f2;
	
	align-content: center;
}

.g-btn-contact{
	--btn-font-size: 1em;
	--btn-font-weight: bold;
	--btn-color: white;
	--btn-bg: var(--color-main);
	--btn-padding: 1em;
	
	&:where(.g-btn-contact--simple){
		--btn-font-size: .875em;
	}
	
	&:where(.g-btn-contact--arrow){
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		
		&::after{
			content: "";
			border-style: solid;
			border-width: 0 1px 1px 0;
			width: 1.5em;
			aspect-ratio: 1 / .125;
			transform: skewX(45deg);
		}
	}
}


/* who stock search */
.g-whostock-search{
	
	grid-column: screen;
	
	/* display: flex;
	gap: 3.75em; */
	
	/* &:where(.home-about .g-sitewidth *){
		grid-column: screen;
	} */
	
	/* & > *{
		flex: 1 1 0;
	} */
}

.g-whostock-search__item{
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: 1rem;
	}
}

.g-whostock-search__image{
	width: 100%;
	border-radius: var(--font-size-section);
	object-fit: cover;
	aspect-ratio: 311 / 430;
}

.g-whostock-search__description{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 .5em;
}


/* clock */
.clock{
	line-height: 1;
	display: flex;
	justify-content: center;
	gap: .5em;
}

.clock__group{
	display: grid;
	justify-items: center;
	gap: .5em;
}

:is(.clock__time, .clock__separate){
	font-size: calc(1em * pow(var(--scale), 7) * var(--device-ratio));
	font-weight: bold;
}

.clock__unit{}



/* Contents > Home
------------------*/

/* home hero */
.home-hero{
	
}

.home-hero__inner{
	color: white;
	height: 100vh;
	box-sizing: border-box;
	
	& > *{
		grid-row: 1;
	}
	
	.home-hero__header{
		text-align: center;
		align-self: center;
		justify-self: start;
		
		@media (max-width: 768px){
			justify-self: center;
		}
	}
	
	.home-countdown{
		align-self: end;
		margin-bottom: 1.875em;
	}
}

.home-hero-slider{
	z-index: -1;
	grid-column: screen;
	
	& :where(.splide__slide.is-active img){
		animation: kf-hero 7s linear;
	}
}

.home-hero-slider__image{
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.g-marker-home-hero{
	font-size: var(--font-size-content);
	font-weight: bold;
}


/* home countdown */
.home-countdown{
	text-align: center;
}


/* home intro */
.g-ttl-home-intro{
	--ttl-font-size: 1.875em;
	--ttl-text-align: center;
}


/* home about */
.g-ttl-home-about{
	&:where(.g-ttl-section){
		font-size: var(--font-size-page);
		
		@media (max-width: 768px){
			font-size: 3.5em;
		}
	}
	
	&:where(.g-ttl-content){
		--ttl-text-align: center;
	}
}


/* home feature */
.g-ttl-home-feature{
	&:where(.g-ttl-section){
		text-align: center;
	}
}

.g-box-home-feature{
	align-content: center;
}

/* home feature list */
.home-feature-list__item{
	color: white;
	display: grid;
	
	& > *{
		grid-area: 1 / 1;
	}
}

/* splide custom */
.home-feature-slider{
	& :where(.splide__arrow){
		color: white;
		position: absolute;
		z-index: 2;
		inset-block: 0;
		margin-block: auto;
		height: 5.625em;
		
		padding: 0;
		border: initial;
		background: initial;
		
		&:where(.splide__arrow--prev){
			left: 1em;
			scale: -1 1;
		}
		&:where(.splide__arrow--next){
			right: 1em;
		}
		
		& :where(path){
			fill: currentcolor;
		}
	}
	
	& :where(.splide__pagination){
		align-items: flex-start !important;
		gap: 1em 6em;
		
		& :where(.splide__pagination__page){
			font-weight: bold;
			padding: 0;
			background: initial;
			border: initial;
			
			&:where(.is-active){
				color: var(--color-main);
				border-bottom: 2px solid;
				padding-bottom: 2em;
			}
		}
		
		@media (max-width: 768px){
			flex-direction: column;
			margin-bottom: 2em !important;
			
			& :where(.splide__pagination__page){
				&:where(.is-active){
					border: none;
					padding: 0;
				}
			}
		}
	}
	
}

.home-feature__image{
	border-radius: 2em;
	aspect-ratio: 1536 /699;
	filter: brightness(.5);
	z-index: -1;
	
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.g-box-home-feature{
	--box-border: 0;
	--box-padding: 7.5em;
	
	@media (max-width: 768px){
		--box-padding: 3.75em;
	}
}

.g-list--home-feature-notice{
	font-size: .875em;
}


/* home contact */
.g-split--home-contact{
	gap: var(--stack-section);
	
	& :where(.g-ttl-home-contact){
		flex: 1.5 1 0;
	}
	& :where(.g-box-home-contact){
		flex: 1 1 0;
	}
}

.g-ttl-home-contact{
	margin-block: 0;
}