@charset "utf-8";
/*------------------------------------------



20260211以降分



------------------------------------------*/

/*------------------------------------------
style
------------------------------------------*/

.list-style-none, .list-style-none * {list-style-type: none;}
.space-none {margin: 0;padding: 0;}
.space-all-none, .space-all-none * {margin: 0;padding: 0;}
.flex {display: flex;}
.center {text-align: center;}
.bg-postion {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*------------------------------------------
header
------------------------------------------*/

#index::selection {
	/*decoration*/
	color: #fff;
	background-color: rgba(255, 166, 0, 0.842);
}

#index #header_nav {
	/*display*/
	z-index: 99;
	position: sticky;
	/*size*/
	height: 10vh;
	/*offset*/
	top: 0;
	/*decoration*/
	color: #fff;
	background-color: #fff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.103);
}

.nav_wrap {
	/*display*/
	display: flex;
	justify-content: space-between;
	/*size*/
	height: 100%;
	max-height: 10vh;
}


/*------logo------*/
.logo-wrap {
	/*size*/
	margin: 0 0 0 3vw;
	height: 100%;
}

.top-link {
	/*display*/
	position: relative;
	/*size*/
	height: 100%;
}

.top-link a {
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
	/*size*/
	height: 100%;
}

.top-link a img {
	/*size*/
	max-height: 9vh;
	/*event*/
	pointer-events: none;
	user-select: none;
}


/*------menu-------*/
.menu-wrap {
	/*size*/
	margin: 0 auto;
	width: 720px;
}

.header-menu {
	/*display*/
	display: flex;
	justify-content: center;
	/*size*/
	height: 100%;
}

.header-menu li {
	/*display*/
	position: relative;
	/*size*/
	width: 20%;
	height: 100%;
	max-width: 144px;
	box-sizing: border-box;
}

.header-menu li a {
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	/*size*/
	height: 100%;
	/*decoration*/
	user-select: none;
	font-family: inherit;
	font-weight: bold;
	font-size: 1.3em;
}
.header-menu li a,
.header-menu li a:visited {color: green;}
.header-menu li a:active,
.header-menu li a:hover {color: orange;}

.header-menu li a img {
	/*size*/
	margin: 0 3px 0 0;
	width: 24px;
	height: 24px;
	/*event*/
	pointer-events: none;
	user-select: none;
	/*img*/
	object-fit: cover;
	object-position: left 0;

}
.header-menu li a:hover img {object-position: right 0;}

.header-menu li a .selector {
	/*display*/
	position: absolute;
	/*offset*/
	bottom: 0;
	left: 0;
	/*size*/
	width: 100%;
	height: 0;
	/*decoration*/
	background-color: orange;
	/*anm*/
	transition: .3s;
}
.header-menu li a:hover .selector {height: 6px;}



/*------contact-------*/
.inquiry-wrap {
	/*display*/
	position: relative;
	/*size*/
	height: 100%;
}

.contact-link {
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
	/*size*/
	height: 100%;
	margin: 0 3vw 0 0;
}

/*------hamburger-------*/
.browser .hamburger-wrap,
.browser .hamburger-menu-wrap {display: none;}



@media all and (max-width: 991px) {
	#index #header_nav {height: 6vh;}
	.nav_wrap {max-height: 6vh;}
	.top-link a img {max-height: 5vh;}
	.menu-wrap, .inquiry-wrap {display: none}

	.hamburger-wrap {
		/*display*/
		z-index: 99;
		position: relative;
		/*size*/
		height: 100%;
	}

	.hamburger-box {
		/*display*/
		display: flex;
		align-items: center;
		justify-content: center;
		/*size*/
		margin: 0 3vw 0 0;
		height: 100%;
	}

	.hamburger-btn {
		/*display*/
		display: flex;
		align-items: center;
		justify-content: center;
		/*size*/
		width: 5vh;
		height: 5vh;
		max-width: 5vh;
		max-height: 5vh;
		/*decoration*/
		background-color: transparent;
		border-radius: 50%;
		/*anm*/
		transition: .5s;
	}

	/*--------has-spined--------*/
	.hamburger-btn:has(.hamburger-spin.spined) {border-radius: 0%;}
	.hamburger-btn:has(.hamburger-spin.spined) + .hamburger-menu-wrap {left: 0;}

	.hamburger-spin::before {
		/*obj*/
		content: "";
		/*offset*/
		top: -6px;
	}
	.hamburger-spin::after {
		/*obj*/
		content: "";
		/*offset*/
		top: 4px;
	}

	.hamburger-spin,
	.hamburger-spin::before,
	.hamburger-spin::after {
		/*display*/
		position: relative;
		display: block;
		/*size*/
		width: 20px;
		height: 2px;
		/*event*/
		pointer-events: none;
		/*decoration*/
		background-color: green;
		border-radius: 7px;
		/*anm*/
		transition: .3s;
	}

	.hamburger-spin.spined {
		/*decoration*/
		background-color: transparent;
		transform: rotateY(180deg);
	}
	.hamburger-spin.spined::before {
		/*decoration*/
		background-color: white;
		/*anm*/
		transform: translateY(0) rotateZ(0);
		animation: spin-bf .3s ease 0s both;
	}
	.hamburger-spin.spined::after {
		/*decoration*/
		background-color: white;
		/*anm*/
		transform: translateY(0) rotateZ(0);
		animation: spin-af .3s ease 0s both;
	}

	@keyframes spin-cn {
		50% {
			background-color: transparent;
			transform: rotateZ(90deg);
		}
		100% {transform: rotateZ(180deg);}
	}
	
	@keyframes spin-bf {
		50% {transform: translateY(6px);}
		100% {transform: translateY(6px) rotateZ(45deg);}
	}

	@keyframes spin-af {
		50% {transform: translateY(-6px);}
		100% {transform: translateY(-6px) rotateZ(-45deg);}
	}

	/*--------hamburger-menu--------*/
	.hamburger-menu-wrap {
		/*display*/
		opacity: 1;
		z-index: 90;
		position: fixed;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		/*offset*/
		top: -120%;
		left: 0;
		/*size*/
		width: 100%;
		height: calc(100vh + 1px);
		/*decoration*/
		background-color: rgba(26, 131, 0, 0.651);
		/*anm*/
		transition: .5s;
	}

	.hamburger-menu {
		/*display*/
		display: grid;
		grid-template-rows: repeat(5, 1fr);
		/*size*/
		width: 100%;
		height: 60%;
		box-sizing: border-box;
	}

	.hamburger-menu li {height: 100%;}
	.hamburger-menu li a {
		/*display*/
		display: flex;
		align-items: center;
		justify-content: center;
		/*size*/
		margin: 0 auto;
		width: 100%;
		height: 100%;
		/*event*/
		user-select: none;
		/*decoration*/
		font-family: inherit;
		font-weight: bold;
		font-size: 1.5em;
		text-decoration: none;
		border-bottom: solid 3px white;
	}
	.hamburger-menu li a,
	.hamburger-menu li a:hover,
	.hamburger-menu li a:visited,
	.hamburger-menu li a:active {color: white;}

	.hamburger-menu-wrap.fixed {top: 0;}
}

/*hover -> pc-only*/
@media (hover: hover) and (pointer: fine) {
	.hamburger-btn:hover {background-color: rgba(206, 206, 206, 0.315);}
	.hamburger-btn:hover:has(.hamburger-spin.spined) {background-color: rgba(255, 255, 255, 0.315);}
	.hamburger-btn:hover .hamburger-spin {background-color: orange;}
	.hamburger-btn:hover .hamburger-spin::before {background-color: orange; transform: translateY(12px);}
	.hamburger-btn:hover .hamburger-spin::after {background-color: orange; transform: translateY(-12px);}
	.hamburger-btn:hover .hamburger-spin.spined {background-color: transparent;}
}


/*------------------------------------------
main
------------------------------------------*/
#main-title {
	/*size*/
	height: 100vh;
}
.title_wrap {
	/*display*/
	z-index: 11;
	position: absolute;
	/*offset*/
	bottom: 0;
	left: 0;
	/*size*/
	width: 100%;
	/*anm*/
	transition: .3s;
}
.title_txt_wrap {
	/*size*/
	margin: 0 0 5vh 2vw;
	width: 820px;
	/*anm*/
	transition: .3s;
}
.title_txt_wrap h2 {
	padding: 0.5vh 1vw;
	/*decoration*/
	color: #fff;
	text-shadow: 3px 3px 2px rgb(71, 40, 0);
	font-weight: 700;
	font-size: 230%;
	line-height: 160%;
	background-color: rgba(26, 131, 0, 0.651);

	/*
		-webkit-text-stroke: 1px orange;
		paint-order: stroke;
		color: transparent;
	*/
}

.main-images {
	/*display*/
	z-index: 10;
	display: grid;
	/*grid*/
	grid-template-columns: repeat(5, 1fr);
	/*offset*/
	top: 10vh;
	left: 0;
	/*event*/
	user-select: none;
	pointer-events: none;
	/*size*/
	padding: 0;
	width: 100%;
	height: 90vh;
}

.main-images div {
	/*size*/
	overflow: hidden;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}
.main-images div img {
	/*size*/
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	/*event*/
	user-select: none;
	pointer-events: none;
	/*img*/
	object-fit: cover;
	/*decoration*/
	filter: grayscale(100%) contrast(90%);
	/*anm*/
	transition: .3s;
}
.collage_1 img {object-position: center;}
.collage_2 img {object-position: 30% 0;}
.collage_3 img {object-position: center;}
.collage_4 img {object-position: 35% 0;}
.collage_5 img {object-position: 50% 0;}
	

@media all and (min-width: 767px) and (max-width: 991px) {
	.title_txt_wrap {width: 600px;}
	.title_txt_wrap h2 {font-size: 160%;}
	.main-images {
		/*offset*/
		top: 6vh;
		/*size*/
		height: 94vh;
	}
}


@media all and (max-width: 767px) {
	.main-images {
		/*grid*/
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(5, 1fr);
		/*offset*/
		top: 6vh;
		/*size*/
		height: 94vh;
	}
	.collage_1 {grid-row: 1 / 3; grid-column: 1 / 2;}
	.collage_2 {grid-row: 1 / 3; grid-column: 2 / 3;}
	.collage_3 {grid-row: 3 / 4; grid-column: 1 / 3;}
	.collage_3 img {object-position: center 77%;}
	.collage_4 {grid-row: 4 / 6; grid-column: 1 / 2;}
	.collage_5 {grid-row: 4 / 6; grid-column: 2 / 3;}

	.title_wrap {top: 10%;}
	.title_txt_wrap {width: 90vw;}
	.title_txt_wrap h2 {
		/*decoration*/
		font-size: 1em;
		line-height: 150%;
	}
}


/*------------------------------------------
CONCEPT
------------------------------------------*/

.concept_box h2 {border-bottom: solid 2px green;}
.application-feed-wrap {
	/*size*/
	margin: 80px auto 0;
	padding: 1em 0;
	/*decoration*/
	border-top: solid 2px;
	border-image: linear-gradient(to right, rgb(15, 255, 163), rgb(34, 152, 182),rgb(43, 46, 219));
	border-image-slice: 1;
}

/*--------feed--------*/
.application-title {display: flex;}
.nuko-wrap {
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
	/*size*/
	margin: 0.5em 0.5em 2em 1.5em;
	width: 25%;
}
.nuko-subtitle {width: 75%;}
.nukoroid-logo {
	/*size*/
	width: 130px;
	height: 130px;
	max-width: 130px;
	max-height: 130px;
	/*event*/
	pointer-events: none;
	user-select: none;
}
.store-wrap {
	/*size*/
	margin: 1em 0 0 0;
	padding: 0;
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
}
.store-wrap li {width: 50%;}
.store-wrap li a {
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
	/*size*/
	width: 100%;
	height: 50px;
	max-width: 170px;
	margin: 0 auto;
}
.store-wrap li a img {
	/*size*/
	width: 100%;
	height: 100%;
	/*event*/
	user-select: none;
	pointer-events: none;
}


/*------------------------------------------
CONTACT
------------------------------------------*/

.section_titles {
	/*display*/
	display: block;
	/*size*/
	margin: 0 auto;
	padding: 1em 0;
	max-width: 80%;
	/*decoration*/
	font-weight: bold;
}
.section_titles div {padding: 0.2em 0;}
.section_titles div:nth-child(1) {font-size: 1em;}
.section_titles div:nth-child(2) {font-size: 0.7em;}

.inquiry-btn {
	/*size*/
	width: 128px;
	height: 38px;
	/*decoration*/
	border-radius: 5px;
}
.inquiry-btn a {
	/*display*/
	display: flex;
	align-items: center;
	justify-content: center;
	/*decoration*/
	font-weight: bold;
	list-style: 1.4em;
	border: solid 1px green;
}
.inquiry-btn a img {
	/*event*/
	pointer-events: none;
	user-select: none;
}
.inquiry-btn a p {
	/*size*/
	margin: 0;
	padding: 1px 5px 2px;							
}
.inquiry-btn a,
.inquiry-btn a:active,
.inquiry-btn a:visited {color: green;}

.container > .btn-wrap {
	/*size*/
	margin: 0 auto;
	width: 128px;
	/*decoration*/
	text-align: start;
}

/*hover -> pc-only*/
@media (hover: hover) and (pointer: fine) {
	.inquiry-btn::before {
		/*obj*/
		content: "";
		/*display*/
		z-index: -1;
		position: absolute;
		/*size*/
		margin: 0;
		padding: 0;
		width: 0;
		height: 38px;
		/*decoration*/
		border-radius: 5px 0px 100px 5px;
		background-color: orange;
		/*anm*/
		transition: .3s ease;
	}
	.inquiry-btn:hover::before {
		/*size*/
		width: 128px;
		/*decoration*/
		border-radius: 5px;
	}
	.inquiry-btn a {transition: .5s ease;}
	.inquiry-btn a .inquiry-icon {
		/*size*/
		width: 20px;
		height: 20px;
	}
	.inquiry-btn a:hover {
		/*decoration*/
		color: white;
		border: solid 1px orange;
	}
	.inquiry-btn a:hover .inquiry-icon {filter: contrast(0) brightness(1000%);}
}

/*------------------------------------------
FADE
------------------------------------------*/

.fade-in {
	/*display*/
	opacity: 0;
	/*anm*/
	transform: translateY(20px);
	animation: fadeIn 1s ease 0.3s forwards;
}

.fade-out {
	opacity: 1;
	/*anm*/
	transform: translateY(20px);
	animation: fadeOut 1s ease 0.3s forwards;
}

.hide {opacity: 0;}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: none;
  }
}