@charset "utf-8";


#gl_header #gl_nv {
  z-index: 60 !important;
}

#gl_header .hd_ut .hd_ut_lang_select .hd_ut_lang_lst {
  z-index: 70 !important;
}

/*//////////////////////////////////////////
　ここから Main Visual
//////////////////////////////////////////*/
.psb_mv-wrap{
  position: relative;
  max-width: 1366px;
  width: 100%;
  margin: 0 auto;
}

.psb_animetion li:nth-child(n + 2){
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.psb_tl{
  font-size: 22px;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  opacity: 0;
}

.psb_tl h2{
  font-size: 62px;
  font-weight: 600;
  margin-top: 0.25em;
}

.balloon{
  width: 36%;
  position: absolute;
  top: -2.75em;
  left: -36%;
}

/*共通のアニメーション*/
.psb_mv-wrap.start .psb_animetion li:nth-child(2),
.psb_mv-wrap.sp-start .psb_animetion li:nth-child(2){ animation: 0.8s ease psb_ani1 forwards; animation-delay: 0.5s; z-index: 2;}

/*PC版のアニメーション*/
.psb_mv-wrap.start .psb_animetion li:nth-child(3){ animation: 2.0s step-end psb_ani2 forwards; animation-delay: 1.3s;z-index: 3;}
.psb_mv-wrap.start .psb_animetion li:nth-child(4){ animation: 2.0s step-end psb_ani2 forwards; animation-delay: 2.3s;z-index: 4;}
.psb_mv-wrap.start .psb_animetion li:nth-child(5){ animation: 2.0s step-end psb_ani2 forwards; animation-delay: 3.3s;z-index: 5;}
.psb_mv-wrap.start .psb_animetion li:nth-child(6){ animation: 3.0s step-end psb_ani3 forwards; animation-delay: 4.3s;z-index: 6;}
.psb_mv-wrap.start .psb_tl{animation: 2.0s ease-out psb_tl forwards; animation-delay: 8.3s;z-index: 7;}

/*SP版のアニメーション*/
.psb_mv-wrap.sp-start .psb_tl{animation: 2.0s ease-out psb_tl forwards; animation-delay: 1.6s;z-index: 7;}

@keyframes psb_ani1 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes psb_ani2 {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes psb_ani3 {
  0% { opacity: 0; }
  33% { opacity: 1; }
  66%{ opacity: 1;}
  100% { opacity: 0; }
}

@keyframes psb_tl {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media screen and (max-width:1366px) {
  .psb_tl{
    font-size: 1.61172vw;
  }
  
  .psb_tl h2{
    font-size: 4.542125vw;
  }

  .balloon{
    top: -3.75vw;
  }

}
/*//////////////////////////////////////////
　ここまで Main Visual
//////////////////////////////////////////*/


/*//////////////////////////////////////////
　ここから スライダー
//////////////////////////////////////////*/

/* Slider Layout ********************/
.slideWrap{
  position: relative;
  overflow: hidden;
}

/* Slider Pager ********************/
.slick-dots {
  margin-left: 25px;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 14px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: 0;
  background: 0 0;
}
.slick-dots li button:before {
  font-size: 0;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  content: '';
  text-align: center;
  opacity: 1;
  color: #6c7074;
  background-color: #6c7074;
  border-radius: 4px;
  border: solid 1px #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li button:hover:before {
  background-color: #303233;
}
.slick-dots li.slick-active button:before {
  opacity: 1;
  background-color: #cf142b;
}
.slick-dots {
  bottom: 12px;
}
.slick-dotted.slick-slider {
  margin-bottom: 0px;
}

/* Slider Start/Pause button ********************/

.slideStop{
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: 10px;
  z-index: 100;
  cursor: pointer;
  background-image: url(/-/Media/Ricoh/Sites/co_jp/service/portable-storage-battery/img/slider_stop.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;
  background-color: transparent;
}
.slideStop.js-stop-on {
  background-image: url(/-/Media/Ricoh/Sites/co_jp/service/portable-storage-battery/img/slider_play.png);
}
.slideStop:hover{
  background-image: url(/-/Media/Ricoh/Sites/co_jp/service/portable-storage-battery/img/slider_stop_on.png);
}
.slideStop.js-stop-on:hover {
  background-image: url(/-/Media/Ricoh/Sites/co_jp/service/portable-storage-battery/img/slider_play_on.png);
}

.slide_x3 .slideStop{
  left: 173px;
}
.slide_x4 .slideStop{
  left: 153px;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
  .slick-dots {
    margin-left: 2.441vw;
  }
  .slick-dots li {
    width: 1.172vw;
    height: 1.172vw;
    margin: 0 1.367vw;
  }
  .slick-dots li button {
    width: 1.172vw;
    height: 1.172vw;
  }
  .slick-dots li button:before {
    width: 1.172vw;
    height: 1.172vw;
    border-radius: 0.391vw;
  }
  .slick-dots {
    bottom: 1.172vw;
  }

  /* Slider Start/Pause button ********************/
  .slideStop{
    width: 1.367vw;
    height: 1.367vw;
    bottom: 1.172vw;
    background-size: 1.367vw 1.367vw;
  }
  .slide_x3 .slideStop{
    left: 16.895vw;
  }
  .slide_x4 .slideStop{
    left: 14.941vw;
  }
}
@media screen and (max-width: 640px) {
  .slick-dots {
    margin-left: 5vw;
  }
  .slick-dots {
    bottom: 10px;
  }
  .slick-dots li,
  .slick-dots li button,
  .slick-dots li button:before {
    width: 2.667vw;
    height: 2.667vw;
  }
  .slick-dots li {
    margin: 0 3.2vw;
  }
  .slick-dots li button:before {
    border-radius: 1vw;
  }
  .slideStop{
    width: 3.2vw;
    height: 3.2vw;
    bottom: 8px;
    background-size: 3.2vw 3.2vw;
  }
  .slide_x3 .slideStop{
    left: 32vw;
  }
  .slide_x4 .slideStop{
    left: 26.667vw;
  }
}
/*//////////////////////////////////////////
　ここまで スライダー
//////////////////////////////////////////*/

/*//////////////////////////////////////////
　ここから Modal
//////////////////////////////////////////*/
.modal_contents{
  display: none;
}
.custom__modal-wrapper .modaal-container{
  background-color: transparent;
  box-shadow: 0 0px 8px rgb(0 0 0 / 60%);
  max-width: 1008px;
}
.custom__modal-wrapper .modaal-container .modaal-content-container{
  padding: 0;
}
.custom__modal-wrapper .modal_title{
  border-radius: 8px 8px 0 0;
}
.custom__modal-wrapper .modal_body{
  border-radius: 0 0 8px 8px;
}
.custom__modal-wrapper .modal_body .modal_text{
/*  width: 88.888888888888889%;*/
  margin: auto;
  line-height: 1.4;
}
.custom__modal-wrapper .modal_close{
  position: absolute;
  right: 0;
  top: -15px;
  transform: translateY(-100%);
  transition: opacity .2s;
}
.custom__modal-wrapper .modal_close:hover{
  opacity: 0.7;
}
/*//////////////////////////////////////////
　ここまで Modal
//////////////////////////////////////////*/


.marker{
  background:linear-gradient(transparent 60%, #ffd700 60%);
}
.jp_theme_01.jp_step_vertical.jp_theme_darkblue .jp_step_box {
  background-image: url("/-/Media/Ricoh/Sites/co_jp/service/portable-storage-battery/img/arrow_03.svg");
}


/*//////////////////////////////////////////
　#Type
//////////////////////////////////////////*/
#Type .accordion_sct .acd_ttl a {
  position: relative;
  display: block;
  padding: 21px 32px 21px 21px;
  color: #333;
}
#Type .accordion_sct .acd_ttl.open {
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 1px;
  border-left-width: 2px;
}
#Type .accordion_sct .acd_ttl {
  border-width: 2px;
}
#Type .accordion_sct .acd_dtl {
  border-width: 2px;
}
#Type .accordion_sct .tag {
  position: relative;
  top: -1px;
}
#Type .jp_psbox_probrem.custom_arrow:after {
  display: none;
}
#Type .jp_psbox_probrem.custom_arrow:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 25px 0 25px;
  border-color: #f3f3f3 transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateY(100%) translateX(-50%);
  z-index: 2;
}
#Type .jp_psbox_probrem.custom_arrow.custom_arrow_ff:before {
  border-color: #fff transparent transparent transparent;
}
#Type .jp_psbox_probrem.custom_arrow {
  position: relative;
}

/* Type Anchor ***********************************/
#type_page_anc a{
  display: block;
  transition: all 0.2s;
}
#type_page_anc a:hover{
  opacity: 0.8;
}

/* Contact ***********************************/
#Contact .button_area .button.icon {
  padding: 22px 16px 21px 32px;
}
#Contact .button_area .button.cnv01 .ico_nml_l {
  background: none!important;
  padding: 0 8px;
  position: relative;
}
#Contact .button_area .button.cnv01 .ico_nml_l::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-100%) translateY(-50%);
}
#Contact .button_area .button.cnv01 .ico_nml_l.mail_lw::before {
  width: 24px;
  height: 18px;
  background-image: url(/-/Media/Ricoh/Sites/co_jp/service/portable-storage-battery/img/icon_mail.png);
}
#Contact .button_area .button.cnv01 .ico_nml_l.doc_l::before{
  width: 19px;
  height: 23px;
  background-image: url(/-/Media/Ricoh/Sites/co_jp/service/portable-storage-battery/img/icon_doc.png);
}

/* Button ***********************************/
/*.button.cnv01.btn_red{
  background-color: #d31c3d;
}
.button.cnv01.btn_red:hover{
  background-color: #c91836;
}*/



/* Utilities ***********************************/

.bg_light_yellow{
  background-color: #fcfacd!important;
}
.bg_yellow{
  background-color: #ffd700!important;
}
.bg_green{
  background-color: #339067;
}
.bg_orange{
  background-color: #e15d39;
}
.bg_darkblue{
  background-color: #295063!important;
}
.bg_khaki{
  background-color: #b99a00;
}
.bg_295063{
  background-color: #295063;
}
.bg_red{
  background-color: #d31c3d!important;
}
.num_circle{
  border-radius: 50%;
  width: 2em;
  min-height: 2em;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc_a38800{
  color: #a38800;
}
.fc_red{
  color: #d31c3d!important;
}
.bd1_green{
  border: solid 1px #339067;
}
.bd1_orange{
  border: solid 1px #e15d39;
}
.bd1_darkblue{
  border: solid 1px #295063;
}
.bd1_khaki{
  border: solid 1px #b99a00;
}
.bd1_295063{
  border: solid 1px #295063;
}
.bd1_99{
  border: solid 1px #999;
}
.bd1_c9{
  border: solid 1px #c9c9c9;
}
.bd2_yellow{
  border: solid 2px #ffd700;
}
.bd2_red{
  border: solid 2px #d31c3d;
}
.bt1_99{
  border-top: solid 1px #999;
}
.bdw2{
  border-width: 2px!important;
}
.bdtw2{
  border-top-width: 2px!important;
}
.bdrw2{
  border-right-width: 2px!important;
}
.bdlw2{
  border-left-width: 2px!important;
}
.pt1 { padding-top: 1px; }
.pt14 { padding-top: 14px!important; }
.pt20 { padding-top: 20px; }
.pt22 { padding-top: 22px; }
.pb1 { padding-bottom: 1px; }
.pb2 { padding-bottom: 2px; }
.pb11 { padding-bottom: 11px!important; }
.pb18 { padding-bottom: 18px; }
.pb19 { padding-bottom: 19px; }
.pb20 { padding-bottom: 20px; }
.pb22 { padding-bottom: 22px; }
.pl6 { padding-left: 6px; }
.ml10 { margin-left:10px; }
.ml12 { margin-left:12px; }
.mw528 { max-width: 528px !important; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.mw540 { max-width: 540px !important; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.mw791 { max-width: 791px !important; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.mw823 { max-width: 823px !important; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.w38p { width: 38% !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.w39p { width: 39% !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.w61p { width: 61% !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.w62p { width: 62% !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.lh_1-4{
  line-height: 1.4;
}
.lh_1-7{
  line-height: 1.7;
}
.Hiragino{
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.fs_xxl{
  font-size: 150%;
}

/* Media Query ***********************************/

@media (min-width: 641px) {
  #Background .ico_end_l {
    padding: 4px 27px 4px 0;
  }
  #Type .accordion_sct .acd_ttl a:after {
    right: 22px;
  }
  #Type .accordion_sct .acd_ttl.open,
  #Type .accordion_sct .acd_ttl {
    background-position-x: calc(100% - 22px);
  }
  #Contact .button_area {
    display: flex;
    width: 95%;
    max-width: 816px;
    margin: auto;
  }
  #Contact .button_area .button.cnv01{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hv{
    transition: opacity 0.2s;
  }
  .hv:hover{
    opacity: 0.8;
  }
}
@media (max-width: 640px) {
  .marker{
    background:linear-gradient(transparent 80%, #ffd700 60%);
  }
  #Type .accordion_sct .acd_ttl a {
    text-decoration: none;
  }
  #Contact .tel .telephone_l.ico_nml_l{
    background-position: 0px 50%!important;
  }
  .rsp_lh_1-2{ line-height: 1.2; }
  .rsp_w100p { width: 100% !important; }
}

@media (min-width: 641px) and (max-width: 930px) {
  .rsp_tab_dsp_b { display: block!important; }
  .tag{
    margin-left: 0!important;
    margin-top: 8px;
  }
}

/*//////////////////////////////////////////
　#SideNav
//////////////////////////////////////////*/
.sidenav {
  position: fixed;
  z-index: 99;
  display: none;
}
.sidenav {
  right: 0;
  transition: right 0.2s ease-out;
}
.sidenav:hover {
  right: 0;
}
.sidenav:hover .sidenav_txt {
  display: block;
  opacity: 1;
}
.sidenav:hover .sidenav_link {
  width: 110px;
}
.sidenav:hover .sidenav_mail .sidenav_icon {
  top: calc(50% + 5px);
}
.sidenav:hover .sidenav_doc .sidenav_icon {
  top: calc(50% + 8px);
}
.sidenav_link {
  display: block;
  width: 60px;
  min-height: 53px;
  color: #fff !important;
  background-color: #0d63dc;
  transition: all 0.2s;
  cursor: pointer;
  padding: 4px 0;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}
.sidenav_link:hover {
  text-decoration: none;
  background-color: #0b51b3;
}
.sidenav_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
  transform: translateX(-50%) translateY(-50%);
  transition: all .2s;
}
.sidenav_item + .sidenav_item {
  margin-top: 2px;
}
.sidenav_txt {
  font-size: 14px;
  display: none;
  opacity: 0;
  overflow: hidden;
  transition: all .5s;
}

@media (min-width: 641px) {
  .sidenav {
    top: 50%;
    transform: translateY(-50%);
  }
  .sidenav_sp{
    display: none!important;
    pointer-events: none;
  }
}
@media (max-width: 640px) {
  .sidenav_sp{
    top: 50%;
    transform: translateY(-50%);
  }
  .sidenav_sp.is_close .sidenav_link{
    width: 53px;
  }
  .sidenav_sp.is_close .sidenav_txt {
    display: none;
  }
  .sidenav_sp.is_close .sidenav_mail .sidenav_icon,
  .sidenav_sp.is_close .sidenav_doc .sidenav_icon {
    top: 50%;
  }
  .sidenav_sp.is_close .sidenav_link {
    background-color: #0d63dc;
  }
}