/* Reset - ヘッダー要素の初期化 */
html,body,div,span,header,nav,h1,p,ul,li,a,img,iframe{margin:0;padding:0;border:0;outline:0;background:transparent}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
img{border:none;vertical-align:bottom;font-size:0;line-height:0}
ul{list-style:none}

/* Common Header Basic Styles */
#wHeaderContents p,#wFooterContents p{margin:0;padding:0}
header *,header :before,header :after{box-sizing:border-box}
h1{font-size:8px}
h1 img{vertical-align:middle}
iframe{vertical-align:bottom}

/* ==================================================
   PC・タブレット向けスタイル (@media min-width: 768px)
   ================================================== */
@media screen and (min-width:768px){
  header{position:relative;z-index:5000}
  #wHeader{width:100%;background-color:#fff;position:relative!important}
  #wHeaderContents{position:relative;width:950px;height:auto;margin:0 auto;padding:5px 0 3px;line-height:1.8;font-family:"メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Osaka,sans-serif}
  #wPopup #wHeaderContents{width:730px}
  #wHeaderContents .bold{font-weight:700}

  /* ロゴエリア (#siteTitle) */
  #siteTitle{display:inline;float:left;width:305px;height:45px;margin-right:5px}
  #siteTitle img{display:inline;float:left;margin-right:5px}
  #siteTitle a:first-child img,#siteTitle > :first-child + * img{width:45px}
  #siteTitle > :first-child + * img + * img{width:200px}
  #siteTitle h1,#siteTitle p{position:absolute;top:34px;left:102px;line-height:1.3;font-size:10px;white-space:nowrap}

  /* 右上ユーティリティナビ (#wUtil) */
  #wUtil ul{float:right}
  #wUtil ul li{float:left;margin-right:5px;font-size:11px}
  #wUtil ul li a:before{content:'≫';font-size:16px;font-weight:700;line-height:1.6;vertical-align:-1px;color:#d80b24}

  /* SP用要素の非表示 */
  .sp,#wUtilSp,#linkToppage{display:none}

  #wHeaderContents a:link,#wHeaderContents a:visited,#wHeaderContents a:active,#wHeaderContents a{overflow:hidden;outline:none;text-decoration:none}
  #wHeaderContents a:link,#wHeaderContents a:visited{color:#767676}
  #wHeaderContents a:hover,#wHeaderContents a:active{color:#d80b24}

  /* モバイルメニュー背景の初期化 */
  #bg-menu{position:static!important;display:block!important;min-height:0!important;opacity:1!important}
  #bg-menu #menuClose{display:none}

  /* グローバルナビゲーション (#wGM) */
  #wGM{width:100%;background:-webkit-gradient(linear,left top,left bottom,color-stop(1.00,#f5f5f5),color-stop(0.50,#fff),color-stop(0.00,#f5f5f5));background:-webkit-linear-gradient(top,#fff 0%,#eee 100%);background:-moz-linear-gradient(top,#fff 0%,#eee 100%);background:-o-linear-gradient(top,#fff 0%,#eee 100%);background:-ms-linear-gradient(top,#fff 0%,#eee 100%);background:linear-gradient(top,#fff 0%,#fff 50%,#eee 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0)}
  #wGM #topnav{list-style:none;width:950px;margin:0 auto;padding:0;font-size:12px;font-family:"ＭＳ Ｐゴシック","メイリオ","ヒラギノ角ゴ Pro W3",Osaka,sans-serif}
  #wGM #topnav > li{min-height:100%;position:relative;line-height:1.7;cursor:default;z-index:5000;background:url(/common/images/hf/bg_gm_off.png) repeat-x}
  #wGM #topnav > li > a{float:left;height:35px;padding:0;color:#333;cursor:pointer}
  #wGM #topnav > li:hover > a{background:url(/common/images/hf/bg_gm_on.png) repeat-x}
  #wGM #topnav > li > ul{display:none!important}
  #wGM #topnav:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
  #wGM #topnav a:link,#wGM #topnav a:visited{text-decoration:none;color:#333}
  #wGM #topnav a:hover,#wGM #topnav a:active{text-decoration:underline;color:#d60a23}
  #wGM #topnav > li:first-child,#wGM #topnav > li > div{display:none}

  /* サブヘッダー・ログイン領域 (#wSearch2) */
  #wSearch2{width:100%;padding:4px 0;font-size:12px;background:#d60a23}
  #wSearch2Contents{clear:both;width:950px;margin:0 auto}
  #wUtil2{float:right;width:155px;margin:0}
  #wUtil2 iframe{width:100%;height:26px;overflow:hidden;overflow-y:hidden;margin:0;padding:0;border:none;vertical-align:bottom}
  #wUtil2 ul{font-family:"メイリオ","ＭＳ Ｐゴシック","MS PGothic",sans-serif;list-style:none;float:right;margin:0;padding:0}
  #wUtil2 li{list-style:none;float:left;margin:0 0 0 2px;padding:2px}
  #wUtil2 li a{display:block;margin:0;padding:5px;-moz-border-radius:2px;-webkit-border-radius:2px;-ms-border-radius:2px;border-radius:2px;box-shadow:0 0 1px #666;text-decoration:none;color:#fff;font-size:12px;background:url(/common/images/hf/bg_search2.gif) repeat-x center}

  /* Clearfix */
  #wHeader,#wHeaderContents,#wGM #topnav,#wSearch2{zoom:1}
  #wHeader:after,#wHeaderContents:after,#wGM #topnav:after,#wSearch2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
}

@media screen and (min-width:768px) and (max-width:1024px){
  #wGM{display:block!important}
}

/* ==================================================
   スマートフォン向けスタイル (@media max-width: 767px)
   ================================================== */
@media screen and (max-width:767px){
  header{height:62px}
  
  /* PC用要素の非表示 */
  #wSearch2,#wMM,#wHeader #wHeaderContents #wUtil{display:none}
  #wHeader #wHeaderContents #siteTitle > *{display:none}
  #wHeader #wHeaderContents #siteTitle a:first-child{display:inherit}
  #wHeaderContents #siteTitle a:first-child img{max-width:50px}

  /* ヘッダー固定表示 */
  #wHeader{position:fixed;top:0;z-index:200;padding-top:5px;padding-bottom:5px;width:100%;height:62px;border-bottom:2px solid #d60a23;line-height:1;background:#fff}
  #wHeaderContents{font-size:14px;font-size:1.4rem}
  #wHeaderContents a:link,#wHeaderContents a:visited,#wHeaderContents a:active,#wHeaderContents a{overflow:hidden;outline:none;text-decoration:none;color:#3d3333}

  #siteTitle{width:20%;max-width:55px;float:left;padding-left:5px;z-index:2}
  #siteTitle img{width:100%;max-width:50px;max-height:50px}

  /* スマホ用ヘッダー右側ナビ (#wUtilSp) */
  #wUtilSp ul{width:80%;max-width:227px;float:right;margin:0;margin-right: -60px;}
  #wUtilSp ul li{float:left;width:25.9911%;max-width:59px}
  #wUtilSp ul li:not(#menu_sp) img{max-width:100%}
  #wUtilSp ul li a{display:block}
  #wUtilSp ul li#menu_sp{width:22%;max-width:50px;max-height:50px;cursor:pointer;display:block;z-index:10000}
  #wUtilSp ul li#menu_sp a{display:block;width:100%;height:100%}

  /* スマホ用スライドオーバーレイメニュー (#bg-menu) */
  #bg-menu{z-index:1000000!important;display:none;position:fixed;top:0;width:100%;height:100%;color:#fff}
  #bg-menu_w{z-index:100000!important;display:none;position:fixed;top:0;width:100%;height:100%;color:#fff}
  .bg-menu{z-index:1000000!important;position:absolute!important;top:0;display:block!important;width:100%;height:auto;min-height:100%!important;background-color:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#55000000,EndColorStr=#55000000);-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#55000000,EndColorStr=#55000000);zoom:1}

  /* 閉じるボタン */
  #menuClose{position:relative;z-index:2000000!important;display:block;float:right;min-width:68px;min-height:36px;margin:5px 5px 10px;font-size:14px;font-size:1.4rem;text-align:center;cursor:pointer;border:1px solid #fff;background-color:#d70b24;-ms-filter:alpha(opacity=100)!important}
  #menuClose span{display:block;padding:8px 16px;color:#fff;line-height:22px}

  /* スマホ用ナビリスト (#wGM / #topnav) */
  #wGM{z-index:2000000!important;position:absolute!important;width:100%;margin-top:55px}
  #wGM ul{position:relative;z-index:2000000!important;padding:0;margin:0;width:100%;list-style-type:none;-ms-filter:alpha(opacity=100)!important}
  #wGM ul li{position:relative;float:left;width:100%}
  #wGM > li:last-child{display:none}
  #wGM #topnav > li > a{display:none}
  #wGM #topnav li ul li a{display:block;width:100%;height:36px;background:#fff;border-bottom:1px solid #d60a23;color:#3d3333;visibility:visible;text-shadow:none!important;line-height:36px;padding-left:10px;text-decoration:none}
  #wGM ul li li a:hover{opacity:1;background-color:#fff}
  #wGM ul li:last-child a{border-bottom:none;margin-bottom:0}
  #wGM ul > li > ul{display:none}
  #wGM ul li li li a{width:70%;padding:1em 15%}
  #wGM ul li li li li a{width:60%;padding:1em 20%}
  #wGM ul li li li li li a{width:50%;padding:1em 25%}
  #wGM ul li a:hover{background-color:transparent}
  
  /* スマホメニュー用アコーディオンの見出しスタイル */
  #wGM #topnav li .title,#wGM #topnav li .Close{background-image:url(/common/images/hf/menu_aco_bottom_ie8.png);background-repeat:no-repeat;background-position:98% 50%}
  #wGM #topnav li .title,#wGM #topnav li .exception{width:100%;min-height:36px;padding-left:10px;color:#fff;position:relative;min-height:38px;line-height:36px;color:#fff;vertical-align:middle;border-bottom:1px solid #fff;background-color:#d60a23}
  #wGM #topnav li div:hover{cursor:pointer}
  #wGM #topnav li:first-of-type .title{border-top:1px solid #fff}
  #wGM #topnav li .Close{width:100%;background-image:url(/common/images/hf/menu_aco_top_ie8.png)}
  #wGM #topnav div a{display:block;color:#fff;text-decoration:none}
  #wGM #topnav > li:last-of-type{display:none}
  #wGM #topnav li div a img{display:none}

  /* Clearfix */
  #wHeader,#wHeaderContents,#wGM #topnav,#wSearch2{zoom:1}
  #wHeader:after,#wHeaderContents:after,#wGM:after,#topnav:after,#wSearch2:after{content:"";display:block;clear:both;visibility:hidden}
  #wHeaderContents:before,#wHeaderContents:after{display:table;content:''}
  #wHeaderContents:after{clear:both}
}