﻿@charset "UTF-8";

#renewal2022 {
	z-index: 0;
}

/* navigation
*********************************************/

.side_title {
	position: fixed;
	top: 50%;
}

.side_navi {
}

.side_navi .naviWrap {
	position: relative;
}

#renewal2022 .side_navi .naviWrap dl,
#renewal2022 .side_navi .naviWrap > dl > dt,
#renewal2022 .side_navi .naviWrap dd,
#renewal2022 .side_navi .naviWrap ul {
	display: inline;
}

#renewal2022 .side_navi .naviWrap .nav01,
#renewal2022 .side_navi .naviWrap .nav02,
#renewal2022 .side_navi .naviWrap .nav03,
#renewal2022 .side_navi .naviWrap .nav04,
#renewal2022 .side_navi .naviWrap .nav05,
#renewal2022 .side_navi .naviWrap .nav06,
#renewal2022 .side_navi .naviWrap .nav07,
#renewal2022 .side_navi .naviWrap .nav08 {
	display: block;
	position: relative;
	margin: 1.5em 0;
}

#renewal2022 .side_navi .naviWrap dl.nav_list {
	display: flex;
	justify-content: space-between;
	margin: 1.5em 0;
}

#renewal2022 .side_navi .naviWrap dl.nav_list.al {
	align-items: center;
}

#renewal2022 .side_navi .naviWrap dl.nav_list dt {
	width: 4%;
}

#renewal2022 .side_navi .naviWrap dl.nav_list dd {
	width: 88%;
}

#renewal2022 .side_navi .naviWrap ul li {
	margin-top: 1.5em;
}

#renewal2022 .side_navi .naviWrap ul li.ht {
	margin-top: 0.85em;
}

#renewal2022 .side_navi .naviWrap dl.nav_list dd ul li.ht {
	margin: 0 0 1em;
}

#renewal2022 .side_navi .naviWrap dl.nav_list dd ul li.ht:last-child {
	margin-bottom: 0;
}


#renewal2022 .side_navi .naviWrap dl.nav_list.al dd ul li.ht {
	margin-bottom: 0;
}

#renewal2022 .side_navi .naviWrap ul li.mt {
	margin-top: 0.5em;
}

#renewal2022 .side_navi .naviWrap dl.accd dd {
	display: none;
}

#renewal2022 .side_navi .naviWrap dl.accd dt {
	position: relative;
}

#renewal2022 .side_navi .naviWrap dl.accd dt span {
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY( -60% );
	transition: .3s;
}

#renewal2022 .side_navi .naviWrap dl.accd.nav01 dt span { left: 29%; }
#renewal2022 .side_navi .naviWrap dl.accd.nav02 dt span { left: 16%; }
#renewal2022 .side_navi .naviWrap dl.accd.nav03 dt span { left: 25%; }
#renewal2022 .side_navi .naviWrap dl.accd.nav04 dt span { left: 22%; }
#renewal2022 .side_navi .naviWrap dl.accd.nav05 dt span { left: 25%; }
#renewal2022 .side_navi .naviWrap dl.accd dt span img { width: 9px; }

#renewal2022 .side_navi .naviWrap dl.accd.selected dt span {
	transform: translateY( -60% ) rotate( 90deg );
}

#renewal2022 .side_navi .naviWrap dl.accd dd {
	display: none;
}

@media (min-width: 769px) {

	#renewal2022 .side_navi .naviWrap dt a,
	#renewal2022 .side_navi .naviWrap li a {
		left: 0;
		width: 100%;
	}

	.area_left {
		position: fixed;
		width: calc( 50% - 530px );
		transition: 2s;
		margin-left: -100%;
		top: 50%;
		transform: translateY(-50%);
		left: 3em;
		z-index: 99999;
	}

	.area_left.flex {
		transition: 2s;
		margin-left: 0;
	}

	.side_title {
		margin-left: 15px;
		width: 8px;
		top: 60%;
		left: 0;
		transform: translateY(-50%);
	}

	.side_navi ._scroll {
		max-height: 700px;
		overflow-y: scroll;
	}

	.side_navi ._scroll::-webkit-scrollbar{
		display: none;
	}

	.side_navi .naviWrap picture img {
		width: 145px;
	}

	.side_navi .naviWrap {
		width: 250px;
		margin: 0 auto;
		display: block;
	}

	#renewal2022 .side_navi .naviWrap img {
		width: 200px;
		margin: 0;
	}

	#renewal2022 .side_navi .naviWrap dl.nav02 dl dd {
	}

	#renewal2022 .side_navi .naviWrap dt a:hover,
	#renewal2022 .side_navi .naviWrap li a:hover {
		opacity: 0.5
	}

	#renewal2022 .side_navi .naviWrap dl.nav02 dl dt span {
		width: 0.65em;
	}

}

@media (max-width: 769px) {

	#renewal2022 .secWrap {
		margin: 0.5em;
	}

	#renewal2022 .side_navi .naviWrap li a {
		left: 0;
	}

	.side_title {
		left: 0.75em;
		width: 2vw;
		top: 0;
		height: 100%;
		text-align: center;
	}

	.side_title img {
		margin-top: 160px;
		max-height: 65vh;
	}

	.side_navi ._scroll {
		max-height: 90vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.side_navi {
		position: fixed;
		top: 0;
		left: -100%;
		background: #fff;
		width: 100%;
		height: 100%;
		transition: .3s;
		padding-top: 0px;
		z-index: 2;
	}

	#renewal2022 .side_navi .naviWrap dl.nav_list dt {
		width: 5%;
	}

	#renewal2022 .side_navi .naviWrap dl.nav_list dd {
		width: 95%;
	}

	.side_navi.flex {
		left: 0;
		transition: .3s;
	}

	.side_navi picture {
		display: block;
	}

	.side_navi img {
		margin: 0 1.5em;
		width: 40%;
		display: block;
	}

	.sp_menu {
		z-index: 55555;
		position: fixed;
		right: 1em;
		top: 110px;
		height: 35px;
		width: 35px;
	}

	.sp_menu span {
		transition: .3s;
		height: 2px;
		background: #000;
		position: absolute;
		display: block;
		transition: .3s;
		top: 50%;
		left: 50%;
		transform: translateX( -50% );
	}

	.sp_menu span:nth-child(1) {
		transform: translate( -50%, -8px );
		width: 80%;
	}

	.sp_menu span:nth-child(2) {
		width: 80%;
	}

	.sp_menu span:nth-child(3) {
		transform: translate( -50%, 8px );
		width: 80%;
	}

	.sp_menu.flex span:nth-child(1) {
		transform: translateX( -50% ) rotate( 45deg );
		width: 100%;
	}

	.sp_menu.flex span:nth-child(2) {
		width: 0;
	}

	.sp_menu.flex span:nth-child(3) {
		transform: translateX( -50% ) rotate( -45deg );
		width: 100%;
	}

	#renewal2022 .side_navi .naviWrap dl.nav02 dl dd {
		padding: 1em 1.5em 0;
		overflow: hidden;
		position: relative;
	}

	#renewal2022 .side_navi .naviWrap dl.nav02 dl dd ul {
		display: block;
		height: auto;
	}

	#renewal2022 .side_navi .naviWrap dl.nav02 dl dt span {
		width: 2%;
		top: 10%;
	}

	#renewal2022 .side_navi .naviWrap dl.accd.nav01 dt span { left: 16%; }
	#renewal2022 .side_navi .naviWrap dl.accd.nav02 dt span { left: 9%; }
	#renewal2022 .side_navi .naviWrap dl.accd.nav03 dt span { left: 15%; }
	#renewal2022 .side_navi .naviWrap dl.accd.nav04 dt span { left: 12%; }
	#renewal2022 .side_navi .naviWrap dl.accd.nav05 dt span { left: 15%; }

}



@media (min-width: 769px) and ( orientation: portrait ){

	#renewal2022 .side_navi .naviWrap dl.nav02 dl dd ul li a {
		font-size: 9px;
	}

}

@media (min-width: 769px) and ( orientation: landscape ){

	#renewal2022 .side_navi .naviWrap dl.nav02 dl dd ul li a {
		font-size: 9px;
	}

}


/* head
*********************************************/

#hd div.nav01,
#hd div.nav02,
#hd div.nav03,
#hd div.nav04,
#hd div.nav05,
#hd div.nav06,
#hd div.nav07,
#hd div.nav08,
#hd div.nav09 {
	position: relative;
}

#renewal2022 #hd p,
#renewal2022 #hd ul,
#renewal2022 #hd li {
	display: inline;
}

#renewal2022 #hd li a {
	position: absolute;
	display: block;
}

#renewal2022 #hd li a span {
	display: none;
}

#renewal2022 #hd li.nv01 a {top: 62%; left: 38%; width: 25%; height: 42%; }
#renewal2022 #hd li.nv02 a {top: 62%; left: 39%; width: 22%; height: 42%; }
#renewal2022 #hd li.nv03 a {top: 62%; left: 40%; width: 20%; height: 42%; }
#renewal2022 #hd li.nv04 a {top: 62%; left: 40%; width: 20%; height: 42%; }
#renewal2022 #hd li.nv05 a {top: 76%; left: 38%; width: 25%; height: 28%; }

@media (min-width: 769px) {

	#hd .secWrap {
		max-width: 1100px;
		margin: 0 auto;
	}

	#renewal2022 #hd a:hover {
		background: rgba( 255, 255, 255, 0.7 );
	}

	#renewal2022 #hd .nav01,
	#renewal2022 #hd .nav02,
	#renewal2022 #hd .nav03,
	#renewal2022 #hd .nav04,
	#renewal2022 #hd .nav05,
	#renewal2022 #hd .nav06,
	#renewal2022 #hd .nav07,
	#renewal2022 #hd .nav08 {
		display: block;
		margin: 50px 0;
	}

}

@media (max-width: 769px) {

	#hd .secWrap {
		margin: 0 1em;
	}

	#renewal2022 #hd .nav01,
	#renewal2022 #hd .nav02,
	#renewal2022 #hd .nav03,
	#renewal2022 #hd .nav04,
	#renewal2022 #hd .nav05,
	#renewal2022 #hd .nav06,
	#renewal2022 #hd .nav07,
	#renewal2022 #hd .nav08 {
		display: block;
		margin: 6vw 0;
	}

}


/* sec01
*********************************************/

#archive .secWrap {
	background: #f6f6f7;
}

#archive .secWrap ul {
	background: url(/lazona-kawasaki/campaign/wardrobe_2024catalog/common/image/202505/archive_bg01.png) top center no-repeat;
	background-size: 89%;
	display: flex;
	margin: 0 auto;
	width: 95%;
	flex-wrap: wrap;
}

#archive .secWrap ul li {
	width: calc( 100% / 3 );
}

#archive .secWrap ul li img {
	width: 72%;
	margin: 0 auto 90px;
}

#archive .secWrap ul li:last-child img {
	margin-bottom 0;
}



@media (min-width: 769px) {

	#archive .secWrap {
		max-width: 780px;
		margin: 100px auto 0;
		overflow: hidden;
	}

	#archive .secWrap h2 {
		margin: 50px 0;
	}

}

@media (max-width: 769px) {

	#archive .secWrap {
		overflow: hidden;
		width: 82%;
		margin: 2em auto 0;
	}

	#archive .secWrap h2 {
		margin: 5vw 0;
	}

	#archive .secWrap ul li img {
		margin: 0 auto 10vw;
	}

}

/* hd
*********************************************/


@media (min-width: 769px) {

}

@media (max-width: 769px) {

	#hd {
		padding: 2em;
	}

}

/* sec
*********************************************/

#sec01 .secWrap {
	position: relative;
}

#sec01 .secWrap p {
	position: relative;
}

#sec01 .secWrap a {
	display: block;
	position: absolute;
}

#sec01 .secWrap #sec0101 a { top: 87%; left: 23%; width: 9%; height: 4%; }
#sec01 .secWrap #sec0102 a { top: 17%; left: 17%; width: 12%; height: 4%; }
#sec01 .secWrap #sec0103 a { top: 80%; left: 20.5%; width: 13%; height: 4.5%; }
#sec01 .secWrap #sec0104 a { top: 89.5%; left: 21%; width: 13%; height: 4%; }
#sec01 .secWrap #sec0105 a { top: 90.5%; left: 21%; width: 16%; height: 1.5%; }
#sec01 .secWrap #sec0106 a { top: 79.5%; left: 24%; width: 9%; height: 7%; }
#sec01 .secWrap #sec0107 a { top: 56.5%; left: 63.5%; width: 16%; height: 4.5%; }

@media (min-width: 769px) {

	#sec01 .secWrap {
		margin-top: 50px;
	}

	#sec01 .secWrap a {
		transition: .3s;
	}

	#sec01 .secWrap a:hover {
		background: rgba( 246, 246, 247, 0.7 );
	}

	#sec01 .secWrap a#sec0102:hover {
		background: rgba( 255, 0, 0, 0.7 );
	}

	#sec01 .secWrap p {
		margin: 0;
	}

}

@media (max-width: 769px) {

	#sec01 .secWrap {
		margin-top: 2em;
	}

	#sec01 .secWrap p {
		margin: 0;
	}

}

#sec01 .secWrap p.mt0 {
	margin-top: 0;
}

/* sec
*********************************************/


#sec02 .secWrap {
	position: relative;
}

#sec02 .secWrap p {
	position: relative;
}

#sec02 .secWrap a {
	display: block;
	position: absolute;
}

#sec02 .secWrap #sec0201 a { top: 81%; left: 21%; width: 13%; height: 4.5%; }
#sec02 .secWrap #sec0202 a { top: 81%; left: 21.5%; width: 12%; height: 4%; }

@media (min-width: 769px) {

	#sec02 .secWrap {
		margin-top: 100px;
	}

	#sec02 .secWrap p {
		margin: 0;
	}

	#sec02 .secWrap a {
		transition: .3s;
	}

	#sec02 .secWrap a:hover {
		background: rgba( 246, 246, 247, 0.7 );
	}

}

@media (max-width: 769px) {

	#sec02 .secWrap {
		padding-top: 2em;
	}

	#sec02 .secWrap p {
		margin: 0;
	}

}

/* sec
*********************************************/

#sec03 .secWrap {
	position: relative;
}

#sec03 .secWrap p {
	position: relative;
}

#sec03 .secWrap a {
	display: block;
	position: absolute;
}

#sec03 .secWrap #sec0301 a { top: 66%; left: 62%; width: 18%; height: 3.5%; }
#sec03 .secWrap #sec0302 a { top: 8.5%; left: 20%; width: 18%; height: 3%; }

@media (min-width: 769px) {

	#sec03 .secWrap {
		margin-top: 100px;
	}

	#sec03 .secWrap p {
		margin: 0;
	}

	#sec03 .secWrap a {
		transition: .3s;
	}

	#sec03 .secWrap a:hover {
		background: rgba( 246, 246, 247, 0.7 );
	}


}

@media (max-width: 769px) {

	#sec03 .secWrap {
		margin-top: 2em;
	}

	#sec03 .secWrap p {
		margin: 0;
	}

}

/* sec
*********************************************/

#sec04 {
}

#sec04 .secWrap {
	position: relative;
}

#sec04 .secWrap p {
	position: relative;
}

#sec04 .secWrap a {
	display: block;
	position: absolute;
}

#sec04 .secWrap #sec0401 a { top: 79.5%; left: 20%; width: 13%; height: 5%; }
#sec04 .secWrap #sec0402 a { top: 82.5%; left: 41%; width: 12%; height: 4.5%; }

@media (min-width: 769px) {

	#sec04 .secWrap {
		margin-top: 100px;
	}

	#sec04 .secWrap p {
		margin: 0;
	}

	#sec04 .secWrap a {
		transition: .3s;
	}

	#sec04 .secWrap a:hover {
		background: rgba( 246, 246, 247, 0.7 );
	}

}

@media (max-width: 769px) {

	#sec04 .secWrap {
		margin-top: 2em;
	}

	#sec04 .secWrap p {
		margin: 0;
	}

}

/* sec
*********************************************/

#sec05 {
}

@media (min-width: 769px) {

	#sec05 .secWrap {
		padding-top: 100px;
		margin-top: 50px;
	}

	#sec05 .secWrap .sec05_bg01 {
		padding-bottom: 50px;
	}

	#sec05 .sec05_bg01:before {
		top: 20px;
	}

}

@media (max-width: 769px) {

	#sec05 .secWrap {
		padding-top: 2.5em;
		overflow: hidden;
	}

	#sec05 .secWrap .sec05_bg01 {
		padding-bottom: 2em;
	}

	#sec05 .sec05_bg01:before {
		top: 1.5em;
	}

}

/* sec
*********************************************/

#sec06 .secWrap {
	position: relative;
}

#sec06 .secWrap p {
	position: relative;
}

#sec06 .secWrap a {
	display: block;
	position: absolute;
}

#sec06 .secWrap a { top: 23.5%; left: 22%; width: 14%; height: 18%; }

@media (min-width: 769px) {

	#sec06 .secWrap {
		padding-top: 100px;
	}

	#sec06 .secWrap p {
		margin: 50px 0 0;
	}

	#sec06 .secWrap a {
		transition: .3s;
	}

	#sec06 .secWrap a:hover {
		background: rgba( 246, 246, 247, 0.7 );
	}

}

@media (max-width: 769px) {

	#sec06 .secWrap {
		padding-top: 2em;
	}

	#sec06 .secWrap p {
		margin: 1em 0 0;
	}

}

/* 202411
*********************************************/

#hd {
	position: relative;
	overflow: hidden;
}

#hd h1 {
	position: relative;
	display: block;
}

#hd h1 a {
	display: block;
	width: 18.5%;
	height: 17%;
	top: 20.5%;
	left: 81.7%;
	position: absolute;
}

#hd h1 a img {
	vertical-align: bottom;
	width: 100%;
	opacity: 0;
	display: block;
}

.float_special {
	position: fixed;
	right: 0;
	max-width: 450px;
}

@media (min-width: 769px) {

	#hd h1 a img {
		transition: .3s;
	}

	#renewal2022 #hd h1 a:hover,
	#renewal2022 #hd h1 a:hover img {
		opacity: 1 !important;
		background: transparent;
	}

	#renewal2022 #hd .nav00 {
		display: block;
		margin: 50px 0;
	}

	#renewal2022 #hd .nav00 a {
		background: url(/lazona-kawasaki/campaign/wardrobe_2024catalog/common/image/202411/head_btn02_o.png) top center no-repeat;
		background-size: contain;
		display: block;
	}

	#renewal2022 #hd .nav00 a img,
	.float_special a img {
		transition: .3s;
	}

	#renewal2022 #hd .nav00 a:hover,
	.float_special a:hover {
		opacity: 1;
	}

	#renewal2022 #hd .nav00 a:hover img,
	.float_special a:hover img {
		opacity: 0;
	}

	.float_special {
		background: url(/lazona-kawasaki/campaign/wardrobe_2024catalog/common/image/202411/float_btn01_o.png) top center no-repeat;
		background-size: contain;
		bottom: 150px;
	}



}

@media (max-width: 769px) {

	#renewal2022 #hd .nav00 {
		margin: 6vw 0;
		display: block;
	}

	.body-top .wrap-top-btn {
		z-index: 500;
	}

	.float_special {
		z-index: 500;
		bottom: 0;
		width: 100%;
	}

}
