@charset "UTF-8";
/******************************************************************
foundation - base
******************************************************************/
html {
  scroll-behavior: smooth;
}

body {
  min-width: 375px;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow-wrap: break-word;
  overflow-y: scroll;
  color: #000;
  font-size: 1rem;
  line-height: 1.4;
}
@media screen and (max-width: 599px) {
  body {
    font-size: 0.9rem;
  }
}
@media print {
  body {
    width: 1280px;
    zoom: 0.8;
  }
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, figure {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

iframe {
  border: 0;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
  outline-color: #999999;
}
@media (any-hover: hover) {
  button:hover {
    text-decoration: none;
  }
}
button:focus {
  text-decoration: none;
}

input, select {
  line-height: 1.4;
  outline-color: #999999;
}

em {
  font-style: normal;
  font-weight: bold;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

address {
  font-style: normal;
}

a {
  color: #000;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.1em;
  outline-color: #999999;
}
@media (any-hover: hover) {
  a:hover {
    text-decoration: none;
  }
}
a:focus {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

svg {
  vertical-align: middle;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
}

/******************************************************************
layout - wrapper
******************************************************************/
.l-wrapper {
  width: 100%;
  overflow: clip;
  min-height: 100vh;
  min-height: 100dvh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.l-wrapper main {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/******************************************************************
layout - header-fixed
******************************************************************/
html:has(.l-header-fixed) {
  scroll-padding-top: var(--header-height);
}

body:has(.l-header-fixed) {
  padding-top: var(--header-height);
}
@media print {
  body:has(.l-header-fixed) {
    padding-top: initial;
  }
}

.l-header-fixed {
  position: fixed;
  background-color: #fff;
  top: 0;
  width: 100%;
  z-index: 100;
}

/******************************************************************
layout - header
******************************************************************/
:root {
  --header-height: 0;
}

.l-header {
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(192, 194, 197, 0.6);
          box-shadow: 0px 0px 13px 0px rgba(192, 194, 197, 0.6);
}
.l-header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media screen and (max-width: 960px) {
  .l-header__inner {
    padding: 8px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.l-header__head {
  max-width: 30%;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  padding-inline: 0.5rem;
}
@media screen and (max-width: 960px) {
  .l-header__head {
    padding-inline: 0.75rem;
  }
}
.l-header__logo {
  padding-left: 27px;
  padding-top: 25px;
  padding-bottom: 25px;
}
@media screen and (max-width: 1150px) {
  .l-header__logo {
    width: 30%;
  }
}
@media screen and (max-width: 960px) {
  .l-header__logo {
    width: 60%;
    padding-left: 0;
    margin-right: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
.l-header__logo a {
  display: inline-block;
}
.l-header__logo img {
  max-width: 100%;
}
.l-header__body-pc nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 100%;
}
@media screen and (max-width: 960px) {
  .l-header__body-pc {
    display: none;
  }
}
.l-header__body-sp {
  display: none;
}
@media screen and (max-width: 960px) {
  .l-header__body-sp {
    display: block;
  }
}
.l-header__nav {
  background-color: #fff;
  border-bottom: 1px solid #cccccc;
}
@media screen and (max-width: 960px) {
  .l-header__nav {
    display: none;
  }
}

/******************************************************************
layout - nav
******************************************************************/
.l-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.l-nav a {
  display: inline-block;
  text-align: center;
  position: relative;
  text-decoration: none;
}
@media (any-hover: hover) {
  .l-nav a:hover::after {
    height: 4px;
  }
}
.l-nav a:focus::after {
  height: 4px;
}
.l-nav__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 20px;
}
.l-nav__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.l-nav__item span {
  font-size: 14px;
  font-weight: 700;
}
@media screen and (max-width: 1150px) {
  .l-nav__item span {
    font-size: 1.2vw;
  }
}
.l-nav__item > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 22px;
  padding-left: 22px;
  position: relative;
  text-decoration: none;
}
@media (any-hover: hover) {
  .l-nav__item > a:hover::after {
    height: 4px;
  }
}
.l-nav__item > a:focus::after {
  height: 4px;
}
@media screen and (max-width: 1150px) {
  .l-nav__item > a {
    padding-right: 1.25vw;
    padding-left: 1.25vw;
  }
}
.l-nav__item a[aria-expanded=true] {
  background-color: #dfeaf4;
}
.l-nav__item a[aria-expanded=true] > span {
  color: #1061a9;
}
.l-nav-mega2 {
  display: none;
  position: absolute;
  left: 0;
  top: var(--header-height);
  width: 100%;
  background-color: #1061a9;
}
.l-nav-mega2__inner {
  max-width: 1200px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 60px;
  padding-bottom: 60px;
  margin: 0 auto;
}
.l-nav-mega2__nav li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.l-nav-mega2__nav li p {
  width: 200px;
  padding-right: 20px;
  margin-right: 20px;
  font-size: 20px;
}
.l-nav-mega2__nav li p > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: #fff;
}
.l-nav-mega2__nav li p span {
  text-align: left;
  color: #88b3e5;
  margin-top: 14px;
}
.l-nav-mega2__nav ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 25px;
}
.l-nav-mega2__nav ul li {
  border: 1px solid #88b3e5;
  width: calc((100% - 50px) / 3);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}
.l-nav-mega2__nav ul li > a {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  font-size: 15px;
  min-height: 70px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 32px;
  padding-left: 32px;
  letter-spacing: 0.11em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(/batterypf/assets/img/common/icon-arrow-white.png) no-repeat right 10px bottom 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-property: background-color;
  transition-property: background-color;
}
.l-nav-mega2__nav ul li > a:hover {
  color: #0d5399;
  background: url(/batterypf/assets/img/common/icon-arrow-blue.png) no-repeat right 10px bottom 10px;
  background-color: #fff;
}

/******************************************************************
layout - header-option
******************************************************************/
.l-header-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.l-header-option a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-left: 34px;
  text-decoration: none;
}
.l-header-option a span {
  display: block;
  font-size: 1.1rem;
}
.l-header-option .l-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 35px;
}
.l-header-option .l-login a {
  font-size: 13px;
  color: #001f46;
  font-weight: 700;
  position: relative;
  letter-spacing: 0.15em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.l-header-option .l-login a::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 23px;
  height: 23px;
  background-image: url(/batterypf/assets/img/common/icon-lang.png);
}
@media screen and (max-width: 1150px) {
  .l-header-option .l-login a {
    font-size: 1.2vw;
  }
}
@media screen and (max-width: 1150px) {
  .l-header-option .l-login {
    margin-right: 1.25vw;
  }
}
.l-header-option .l-lang a {
  background-color: #f9efd4;
  color: #392a00;
  font-size: 10px;
  position: relative;
  min-width: 139px;
  padding-left: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: 500;
}
.l-header-option .l-lang a span {
  font-size: 15px;
}
@media screen and (max-width: 1150px) {
  .l-header-option .l-lang a span {
    font-size: 1.2vw;
  }
}
.l-header-option .l-lang a::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 13px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 27px;
  height: 22px;
  background-image: url(/batterypf/assets/img/common/icon-login.png);
}

/******************************************************************
layout - sp-nav-control
******************************************************************/
.l-sp-nav-control {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  padding: 0 0 6px 0;
  text-align: center;
}
.l-sp-nav-control__item {
  position: relative;
  display: inline-block;
  top: -1px;
  height: 1px;
  width: 35px;
  background-color: #171717;
}
.l-sp-nav-control__item::before {
  position: absolute;
  content: "";
  bottom: 10px;
  left: 0;
  width: 35px;
  height: 1px;
  background-color: #171717;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, opacity 0.3s ease;
  transition: transform 0.4s ease, opacity 0.3s ease, -webkit-transform 0.4s ease;
}
.l-sp-nav-control__item::after {
  position: absolute;
  content: "";
  bottom: -10px;
  left: 0;
  width: 35px;
  height: 1px;
  background-color: #171717;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, opacity 0.3s ease;
  transition: transform 0.4s ease, opacity 0.3s ease, -webkit-transform 0.4s ease;
}
.l-sp-nav-control[aria-expanded=true] .l-sp-nav-control__item {
  background-color: transparent;
}
.l-sp-nav-control[aria-expanded=true] .l-sp-nav-control__item::before {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.l-sp-nav-control[aria-expanded=true] .l-sp-nav-control__item::after {
  bottom: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/******************************************************************
layout - sp-nav-full
******************************************************************/
.l-sp-nav-full {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  overflow-y: auto;
  max-height: calc(100vh - var(--header-height));
}
.l-sp-nav-full[aria-expanded=false] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.l-sp-nav-full nav {
  width: 100%;
  background-color: #2367b6;
  padding-bottom: 50px;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.l-sp-nav-full .l-nav-sp > li {
  border-bottom: 1px solid #88b3e5;
}
.l-sp-nav-full .l-nav-sp > li > a {
  display: block;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}
.l-sp-nav-full .l-nav-sp > li > a:not([role=button]) {
  background: url(/batterypf/assets/img/common/icon-arrow-white.png) right 16px top 50% no-repeat;
}
.l-sp-nav-full .l-nav-sp > li a[role=button] {
  position: relative;
}
.l-sp-nav-full .l-nav-sp > li a[role=button][aria-expanded=false]::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 18px;
  width: 16px;
  height: 2px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #fff;
}
.l-sp-nav-full .l-nav-sp > li a[role=button][aria-expanded=false]::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 25px;
  width: 2px;
  height: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #fff;
}
.l-sp-nav-full .l-nav-sp > li a[role=button][aria-expanded=true]::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 18px;
  width: 16px;
  height: 2px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #fff;
}
.l-sp-nav-full .l-nav-sp > li a[role=button][aria-expanded=true]::before {
  background-color: transparent;
}
.l-sp-nav-full .l-nav-sp > li div {
  display: none;
}
.l-sp-nav-full .l-nav-sp > li div[aria-hidden=false] {
  display: block;
}
.l-sp-nav-full .l-nav-sp a {
  color: #fff;
  text-decoration: none;
}
.l-sp-nav-full .l-nav-sp .l-nav-sp-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: 32px;
  padding-right: 32px;
  margin-bottom: 16px;
}
.l-sp-nav-full .l-nav-sp .l-nav-sp-item > li {
  width: 100%;
}
.l-sp-nav-full .l-nav-sp .l-nav-sp-item > li a {
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 64px;
  background: url(/batterypf/assets/img/common/icon-arrow-white.png) 34px 16px no-repeat;
}
.l-sp-nav-full .l-nav-sp-en {
  margin-left: 16px;
  font-size: 12px;
  color: #88b3e5;
}
.l-sp-nav-full .l-sp-nav-title {
  margin-bottom: 8px;
  position: relative;
}
.l-sp-nav-full .l-sp-nav-title a {
  padding-left: 48px;
  background: url(/batterypf/assets/img/common/icon-arrow-white.png) 18px 8px no-repeat;
}

.l-header-option-sp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 32px;
  padding-left: 16px;
  padding-right: 16px;
  gap: 16px;
}
.l-header-option-sp li {
  min-width: 250px;
}
.l-header-option-sp a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  text-decoration: none;
}
.l-header-option-sp .l-sp-login {
  background: url(/batterypf/assets/img/common/icon-login-sp.png) 16px 50% no-repeat;
  background-color: #f9efd4;
}
.l-header-option-sp .l-sp-login a {
  color: #392a00;
}
.l-header-option-sp .l-sp-lang {
  background: url(/batterypf/assets/img/common/icon-lang-sp.png) 16px 50% no-repeat;
  background-color: #fff;
}
.l-header-option-sp .l-sp-lang a {
  color: #001f46;
}

.l-nav-mega-overlay {
  display: none;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}

/******************************************************************
layout - main
******************************************************************/
/******************************************************************
layout - section
******************************************************************/
.l-section {
  position: relative;
}
.l-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 64px;
  margin-top: 64px;
  padding-right: 40px;
  padding-left: 40px;
}
.l-section__inner > *:not(:last-child) {
  margin-bottom: 32px;
}
.l-section__top-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 70px;
  padding-bottom: 70px;
}
@media screen and (max-width: 960px) {
  .l-section__top-inner {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.l-section__top-inner > *:not(:last-child) {
  margin-bottom: 32px;
}
.l-section__about {
  background: url(/batterypf/assets/img/common/top-bg01.png) center center no-repeat;
  background-size: 100% auto;
}
@media screen and (max-width: 960px) {
  .l-section__about {
    background: url(/batterypf/assets/img/common/top-bg01.png) center 0px no-repeat;
  }
}
.l-section__facility-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
  padding-right: 40px;
  padding-left: 40px;
  z-index: 1;
}
@media screen and (max-width: 960px) {
  .l-section__facility-inner {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.l-section.l-section__facility {
  position: relative;
  background: url(/batterypf/assets/img/common/top-bg02.png) no-repeat;
  background-size: cover;
  z-index: 0;
}
.l-section.l-section__facility::after {
  position: absolute;
  content: "";
  top: -100px;
  right: 0;
  width: 532px;
  height: 562px;
  background: url(/batterypf/assets/img/common/top-bg02-1.png) no-repeat;
  opacity: 0.7;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .l-section.l-section__facility::after {
    background: url(/batterypf/assets/img/common/top-bg02-1_sp.png) no-repeat;
    top: 0;
    left: 0;
  }
}
.l-section.l-section__facility::before {
  position: absolute;
  content: "";
  bottom: -237px;
  left: 0px;
  width: 347px;
  height: 362px;
  background: url(/batterypf/assets/img/common/top-bg02-2.png) no-repeat;
  opacity: 0.7;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .l-section.l-section__facility::before {
    background: url(/batterypf/assets/img/common/top-bg02-2_sp.png) no-repeat;
    bottom: -200px;
    right: -50px;
    left: auto;
  }
}
.l-section__news-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 70px;
  padding-bottom: 70px;
}
@media screen and (max-width: 960px) {
  .l-section__news-inner {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.l-section--other {
  background-color: #e8edf4;
}
.l-section--other-inner {
  position: relative;
  max-width: 1200px;
  margin: 0px auto;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-right: 40px;
  padding-left: 40px;
}
@media screen and (max-width: 960px) {
  .l-section--other-inner {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 20px;
  }
}
.l-section__footer-banner {
  background-color: #1061a9;
}
.l-section__footer-banner-inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-right: 40px;
  padding-left: 40px;
}
@media screen and (max-width: 960px) {
  .l-section__footer-banner-inner {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 20px;
  }
}

/******************************************************************
layout - footer
******************************************************************/
.l-footer {
  background-color: #0d5399;
}
.l-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-right: 40px;
  padding-left: 40px;
}
@media screen and (max-width: 960px) {
  .l-footer__inner {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.l-footer-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  .l-footer-banner {
    gap: 20px;
    padding-left: 0;
    padding-right: 0;
  }
}
.l-footer-banner li {
  width: calc((100% - 60px) / 3);
}
@media screen and (max-width: 960px) {
  .l-footer-banner li {
    width: calc((100% - 20px) / 2);
  }
}
@media screen and (max-width: 599px) {
  .l-footer-banner li {
    width: 100%;
  }
}
.l-footer-banner a {
  display: block;
  width: 100%;
}
.l-footer-banner a > img {
  width: 100%;
}
.l-footer__content-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (max-width: 960px) {
  .l-footer__content-inner {
    display: block;
  }
}
@media screen and (max-width: 960px) {
  .l-footer__head {
    margin-bottom: 28px;
  }
}
@media screen and (max-width: 960px) {
  .l-footer__logo {
    text-align: center;
  }
}
.l-footer__body > *:not(:last-child) {
  margin-bottom: 26px;
}
@media screen and (max-width: 960px) {
  .l-footer__body > *:not(:last-child) {
    margin-bottom: 30px;
  }
}

/******************************************************************
component - footer
******************************************************************/
.c-footer__title {
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .c-footer__title {
    margin-bottom: 30px;
  }
}
.c-footer__address {
  color: #fff;
  letter-spacing: 0.08em;
  line-height: 1.7;
}
.c-footer__text {
  color: #fff;
  letter-spacing: 0.08em;
  line-height: 1.7;
}
.c-footer__info > *:not(:last-child) {
  margin-bottom: 1rem;
}
@media screen and (max-width: 960px) {
  .c-footer__info {
    display: block;
  }
  .c-footer__info-left {
    margin-bottom: 20px;
  }
}
.c-footer__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px 0;
}
@media screen and (max-width: 960px) {
  .c-footer__menu {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.c-footer__menu li {
  padding-right: 12px;
  padding-left: 12px;
  line-height: 1.7;
  position: relative;
}
.c-footer__menu li:first-child::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: #fff;
}
.c-footer__menu li ::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: #fff;
}
.c-footer__menu a {
  width: 100%;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  font-size: 14px;
}
@media screen and (max-width: 960px) {
  .c-footer__menu a {
    font-size: 0.8rem;
  }
}
.c-footer__copy {
  display: block;
  color: #fff;
}
@media screen and (max-width: 960px) {
  .c-footer__copy {
    text-align: center;
  }
}
.c-footer__copy small {
  font-size: 12px;
}
.c-footer__copy span {
  display: inline-block;
}

/******************************************************************
component - top__induction
******************************************************************/
.c-top__induction {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px 0;
}
@media screen and (max-width: 960px) {
  .c-top__induction {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0px;
  }
}
.c-top__induction a {
  text-decoration: none;
}
.c-top__induction-logo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 960px) {
  .c-top__induction-logo {
    min-width: 62px;
  }
}
.c-top__induction-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  border-left: 1px solid #99bedd;
  border-right: 1px solid #99bedd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.c-top__induction-item:nth-child(2n) {
  border-left: none;
}
@media screen and (max-width: 960px) {
  .c-top__induction-item {
    width: 100%;
    border-left: none;
    border-right: none;
  }
  .c-top__induction-item:not(:last-child) {
    border-bottom: 1px dotted #005dab;
  }
}
.c-top__induction-item div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media screen and (max-width: 960px) {
  .c-top__induction-item div {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.c-top__induction-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.c-top__induction-item a::after {
  position: absolute;
  content: "";
  bottom: 20px;
  right: 20px;
  width: 15px;
  height: 8px;
  background: url(/batterypf/assets/img/common/icon-arrow-blue.png) no-repeat;
}
.c-top__induction-item a:hover {
  border-top: 1px solid #99bedd;
  border-bottom: 1px solid #99bedd;
}
@media screen and (max-width: 960px) {
  .c-top__induction-item a:hover {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }
}
.c-top__induction-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 30px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 32px;
  padding-bottom: 32px;
}
@media screen and (max-width: 960px) {
  .c-top__induction-inner {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-right: 20px;
    padding-left: 20px;
  }
}
.c-top__induction-title {
  text-align: left;
}
.c-top__induction-title-ja {
  display: block;
  font-size: 21px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .c-top__induction-title-ja {
    font-size: 18px;
  }
}
.c-top__induction-title-en {
  font-size: 15px;
  color: #2367b6;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .c-top__induction-title-en {
    font-size: 13px;
  }
}

/******************************************************************
component - top__facility
******************************************************************/
.c-top__facility {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 60px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 960px) {
  .c-top__facility {
    gap: 40px;
  }
}
@media screen and (max-width: 599px) {
  .c-top__facility {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.c-top__facility a {
  text-decoration: none;
  display: block;
  height: 100%;
}
.c-top__facility-item {
  width: calc((100% - 60px) / 2);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (max-width: 960px) {
  .c-top__facility-item {
    width: calc((100% - 40px) / 2);
  }
}
@media screen and (max-width: 599px) {
  .c-top__facility-item {
    width: 100%;
  }
}
.c-top__facility-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media screen and (max-width: 960px) {
  .c-top__facility-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding-bottom: 0;
  }
}
.c-top__facility-img {
  width: 40%;
  display: block;
}
.c-top__facility-img img {
  width: 100%;
}
@media screen and (max-width: 960px) {
  .c-top__facility-img {
    width: 100%;
  }
}
.c-top__facility-body {
  width: 60%;
  padding-bottom: 23px;
  position: relative;
  border-bottom: 1px solid #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-bottom: 23px;
}
.c-top__facility-body::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 14px;
  bottom: -3px;
  right: 4px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  border-right: 1px solid #fff;
}
@media screen and (max-width: 960px) {
  .c-top__facility-body {
    width: 100%;
  }
}
.c-top__facility-title {
  font-size: 20px;
  color: #fff;
  margin-bottom: 15px;
  letter-spacing: 0.07em;
}
@media screen and (max-width: 960px) {
  .c-top__facility-title {
    font-size: 19px;
  }
}
.c-top__facility-label {
  background-color: #fff;
  color: #2367b6;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 10px;
  margin-bottom: 22px;
}
@media screen and (max-width: 960px) {
  .c-top__facility-label {
    font-size: 15px;
    margin-bottom: 24px;
  }
}
.c-top__facility-text {
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.07em;
}

/******************************************************************
component - top__heading
******************************************************************/
.c-top__heading2 {
  margin-bottom: 70px;
  line-height: 1;
}
@media screen and (max-width: 960px) {
  .c-top__heading2 {
    margin-bottom: 30px;
  }
}
.c-top__heading2-ja {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}
@media screen and (max-width: 960px) {
  .c-top__heading2-ja {
    font-size: 20px;
    margin-bottom: 0px;
  }
}
.c-top__heading2-en {
  color: #2367b6;
  font-size: 16px;
}
@media screen and (max-width: 960px) {
  .c-top__heading2-en {
    font-size: 12px;
  }
}

/******************************************************************
component - heading
******************************************************************/
.c-heading2 {
  font-size: 28px;
}
.c-heading2:not(:first-child) {
  margin-top: 48px;
}
@media screen and (max-width: 960px) {
  .c-heading2 {
    font-size: 22px;
  }
  .c-heading2:not(:first-child) {
    margin-top: 36px;
  }
}

/******************************************************************
component - text
******************************************************************/
@media screen and (max-width: 960px) {
  .c-text {
    font-size: 14px;
  }
}

/******************************************************************
component - link
******************************************************************/
.c-link {
  color: #004680;
  text-decoration: none;
  padding-right: 23px;
  background: url(/batterypf/assets/img/common/icon-arrow-blue.png) right bottom 5px no-repeat;
}
@media screen and (max-width: 960px) {
  .c-link {
    font-size: 14px;
  }
}

/******************************************************************
component - btn
******************************************************************/
.c-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}
.c-btn__item {
  background-color: #005dab;
  min-width: min(23em, 100%);
}
.c-btn__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: min(23em, 100%);
  min-height: 56px;
  padding: 8px 32px 8px 32px;
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(/batterypf/assets/img/common/icon-arrow-white.png) no-repeat right 6px bottom 7px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-btn__item a:hover {
  border: 1px solid #83acd6;
  color: #0d5399;
  background: url(/batterypf/assets/img/common/icon-arrow-blue.png) no-repeat right 6px bottom 7px;
  background-color: #fff;
}

.c-btn--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/******************************************************************
project - top-visual　（slick）
******************************************************************/
.p-top-visual {
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-top-visual {
    max-height: none;
  }
}
.p-top-visual__body {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
}
@media screen and (max-width: 960px) {
  .p-top-visual__body {
    top: auto;
    bottom: 47px;
  }
}
@media screen and (max-width: 960px) {
  .p-top-visual__title {
    width: 75%;
  }
}
@media screen and (max-width: 960px) {
  .p-top-visual__title img {
    width: 100%;
  }
}

.slick-dots {
  position: absolute;
  content: "";
  left: 50%;
  bottom: 10px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.slick-dots li {
  margin: 0 5px;
}

.slick-dots li button {
  width: 7px;
  height: 7px;
  background-color: #fff;
  border: none;
  text-indent: -9999px; /* ボタンのテキスト非表示 */
  overflow: hidden;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.slick-dots li.slick-active button {
  background-color: #0A4CA7;
}

.p-top-visual__slick .slick-slide img {
  width: 100%;
}

/******************************************************************
project - top__news
******************************************************************/
.p-top__news {
  margin-bottom: 50px;
}
.p-top__news-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid #c7c7c7;
  padding-top: 40px;
  padding-bottom: 40px;
}
.p-top__news-item:last-child {
  border-bottom: 1px solid #c7c7c7;
}
@media screen and (max-width: 960px) {
  .p-top__news-item {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-top: 28px;
    padding-bottom: 28px;
  }
}
.p-top__news-date {
  margin-right: 64px;
  margin-left: 20px;
}
@media screen and (max-width: 960px) {
  .p-top__news-date {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 16px;
    width: 100%;
  }
}
.p-top__news-title {
  line-height: 1.9;
}
.p-top__news-title a {
  padding-right: 23px;
  color: #004680;
  text-decoration: none;
  background: url(/batterypf/assets/img/common/icon-arrow-blue.png) no-repeat right 0px bottom 5px;
}

/******************************************************************
project - top-btn
******************************************************************/
.p-top__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 50px;
}
@media screen and (max-width: 960px) {
  .p-top__btn {
    gap: 20px;
  }
}
.p-top__btn_item {
  width: calc((100% - 100px) / 3);
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (max-width: 960px) {
  .p-top__btn_item {
    width: 100%;
  }
}
.p-top__btn_item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-height: 74px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 32px;
  padding-left: 32px;
  color: #333;
  text-decoration: none;
  border: 1px solid transparent;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 960px) {
  .p-top__btn_item a {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}
.p-top__btn_item a img {
  margin-right: 16px;
  max-height: 24px;
}
.p-top__btn_item a span {
  line-height: 1;
}
.p-top__btn_item a:hover {
  border: 1px solid #0d5399;
}

/******************************************************************
utility - mediaquery
******************************************************************/
.u-portrait-media {
  display: none;
}

@media screen and (max-width: 960px) {
  .u-landscape-media {
    display: none;
  }
  .u-portrait-media {
    display: block;
  }
  img.u-portrait-media {
    display: inline-block;
  }
  br.u-portrait-media {
    display: inline-block;
  }
  table.u-portrait-media {
    display: table;
  }
}
.u-sp-media {
  display: none;
}

@media screen and (max-width: 599px) {
  .u-pc-media {
    display: none;
  }
  .u-sp-media {
    display: block;
  }
  img.u-sp-media {
    display: inline-block;
  }
  br.u-sp-media {
    display: inline-block;
  }
  table.u-sp-media {
    display: table;
  }
}
.u-gutter {
  padding-right: 40px;
  padding-left: 40px;
}
@media screen and (max-width: 960px) {
  .u-gutter {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/******************************************************************
utility - display-off
******************************************************************/
.u-display-off {
  display: none;
}

/******************************************************************
utility - hover-opacity
******************************************************************/
.u-hover-opacity {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
}
@media (any-hover: hover) {
  .u-hover-opacity:hover {
    opacity: 0.7;
  }
}
.u-hover-opacity:focus {
  opacity: 0.7;
}

/******************************************************************
utility - hover-scale-img
******************************************************************/
.u-hover-scale-img__body {
  display: block;
  overflow: hidden;
}
.u-hover-scale-img__body img {
  width: 100%;
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
}
@media (any-hover: hover) {
  .u-hover-scale-img:hover .u-hover-scale-img__body img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.u-hover-scale-img:focus .u-hover-scale-img__body img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.u-hover-scale-img--light .u-hover-scale-img__body {
  background-color: #ffffff;
}
.u-hover-scale-img--dark .u-hover-scale-img__body {
  background-color: #000000;
}
.u-hover-scale-img--light .u-hover-scale-img__body img, .u-hover-scale-img--dark .u-hover-scale-img__body img {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
@media (any-hover: hover) {
  .u-hover-scale-img--light:hover .u-hover-scale-img__body img, .u-hover-scale-img--dark:hover .u-hover-scale-img__body img {
    opacity: 0.7;
  }
}
.u-hover-scale-img--light:focus .u-hover-scale-img__body img, .u-hover-scale-img--dark:focus .u-hover-scale-img__body img {
  opacity: 0.7;
}
/*# sourceMappingURL=app.css.map */