@charset "utf-8";

/* CSS Document */

#nav,
#nav02 {
	overflow: visible;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	height: 36px;
}

#nav {
	float: left;
	width: 70%;
}

#nav02 {
	float: right;
	width: 25%;
}

#nav > li,
#nav02 > li {
	float: left;
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0;
	width: calc(33.3% - 2px);
	border-right: solid 1px #fff;
	border-radius: 6px;
	background-color: #ffead7;
}

#nav02 > li {
	width: auto;
	background-color: #FDe6E7;
}
label{
	background: url(//www.pasela.co.jp/images/common/icon_arrow_d_black.png) no-repeat 98% center;
}
label {
	display: block;
	margin: 0;
	padding: 10px;
	width: auto;
	text-align: center;
}

label:hover,
#nav ul > li:hover,
#nav02 ul > li:hover { background-color: #ffc; }

#nav > li:last-child label,
#nav02 > li:last-child label { border-right: none; }

#nav ul > li,
#nav02 ul > li {
	display: block;
	margin: 0 auto 2px;
	padding: 0 2px;
	width: calc(96% - 4px);
	background: #fff;
}

#nav ul > li > a,
#nav02 ul > li > a,#nav > li > ul > li > label {
	display: table-cell;
	width: 2000px;
	height: 32px;
	vertical-align: middle;
	text-decoration: none;
	color: #333;
}

input[type="checkbox"].on-off { display: none; }

#nav ul,
#nav02 ul {
	list-style: none;
	margin: auto;
	padding: 0;
	width: 98%;
}

.size,.size02{
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

#nav > li > ul > li > label {
	padding: 0 2px;
	text-align: left;
}

#nav .size > li,#nav .size02 > li{
	float: left;
	width: calc(50% - 6px);
	border-radius: 6px;
	background-color: #ffead7;
	text-align: center;
}

#nav .size > li:nth-child(2n),#nav .size02 > li:nth-child(2n){
	margin-left: 4px;
}

input[type="checkbox"].on-off + ul {
	overflow: hidden;
	height: 0;
}

#nav input[type="checkbox"].on-off:checked + ul.kimono { padding-bottom: 6px; height: 100%; }

#nav input[type="checkbox"].on-off:checked + ul.child { padding-bottom: 6px; height: 100%; }

#nav input[type="checkbox"].on-off:checked + ul.parents { padding-bottom: 6px; height: 100%; }

#nav02 input[type="checkbox"].on-off:checked + ul.wedding { padding-bottom: 6px; height: 100%; }

#nav input[type="checkbox"].on-off:checked + ul.size { height: 108px; }

#nav input[type="checkbox"].on-off:checked + ul.size02 { height: 176px; }

@media screen and (max-width: 640px) {

#nav { margin-bottom: 2px; }

#nav02 { margin-bottom: 20px; }

#nav,
#nav02 {
	float: none;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

#nav > li,
#nav02 > li {
	float: none;
	position: static;
	display: block;
	margin: auto;
	width: calc(100% - 20px);
	border-radius: 0;
	border-right: none;
}

label { border-bottom: solid 1px #fff; }

#nav li:last-child label,
#nav02 li:last-child label { border-bottom: none; }

#nav ul,
#nav02 ul { width: 100%; }
}