@charset "utf-8";

/* header */
html { font-size: 62.5%;}
body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  color: #333;
  font-size: 1.8rem;
  line-height: 1.8;}
header {
  position: sticky;/*固定する*/
  position: -webkit-sticky;/*Safari用ベンダープレフィックス*/
  top: 0;/*ブラウザの上からの距離はゼロ*/
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px #aaa solid;
  background: #fff;
  color: #333;
  z-index: 9999;
  overflow: hidden;}
#inr_header {
  position: relative;
  width: 100%;
  max-width:1200px;
  margin: 0 auto;
  padding: 10px 0 5px;
  overflow: hidden;}
#header_logo {
  display: block;
  margin: 0 10px 0 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: bold;
  overflow: hidden;
  float: left;}
#header_logo img {
  height: 46px;
  width: auto;
  margin: 0;
  float: left;}
#header_logo .logo_text {
  margin: 20px 0 0 10px;
  float: left;}
#header_logo a {
  color: #333;
  text-decoration: none;}
h1 {
  display: inline-block;
  font-size: 1.4rem;
  font-weight:normal;
  margin: 24px 0 0;
  padding: 0;
  width: auto;
  height: auto;
  overflow: hidden;
  float: left;}
.header_user_menu {
  display:block;
  font-size: 0;
  margin: 10px 0 0;
  float: right;}
.header_user_menu li {
  display: inline-block;
  font-size:1.4rem;
  padding:0;
  vertical-align: middle;}
.header_user_menu li:not(:first-child) {
  margin: 0 0 0 20px; }
.header_user_menu li a {
  display: block;
  margin: 0;
  padding: 28px 0 0;
  text-decoration: none;
  color: #333;
  background-position: center top;}
.header_user_menu li a:hover {
  opacity: 0.7;}
.header_user_menu li a.user_menu_mypage {
  background: url(/images/common/header/icon_mypage.svg) no-repeat;
  background-size: auto 26px;
  background-position: center top;}
.header_user_menu li a.user_menu_bbmail {
  background: url(/images/common/header/icon_mail.svg) no-repeat;
  background-size: auto 20px;
  background-position: center 3px;}
.header_user_menu li a.user_menu_help {
  background: url(/images/common/header/icon_help.svg) no-repeat;
  background-size: auto 26px;
  background-position: center 1px;}
.header_user_menu li a.user_menu_info {
  background: url(/images/common/header/icon_info.svg) no-repeat;
  background-size: auto 26px;
  background-position: center 1px;}
.header_user_menu li a.header_entrybtn {
  display: block;
  margin: 0;
  padding: 10px 20px;
  background-size: auto 28px;
  text-decoration: none;
  color: #fff;
  font-size: 1.4rem;
  background: #333;
  border-radius: 6px;}

/*******************************
PC
********************************/
@media (min-width: 768px) {
.ver_pc { display: block;}
.ver_sp { display: none; }
#nav-drawer { display: none;}
}

/*******************************
SP
********************************/
@media screen and (max-width: 767px) {
.ver_pc { display: none; }
.ver_sp { display: block; }

header {
  position: sticky;/*固定する*/
  position: -webkit-sticky;/*Safari用ベンダープレフィックス*/
  top: -20px;/*ブラウザの上からの距離はゼロ*/
  margin: 0;
  padding: 0;
  border-bottom: 1px #aaa solid;
  background: #fff;
  z-index: 9999;
  overflow: hidden;}
#inr_header {
  position: relative;
  width: 100%;
  max-width:2000px;
  margin: 0 auto;
  padding: 30px 0 10px;
  overflow: hidden;}
#header_logo {
  display: block;
  margin: 0 0 0 10px;
  padding: 0;
  font-size: 1.6rem;
  font-weight: bold;
  overflow: hidden;
  float: left;
  width: calc(100% - 60px);}
#header_logo img {
  height: 26px;
  width: auto;
  margin: 0 10px 0 0;
  float: left;}
#header_logo .logo_text {
  margin: 6px 0 0 0;
  float: left;
  font-size: 1.2rem;
  word-break: break-all;}
h1 {
  display: block;
  font-size: 1.1rem;
  line-height: 20px;
  font-weight:normal;
  margin: 0;
  padding: 0;
  float: none;
  position: absolute;
  top:0;
  left:0;
  border-bottom: 1px #aaa solid;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 20px;
  text-overflow: ellipsis;}
h1 span {
  margin: 0 10px;}
.header_user_menu {
  display: none;}

/******* sp - menu *************************************/
#nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: block;}
/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;}
/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  max-width: 30px;
  height: 20px;
  vertical-align: middle;
  position: absolute;
  top:35px;
  right:10px;}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  height: 3px;/*線の太さ*/
  width: 30px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
  position: absolute;
  left: 0;}
#nav-open span:before {
  bottom: -8px;}
#nav-open span:after {
  bottom: -16px;}
/*閉じる用の薄黒カバー*/
#nav-close {
  text-align: right;
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 11000;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 46px;
  background: #000;
  opacity: 0;
  transition: .3s ease-in-out;}
.nav-close_icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  margin: 10px 10px 0 0;}
.nav-close_icon span::before,
.nav-close_icon span::after {
  display: block;
  content: "";
  position: absolute;
  top: 13px;
  right: 0;
  width:30px;
  height:3px;
  margin: 0;
  padding: 0;
  background: #fff;}
.nav-close_icon span::before {
  transform: rotate(-45deg);}
.nav-close_icon span::after {
  transform: rotate(45deg);}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 46px;
  right: 0;
  z-index: 10000;/*最前面に*/
  width: 100%;
  height: 100%;
  background: #F6F6F6;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(105%);
  transform: translateX(105%);/*右に隠しておく*/
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  color: #333;}
ul#sp_navi_list {
  margin: 0 0 46px;
  padding: 0;}
ul#sp_navi_list li {
  list-style: none;}
ul#sp_navi_list > li {
  width: 100%;
  border-bottom: 1px #ddd solid;
  margin: 0;
  padding:0;}
ul#sp_navi_list li a,
ul#sp_navi_list li p {
  display: block;
  text-decoration: none;
  margin: 0;
  padding: 15px 10px;
  background: #F6F6F6;
  color: #333;
  overflow: hidden;}
ul#sp_navi_list a { position: relative;}
ul#sp_navi_list li a:after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  right: 10px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}
ul#sp_navi_list a:hover {
  background: #EAEAE9;}
ul#sp_navi_list > li.sp_navi_user_menu {
  border-bottom: 1px #ddd solid;}
ul#sp_navi_list li.sp_navi_user_menu a {
  background: #A6AAB9;
  color: #fff;}
ul#sp_navi_list li.sp_navi_user_menu a:after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;}
ul#sp_navi_list li.sp_navi_user_menu a:hover {
  background: #969BAB;}
ul.sp_navi_list_02 {
  margin: 0;
  padding: 0;}
ul.sp_navi_list_02 li {
  margin: 0;
  padding: 0;
  border-bottom:none;}
ul#sp_navi_list li ul.sp_navi_list_02 li a {
  position:relative;
  margin:0;
  padding: 10px 0 10px 60px;}
ul.sp_navi_list_02 li a:before {
  position:absolute;
  content:'';
  top: 15px;
  left: 44px;
  height:0;
  width:0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #aaa;}
.sp_navi_list_sub {
  margin: 0;
  padding: 0 0 0 34px;
  border-top: 1px #ddd solid;}
 .sp_navi_list_subti {
   border-top: 1px #ddd solid;}
ul.sp_navi_list_03 {}
ul.sp_navi_list_03 li:not(:last-child) {
  border-bottom: 1px #ddd solid;}
ul#sp_navi_list li .sp_navi_list_sub ul.sp_navi_list_02 li a {
  padding: 10px 0 10px 25px;}
.sp_navi_list_sub ul.sp_navi_list_02 li a:before {
  left:10px;}
.sp_menu_icon:before {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  padding: 0;
  content:'';
  background-size: contain;
  float: left;
  overflow: hidden;}
.sp_menu_icon.sp_menu_bbtop:before {
  background: url(/images/common/header/icon_home_wh.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_mypage:before {
  background: url(/images/common/header/icon_mypage_wh.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_mail:before {
  background: url(/images/common/header/icon_mail_wh.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_help:before {
  background: url(/images/common/header/icon_help_wh.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_info:before {
  background: url(/images/common/header/icon_info_wh.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_ftth:before {
  background: url(/images/common/header/icon_ftth.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_exmb:before {
  background: url(/images/common/header/icon_mobile.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_exmbwifi:before {
  background: url(/images/common/header/icon_wifi.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_biz:before {
  background: url(/images/common/header/icon_biz.svg) no-repeat;
  background-position: center;}
.sp_menu_icon.sp_menu_option:before {
  background: url(/images/common/header/icon_option.svg) no-repeat;
  background-position: center;}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-open { display: none;}
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .8;}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);}
/*ハンバーガーメニューを開いている時は、コンテンツを固定する*/
.scroll_prevent {
  position: fixed;
  width: 100%;
  height: 100%;}
  /*sp - menu_END*/
  }