@charset "UTF-8";

/* header */
header { position:fixed; top:0; left:0; width:100%; z-index:2000; background:#000!important; }
header * { line-height:1.7; letter-spacing:0.05em; font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; }
header .con { position:relative; height:100px; }
header h1 { position:absolute; top:20px; }
header a { text-decoration:none; overflow:hidden; -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
header a:hover, header a:active, a:focus { text-decoration:none; }
header a.fade { opacity:1; }
header .header_subnav { display:none; }
header a[target="_blank"]:after { content:""; display:inline-block; width:12px; height:11px; background:url("../img/icon/blank.png") 0 0 no-repeat; background-size:contain; margin-left:8px; opacity:0.7; }

/* パンくず */
ul.breadCrumb { margin:100px auto 0; padding:10px 0; overflow: hidden; display:block; vertical-align: top; }
ul.breadCrumb li { float: left; margin: 0 4px 0 0; color: #727171; font-size: 11px; }
ul.breadCrumb li a { padding: 0 4px 0 0; color: #727171; }
#content > ul.breadCrumb { margin-top:0!important; }

/* footer */
footer .con { position:relative; margin:auto; }
footer .link_banner { padding:30px 0; background:#e6e6e6; }
footer .link_banner ul { text-align:center; font-size:0; }
footer .link_banner li { display:inline-block; }
footer .link_banner li + li { margin-left:40px; }
footer .footer_main *, footer .footer_sub * { color:#e6e6e6; font-size:12px; line-height: 1.7; letter-spacing: 0.05em; font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;}
footer .footer_main a, footer .footer_sub a { color:#e6e6e6; }
footer .footer_main { padding:50px 0 30px; background:#333; text-align:left; }
footer .footer_main .logo { float:left; width:240px; }
footer .footer_main .link_btn { margin-top:20px; }
footer .footer_main .link_btn li { float:left; height: 30px;}
footer .footer_main .link_btn li:nth-of-type(even) { margin-left:10px; }
footer .footer_main .link_btn li a { display:inline-block; padding:5px 15px; line-height:1; border:1px solid #e6e6e6; text-decoration: none; }
footer .footer_main .link_btn li a:hover { background:#e6e6e6; color:#333; }
footer .footer_main .about { margin-left:300px; background-color: transparent; }
footer .footer_main .about p {font-size: 12px !important;}
footer .footer_main .about p + p { margin-top:12px; }
footer .footer_main .about a.more { font-size:14px; }
footer .footer_main .about a.more:after { width:29px; height:13px; background:url("/img/top/arrow_more2.png") 0 0 no-repeat; background-size:29px 13px; }
footer .footer_main nav { margin-top:30px; padding-top:30px; border-top:1px solid #999; display:flex; justify-content:space-between; }
footer .footer_main nav li { line-height:2.5; }
footer .footer_main nav a:before { content:"- " }
footer .footer_main .search { margin-top: 30px; padding-top: 30px; border-top: 1px solid #999;}
footer .footer_main .search .footer_col1 { width: 37%; float: left;}
footer .footer_main .search .footer_col2 { width: 63%; float: left;}
footer .footer_main .search h3 { background: url(../img/footer_arrow.gif) no-repeat 0px center; padding: 0 0 0 1.4em; margin: 0 0 1.6em;}
footer .footer_main .search dl dt { margin: 0 1em 0.5em 0; width: 100%; float: left; display: block;}
footer .footer_main .search dl dd { display: block; float: left; margin: 0 0 0.5em; width: 100%;}
footer .footer_main .search dl.footer_house dt { width: 8em !important;}
footer .footer_main .search dl.footer_house dd { width: 50em !important;}
footer .footer_main .search dl dd ul li { border-right: 1px solid; display: inline; padding: 0 0.5em 0 0; color: #aaa; font-size: 11px;}
footer .footer_main .search dl a { color: #fff; text-decoration: underline;}
footer .footer_sub { padding:25px 0; background:#000; }
footer .footer_sub .con { display:flex; justify-content:space-between; }

@media (min-width: 1341px) {
  body { min-width:1340px; }
  header .con { width:1340px; margin:auto; }
	header h1 { left:0; }
  header nav { right:0; }
  ul.breadCrumb { width:1340px; }
}
@media (min-width: 1141px) {
  footer .con { width:1140px; margin:auto; }
}
@media (max-width: 1340px) {
  header .con { width:100%; }
  header h1 { left:20px; }
  header nav { right:20px; }
  ul.breadCrumb { width:100%; padding:10px 20px; }
}
@media (max-width: 1140px) {
  footer .con { width:100%; padding:0 20px; }
}
@media screen and (min-width: 1001px) {
  header h1 img { width:172px; height:auto; }
	header #btn_menu { display:none; }
	header nav { position:absolute; top:35px; }
	header nav > ul > li { position:relative; float:left; height:40px; text-align:center; }
  header nav > ul > li + li { margin-left:40px; }
	header nav > ul > li a { display:block; width:100%; height:100%; color:#fff!important; font-size:16px; }
	header nav > ul > li a:hover { opacity:1; }
	header nav > ul > li > a:not(.toggle):after { 
		content:"";	display:block; position:absolute; width:0; height:2px; bottom:0; left:0; background:#e8da65;
		transition: .1s linear;	-webkit-transition: .1s linear; }
	header nav > ul > li > a:not(.toggle):hover:after,
	header nav > ul > li.active > a:not(.toggle):after { width:100%; }

  header nav .toggle:after {
    content:""; display:block; width:10px; height:7px; background:url("/img/nav/toggle_off.png") 0 0 no-repeat; background-size:10px 7px;
    position:absolute; bottom:5px; left:50%; margin-left:-5px; }
  header nav .toggle.open:after { background-image:url("/img/nav/toggle_on.png"); }
	header nav .menu {
    display:none; z-index:1000;
    position:absolute; top:65px; background-color:rgba(0,0,0,0.7); }
  header nav #nav_special .menu { width:280px; right:-40px; }
  header nav #nav_about .menu { width:220px; right:0; }
	header nav .menu ul { text-align:left; border-top:2px solid #e8da65; }
  header nav .menu li { height:57px; }
  header nav .menu li + li { border-top:1px solid #333; }
  header nav .menu li a { display:block; padding:0 17px; line-height:57px; font-size:14px; }
  header nav .menu li a:before { content:"- "; color:#e8da65; }
  header nav .menu li a:hover { background:#666; }

  header + ul.breadCrumb { margin-top:110px!important; }
  header + #titleArea { padding-top:110px!important; }
}
@media screen and (max-width: 1000px) {
  header .con { height:80px; }
  header h1, header #btn_menu { z-index:200; }
  header h1 img { width:auto; height:42px; }
  header #btn_menu { position:absolute; top:20px; right:20px; }
  header nav,
  header nav .menu { display:none; }
  header nav { position:absolute; top:0; left:0; width:100%; max-height:100vh; padding-top:80px; background-color:rgba(0,0,0,0.7); z-index:100; overflow-y:scroll; }
  header nav > ul { border-top:1px solid #333; }
  header nav > ul > li { border-bottom:1px solid #333; }
  header nav > ul > li:nth-child(2n+1) { border-right:1px solid #333; }
  header nav > ul > li > a { display:block; padding:10px; color:#fff!important; text-align:left; font-size:14px; }
  header nav > ul > li > a:before { content:"- "; color:#e8da65; }
  header nav > ul > li > a:hover { background:#666; }
  header nav .menu ul { text-align:left; }
  header nav .menu li { float:left; width:50%; }
  header nav .menu li a { display:block; padding:3px 15px; color:#eee!important; font-size:13px; }
  header nav .menu li a:before { content:"- "; color:#ccc; }
  header nav .menu li a:hover { background:#666; }
	
	header .header_subnav {
		display:block; /*height:40px;*/ background:#fff; position:relative; }
	header .header_subnav::-webkit-scrollbar{ display:none; }
	header .header_subnav > ul { display:flex; width:100%; background:#666; white-space:nowrap; overflow-x:scroll; /*-webkit-overflow-scrolling: touch; overflow-scrolling: touch;*/ }
	header .header_subnav > ul > li { border-right:1px solid #999; }
	header .header_subnav > ul > li > a { display:inline-block; padding:0 15px; line-height:40px; font-size:13px; background:#666; color:#fff; vertical-align: bottom; }
	header .header_subnav > ul > li > a:hover,
	header .header_subnav > ul > li > a.open { background:#000; }
	header .header_subnav .menu { display:none; position:fixed; top:120px; left:0; width:100%; background:rgba(51,51,51,0.8); }
	header .header_subnav .menu li { width:100%; border-bottom:1px solid #666; font-size:13px; }
	header .header_subnav .menu li a { display:block; padding:7px 10px; color:#fff; }
	header .header_subnav .menu li a:hover { background:#000; }
  
  header + ul.breadCrumb { margin-top:120px!important; }
  header + #titleArea { padding-top:120px!important; }
  #content > ul.breadCrumb { margin-top:0!important; }

  footer .footer_main .about { margin-left:240px; }
  footer .footer_main .search .footer_col1, footer .footer_main .search .footer_col2 {float: none; width: 100%;}
  footer .footer_main .search .footer_col2 {margin-top: 30px;}
}
@media screen and (max-width: 768px) {
  header .con { height:60px; }
  header h1 { top:12px; }
  header h1 img { width:100px; height:auto; }
  header #btn_menu { top:15px; right:15px; }
  header #btn_menu img { width:30px; height:auto; }
  header nav { padding-top:60px; }
  
	header .header_subnav .menu { top:100px; }
  ul.breadCrumb { margin-bottom:0; padding:5px 15px;}
  header + ul.breadCrumb { margin-top:100px!important; }
  header + #titleArea { padding-top:100px!important; }

  footer .footer_main nav { display:block; }
  footer .footer_main nav li { display:inline-block; margin-right:1em; }
}
@media screen and (max-width: 640px){
  footer .link_banner { padding:20px; }
  footer .link_banner li { display:block; float:left; width:32%; }
  footer .link_banner li + li { margin-left:2%; }
  footer .link_banner li img { width:100%; height:auto; }
  footer .footer_main .logo { float:none; }
  footer .footer_main .about { margin:15px 0 0 0; }
  footer .footer_main .search dl.footer_category dd {width: auto !important;}
}
@media screen and (max-width: 400px){
  header nav .menu li { /*display:inline-block;*/ float:none; width:auto; }
}
