@charset "utf-8";


/*
  font-family: "orator-std", monospace;
*/


.lp-wrapper {
  font-family: '游ゴシック Medium', 'Yu Gothic Medium','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;
  overflow: hidden;
}

.lp-relative {  position: relative !important; }

.lp-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.lp-textAlign-center {  text-align: center !important; }
.lp-textAlign-right  {  text-align: right !important; }
.lp-textAlign-left   {  text-align: left !important; }

.lp-bottom-xxsmall {  margin-bottom: 5px  !important; }
.lp-bottom-xsmall  {  margin-bottom: 10px !important; }
.lp-bottom-small   {  margin-bottom: 15px !important; }
.lp-bottom         {  margin-bottom: 20px !important; }
.lp-bottom-large   {  margin-bottom: 30px !important; }
.lp-bottom-xlarge  {  margin-bottom: 50px !important; }
.lp-bottom-xxlarge {  margin-bottom: 80px !important; }

.lp-top-xxsmall {  margin-top: 5px  !important; }
.lp-top-xsmall  {  margin-top: 10px !important; }
.lp-top-small   {  margin-top: 15px !important; }
.lp-top         {  margin-top: 20px !important; }
.lp-top-large   {  margin-top: 30px !important; }
.lp-top-xlarge  {  margin-top: 50px !important; }
.lp-top-xxlarge {  margin-top: 80px !important; }

@media screen and (max-width:767px) {

  .lp-bottom-xxsmall {  margin-bottom: 5px  !important; }
  .lp-bottom-xsmall  {  margin-bottom: 7px !important; }
  .lp-bottom-small   {  margin-bottom: 10px !important; }
  .lp-bottom         {  margin-bottom: 15px !important; }
  .lp-bottom-large   {  margin-bottom: 20px !important; }
  .lp-bottom-xlarge  {  margin-bottom: 30px !important; }
  .lp-bottom-xxlarge {  margin-bottom: 40px !important; }

  .lp-top-xxsmall {  margin-top: 5px  !important; }
  .lp-top-xsmall  {  margin-top: 7px !important; }
  .lp-top-small   {  margin-top: 10px !important; }
  .lp-top         {  margin-top: 15px !important; }
  .lp-top-large   {  margin-top: 20px !important; }
  .lp-top-xlarge  {  margin-top: 30px !important; }
  .lp-top-xxlarge {  margin-top: 40px !important; }

}


/***********
bgColor01
************/

.lp-bgColor01 {
  background-color: #f1f2f6;
}


/***********
base
************/

.lp-base {
  width: auto;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.lp-base-wide {
  width: auto;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.lp-base-xwide {
  width: auto;
  max-width: 1460px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.lp-base-xxwide {
  width: auto;
  max-width: 1660px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.lp-base-small {
  width: auto;
  max-width: 824px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

.lp-block {
  padding-top: 100px;
  padding-bottom: 100px;
}
.lp-block-small {
  padding-top: 60px;
  padding-bottom: 60px;
}
.lp-block-large {
  padding-top: 150px;
  padding-bottom: 150px;
}

.lp-block-top {
  padding-top: 100px;
}
.lp-block-top-small {
  padding-top: 60px;
}
.lp-block-top-large {
  padding-top: 150px;
}

.lp-block-bottom {
  padding-bottom: 100px;
}
.lp-block-bottom-small {
  padding-bottom: 60px;
}
.lp-block-bottom-large {
  padding-bottom: 150px;
}

@media screen and (max-width: 767px) {

  .lp-base ,
  .lp-base-wide ,
  .lp-base-xwide ,
  .lp-base-xxwide ,
  .lp-base-small {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }

  .lp-base:not(.lp-base-noOffset),
  .lp-base-wide:not(.lp-base-noOffset),
  .lp-base-xwide:not(.lp-base-noOffset),
  .lp-base-xxwide:not(.lp-base-noOffset),
  .lp-base-small:not(.lp-base-noOffset){
    padding-left: 5%;
    padding-right: 5%;
  }

  .lp-base-wide .lp-base,
  .lp-base-wide .lp-base-small,
  .lp-base .lp-base-small {
    padding-left: 0;
    padding-right: 0;
  }

  .lp-block {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .lp-block-large {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .lp-block-top {
    padding-top: 50px;
  }

  .lp-block-top-large {
    padding-top: 80px;
  }

  .lp-block-bottom {
    padding-bottom: 50px;
  }

  .lp-block-bottom-large {
    padding-bottom: 80px;
  }


  .lp-block {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .lp-block-small {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .lp-block-large {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .lp-block-top {
    padding-top: 50px;
  }
  .lp-block-top-small {
    padding-top: 30px;
  }
  .lp-block-top-large {
    padding-top: 80px;
  }

  .lp-block-bottom {
    padding-bottom: 50px;
  }
  .lp-block-bottom-small {
    padding-bottom: 30px;
  }
  .lp-block-bottom-large {
    padding-bottom: 80px;
  }

}



/***********
visual
***********/

.lp-visual {
  height: 70vh;
  min-height: 400px;
  max-height: 700px;
  overflow: hidden;
  position: relative;
  z-index: 9;
}
.lp-visual-img {
  height: 100%;
}
.lp-visual-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-visual-img.is-ct img {
  object-position: center top;
}
.lp-visual-img.is-cb img {
  object-position: center bottom;
}
.lp-visual-block {
  position: absolute;
  left: 8vw;
  top: 15vh;
  text-align: center;
}
.lp-visual-subTitle {
  display: inline-block;
  color: #2453a1;
  font-family: "orator-std", monospace;
  font-style: italic;
  font-size: min(5vw,600%);
  line-height: 1.3;
}
.lp-visual-title {
  font-size: 154%;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {

  .lp-visual {
    height: 70vw;
    min-height: 200px;
    max-height: 400px;
  }

  .lp-visual-img.is-cb img {
    object-position: center bottom;
  }
  .lp-visual-block {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .lp-visual-subTitle {
    font-size: min(8vw,400%);
    margin-top: -1em;
  }
  .lp-visual-title {
    font-size: 131%;
  }

}



/***********
heading
***********/

.lp-heading {
  text-align: center;
  padding-bottom: 3em;
}
.lp-heading-title {
  display: inline-block;
  font-size: 350%;
  letter-spacing: 0.08em;
  position: relative;
  line-height: 1.3;
}
.lp-heading-title::before,
.lp-heading-title::after {
  content: "";
  display: block;
  width: 3px;
  height: 100%;
  background: #2453a1;
  position: absolute;
  top: -0.1em;
  transform: skewX(-28deg)
}
.lp-heading-title::before{
  left: -1em;
}
.lp-heading-title::after{
  right: -1em;
}

@media screen and (max-width: 767px) {

  .lp-heading {
    padding-bottom: 2em;
  }
  .lp-heading-title {
    font-size: 185%;
    letter-spacing: 0.05em;
  }
  .lp-heading-title::before,
  .lp-heading-title::after {
    width: 2px;
  }
  .lp-heading-title::before{
    left: -0.8em;
  }
  .lp-heading-title::after{
    right: -0.8em;
  }

}


/***********
title
***********/

.lp-title {
  font-size: 300%;
  text-align: center;
  border-bottom: 1px solid #aaa;
  padding-bottom: 0.4em;
  margin-bottom: 1.5em;
}

@media screen and (max-width: 767px) {

  .lp-title {
    font-size: 170%;
  }

}


/***********
text
***********/

.lp-textMain {
  font-size: 154%;
  line-height: 2;
}

@media screen and (max-width: 767px) {

  .lp-textMain {
    font-size: 116%;
    line-height: 1.8;
  }

}

/***********
list
***********/


.lp-list-dot {}
.lp-list-dot li {
  margin-left: 1em;
}
.lp-list-dot li::before {
  content: "・";
  margin-left: -1em;
}

/***********
intro
***********/

.lp-intro {
  padding-bottom: 4em;
}

.lp-intro-text {
  font-size: 170%;
  line-height: 2.5;
  text-align: center;
  letter-spacing: 0.08em;
}
.lp-intro-sdgs {
  max-width: 480px;
  margin: 0 auto;
  padding-top: 5em;
}

.lp-intro-box {
  margin-top: 5em;
  padding: 3em 5%;
  color: #2453a1;
  border: 2px solid #2453a1;
  background-color: rgba(255, 255, 255, 0.95);
}
.lp-intro-box-title {
  font-size: 300%;
  padding-bottom: 0.2em;
  text-align: center;
  letter-spacing: 0.08em;
}
.lp-intro-box-text {
  font-size: 154%;
  line-height: 2;
}

@media screen and (max-width: 767px) {

  .lp-intro {
    padding-bottom: 2em;
  }

  .lp-intro-text {
    font-size: 116%;
    line-height:1.8;
    text-align: left;
    letter-spacing: 0.03em;
  }
  .lp-intro-sdgs {
    padding-top: 3em;
  }

  .lp-intro-box {
    margin-top: 3em;
    padding: 2em 5%;
  }
  .lp-intro-box-title {
    font-size: 200%;
  }
  .lp-intro-box-text {
    font-size: 116%;
    line-height: 1.8;
  }

}

/***********
sdgs
***********/

.lp-sdgs {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-bottom: 4em;
}
.lp-sdgs-visual {
  width: 45%;
}
.lp-sdgs-icon {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1%;
  margin-bottom: -1%;
}
.lp-sdgs-icon li {
  width: 32.3%;
  margin-left: 1%;
  margin-bottom: 1%;
}

.lp-sdgs-inner {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.lp-sdgs-upper {
}
.lp-sdgs-lower {
  padding-top: 3em;
}
.lp-sdgs-list {
}
.lp-sdgs-list li {
  font-size: 139%;
  color: #7e9db4;
  border: 1px solid #7e9db4;
  padding: 0.8em 1em;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.95);
}
.lp-sdgs-list li:not(:last-child) {
  margin-bottom: 0.8em;
}


@media screen and (max-width: 767px) {

  .lp-sdgs {
    display: block;
    padding-bottom: 2em;
  }
  .lp-sdgs-visual {
    width: auto;
  }
  .lp-sdgs-icon {
  }
  .lp-sdgs-icon li {
  }

  .lp-sdgs-inner {
    width: auto;
    display: block;
    padding-top: 2.5em;
  }
  .lp-sdgs-upper {
  }
  .lp-sdgs-lower {
    padding-top: 2em;
  }
  .lp-sdgs-list {
  }
  .lp-sdgs-list li {
    font-size: 116%;
  }

}

/***********
esg
***********/

.lp-esg {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.lp-esg-chart {
  width: 48%;
}
.lp-esg-inner {
  width: 48%;
}
.lp-esg-section {
}
.lp-esg-section:not(:last-child) {
  padding-bottom: 5em;
}
.lp-esg-heading {
  padding: 2em 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
}
.lp-esg-heading::before {
  content: "";
  display: block;
  width: 10em;
  height: 10em;
  background: #fff;
  position: absolute;
  left: -4em;
  top: -2em;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
.lp-esg-heading-title {
  font-size: 330%;
  letter-spacing: 0.2em;
  padding-right: 0.5em;
  line-height: 1;
  position: relative;
}
.lp-esg-heading-subTitle {
  font-family: "orator-std", monospace;
  font-size: 250%;
  font-style: italic;
  line-height: 1.2;
  position: relative;
}


@media screen and (max-width: 1024px) {

  .lp-esg {
    display: block;
  }
  .lp-esg-chart {
    width: auto;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 4em;
  }
  .lp-esg-inner {
    width: auto;
  }

}

@media screen and (max-width: 767px) {


  .lp-esg {
  }
  .lp-esg-section {
  }
  .lp-esg-section:not(:last-child) {
    padding-bottom: 2em;
  }
  .lp-esg-heading {
    padding: 2em 0;
    display: flex;
  }
  .lp-esg-heading::before {
    width: 6em;
    height: 6em;
    left: -1.5em;
    top: 0;
  }
  .lp-esg-heading-title {
    font-size: 200%;
  }
  .lp-esg-heading-subTitle {
    font-size: 139%;
  }


}



/***********
object
***********/

.lp-object {
  position: absolute;
  height: 400px;
  pointer-events: none;
  z-index: -1;
}
.lp-object span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 15px;
  height: 100%;
  background-color: #000;
  transform-origin: left bottom;
  transform: skewX(-28deg) translate(0, -200px);
  opacity: 0;
}
.lp-object.is-show span {
  transform: skewX(-28deg) translate(0, 0);
  transition: ease all 0.5s;
  opacity: 1;
}

.lp-object span:nth-child(1) {
  background-color: #2453a1;
  transition-delay: 150ms;
}
.lp-object span:nth-child(2) {
  background-color: #bae3f9;
  margin-left: 60px;
  margin-top: -50px;
  transition-delay: 220ms;
}


.lp-object-intro01{
  left: -180px;
  top: 300px;
}
.lp-object-intro02{
  right: 50px;
  top: -200px;
}
.lp-object-sdgs01{
  right: 120px;
  bottom: 30px;
}

@media screen and (max-width:767px) {

  .lp-object {
    height: 200px;
  }
  .lp-object span {
    width: 10px;
    height: 100%;
  }
  .lp-object span:nth-child(2) {
    background-color: #bae3f9;
    margin-left: 30px;
    margin-top: -20px;
  }


  .lp-object-intro01{
    left: -80px;
    top: 350px;
  }
  .lp-object-intro02{
    right: 50px;
    top: -100px;
  }
  .lp-object-sdgs01{
    right: 50px;
    bottom: 0px;
  }

}

/***********
figure
***********/

.lp-figure {
  float: right;
  padding-left: 3%;
  padding-bottom: 1.5em;
  width: 35%;
}
.lp-figure figcaption {
  padding-top: 1em;
  font-size: 108%;
  line-height: 1.6;
}

@media screen and (max-width:767px) {

.lp-figure {
  float: none;
  padding-left: 0;
  padding-bottom: 2em;
  width: 60%;
  max-width: 320px;
  margin: 0 auto;
}
.lp-figure figcaption {
  font-size: 85%;
}

}


/***********
xxxxxxx
***********/

/***********
xxxxxxx
***********/

/***********
xxxxxxx
***********/


/***********
status
************/

.is-hide {
  display: none;
}
.is-readerHide {
  clip: rect(1px, 1px, 1px, 1px);
}

.is-inlineBlock{
  display: inline-block;
}

.is-out{
  position: absolute;
  left: -9999999px;
}

.is-pc-hide {
  display: none;
}

.is-pc-inline ,
.pc-br {
  display: inline;
}

.is-sp-inline ,
.sp-br {
  display: none;
}

.is-pc-noevent {
  pointer-events: none;
}

.is-step > *{
  opacity: 0;
  transition: opacity 1.2s ease;
}
.is-step.is-show > *{
  opacity: 1;
}

@media screen and (max-width:767px) {

  .is-pc-hide {
    display: block;
  }

  .is-sp-hide {
    display: none;
  }

  .is-sp-inline ,
  .sp-br {
    display: inline;
  }

  .is-pc-inline ,
  .pc-br {
    display: none;
  }

  .is-pc-noevent {
    pointer-events: auto;
  }


}

















/***IPAD 768px ~ 959px***/
@media screen and (max-width: 959px) {

}

/*** SP 480px ~ 767px***/
@media screen and (max-width: 767px) {

}

/*** SP 320px ~ 479px***/
@media screen and (max-width: 479px) {

}