@charset "utf-8";

/* Sub Category Navigation Area
-------------------------------------------- */

@media screen and (min-width: 751px) {

	nav#categoryNavArea {
	    /* background: #fd5502; */
	}

	nav#categoryNavArea ul {
		display: -webkit-flex;
		display: flex;
		list-style: none;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: auto;
		width: 900px;
	}
	
	nav#categoryNavArea .menu {
		display: none;
	}
	
	nav#categoryNavArea li a {
	    /* color: #ffffff; */
	    color: #ca022e;
      display: block;
	    font-size: 1.2em;
	    padding: 16px 10px;
	    margin: 10px 0;
	}
	
	nav#categoryNavArea li.selected a {
    color: #dc890c;
	}
}

@media screen and (max-width: 750px) {
	nav#categoryNavArea ul {
		display: none;
	}
	
	nav#categoryNavArea .menu {
      background : #ca022e;
      padding: 15px;
      color: #ffffff;
      text-align: center;
	    display: block;
	    opacity: 1.0;
	}
	
	nav#categoryNavArea .menu div,nav#categoryNavArea .menu span {
	    display: inline-block;
	}
	
	
	nav#categoryNavArea .menu p {
		text-align: center;
		font-weight: bold;
	}
	nav#categoryNavArea ul {
		padding-bottom: 40px;
		position: absolute;
		z-index: 100;
		min-width: 100%;
		background: #ffffff;
	}
	
	nav#categoryNavArea li a {
	    line-height: 1;
	    border: 1px;
	    padding: 15px 5px;
	    background: #ffffff;
	    color: #333333;
	    display: block;
        margin: 0 20px;
	    border-bottom: solid 1px;
	    border-color: #000000;
	    font-size: 12px;
	}
	
	nav#categoryNavArea li.selected a {
      color: #dc890c;
	 }
	
	/* アイコン */
	nav#categoryNavArea .menu .icon {
	    color: #fff;
	    position: absolute;
	    margin-top: auto;
	    margin-left: 10px;
	    width: 20px;
	    height: 20px;
	    border: solid 1.5px currentColor;
	    border-radius: 100%;
	    -webkit-transform: rotate(-45deg);
	          transform: rotate(-45deg);
	}

	nav#categoryNavArea .menu .icon i {
	    position: absolute;
	    left: 6px;
	    top: 4px;
	    -webkit-transform: rotate(45deg);
	            transform: rotate(45deg);
	}

	nav#categoryNavArea .menu .icon i:before {
	    content: '';
	    position: absolute;
	    width: 10px;
	    height: 2px;
	    background-color: currentColor;
	}
	
	nav#categoryNavArea .menu .icon i:after {
	    content: '';
	    position: absolute;
	    width: 10px;
	    height: 2px;
	    background-color: currentColor;
	    -webkit-transform: rotate(90deg);
	            transform: rotate(90deg);
	}
}

/* Breadcrumbs
-------------------------------------------- */

@media screen and (min-width: 751px) {

	div#breadcrumbs {
		/* margin-bottom: 30px; */
		color: #333;
		font-size: 1.1em;
		margin-top: 5px;
		width: 1000px;
		margin: 20px auto 0;
	}

	div#breadcrumbs a {
		/* color: #333; */
    color : gray;
		margin: 0 10px;
	}
}

@media screen and (max-width: 750px) {
	div#breadcrumbs {
		margin: 5px 0 30px;
		font-size: 0.9em;
		color: #333;
	}

	div#breadcrumbs a {
		color: #333;
		margin: 0 1px;
	}
}