@charset "utf-8";
*:focus {
outline: none;
}
figure {
margin: 0;
}
a {
outline: none;
border-style: none;
word-break: break-all;
}

.textHidden {
	text-indent: -9999px;
	overflow: hidden;	
}

::selection { 
	color: #000;
	background-color: #ddd;
}
::-moz-selection { 
	color: #000;
	background-color: #ddd;
}
html {
 overflow-y: scroll;
}
body {
    margin: 0;
	-webkit-font-smoothing: antialiased;
	color: #1f2f3e;
	height: 100%;
	text-align: left;	
	background: #FFF;
	font-family:"Aboreto","a-otf-ryumin-pr6n", serif, system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
	-webkit-text-size-adjust: 100%;
	text-orientation: upright;
	-webkit-text-orientation: upright;
}
h1,h2,h3,h4,h5,p,th {
	margin: 0;
}
ul {
    list-style: none;
	margin:0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #1f2f3e;
}
a:hover{
	text-decoration: none;
	color: #1f2f3e;
}
img {
    width: 100%;
    height: auto;
}
.cursor {
	cursor: pointer;
}
br.sp,
.sp-only {
    display: none;
}
.pc-only {
    display: block;
}

.fadein {
	opacity: 0;
	transition: all 0.3s 0s ease-out
}
.fadein.first {
	transition-delay: 3.8s;
}
.fadein.next {
	transition-delay: 4.2s;
}
.fadein.isshow {
	opacity: 1;
}
.fadein-up {
	transform: translateY(30px);
	opacity: 0
}
.fadein-up.isshow {
	transform: translateY(0);
	transition: opacity 800ms, transform 600ms cubic-bezier(.215, .61, .355, 1);
	opacity: 1
}
.fadein:nth-of-type(2){
	transition-delay: .2s;
}
.fadein:nth-of-type(3){
	transition-delay: .4s;
}
.fadein:nth-of-type(4){
	transition-delay: .6s;
}
.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
	height: 150px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../images/nikki_logo.svg");
}
.splash_tx {
    position: absolute;
	bottom: 50px;
	font-size: 0.9em;
	line-height: 2;
	text-align: center;
}
.splash_tx p {
	margin-bottom: 2em;
}
body.appear #container {
	z-index: 1003;
	position: relative;
}
.navToggle {
    display: none;
}
.sp-head {
    position: fixed;
    top: 20px;
    left: 25px;
    width: 30px;
	height: 30px;
	z-index: 900;
}
.navToggle {
  display: block;
  position: relative;
  height: 30px;
  width: 30px;
	z-index: 900;
  cursor: pointer;
    -webkit-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) .8s;
    -moz-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) .8s;
    -ms-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) .8s;
    -o-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) .8s;
    transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) .8s;
	transform: translateY(-15px);
    opacity: 0;
}
body.appear .navToggle {
    opacity: 1;
    transform: translateY(0px);
}
.navToggle span {
  width: 100%;
  height: 1px;
  left: 0;
  display: block;
  background: #1f2f3e;
  position: absolute;
  transition: top .5s ease, -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out, top .5s ease;
  transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
.navToggle span:nth-child(1) {
  top: 0;
}
.navToggle span:nth-child(2) {
	top: 7px;
	opacity: 1;
}
.navToggle span:nth-child(3) {
	top: 14px;
}
.navToggle.active span:nth-child(1) {
    top: 5px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.navToggle.active span:nth-child(3) {
  top: 5px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
}
.navToggle.active span:nth-child(2) {
	opacity: 0;
}
.global_sp {
	width: 30%;
    display: block;
    background: #fff;
    color: #1f2f3e;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 890;
    visibility: hidden;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    -webkit-transition: opacity .5s ease;  /* アニメーション時間は 0.8秒 */
    -ms- transition: opacity .5s ease;
    -moz- transition: opacity .5s ease;
    transition: opacity .5s ease, visibility .5s ease;
}
.open.global_sp{
    visibility: visible;
    opacity: 1;
}
ul.nav {
    display: flex;
    flex-direction: column;
    position: relative;
    left: 25px;
    top: 120px;
    font-size: 1.3em;
    line-height: 2;
	width: calc(100% - 25px);
}
li.deley a {
    color: #1f2f3e;
}
li.deley {
    opacity: 0;
    transition: transform .5s ease, opacity .5s ease;
    transition: transform .5s ease, opacity .5s ease, -webkit-transform 5s ease;
    text-align: left;
    color: #1f2f3e;
}
.open li.deley {
    opacity: 1;
}
li.deley:first-child {
    transition-delay: 0.2s;
}
li.deley:nth-of-type(2) {
    transition-delay: 0.3s;
}
li.deley:nth-of-type(3) {
    transition-delay: 0.4s;
	z-index: 2;
}
li.deley:nth-of-type(4) {
    transition-delay: 0.5s;
	z-index: 2;
}
li.deley:nth-of-type(5) {
    transition-delay: 0.6s;
	z-index: 2;
}
li.deley:nth-of-type(6) {
    transition-delay: 0.7s;
	z-index: 2;
}
li.deley:nth-of-type(7) {
    transition-delay: 0.8s;
	z-index: 2;
}
.dropdown_list {
	position: absolute;
	margin: 0 0 1em;
	line-height: 2;
	transition: 0.3s;
	z-index: 1;
}
.dropdown_list li {
	opacity: 0;
}
.nav-copy {
    font-size: 11px;
    position: absolute;
    right: 25px;
    bottom: 30px;
}
li.deley.list.click .dropdown_list.open {
	position: relative;
}
li.deley.list.click .dropdown_list.open li:first-child {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 0.3s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 0.3s;
}
li.deley.list.click .dropdown_list.open li:nth-of-type(2) {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 0.4s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 0.4s;
}
li.deley.list.click .dropdown_list.open li:nth-of-type(3) {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 0.5s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 0.5s;
}
li.deley.list.click .dropdown_list.open li:nth-of-type(4) {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 0.6s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 0.6s;
}
li.deley.list.click .dropdown_list.open li:nth-of-type(5) {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 0.7s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 0.7s;
}
li.deley.list.click .dropdown_list.open li:nth-of-type(6) {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 0.8s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 0.8s;
}
li.deley.list.click .dropdown_list.open li:nth-of-type(7) {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 0.9s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 0.9s;
}
li.deley.list.click .dropdown_list.open li:nth-of-type(8) {
	opacity: 1;
	transition: fransform .3s ease, opacity .5s ease 1s;
	transition: fransform .3s ease, opacity .5s ease, -webkit-transform 5s ease 1s;
}
.main_logo {
	display: block;
	position: absolute;
	bottom: 30px;
	top: auto;
	left: 25px;
	width: 100px;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../images/nikki_logo.svg");
}
.main-content:before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	transition: 0.4s;
	background-color: #000;
}
.main-content.gray:before {
	opacity: 0.3;
}
.page-ttl {
    -webkit-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    -moz-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    -ms-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    -o-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
	transform: translateY(15px);
    opacity: 0;
}
body.appear .page-ttl {
    opacity: 1;
    transform: translateY(0px);
}
.about-area {
    -webkit-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    -moz-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    -ms-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    -o-transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
    transition: 1.3s cubic-bezier(0.77, 0, 0.175, 1) 1.1s;
	transform: translateY(15px);
    opacity: 0;
}
body.appear .about-area {
    opacity: 1;
    transform: translateY(0px);
}
.main-content-area-inner {
	display: flex;
	width: calc(100% - 50px);
	gap: 50px;
	margin: 100px auto;
}
.about-area {
	width: calc(60% + 50px);
	margin-left: auto;
	line-height: 2;
}
.about-area p {
	margin-bottom: 2em;
}
.stockist-tx {
	line-height: 1;
	margin-top: 100px;
}
.page-ttl {
	flex: 1;
}
.page-cont {
	flex: 5;
}
.collection-single-area .main-content-area-inner {
	position: absolute;
	margin: 100px 25px;
	width: calc(100% - 50px);
}
.collection-single {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0 50px;
	width: calc(100% - 100px);
	height: 100vh;
	opacity: 0;
	transition: 0.6s;
	transition-delay: 2.2s;
	z-index: -1;
}
body.appear .collection-single {
	opacity: 1;
}
.page-products-area .main-content-area-inner {
	display: block;
}
.page-products-area .main-content-area-inner .page-cont {
	width: calc(100% - 200px);
	margin: 0 auto;
	transition-delay: 2.2s!important;
	opacity: 0;
	transition: 0.6s;
}
body.appear .page-products-area .main-content-area-inner .page-cont {
	opacity: 1;
}
.product-image-area {
	display: flex;
	margin: 50px 0 0;
	flex-wrap: wrap;
}
.product-image-area img {
	width: 50%;
	display: block;
}
.product-item-area {
	display: flex;
	margin-bottom: 150px;
	flex-wrap: wrap;
}
.item-list {
	width: 23.5%;
	margin-top: 20px;
	margin-right: 2%;
}
.item-list:nth-of-type(4n) {
	margin-right: 0;
}
.item-text h6 {
	font-weight: normal;
	font-size: 1em;
	margin: 1.5em 0 0.5em;
	line-height: 1.5;
}
.item-text p {
	line-height: 1.5;
	font-size: 0.9em;
}
.item-text span {
	font-size: 0.8em;
	display: block;
	margin-top: 0.5em;
}
.item-text {
	margin-bottom: 30px;
}
@media screen and (max-width:830px) {
.about-area {
	width: 80%;
}
.stockist-tx {
	margin-left: 0px;
}
}

@media screen and (max-width:768px) {
br.sp,
.sp-only {
    display: block;
}
.pc-only {
    display: none;
}
.global_sp {
	width: 100%;
}
.sp-head {
	left: 20px;
	top: 40px;
}
.logo {
	width: 120px;
}
.splash_tx {
	font-size: 0.75em;
}
ul.nav {
	font-size: 1.15em;
	line-height: 2.2;
}
.dropdown_list {
	margin: 0 0 1.5em;
}
.main-content-area-inner {
	margin-top: 150px;
	flex-direction: column;
}
.about-area {
	font-size: 0.9em;
}
.collection-single-area .main-content-area-inner {
	margin-top: 25%;
}
.product-image-area {
	margin-top: 10px;
	display: block;
}
.product-image-area img {
	width: 100%;
}
.product-item-area {
	margin-bottom: 80px;
}
.item-list {
	width: 49%;
	margin-top: 2%;
	margin-bottom: 30px;
}
.item-list:nth-of-type(2n) {
	margin-right: 0;
}
.item-text {
	margin-bottom: 15px;
}
.stockist-tx {
	margin-top: 0px;
}
}
@media screen and (max-width:540px) {
.splash_tx {
    line-height: 1.6;
	font-size: 0.7em;
}
.logo {
    width: 100px;
}
.collection-single {
	margin: 0 auto;
	width: 100%;
}
.page-products-area .main-content-area-inner .page-cont {
    width: 100%;
}
.product-image-area {
	margin-top: 50px;
}
.about-area p {
	margin-left: -25%;
}
.item-list {
	width: 49%;
	margin-top: 30px;
	margin-bottom: 0;
}
.item-text h6 {
	margin-top: 0.5em;
}
.item-text {
    margin-bottom: 0;
}
}