/*! #######################################################################

	HeadShrinker v1.0.2
	--------
	
	To be used with jquery.headshrinker.js by Chris Wharton (https://github.com/weare2ndfloor/HeadShrinker)

####################################################################### */


/* 

	The body class of "headshrinker" is added when the plugin is active 

	We also add a class of "headshrunk" onto the cloned header in case you want to overwrite CSS specifically	
	
*/

.headshrinker .headshrunk { opacity:0.9;/*20170720透明度を設定*/
	background: #fff;
}

.headshrinker .headshrunk nav ul li a {
	color: #efefef/*orignl=#34485d*/;
}

.headshrinker .headshrunk nav ul li a:hover {
	color: #3498db;
}

/*↓スマホ、タブレットの際、右上画面に表示されるメニューボックス↓*/
.headshrinker .headshrunk a.headshrinker-reveal {
	width: 30px;/*44pxを30pxに変更して四角形を小さくした*/
	height: 30px;/*44pxを30pxに変更して四角形を小さくした*/
	background: #0068b7 /*orgnl&1st=#f7f7f7 薄いグレーをシアンに変更*/;
	display: inline-block;
	position: absolute;
	top: 12px;
	right: 20px;
	border-radius: 3px;        /* 2ndよりメニューボックスに角丸を採用 */  
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用ボックスの角丸設定 */  
    -moz-border-radius: 3px;   /* Firefox用ボックスの角丸設定 */  
}

.headshrinker .headshrunk a.headshrinker-reveal.hs-reveal-left {
	right: auto;
	left: 20px;
}

.headshrinker .headshrunk a.headshrinker-reveal span { 
	display: block;
	width: 60%;
	margin: 0 auto;
	background: #ffffff/*#000*/;/*スマホ、タブレットの際、右上画面に表示されるメニューボックス内の横線　1stは青線 2ndで白線に変更*/
	height: 2px;/*4pxを2pxに変更*/
	margin-top: 7px !important;/*13pxを7pxに変更*/
	margin-bottom: -3px !important;/*-10pxを-3pxに変更*/
	border-radius: 50px;
}

.headshrinker .headshrunk .headshrinker-menu {
	position: absolute;
	left: 0;
	overflow-y: scroll;
	max-height: 500px;
}

.headshrinker .headshrunk .headshrinker-menu {
	display: block;
	width: 100%;
	text-align: left;	
}

.headshrinker .headshrunk .headshrinker-menu ul, .headshrinker .headshrunk .headshrinker-menu li  {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.headshrinker .headshrunk .headshrinker-menu a { /*スマホ、タブレット用画面のnavの選択肢（製品情報など4種）*/
	display: block;
	background: #0068b7 ;/*背景をコーポレートカラーに変更　1st=#dcdddd,orgnl=#fff*/
	padding: 15px/*10px*/ 20px !important;
	border-bottom: 1px solid #efefef;
	color:#ffffff;  /*スマホ、タブレット用画面のnavの選択肢（製品情報など4種）の文字を白に変更　オリジナルは設定無し*/
}

.headshrinker .headshrunk .headshrinker-menu ul ul a {
	padding-left: 3em !important; /*px設定をem設定に変更　1st＆orgnl=40px*/
	background: #005aa0 ; /*背景をK20%増のコーポレートカラーに変更　1st＆orgnl=設定無し*/
}

.headshrinker .headshrunk .headshrinker-menu ul ul ul a {
	padding-left: 4em !important; /*px設定をem設定に変更　1st＆orgnl=60px*/
	background: #004986 ; /*背景をK40%増のコーポレートカラーに変更　1st＆orgnl=設定無し*/
}

.headshrinker .headshrunk .headshrinker-menu ul ul ul ul a {
	padding-left: 5em !important; /*px設定をem設定に変更　1st＆orgnl=80px*/
	background: #003567 ; /*背景をK60%増のコーポレートカラーに変更　1st＆orgnl=設定無し 但し2015.1.28現在この「小枝メニュー」はsite内に存在し無い*/
}

.headshrinker .headshrunk .headshrinker-menu ul ul ul ul ul a {
	padding-left: 6em !important; /*px設定をem設定に変更　1st＆orgnl=100px*/
	background: #001a43 ; /*背景をK80%増のコーポレートカラーに変更　1st＆orgnl=設定無し 但し2015.1.28現在この「小枝メニュー」はsite内に存在し無い*/
}

.headshrinker .headshrunk .headshrinker-menu ul li a.headshrinker-expand {
	width: 26px;
	height: 26px;
	border: none !important;
	padding: 7px !important;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: none !important;
	font-size: 1em/*1st=20px*/;
}