﻿/**************************************
 
 Header and Footer CSS Setting
 - COMMON [body,reset,link etc]
 - HEADER
 - CONTENT
 - FOOTER
 - DEVICE
 - PAGE TOP
 - COLOR etc

**************************************/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400');
body {
	margin: 0;
	padding: 0;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:98%;
	line-height:180%;
	color: #222;
	min-width:1150px;
	-webkit-text-size-adjust: 100% ;/* iPhoneフォントサイズ拡大対策 */
}
img {
	border: none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	list-style:none;
	box-sizing:border-box;
}
a:link { color:rgba(19,0,189,1.00); outline:none; }
a:visited { color:rgba(19,0,189,1.00);}
a:hover {color: #333;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}

#wrapper {}
#base {}

.anchor { position: relative;}
.anchor a { position:absolute; top:-150px; left:auto; text-indent: -9999px;}

.pc {display:block;}
.sm {display:none;}

/*====================================================================================================
  HEADER
====================================================================================================*/

#header { position: fixed; top:0; left: 0; width:100%; height:133px; z-index: 99999; border-bottom: 1px solid #ddd; background: #fff;}

/*** HEAD BOX ************************************************************/
#header .head_box { background:#423838; min-width: 1050px;}
#header .head_box::after { /*float_clear*/ display:block; clear:both; content:"";}

/* NAV */
#header .h_nav { float: right;}
#header .h_nav ul {}
#header .h_nav ul li { float: left; width: 135px;}
#header .h_nav ul li+li { margin-left: 1px;}
#header .h_nav ul li a {
	display: block;
	padding: 10px 0;
	height: 50px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: #AA020F;
	box-sizing: border-box;
}

/* SNS */
#header .sns { float:right; padding: 10px 20px;}
#header .sns .fb {}
#header .sns .fb img { width: auto; height: 30px;}

/* SEARCH */
#header .search { float:right; padding:8px 0 0 20px;}
#header .search table {
	display:block !important;
	position: relative;
	padding: 0 !important;
	margin: 0 !important;
	width:190px;
	height: 33px;
	border-radius: 50px !important; /* CSS3 */
	-webkit-border-radius: 50px !important; /* Safari,Google Chrome */
	-moz-border-radius: 50px !important;/* Firefox */
	background: rgba(255,255,255,0.30) ;
}
#header .search table th,
#header .search table td { margin: 0 !important; padding: 0 !important;}
#header .search table tr td table { background:none !important;}
#header .search .gsc-input-box { width: 150px; padding: 3px 0; background: none; height: 33px; border: none;}
#header .search input.gsc-input { background: none !important; text-align: left !important; text-indent: 10px !important;}
#header .search .gscb_a { color: #423838 !important;}
#header .search .gsc-search-button { position: absolute; top: 0; right: 2px; width:40px; height: 33px; z-index: 999; border: none; overflow: hidden;}
#header .search .gsc-search-button svg { width:18px; height:auto; color: #000;}
#header .search .gsc-search-button button { display: block; background:none; border: none; box-sizing: border-box;}

/* BACKGROUND COLOR and TEXT SIZE */
#header .txt_size,
#header .bg_color { padding: 10px 0; float: right; position: relative;}
#header .txt_size b,
#header .bg_color b {
	display: block;
	padding: 0 20px;
	color: #fff;
	font-weight: normal;
	border-right: 1px solid rgba(255,255,255,0.30);
}
#header .txt_size ul,
#header .bg_color ul {
	display: none;
	position: absolute;
	top: 48px;
	left:0;
	width:120px;
	padding: 9px;
	background:rgba(0,0,0,0.50);
}
#header .txt_size ul::after,
#header .bg_color ul::after { /*float_clear*/ display:block; clear:both; content:"";}
#header .txt_size:hover ul,
#header .bg_color:hover ul { display: block;}
#header .txt_size ul li,
#header .bg_color ul li {float:left;}
#header .txt_size ul li+li,
#header .bg_color ul li+li { margin-left:5px;}
#header .txt_size ul li a,
#header .bg_color ul li a {
	display:block;
	width:30px;
	line-height:30px;
	color:#FFF;
	text-align: center;
	text-decoration: none;
	background:#202020;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}
#header .txt_size ul li a:hover,
#header .bg_color ul li a:hover { color:#FFF; background:#555;}

/*** NAVIGATION ************************************************************/

#header .Navigation { margin: auto; width: 1150px;}
#header .Navigation::after { /*float_clear*/ display:block; clear:both; content:"";}

/* LOGO */
#header h1,
#header h1 a { display: block; width:350px;}
#header h1 { float: left;}
#header h1 a { padding:19px; height:86px; box-sizing: border-box;}
#header h1 img { width: 320px; height: auto;}

/* NAV */
#Nav { float: right; width:780px;}
#Nav ul li { float: left; width: 16.66%; border-left:1px solid #DDD;}
#Nav ul li a { display: block; text-decoration: none;}

#Nav ul li p {}
#Nav ul li p a {
	display: block;
	padding:20px 0;
	height:84px;
	color: #000;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 130%;
	box-sizing: border-box;
}
#Nav ul li#nav1 p a,
#Nav ul li#nav2 p a,
#Nav ul li#nav5 p a { padding:29px 0;}
#Nav ul li#nav7 { display: none;}
#Nav ul li p a:hover { color:#FFF; background:#AA020F;}

#Nav ul li div {
	position: absolute;
	top:134px;
	left: 0;
	width: 100%;
	background: rgba(66,56,56,0.70);
}
#Nav ul li:hover div::after { /*float_clear*/ display:block; clear:both; content:"";}
#Nav ul li div { padding: 0; height:0; overflow: hidden; opacity: 0; transition: all 0.3s;}
#Nav ul li:hover div { display: block; padding:20px 0; height: auto; opacity: 10; }

#Nav ul li ul { margin: auto; max-width: 1150px;}
#Nav ul li ul li {
	float: left;
	margin:0.5%;
	padding:10px;
	width:32.3%;
	background: #FFF;
	border: none;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}
#Nav ul li ul li b { display: block; margin:0 0.5% 2px; padding:5px 10px 10px; font-size: 120%; text-align: center; border-bottom: 3px solid #AA020F;}
#Nav ul li ul li a { padding: 5px 10px; color: #222;}
#Nav ul li ul li a:hover {
	display: block;
	color: #FFF;
	font-weight: bold;
	background: #AA020F;
	border-radius: 0; /* CSS3 */
	-webkit-border-radius: 0; /* Safari,Google Chrome */
	-moz-border-radius: 0;/* Firefox */
}
#Nav ul li ul li ol { padding: 0;}
#Nav ul li ul li ol li {
	float: none;
	width:99%;
	margin: 0 0.5%;
	padding: 0;
	font-size:95%;
	border: none;
	border-bottom:1px solid #DDD;
	border-radius:0; /* CSS3 */
	-webkit-border-radius:0; /* Safari,Google Chrome */
	-moz-border-radius:0;/* Firefox */
}

#Nav ul li#nav1 ul li:nth-child(1) { width: 65.6% !important;}
#Nav ul li#nav1 ul li:nth-child(1) ol li { float: left !important; width:49% !important;}
#Nav ul li#nav1 ul li:nth-child(1) ol li:nth-child(2n+1) { clear: both;}
#Nav ul li#nav1 ul li:nth-child(1) ol li:nth-child(2) { border-top:none;}
#Nav ul li#nav1 ul li:nth-child(2) ol li:nth-child(1) { float:none !important; width:100% !important;}

#Nav ul li#nav2 ul li:nth-child(1) { width: 60.6% !important;}
#Nav ul li#nav2 ul li:nth-child(1) ol li { float: left !important; width:49% !important;}
#Nav ul li#nav2 ul li:nth-child(1) ol li:nth-child(2n+1) { clear: both;}
#Nav ul li#nav2 ul li:nth-child(1) ol li:nth-child(2) { border-top:none;}
#Nav ul li#nav2 ul li:nth-child(2) { width: 37% !important;}
#Nav ul li#nav2 ul li:nth-child(2) ol li { float: left !important; width:49% !important;}
#Nav ul li#nav2 ul li:nth-child(2) ol li:nth-child(3),
#Nav ul li#nav2 ul li:nth-child(2) ol li:nth-child(4),
#Nav ul li#nav2 ul li:nth-child(2) ol li:nth-child(5) { clear: both; float: none!important; width: 100%!important;}

#Nav ul li#nav3 ul li:nth-child(1) ol li,
#Nav ul li#nav3 ul li:nth-child(2) ol li,
#Nav ul li#nav3 ul li:nth-child(3) ol li { clear: none !important; float: left !important; width:49% !important;}
#Nav ul li#nav3 ul li:nth-child(1) ol li:nth-child(2n+1) { clear: both;}
#Nav ul li#nav3 ul li:nth-child(3) ol li { width:32% !important; }
#Nav ul li#nav3 ul li:nth-child(4) { clear:both !important; float: none !important; width:99% !important; }
#Nav ul li#nav3 ul li:nth-child(4) ol::after { display:block; clear:both; content:"";}
#Nav ul li#nav3 ul li:nth-child(4) ol li { clear: none !important; float: left !important; width:19% !important; }

#Nav ul li#nav4 ul li,
#Nav ul li#nav5 ul li,
#Nav ul li#nav6 ul li { padding: 0;}
#Nav ul li#nav4 ul li a,
#Nav ul li#nav5 ul li a,
#Nav ul li#nav6 ul li a {
	padding: 10px 15px;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}


.sm_nav { display:none;}


/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { clear:both; width:100%; padding-top:133px; }



/*====================================================================================================
  FOOTER
====================================================================================================*/

#footer { clear:both;width:100%;}
#footer .f_cont { position: relative; margin: auto; max-width: 1000px; }
#footer .f_cont::after { /*float_clear*/ display:block; clear:both; content:"";}
#footer .f_box1 { padding: 40px 0; background:#F3EFE6;}
#footer .f_box2 { padding: 40px 0; background:#FFFFFF;}

/*** FOOTER NAV ************************************************************/
#footer ul.fnav { float:left; width:63%;}
#footer ul.fnav li { float: left; margin:20px 0; width:31.33%;}
#footer ul.fnav li:nth-child(3n+1) { clear: both; margin-left:0;}
#footer ul.fnav li+li { margin-left:3%;}
#footer ul.fnav li ul,
#footer ul.fnav li ul li{ float: none; margin: 0; width: 100%;}
#footer ul.fnav a { color: #222; text-decoration: none;}
#footer ul.fnav a:hover { color: #AA020F; text-decoration: underline;}
#footer ul.fnav li b a {
	position: relative;
	display: block;
	margin-bottom: 10px;
	padding: 5px 0;
	font-family: "游明朝体","Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "MS PMincho", Times, serif;
	border-bottom: 1px solid #ccc;
}
#footer ul.fnav li b a::before {
	display:block;
	clear:both;
	content:"";
	position: absolute;
	top:0;
	right: 0;
	width: 20px;
	height:100%;
	background: url(../rkh_image/link_arrow.png) no-repeat left center;
	border-bottom: 1px solid #ccc;
}
#footer ul.fnav li ul li { font-size:85%; letter-spacing: -1px;}
#footer ul.fnav li ul li a::before { content:"・"; color: #949495; }
#footer ul.fnav li ul li+li { margin-left:0;}
#footer ul.fnav li ul li p a::before { content:"-"; padding: 0 10px 0 15px; }

/*** FACEBOOK **************************************************************/
#footer .fb { float:right; margin:20px 0; width: 34%; background: #eee;}


/*** ADDRESS ***************************************************************/
/* LOGO */
#footer .logo { float: left; margin-right: 30px; width: 320px;}
#footer .logo img { width:auto; height:45px;}

/* FACEBOOK */
#footer .fb_sm { display: none;}

/* DEPARTMENT LINK */
#footer .depa { float:left;}
#footer .depa p { float: left; width: 110px;}
#footer .depa p+p { margin-left: 10px;}
#footer .depa p a {
	position: relative;
	display: block;
	padding: 5px 10px;
	color: #222;
	font-family: "游明朝体","Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "MS PMincho", Times, serif;
	text-decoration: none;
	border: 1px solid #ddd;
	box-sizing: border-box;
}
#footer .depa p:nth-child(1) a::before,
#footer .depa p:nth-child(2) a::before {
	display:block;
	clear:both;
	content:"";
	position: absolute;
	top:0;
	right: 10px;
	width: 16px;
	height:100%;
	background:url(../rkh_image/link_blank.png) no-repeat left center;
}
#footer .depa p:nth-child(1) { width: 170px; }
#footer .depa p:nth-child(3) a { background:#AA020F; color: #FFF; text-align: center; border-color:#AA020F; }
#footer .depa p a:hover { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}

/* ADDRESS */
#footer .add { clear: both; padding: 25px 0 0;}
#footer .add::after { /*float_clear*/ display:block; clear:both; content:"";}
#footer .add p { float: left;}
#footer .add p+p { margin-left: 10px;}
#footer .add div { clear:both;}

/* BANNER */
#footer .banner { position: absolute; top: 0; right: 0;}
#footer .banner p { float: left;}

/*** FOOTER NAV SM *********************************************************/
#footer .other_nav { display:none;}

/*** COYRIGHT **************************************************************/
#footer .copy {
	padding:20px 0;
	font-size: 80%;
	text-align: center;
	border-top: 3px solid #AA020F;
	background: #FFF;
}

/*====================================================================================================
  PAGE TOP
====================================================================================================*/

#page,
#page a { display:block; width:81px; height:102px;}
#page { position: fixed; bottom:130px; right: 20px;}
#page img { position: absolute; left: 0; bottom: 0;}
#page a:hover img { opacity:1; filter: alpha(opacity=100); -moz-opacity: 1;}

/*====================================================================================================
  COLOR etc
====================================================================================================*/

.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #AA020F;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}

/*====================================================================================================
  IE11　Setting
====================================================================================================*/
@media all and (-ms-high-contrast: none){ 
	body { font-size:85%;}
}
