@charset "UTF-8";
/***********************************
TOPページPC用ナビ詳細設定
***********************************/



/**4/5変更**/
#naviBox_PC nav {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    width: 80%;
}
#naviBox_PC nav ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
#naviBox_PC nav ul::after {
  display: block;
  clear: both;
  content: '';
}
#naviBox_PC nav ul li {
  position: relative;
  float: left;
}
#naviBox_PC nav ul li:not(:first-child) {
  border: none;
}
#naviBox_PC nav ul li:hover {
   /*
   background-color: rgba(255,255,255,.3);
   */
}
/*リンク部分詳細設定*/
#naviBox_PC nav ul li  {
    display: inline-block;
    padding-top: 1em;
    padding-right: 2em;
    padding-left: 2em;
    padding-bottom: 1em;/*リンク部分詳細設定*/
    color: #fff;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}
/*バックアップ
nav ul li a{
    display: inline-block;
    padding-top: 1em;
    padding-right: 2em;
    padding-left: 2em;
    padding-bottom: 1em;
    color: #fff;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}*/


/*サブカテゴリーulul*/
#naviBox_PC nav ul ul {
    position: absolute;
    top: 100%;
    left: -2px;
    display: none;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
}
#naviBox_PC nav ul ul li {
  float: none;
  margin: 0;
  background-color: rgba(0,0,0,0.5);
}
#naviBox_PC nav ul ul li a {
  color: #fff;
  text-decoration: none;
}
#naviBox_PC nav ul ul li:not(:first-child) {
  border: none;
}


#naviBox_PC nav ul ul  li:hover {
    background-color: #000000;
}
#naviBox_PC nav ul ul  li a:hover {
   color: #fff;
   text-decoration: none;
}
#naviBox_PC ul li:hover > ul {
  display: block;
  
}




/***********************************
英語・ログインボタン
***********************************/
.hed_btn{
width: 120px;
overflow: hidden; /*floatの解除*/
position: relative; /*DWで正常にプレビュー*/
zoom: 1; /*IE6でレイアウト崩れ防止*/
font-family: Arial, Helvetica, sans-serif;
}

/**4/5変更**/
.hed_btn .btn-border {
    display: inline-block;
    width: 100px;
    text-align: center;
    border: 2px solid #ffffff;
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
    transition: .4s;
} /*85pxが2つ=170+border4+margin-right20*/

.hed_btn .btn-border:hover {
  background-color: #000000;
  border-color: #ffffff;
  color: #FFF;
}




/***********************************
サブページSM用ナビ詳細設定
(topと共通のスタイル)
***********************************/
#naviBox_SM p {
    line-height: 1em;
    
}
#naviBox_SM .navi_text {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 10px;
    font-weight: bold;
}
.main-header {
    padding: 5px;
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 50;
}
/*☰のスタイル設定部分*/
.main-header a {
    position: absolute;
    left: 20px;
    top: 0px;
    color: white;
    font-size: 32px;
    background-color: #000000;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 2px;
    border-radius: 5px;
}
.main-header a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #3D2F2F;
}



.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-nav {
    position: fixed;
    top: 0;
    width: 0;
    height: 100%;
    background: #3b3b3b;
    overflow-y: auto;
    z-index: 100;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  
    font-size: 14px;
    /*transition: width 0.3s ease;開閉のなめらかな動き*/
}
.main-nav a {
  display: block;
  background: linear-gradient(#3e3e3e, #383838);
  border-top: 1px solid #484848;
  border-bottom: 1px solid #2e2e2e;
  color: white;
  padding: 15px;
}
.main-nav a:hover, .main-nav a:focus {
  background: linear-gradient(#484848, #383838);
  color: #fff;
  text-decoration: none;
}
.main-nav:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.content {
  padding: 100px 20px 20px 20px;
}

.close-menu {
  display: none;
}
/*☰を開いたときの横幅*/
#main-nav:target {
  width: 20%;
}
/*700以下になったときの☰を開いたときの横幅*/
@media only screen and (max-width: 700px) {
  #main-nav:target {
  width: 40%;
    }
}


#main-nav:target + .page-wrap {
  width: 80%;
}
#main-nav:target + .page-wrap .open-menu {
  display: none;
}
#main-nav:target + .page-wrap .close-menu {
  display: block;
}
/*☰を開いたときのずらす位置*/
#main-nav:target + .page-wrap .main-header {
  width: 80%;
  left: 20%;
}
/*700以下になったときの☰を開いたときのずらす位置*/
@media only screen and (max-width: 700px) {
  #main-nav:target + .page-wrap .main-header {
  width: 80%;
  left: 40%;
}
}