@charset "UTF-8";
/*----------------------------------------
  Layout
----------------------------------------*/
body {
  color: #fff;
  background: #000;
}

/*----------------------------------------
  Layout
----------------------------------------*/
.main-contents::before {
  background-image: -webkit-image-set(url(../images/bg_highpower.png) 1x, url(../images/bg_highpower@2x.png) 2x);
  background-image: image-set(url(../images/bg_highpower.png) 1x, url(../images/bg_highpower@2x.png) 2x);
}

/* ヘッダー
------------------------------------------------------ */
.header__button::before, .header__button::after {
  background: #fff;
}

/* ナビゲーションメニュー
------------------------------------------------------ */
.nav-menu {
  background: #2B2B2B;
}

.nav-menu__link {
  color: #5D5D5D;
}
@media (max-width: 767px) {
  .nav-menu__link {
    color: #fff;
  }
}
.nav-menu__link:hover {
  color: #fff;
}

/* フッター
------------------------------------------------------ */
.footer {
  background: none;
}
@media (max-width: 767px) {
  .footer {
    background: none;
  }
}

.footer__copyright {
  color: #fff;
}

/* ローディング画面
------------------------------------------------------ */
.loading {
  background: #000;
}

/* 遷移画面
------------------------------------------------------ */
.splash::before {
  background: #000;
}

/*----------------------------------------
  Component
----------------------------------------*/
/*  ボタン */
.link-button {
  color: #000;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.85);
}

/*----------------------------------------
  Object
----------------------------------------*/
/* 冒頭シーン切り替え
------------------------------------------------------ */
.front__bg {
  background: #000;
}

/* メインビジュアル
------------------------------------------------------ */
@media (max-width: 767px) {
  .mv__title {
    translate: none;
  }
}

.mv__scrollDown span {
  color: #fff;
}
.mv__scrollDown::after {
  background: #fff;
}

.mv__anchorLink::before {
  background-image: -webkit-image-set(url(../images/parts_mv-anchor.png) 1x, url(../images/parts_mv-anchor@2x.png) 2x);
  background-image: image-set(url(../images/parts_mv-anchor.png) 1x, url(../images/parts_mv-anchor@2x.png) 2x);
}
@media (max-width: 767px) {
  .mv__anchorLink::before {
    background-image: url(../images/parts_mv-anchor_sp.png);
  }
}
.mv__anchorLink::after {
  background-image: -webkit-image-set(url(../images/parts_mv-anchor_hover.png) 1x, url(../images/parts_mv-anchor_hover@2x.png) 2x);
  background-image: image-set(url(../images/parts_mv-anchor_hover.png) 1x, url(../images/parts_mv-anchor_hover@2x.png) 2x);
}
@media (max-width: 767px) {
  .mv__anchorLink::after {
    background-image: url(../images/parts_mv-anchor_sp_hover.png);
  }
}
.mv__anchorLink-click {
  position: absolute;
  z-index: 1;
  top: -9px;
  left: 50%;
  translate: -50% -100%;
  width: 66px;
  height: 17px;
  background: url(../images/parts_mv-anchor-click.svg) no-repeat center/contain;
}
.mv__anchorLink-arrow {
  position: absolute;
  z-index: 1;
  bottom: -33px;
  left: 47.5%;
  width: 8px;
  height: 43px;
  background: url(../images/parts_mv-anchor-arrow.svg) no-repeat center/contain;
  animation: arrowMove 1.3s ease-in-out infinite forwards;
  will-change: transform;
}
@media (max-width: 767px) {
  .mv__anchorLink-arrow {
    bottom: -16px;
    width: 5px;
    height: 26px;
  }
}
@keyframes arrowMove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

.mv__page-category {
  color: #fff;
}

/* モバイルバッテリー開発の歴史
------------------------------------------------------ */
.history-pd__new {
  background: #7793C6;
}

.history-pd__img {
  background: rgba(255, 255, 255, 0.1);
}

.history-pd__img[data-history-pd=Semi-Solid] img {
  width: min(23.0275229358vw, 251px);
}
@media (max-width: 767px) {
  .history-pd__img[data-history-pd=Semi-Solid] img {
    width: 203px;
  }
}

/* 本製品の4大特長
------------------------------------------------------ */
/*  コンテンツ内容 */
.features__bg.--01 {
  background: #1A1A1A;
}
.features__bg.--02 {
  background: #404040;
}
.features__bg.--03 {
  background: #171717;
}

.features-panel {
  overflow: visible;
  background: rgba(0, 0, 0, 0.75);
  outline: 1px solid #525252;
}
@media (max-width: 767px) {
  .features-panel {
    background: none;
    outline: none;
  }
}
.features-panel::before, .features-panel::after {
  position: absolute;
  z-index: 1;
  content: "";
  left: min(5.035971223vw, 70px);
  right: min(5.035971223vw, 70px);
  height: 1px;
  background: linear-gradient(to right, transparent, #fff 50%, transparent);
  opacity: 0.6;
}
@media (max-width: 767px) {
  .features-panel::before, .features-panel::after {
    display: none;
  }
}
.features-panel::before {
  top: -1px;
}
.features-panel::after {
  bottom: -1px;
}

@media (max-width: 767px) {
  .features-box.--01::before {
    background: #1A1A1A url(../images/bg_features_01_sp.jpg) center/cover;
  }
  .features-box.--02::before {
    background: #404040 url(../images/bg_features_02_sp.jpg) center/cover;
  }
  .features-box.--03::before {
    background: #171717 url(../images/bg_features_03_sp.jpg) center/cover;
  }
  .features-box.--04::before {
    background: url(../images/bg_features_04_sp.jpg) center/cover;
  }
  .features-box::after {
    background: rgba(0, 0, 0, 0.75);
    outline: 1px solid #525252;
  }
}

@media (max-width: 767px) {
  .features-box__head {
    position: relative;
  }
  .features-box__head::before {
    position: absolute;
    top: -35px;
    left: 50%;
    translate: -50% 0;
    content: "";
    width: 134px;
    height: 1px;
    background: linear-gradient(to right, transparent, #fff 50%, transparent);
    opacity: 0.6;
  }
}

@media (max-width: 767px) {
  .features-box__spFoot {
    position: relative;
  }
  .features-box__spFoot::after {
    position: absolute;
    bottom: -36px;
    left: 50%;
    translate: -50% 0;
    content: "";
    width: 134px;
    height: 1px;
    background: linear-gradient(to right, transparent, #fff 50%, transparent);
    opacity: 0.6;
  }
}

.features-before {
  background: #3F4B60;
}
@media (max-width: 767px) {
  .features-before {
    background: none;
  }
}
.features-before::after {
  background-color: #3F4B60;
}
@media (max-width: 767px) {
  .features-before::after {
    background-color: transparent;
    background: #fff;
    -webkit-mask: url(../../assets/images/standard/parts_features_arrow.svg) no-repeat center top/contain;
            mask: url(../../assets/images/standard/parts_features_arrow.svg) no-repeat center top/contain;
  }
}
@media (max-width: 639px) {
  .features-before::after {
    background: #fff;
    -webkit-mask: url(../../assets/images/standard/parts_features_arrow_sp.svg) no-repeat center top/contain;
            mask: url(../../assets/images/standard/parts_features_arrow_sp.svg) no-repeat center top/contain;
  }
}

.features-after {
  background: #222;
}
@media (max-width: 767px) {
  .features-after {
    background: none;
  }
}

.features-box__num::before {
  background: #fff;
}

.features-box__progressBar::before {
  background: #fff;
}

.features-box__currentBar {
  background: #fff;
}

/*  20,000mAhの超大容量を軽快に持ち歩く
------------------------------------------------------ */
.high-power-model {
  padding: 240px 0 0;
  margin: 0 0 120px;
}
@media (max-width: 767px) {
  .high-power-model {
    padding: 100px 0 0;
    margin: 0 0 100px;
  }
}
.high-power-model__inner {
  max-width: 1150px;
}
@media (max-width: 767px) {
  .high-power-model__inner {
    max-width: 335px;
  }
}
.high-power-model__content {
  margin-top: 70px;
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .high-power-model__content {
    gap: min(6.4220183486vw, 70px);
  }
}
@media (max-width: 767px) {
  .high-power-model__content {
    flex-direction: column !important;
    gap: 20px;
    margin-top: 45px;
  }
}
.high-power-model__content:nth-of-type(even) {
  flex-direction: row-reverse;
}
.high-power-model__content + .high-power-model__content {
  margin-top: 80px;
}
@media (max-width: 767px) {
  .high-power-model__content + .high-power-model__content {
    margin-top: 60px;
  }
}
.high-power-model__img {
  flex-shrink: 0;
  width: 50%;
}
@media (max-width: 767px) {
  .high-power-model__img {
    width: 100%;
  }
}
.high-power-model__img img {
  border-radius: 7px;
  width: 100%;
}
@media (max-width: 767px) {
  .high-power-model__img img.fadeIn-paper {
    filter: none;
    transform: translateY(0) !important;
  }
}
.high-power-model__body {
  margin: 0 min(6.4220183486vw, 70px);
}
@media (max-width: 1023px) {
  .high-power-model__body {
    margin: 0;
  }
}
@media (max-width: 767px) {
  .high-power-model__body {
    margin: 0 24px;
  }
}
.high-power-model__title {
  font-size: min(2.3853211009vw, 26px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5384615385;
}
@media (max-width: 767px) {
  .high-power-model__title {
    font-size: 18px;
  }
}
.high-power-model__text {
  margin-top: 26px;
  border-top: 1px solid #fff;
  padding-top: 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.9375;
}
@media (max-width: 767px) {
  .high-power-model__text {
    margin-top: 20px;
    padding-top: 19px;
    font-size: 13px;
  }
}

/* 給電状況やバッテリー情報をリアルタイム表示
------------------------------------------------------ */
.real-time-display {
  margin: 120px 0;
}
@media (max-width: 767px) {
  .real-time-display {
    margin: 100px 0;
  }
}
.real-time-display__inner {
  padding: 70px min(6.4220183486vw, 70px);
  max-width: 1150px;
  background: rgba(43, 43, 43, 0.7);
  border-radius: 7px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .real-time-display__inner {
    margin: 0 20px;
    padding: 60px 24px;
    max-width: none;
  }
}
.real-time-display__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px min(9.1743119266vw, 100px);
  margin-top: 60px;
}
@media (max-width: 1023px) {
  .real-time-display__grid {
    gap: 60px 40px;
  }
}
@media (max-width: 767px) {
  .real-time-display__grid {
    grid-template-columns: auto;
    gap: 60px;
    max-width: 287px;
    margin: 40px auto 0;
  }
}
.real-time-display__item {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 767px) {
  .real-time-display__item {
    gap: 15px;
  }
}
.real-time-display__item:first-child {
  grid-column: span 3;
}
@media (max-width: 767px) {
  .real-time-display__item:first-child {
    grid-column: auto;
  }
}
@media (max-width: 767px) {
  .real-time-display__title {
    text-align: center;
  }
}
.real-time-display__title .point {
  font-family: "Rubik", "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.real-time-display__title .point span {
  margin-left: 5px;
  font-size: 2em;
  font-weight: 300;
}
.real-time-display__title .text {
  margin-top: 5px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  .real-time-display__title .text {
    font-size: 15px;
  }
}
.real-time-display__img img {
  width: 100%;
}
.real-time-display__imgGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.real-time-display__imgGrid .real-time-display__img:first-child {
  position: relative;
  grid-column: span 2;
}
.real-time-display__imgGrid img {
  width: 100%;
}
.real-time-display__gif {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.real-time-display__gif.--02 {
  left: min(1.0091743119vw, 11px);
  width: min(8.2568807339vw, 90px);
}
@media (max-width: 767px) {
  .real-time-display__gif.--02 {
    left: 12px;
    width: 90px;
  }
}
.real-time-display__gif.--03 {
  left: min(2.2018348624vw, 24px);
  width: min(2.2018348624vw, 24px);
}
@media (max-width: 767px) {
  .real-time-display__gif.--03 {
    left: 24px;
    width: 24px;
  }
}
.real-time-display__gif.--04 {
  left: min(1.6513761468vw, 18px);
  width: min(5.504587156vw, 60px);
  top: 45%;
}
@media (max-width: 767px) {
  .real-time-display__gif.--04 {
    left: 18px;
    width: 60px;
  }
}
.real-time-display__text {
  font-size: 14px;
  line-height: 1.6428571429;
}
@media (max-width: 767px) {
  .real-time-display__text {
    font-size: 12px;
    line-height: 1.5833333333;
  }
}

/* ノートPCとスマートフォンの同時充電でも高出力をキープ
------------------------------------------------------ */
.power-output {
  margin: 120px 0 20px;
}
@media (max-width: 767px) {
  .power-output {
    margin: 100px 0 0;
  }
}
.power-output__list {
  position: relative;
}
@media (max-width: 767px) {
  .power-output__list {
    max-width: 335px;
    margin: 0 auto;
  }
}
.power-output__list .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(9.1743119266vw, 100px);
}
@media (max-width: 1023px) {
  .power-output__list .swiper-wrapper {
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .power-output__list .swiper-wrapper {
    display: flex;
    gap: 0;
  }
}
@media (max-width: 767px) {
  .power-output__list .swiper-slide {
    width: 270px;
  }
}
.power-output__list .swiper-button-prev,
.power-output__list .swiper-button-next {
  display: none;
}
@media (max-width: 767px) {
  .power-output__list .swiper-button-prev,
  .power-output__list .swiper-button-next {
    display: flex;
    top: 75px;
    background: url(../images/icon_output_arrow.svg) no-repeat center/24px 24px;
  }
  .power-output__list .swiper-button-prev svg,
  .power-output__list .swiper-button-next svg {
    display: none;
  }
}
@media (max-width: 767px) {
  .power-output__list .swiper-button-prev {
    left: -10px;
  }
}
@media (max-width: 767px) {
  .power-output__list .swiper-button-next {
    right: -10px;
    scale: -1 1;
  }
}
.power-output__list .swiper-pagination {
  display: none;
}
@media (max-width: 767px) {
  .power-output__list .swiper-pagination {
    position: relative;
    display: block;
    margin: 15px 0 0;
    font-size: 0;
  }
  .power-output__list .swiper-pagination .swiper-pagination-bullet {
    background: #818181;
    opacity: 1;
    width: 6px;
    height: 6px;
    margin: 0 6px;
  }
  .power-output__list .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
  }
}
.power-output__item[aria-hidden=true] {
  display: none;
}
.power-output__item[aria-hidden=false] {
  display: block;
}
.power-output__item img {
  width: 100%;
}
.power-output__img {
  width: min(48.8990825688vw, 533px);
  margin: 0 auto;
}
@media (max-width: 767px) {
  .power-output__img {
    width: 287px;
  }
}
.power-output__img img {
  width: 100%;
  display: block;
}
.power-output__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin-top: 38px;
  font-size: 12px;
  letter-spacing: 0.03em;
}
@media (max-width: 767px) {
  .power-output__caption {
    max-width: 287px;
    margin: 15px auto 0;
    justify-content: flex-start;
    font-size: 10px;
    gap: 0 15px;
  }
}

.power-output-tab {
  display: flex;
  justify-content: center;
  margin: 50px 0;
  gap: 20px;
}
@media (max-width: 767px) {
  .power-output-tab {
    margin: 45px 0 30px;
  }
}
.power-output-tab__button {
  display: block;
  min-width: 165px;
  padding: 9px 12px 11px;
  font-size: 12px;
  border: 1px solid #fff;
  border-radius: 5px;
}
@media (max-width: 767px) {
  .power-output-tab__button {
    min-width: 70px;
    padding: 14px 9px;
  }
}
.power-output-tab__button[aria-selected=true] {
  font-weight: 500;
  color: #000;
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.85);
}

/* 使うほどにわかる、こだわり設計
------------------------------------------------------ */
.others__grid {
  margin-top: 120px;
}

.others-card {
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
}

/* 環境配慮への取り組み */
.eco__title::after {
  background: #fff;
}

.eco__body {
  background: rgba(43, 43, 43, 0.7);
}

/* 性能を比較
------------------------------------------------------ */
.performance {
  background: none;
}

/*  タブ */
.battery-tab {
  border-bottom: 1px solid #fff;
}

.battery-tab__title::after {
  background: #fff;
}

.battery-tab__button[aria-selected=true] {
  background: #474E57;
}

/* 棒グラフ描画エリア */
.battery__name {
  border-bottom: 1px solid #fff;
}

.battery__data dd::before {
  background: #2E3745;
}
.battery__data dd::after {
  background: linear-gradient(to right, #273779 0%, #2D8E70 40%);
}

/*  レーダーチャート描画エリア */
.graph__canvas::before {
  background-image: -webkit-image-set(url(../images/parts_graph.png) 1x, url(../images/parts_graph@2x.png) 2x);
  background-image: image-set(url(../images/parts_graph.png) 1x, url(../images/parts_graph@2x.png) 2x);
}

.performance__body[data-scroll-anima=true] .graph__canvas[data-battery-type=ss][aria-hidden=false]::after {
  background: linear-gradient(to right, #273779 0%, #2D8E70 60%);
}
.performance__body[data-scroll-anima=true] .graph__canvas[data-battery-type=si][aria-hidden=false]::after {
  background: linear-gradient(to right, #273779 40%, #2D8E70 80%);
}
.performance__body[data-scroll-anima=true] .graph__canvas[data-battery-type=ip][aria-hidden=false]::after {
  background: linear-gradient(to right, #273779 30%, #2D8E70 70%);
}
.performance__body[data-scroll-anima=true] .graph__canvas[data-battery-type=li][aria-hidden=false]::after {
  background: linear-gradient(to right, #273779 0%, #2D8E70 40%);
}

/* ラインナップ
------------------------------------------------------ */
.lineup {
  background: none;
}

/* ラインナップ製品 */
.lineup-pd__main {
  max-width: 429px;
  margin: 34px auto 0;
}
@media (max-width: 767px) {
  .lineup-pd__main {
    max-width: 277px;
  }
}
.lineup-pd__main img {
  width: 100%;
}

.lineup-pd__picker {
  margin: 0 0 22px;
}
@media (max-width: 767px) {
  .lineup-pd__picker {
    margin: 14px 0;
  }
}
.lineup-pd__picker button.picker__black {
  width: 32px;
  height: 32px;
  border: 1px solid #fff;
}
@media (max-width: 767px) {
  .lineup-pd__picker button.picker__black {
    width: 24px;
    height: 24px;
  }
}
.lineup-pd__picker button::before {
  display: none;
}

.lineup-pd__data {
  margin-top: min(6.0550458716vw, 66px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
  .lineup-pd__data {
    grid-template-columns: auto;
    gap: 15px;
  }
}
.lineup-pd__data dt {
  flex-direction: column;
}
@media (max-width: 767px) {
  .lineup-pd__data dt {
    flex-direction: row;
    margin: 20px 0;
  }
}
.lineup-pd__data dd {
  flex-direction: column;
  align-items: center;
}
.lineup-pd__data dd .charge {
  margin-left: 0 !important;
}
.lineup-pd__data dd:has(.device-item) {
  flex-direction: row;
  gap: min(2.752293578vw, 30px);
}
@media (max-width: 767px) {
  .lineup-pd__data dd:has(.device-item) {
    flex-direction: column;
    gap: 6px;
  }
}
.lineup-pd__data dd .device-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 767px) {
  .lineup-pd__data dd .device-item {
    align-items: flex-start;
  }
}

.lineup-pd__dataItem {
  flex-direction: column;
  justify-content: normal;
  gap: min(1.9266055046vw, 21px);
  margin-top: 0 !important;
}
@media (max-width: 767px) {
  .lineup-pd__dataItem {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
}
.lineup-pd__dataItem:not(:first-child) {
  border-left: 1px solid #fff;
}
@media (max-width: 767px) {
  .lineup-pd__dataItem:not(:first-child) {
    border-left: none;
  }
}

/*  製品スペック */
.lineup__tableWrap {
  margin-top: 90px;
}

.lineup__table th, .lineup__table td {
  border-color: #BEBEBE !important;
}
.lineup__table thead td::before {
  background: #626262;
}
@media (max-width: 767px) {
  .lineup__table thead th, .lineup__table thead td {
    background: #626262;
    border-bottom: none;
  }
  .lineup__table thead th::after, .lineup__table thead td::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #BEBEBE;
  }
}
.lineup__table tbody tr:nth-child(even) th, .lineup__table tbody tr:nth-child(even) td {
  background: rgba(43, 43, 43, 0.7);
}

/* 使用上のご注意
------------------------------------------------------ */
.cautions__box {
  background: rgba(43, 43, 43, 0.7);
}

/* 品質管理
------------------------------------------------------ */
.safety__item {
  background: rgba(43, 43, 43, 0.7);
}

.safety__item ul li {
  border-left: 1px solid #fff;
}
@media (max-width: 767px) {
  .safety__item ul li {
    border-left: none;
    border-top: 1px solid #fff;
  }
}

/* 一部製品評価
------------------------------------------------------ */
.testing__item {
  background: rgba(43, 43, 43, 0.7);
}

/* 製品一覧
------------------------------------------------------ */
@media (max-width: 767px) {
  .products {
    background: none;
  }
}

.products__img {
  background: rgba(43, 43, 43, 0.7);
}

.products__color::before {
  border: none;
}
.products__color[data-pd-color=black]::before {
  margin: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
}

/* コラム
------------------------------------------------------ */
@media (max-width: 767px) {
  .column {
    background: none;
  }
}/*# sourceMappingURL=high-power.css.map */