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

		.breadcrumb { 
			list-style: none; 
			overflow: hidden; 
            font-size: 14px;
            line-height: 100%;
            background: #aebcd1;
		}
		.breadcrumb ul li { 
			float: left; 
            			position: relative; 
		}
		.breadcrumb ul li a {
			color: white;
			text-decoration: none; 
			padding: 10px 5px 10px 55px;
			background: brown;                   /* fallback color */
			background:#607ba4;

			display: block;
			float: left;
		}
        
        
		.breadcrumb ul li a:after{ 
			content: " "; 
            content: "";
			width: 0; 
			height: 0;
			border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 50px solid transparent;
			border-left: 30px solid #607ba4;
			position: absolute;
			top: 50%;
			margin-top: -50px; 
			left: 100%;
			z-index: 2; 
		}	
		.breadcrumb ul li a:before{ 
			content: " "; 
			display: block; 
			width: 0; 
			height: 0;
			border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 50px solid transparent;
			border-left: 30px solid white;
			position: absolute;
			top: 50%;
			margin-top: -50px; 
			margin-left: 1px;
			left: 100%;
			z-index: 1; 
		}	
        
        
		.breadcrumb ul li:first-child a {
			padding-left: 10px;
		}
        
        
		.breadcrumb ul li:nth-child(2) a{ background:#879ab8; }
		.breadcrumb ul li:nth-child(2) a:after { border-left-color:#879ab8; }
		.breadcrumb ul li:nth-child(3) a{ background:#aebcd1; }
		.breadcrumb ul li:nth-child(3) a:after { border-left-color:#aebcd1; }
		.breadcrumb ul li:nth-child(4) a { background:hsla(34,85%,65%,1); }
		.breadcrumb ul li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
		.breadcrumb ul li:nth-child(5) a  { background:hsla(34,85%,75%,1); }
		.breadcrumb ul li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }

        
        
        
}

@media screen and (max-width: 1060px) {
/* タブレット用のスタイル記述 */




		.breadcrumb { 
			list-style: none; 
			overflow: hidden; 
            font-size: 13px;
            line-height: 100%;
            background: #aebcd1;
		}
		.breadcrumb ul li { 
			float: left; 
            			position: relative; 
		}
		.breadcrumb ul li a {
			color: white;
			text-decoration: none; 
			padding: 8px 0px 8px 50px;
			background: brown;                   /* fallback color */
			background:#607ba4;

			display: block;
			float: left;
		}
        
        
		.breadcrumb ul li a:after{ 
			content: " "; 
            content: "";
			width: 0; 
			height: 0;
			border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 50px solid transparent;
			border-left: 30px solid #607ba4;
			position: absolute;
			top: 50%;
			margin-top: -50px; 
			left: 100%;
			z-index: 2; 
		}	
		.breadcrumb ul li a:before{ 
			content: " "; 
			display: block; 
			width: 0; 
			height: 0;
			border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 50px solid transparent;
			border-left: 30px solid white;
			position: absolute;
			top: 50%;
			margin-top: -50px; 
			margin-left: 1px;
			left: 100%;
			z-index: 1; 
		}	
        
        
		.breadcrumb ul li:first-child a {
			padding-left: 10px;
		}
        
        
		.breadcrumb ul li:nth-child(2) a{ background:#879ab8; }
		.breadcrumb ul li:nth-child(2) a:after { border-left-color:#879ab8; }
		.breadcrumb ul li:nth-child(3) a{ background:#aebcd1; }
		.breadcrumb ul li:nth-child(3) a:after { border-left-color:#aebcd1; }
		.breadcrumb ul li:nth-child(4) a { background:hsla(34,85%,65%,1); }
		.breadcrumb ul li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
		.breadcrumb ul li:nth-child(5) a  { background:hsla(34,85%,75%,1); }
		.breadcrumb ul li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }

        

}

@media screen and (max-width: 720px) {
/* スマートフォン用のスタイル記述 */




		.breadcrumb { 
			list-style: none; 
			overflow: hidden; 
            font-size: 12px;
            line-height: 100%;
            background: #aebcd1;
		}
		.breadcrumb ul li { 
			float: left; 
            			position: relative; 
		}
		.breadcrumb ul li a {
			color: white;
			text-decoration: none; 
			padding: 7px 0px 7px 35px;
			background: brown;                   /* fallback color */
			background:#607ba4;

			display: block;
			float: left;
		}
        
        
		.breadcrumb ul li a:after{ 
			content: " "; 
            content: "";
			width: 0; 
			height: 0;
			border-top: 40px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 40px solid transparent;
			border-left: 20px solid #607ba4;
			position: absolute;
			top: 50%;
			margin-top: -40px; 
			left: 100%;
			z-index: 2; 
		}	
		.breadcrumb ul li a:before{ 
			content: " "; 
			display: block; 
			width: 0; 
			height: 0;
			border-top: 40px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 40px solid transparent;
			border-left: 20px solid white;
			position: absolute;
			top: 50%;
			margin-top: -40px; 
			margin-left: 1px;
			left: 100%;
			z-index: 1; 
		}	
        
        
		.breadcrumb ul li:first-child a {
			padding-left: 10px;
		}
        
        
		.breadcrumb ul li:nth-child(2) a{ background:#879ab8; }
		.breadcrumb ul li:nth-child(2) a:after { border-left-color:#879ab8; }
		.breadcrumb ul li:nth-child(3) a{ background:#aebcd1; }
		.breadcrumb ul li:nth-child(3) a:after { border-left-color:#aebcd1; }
		.breadcrumb ul li:nth-child(4) a { background:hsla(34,85%,65%,1); }
		.breadcrumb ul li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
		.breadcrumb ul li:nth-child(5) a  { background:hsla(34,85%,75%,1); }
		.breadcrumb ul li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }

        


}