@charset "utf-8";

/* header
------------------------------------------------ */


/* MAIN
------------------------------------------------ */
@font-face {
  font-family: 'NotoSansBlackSubset';
  src: url(../fonts/NotoSansBlackSubset.woff);
}

/*--------------------
  kv
--------------------*/
.kv {
  display: flex;
  height: calc(100vh - 80px);
}
.kv__text {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv__text .heading01 {
  text-align: center;
}
.kv__text .heading01 small,
.kv__text .heading01 span {
  display: block;
}
.kv__text .heading01 small {
  font-family: 'NotoSansBlackSubset';
  font-size: 2.4rem;
}
.kv__text .heading01 span {
  margin-top: 0.15em;
  font-family: 'Lato', sans-serif;
  font-size: 6rem;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: 0.05em;
}
.kv__image {
  width: 50%;
  background-image: url(/assets/esg/ja/img/kv_index.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width:1320px) {
  .kv {
    height: calc(100vh - 56px);
  }
}
@media screen and (max-width:850px) {
  .kv {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
  }
  .kv__text {
    width: 100%;
    padding: 40px;
  }
  .kv__image {
    width: 100%;
  }
}
@media screen and (max-width:540px) {
  .kv__text .heading01 small {
    font-size: 1.6rem;
  }
  .kv__text .heading01 span {
    font-size: 6rem;
  }
}

/*--------------------
  section
--------------------*/

.pannel {
  display: flex;
  height: 100vh;
}
.pannel-left, .pannel-right {
  width: 50vw;
}
.pannel-left {
  height: 100vh;
  position: relative;
}
.pannel-left__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
.bg-fix.fixed .pannel-left__image {
  width: 50vw;
  position: fixed;
  top: 0;
  left: 0;
}
.bg-fix .pannel-left__image {
  transition: opacity 0.4s;
  opacity: 0;
}
.bg-fix.active .pannel-left__image {
  transition: opacity 1.2s;
  opacity: 1;
}
.bg-fix:nth-of-type(1) .pannel-left__image {
  background-image: url(/assets/esg/ja/img/pic_index1.jpg);
}
.bg-fix:nth-of-type(2) .pannel-left__image {
  background-image: url(/assets/esg/ja/img/pic_index2.jpg);
}
.bg-fix:nth-of-type(3) .pannel-left__image {
  background-image: url(/assets/esg/ja/img/pic_index3.jpg);
}
.bg-fix:nth-of-type(4) .pannel-left__image {
  background-image: url(/assets/esg/ja/img/pic_index4.jpg);
}
.bg-fix:nth-of-type(5) .pannel-left__image {
  background-image: url(/assets/esg/ja/img/pic_index5.jpg);
}
.bg-fix:nth-of-type(6) .pannel-left__image {
  background-image: url(/assets/esg/ja/img/pic_index6.jpg);
}
.pannel-right {
  padding: 60px;
  position: relative;
}
.pannel-right__count {
  font-size: 2.4rem;
  font-weight: bold;
  font-style: italic;
  position: absolute;
  top: 60px;
  left: 60px;
}
.pannel-right__count b {
  font-size: 6rem;
}
.pannel-right .heading02 {
  margin-top: 4em;
  margin-bottom: 2em;
}
.pannel-right .heading02 span {
  display: inline-block;
  margin-top: 0.4em;
  font-size: 3rem;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.pannel-right .heading02 small {
  display: block;
  padding-left: 0.5em;
  font-size: 1.4rem;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 0.02em;
  position: relative;
}
.pannel-right .heading02 small::before {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background-color: #DA2009;
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translate(-1.25em, -50%);
}
.pannel-right__text + .pannel-right__text {
  margin-top: 1.5em;
}
.pannel-right__list li {
  border: 1px solid #DDDDDD;
}
.pannel-right__list li + li {
  margin-top: 0.5em;
}
.pannel-right__list li a {
  padding: 1em 1em 1em 2.25em;
  display: block;
  position: relative;
}
.pannel-right__list li a::before {
  content: '';
  display: block;
  width: 0.8em;
  height: 0.8em;
  background-image: url(/assets/esg/ja/img/icon_arrow2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 1.4em;
  left: 1em;
}
.pannel-right__btn {
  display: inline-block;
  margin-top: 2.25em;
  padding-right: 4em;
  padding-bottom: 0.8em;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 0.08em;
  position: relative;
}
.pannel-right__btn::before,
.pannel-right__btn::after {
  content: '';
  display: block;
}
.pannel-right__btn::before {
  width: 100%;
  height: 2px;
  background-color: #DA2009;
  position: absolute;
  left: 0;
  bottom: 0;
}
.pannel-right__btn::after {
  width: 1em;
  height: 1em;
  background-image: url(/assets/esg/ja/img/icon_arrow1.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0.25em;
  right: 0.5em;
}

@media screen and (max-width:850px) {
  .pannel {
    height: auto;
    display: block;
  }
  .pannel-left,
  .pannel-right {
    width: 100%;
  }
  .pannel-left {
    height: 50vh;
  }
  .pannel-left__image {
    position: static;
  }
  .bg-fix .pannel-left__image {
    opacity: 1;
  }
  .pannel-right {
    padding: 8% 6% 12%;
  }
  .pannel-right__count {
    position: static;
  }
  .pannel-right .heading02 {
    margin: 1em 0 1.75em;
  }
  .pannel-right .heading02 span {
    margin-top: 0.3em;
    font-size: 3.2rem;
  }
  .pannel-right .heading02 small {
    padding-left: 1em;
  }
  .pannel-right .heading02 small::before {
    transform: translate(-0px, -50%);
  }
}
@media screen and (max-width:540px) {

}

/*-------------------------
  message
-------------------------*/
@media screen and (max-width:850px) {
  .section-message .pannel-left__image {
    background-position: center 15%;
  }
  .section-message .pannel-right {
    padding-top: 6%;
  }
}
/*-------------------------
  environment
-------------------------*/
@media screen and (max-width:850px) {
  .section-environment .pannel-right {
    padding-top: 6%;
  }
}
/*-------------------------
  social
-------------------------*/
@media screen and (max-width:850px) {
  .section-social .pannel-right {
    padding-top: 6%;
  }
}
/*-------------------------
  governance
-------------------------*/
@media screen and (max-width:850px) {
  .section-governance .pannel-right {
    padding-top: 6%;
  }
}