/*
--------------------------------------------
   *** DEVICES ***
--------------------------------------------
*/

	/* max-width: 1024px */
@media (max-width: 1024px) {
	.content {
		padding: 2em 1em;
	} 
	.banner {
		max-height: 220px;
	}
	.logo-container {
		padding-right: 0.7em;
	}
	.header-leftcol,
	.header-rightcol {
		width: 25%;
	}
	.header-leftcol {
		width: 74%;
	}
}

	/* max-width: 900px */
@media (max-width: 900px) {
	aside .rightcol .csc-default,
	address {
		font-size: 80%;
		padding: 1em;
	}
	.logo-container {
		font-size: 90%;
		line-height: 100% !important;
	}
	 ul.sf-menu li {
    padding: 0.2em 1.5em 0.2em 0;
  } 	  
  ul.sf-menu li a {
		color: #fff;
		font-size: 85%;
		text-decoration: none;
  }  
}

	/* max-width: 764px */
@media (max-width: 764px) {
	.logo-container {
		max-height: auto !important;
		padding-bottom: 1em;
		padding-right: 1.1em;
	}
	.header-leftcol {
		display: none;
	}
	.header-rightcol {
		float: right;
	}
	.header-mobile {
		display: block;
		width: 100%;
		padding-top: 0.5em;
	}
	.header-mobile .claim {
		margin: 0;
	}	
	.logo {
		width: 9.375em;
		height: 3.625em;
		padding-bottom: 0;
		overflow: hidden;
	}
	
	/* navigation collapse */	
	.collapse {
  	display: none;
	}
	button {
		display: block;
		position: absolute;
		margin-left: 1em;
		margin-top: 2px;
		border: 0;	
		width: auto;
		height: auto;
		background: transparent;	
  	cursor: pointer;
  	padding: 0;
  	z-index: 20;
	}	
	button .icon-bar {
 		display: block;
  	width: 50px;
  	height: 6px;
  	margin: 4px 0;
  	border-radius: 3px;
  	background-color: #000;
	}
	button:hover .icon-bar {
		opacity: 0.6;
	}
	nav .mainnavi {
		height: 2.4em;		
	}
	nav .mainnavi.fixed {
		position: relative;
		top: auto;width: 100%;
		background: #9e2121 !important;
	}

	
	/* mainnavi */
	.nav-collapse ul.sf-menu {
		position: absolute;
		display: block;
		width: 100%;
		height: auto !important;	
		margin-top: 2.4em;
		margin-left: 0;	
		padding-left: 0;
		list-style: none;
		background: #666;
		box-shadow: 0 4px 4px 0 rgba(0,0,0,0.4);
  	-moz-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.4);
  	-webkit-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.4);
  	z-index: 40;
	}	
	.nav-collapse ul.sf-menu li {
		display: block;
		width: calc(100% + 3em) !important;
		border-bottom: 1px dotted #fff;
		padding-bottom: 0;
		white-space: normal;
		line-height: normal;
	}
	.nav-collapse ul.sf-menu li:last-child {
		border: none !important;
	}
	.nav-collapse ul.sf-menu li a {
		font-size: 112.5% !important;
	  padding: 8px 0 12px 1em;
	}

	/* subnavi 1 */
	.nav-collapse ul.sf-menu ul {
		position: relative;
		display: block;	
		width: calc(100% + 3em) !important;
		height: auto;
		padding: 8px 0 8px 0;
		border: none !important;
		background: #e8e8e8 !important;
	}
	.nav-collapse ul.sf-menu li li {
		width: 100% !important; 
  	background-color: transparent;
  	padding: 0;
  	border-width: 0 0 1px 0;
		border-style: dotted;
		border-color: #666;
		background: #e8e8e8 !important;
	}
	.nav-collapse ul.sf-menu li li a {
	  padding: 0.2em 3.2em 0.4em 2em;
	}


}

	/* max-width: 640px */
@media (max-width: 640px) {
	.banner {
		margin-top: 0.4em;
	}
	.header-mobile {
		display: none;
	}
	.content {
		padding-bottom: 1em;
	} 
	article,
	aside {
		width: 100%;
		float: none;
		min-height: auto;
	}
	aside .rightcol .csc-default,
	address {
		font-size: 90%;
	}
	aside .rightcol .csc-default {
		margin-bottom: 1em;
	}
	aside .rightcol .csc-default:last-child {
		margin-bottom: 2em;
	}
	aside .rightcol hr {
		width: 100%;
		margin: 0.8em auto 0.8em auto;
	}
	.top .button {
  	margin-top: 1em;
  	margin-bottom: 0;
	}

}


	/* max-width: 580px */
@media (max-width: 580px) {

}

	/* max-width: 480px */
@media (max-width: 480px) {
	.header-mobile .claim {
		font-size: 80%;
	}
		nav .mainnavi {
		height: 2.6em;
	}
}

	/* max-width: 320px */
@media (max-width: 320px) {
	nav .mainnavi {
		height: 3em;
	}
}