@charset "utf-8";

/*------------------------------------------------------------------------------
 リセット
------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5,
ul, ol, li,
dl, dt, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

a img {
  border: none;
}

p {
  margin: 0.5em 0;
}

/*------------------------------------------------------------------------------
 テキスト
------------------------------------------------------------------------------*/

body,
.main_ja,
.navi_ja,
.sitename_ja,
.title_ja,
.input_ja,
.input2_ja {
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, Sans-Serif;
  color:#333333;
}

.main_en,
.navi_en,
.sitename_en,
.title_en,
.input_en {
  font-family: Arial, Sans-Serif;
}

/*------------------------------------------------------------------------------
 リンク
------------------------------------------------------------------------------*/

a:link,
a:visited {
  text-decoration : underline;
  color: #6f85ae;
}

a:hover,
a:active {
  color: #c04e46;
}

#footer_menu_petit li a:link,
#footer_menu_petit li a:visited {
  color: #ffffff;
}

#footer_menu_petit li a:hover,
#footer_menu_petit li a:active {
  color: #ce615b;
}

/*------------------------------------------------------------------------------
 floatクリア
------------------------------------------------------------------------------*/

.cf { zoom: 1; }

.cf:after {
  content: "";
  display: block;
  clear: both;
}

.clear_float {
  clear: both;
}

/*------------------------------------------------------------------------------
 角丸
------------------------------------------------------------------------------*/

.radius {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

/*------------------------------------------------------------------------------
 indent
------------------------------------------------------------------------------*/

.indent {
  padding-left: 1em;
  text-indent: -1em;
}

/*------------------------------------------------------------------------------
 レイアウト
------------------------------------------------------------------------------*/

html{
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url(/img/common/background.jpg);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  overflow-y: scroll;
}

#container {
  position: relative;
  width: 910px !important;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding:0 41px;
  background: url(/img/common/background_page.png) repeat-y;
  text-align: left;
}

body > #container {
  height: auto;
}

#header {
  position: relative;
  width: 100%;
  height: 89px;
  margin: 0 0 40px;
}

#content {
  position: relative;
  width: 910px;
  margin: 0 auto 50px;
}

#main_col {
  position: relative;
  width: 690px;
  float: right;
}

#sub_col {
  position: relative;
  width: 180px;
  float: left;
}

#footer {
  position: relative;
  margin: 20px 0 0;
  padding-bottom: 20px;
}

/*------------------------------------------------------------------------------
 サービスロゴ
------------------------------------------------------------------------------*/

h1 {
  position: absolute;
  left: 37px;
  top: 0;
  width: 188px;
  height: 89px;
  z-index: 100;
}

h1 a {
  display: block;
  width: 188px;
  height: 89px;
  background: url(/img/common/img_sprite_common.png) no-repeat;
  background-position: 0 0;
}

h1 a,
#header #global_menu a,
#header #logo_ppb a,
#header #tab_ppb a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/*------------------------------------------------------------------------------
 メインメニュー
------------------------------------------------------------------------------*/

#global_menu {
  position: absolute;
  right: 0;
  bottom: 3px;
}

#global_menu div {
  float: left;
  height: 40px;
  margin: 0 0 0 30px;
}

#global_menu a {
  display: block;
  height: 40px;
  background: url(/img/common/img_sprite_common.png) no-repeat;
}

#global_menu a#home {
  width: 24px;
  background-position: -200px 5px;
}

#global_menu a#home:hover {
  background-position: -200px 5px;
}

#global_menu a#about {
  width: 98px;
  background-position: -300px 6px;
}

body.service #global_menu a#about {
  background-position: -300px -44px;
}

#global_menu a#about:hover {
  background-position: -300px -44px;
}

#global_menu a#news {
  width: 66px;
  background-position: -400px 6px;
}

#global_menu a#news:hover {
  background-position: -400px -44px;
}

#global_menu a#hiroba {
  width: 68px;
  background-position: -500px 6px;
}

body.hiroba #global_menu a#hiroba {
  background-position: -500px -44px;
}

#global_menu a#hiroba:hover {
  background-position: -500px -44px;
}

#global_menu a#support {
  width: 65px;
  background-position: -600px 6px;
}

body.support #global_menu a#support,
body.manual #global_menu a#support,
body.help #global_menu a#support,
body.mail #global_menu a#support {
  background-position: -600px -44px;
}

#global_menu a#support:hover {
  background-position: -600px -44px;
}

#global_menu a#order {
  width: auto;
  height: 32px;
  padding: 0 10px;
  background: #b03333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  text-indent: 0;
  letter-spacing: 0.1em;
  line-height: 33px;
  text-decoration: none;
  font-size: 14px;
  color: #ffffff;
}

#global_menu a#order:hover {
  background:#a10409;
}

/*------------------------------------------------------------------------------
 ペパボロゴ&タブ
------------------------------------------------------------------------------*/

#logo_ppb {
  position: absolute;
  left: 71px;
  top: 89px;
  width: 110px;
  height: 13px;
}

#logo_ppb a {
  display: block;
  width: 110px;
  height: 13px;
  background: url(/img/common/img_sprite_common.png) no-repeat;
  background-position: -900px -5px;
}

#tab_ppb {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  width: 29px;
  height: 29px;
}

#tab_ppb a {
  display: block;
  width: 29px;
  height: 29px;
  background: url(/img/common/img_sprite_common.png) no-repeat;
  background-position: -1100px -57px;
}

/*------------------------------------------------------------------------------
 テキストサイズ
------------------------------------------------------------------------------*/

#textsize {
  display: none;
}

#textsize a {
  position: absolute;
  top: 0;
  display: block;
  width: 18px;
  height: 30px;
  background: url(/img/common/img_sprite_common.png) no-repeat;

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#textsize a#textsize_small {
  right: 41px;
  background-position: -1035px -50px;
}

#textsize a#textsize_medium {
  right: 23px;
  background-position: -1059px -50px;
}

#textsize a#textsize_large {
  right: 5px;
  background-position: -1080px -50px;
}

/*------------------------------------------------------------------------------
 リマーケタグ
------------------------------------------------------------------------------*/

#google_remarketing {
  position: absolute;
  left: 0;
  top: 0;
}

/*------------------------------------------------------------------------------
 パンくずリスト
------------------------------------------------------------------------------*/

#breadcrumbs {
  margin: 0 0 30px;
  line-height: 1;
  font-size: 11px;
  font-family: arial, sans-serif;
  color: #96a2ba;
}

#breadcrumbs ol {
  margin: 0;
  padding: 0;
}

#breadcrumbs li {
  float: left;
  font-weight: bold;
}

#breadcrumbs li + li:before {
  content: "›";
  padding: 0 6px 0 3px;
}

#breadcrumbs li a {
  margin: 0 5px 0 0;
  padding: 1px 0 0;
  font-weight: normal;
  color: #96a2ba;
}

/*------------------------------------------------------------------------------
 右欄外インフォ
------------------------------------------------------------------------------*/

.extra_info {
  position: absolute;
}

body.order .extra_info {
  display: none;
}

#extra_info_button {
  left: 965px;
  top: 126px;
}

#extra_info_image {
  left: 947px;
  top: 235px;
  z-index: -1;
}

/*------------------------------------------------------------------------------
 フッタ
------------------------------------------------------------------------------*/

#footer_menu_petit {
  position: relative;
  width: 910px;
  height: 30px;
  background: #a9b6ce;
  line-height: 30px;
}

#footer_menu_petit ul {
  margin: 0 10px 0 0;
  list-style: none;
}

#footer_menu_petit li {
  display: blick;
  float: left;
  border-right: 2px solid #ffffff;
}

#footer_menu_petit li a {
  display: block;
  margin: 0;
  padding: 0 14px;
}

#footer_menu_petit li a#footer_home {
  width: 30px;
  height: 30px;
  padding: 0;
  background: url(/img/common/img_sprite_common.png) no-repeat 7px -193px;

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#footer_menu_petit li a#footer_home:hover {
  background-position: -43px -193px;
}

#copylight {
  margin: 5px 0 0;
  text-align: right;
  font-size: 12px;
  line-height: 1;
  font-family: Arial, Sans-serif;
  color: #ced6e3;
}

#footer_menu_campany {
  margin: 12px 0 0 305px;
  font-size: 11px;
}

#footer_menu_pepabo {
  margin: 20px 0 0 0;
  padding: 32px 0 10px 15px;
  background: #eeeeee url(/img/common/logo_gmopepabo.png) no-repeat 15px 12px;
  font-size: 11px;
  color: #a7b4cd;
}

#footer_menu_pepabo dl {
}

#footer_menu_pepabo dt {
  float: left;
  width: 130px;
}

#footer_menu_pepabo  dd {
  float: left;
}

#footer_menu_pepabo dl li {
  display: inline;
  margin-right: 10px;
}


/*------------------------------------------------------------------------------
 slimbox2
------------------------------------------------------------------------------*/

#lboverlay {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  cursor: pointer;
}

#lbcenter, #lbbottomcontainer {
  position: absolute;
  z-index: 9999;
  overflow: hidden;
  background-color: #ffffff;
}

.lbloading {
  background: #ffffff url(/img/common/slimbox/loading.gif) no-repeat center;
}

#lbimage {
  position: absolute;
  left: 0;
  top: 0;
  border: 10px solid #ffffff;
  background-repeat: no-repeat;
}

#lbprevlink, #lbnextlink {
  display: block;
  position: absolute;
  top: 0;
  width: 50%;
  outline: none;
}

#lbprevlink {
  left: 0;
}

#lbprevlink:hover {
  background: transparent url(/img/common/slimbox/prevlabel.gif) no-repeat 0 15%;
}

#lbnextlink {
  right: 0;
}

#lbnextlink:hover {
  background: transparent url(/img/common/slimbox/nextlabel.gif) no-repeat 100% 15%;
}

#lbbottom {
  font-family: verdana, arial, geneva, helvetica, sans-serif;
  font-size: 10px;
  color: #666666;
  line-height: 1.4em;
  text-align: left;
  border: 10px solid #ffffff;
  border-top-style: none;
}

#lbcloselink {
  display: block;
  float: right;
  width: 66px;
  height: 22px;
  background: transparent url(/img/common/slimbox/closelabel.gif) no-repeat center;
  margin: 5px 0;
  outline: none;
}

#lbcaption, #lbnumber {
  margin-right: 71px;
}

#lbcaption {
  font-weight: bold;
}

/*------------------------------------------------------------------------------
 margin(old style)
------------------------------------------------------------------------------*/

.blank1 {
  font-size:0em;
  width:1px;
  height:1px
}

.blank2 {
  font-size:0em;
  width:2px;
  height:2px
}

.blank3 {
  font-size:0em;
  width:3px;
  height:3px
}

.blank5 {
  font-size:0em;
  width:5px;
  height:5px
}

.blank7 {
  font-size:0em;
  width:7px;
  height:7px
}

.blank10 {
  font-size:0em;
  width:10px;
  height:10px
}

.blank15 {
  font-size:0em;
  width:15px;
  height:15px
}

.blank20 {
  font-size:0em;
  width:20px;
  height:20px
}

.blank25 {
  font-size:0em;
  width:25px;
  height:25px
}

.blank30 {
  font-size:0em;
  width:30px;
  height:30px
}


@media only screen and (max-device-width:769px),only screen and (max-width:769px){
  body {
    position: static !important;
  }

  body #gmocommonheader,
  body #services_nav_wrap,
  body #gmocommonfooter {
    display: none !important;
  }

}