@charset "UTF-8";
.blockContent-flex {
  display: flex;
}
.natural{
  overflow: hidden;
  font-feature-settings: 'palt';
  font-family: 'Sawarabi Gothic', sans-serif !important;
  color: #231815;
  letter-spacing: 0;
}
.natural .el-d-section{
  box-sizing: border-box;
  margin: 0 auto;
}
.natural picture{
  display: block;
}
.natural hr{
  border: 11px solid #EFEFEF;
  border-bottom: 0;
  width: 87%;
  margin: 7% auto 0;
}
@media screen and (min-width:700px){
  .natural img{
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
  }
}
@media screen and (max-width:699px){
  .natural hr{
    border-width: 1.47vw;
  }
}

.leftAuto{
  margin-left: auto;
}
.txt01{
  font-size: 21px;
  line-height: 1.85;
}
.bg{
  background: #D3BDA0;
}


.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
.flexBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 0px;
}
.flexEnd{
  align-items: flex-end;
  justify-content: center;
}
@media screen and (min-width:701px){
  .sp{display: none !important;}
}
@media screen and (max-width:699px){
  .pc{display: none !important;}
  .sp img{
    display: block;
  }
  .natural .el-d-section{
    padding: 0;
    margin: 0;
  }
}

.blockHeaderInner{
  width: 81.4%;
}
.blockHeader h2{
  padding: 7% 0 4.5%;
  margin: auto;
}
.blockHeader .blockHeaderTxt{
  padding: 6%;
  flex: 1;
}
.blockHeader .blockHeaderTxt p{
  margin: auto;
}
.blockList{
  width: 81.4%;
  margin-left: auto;
}
.blockList.reverse{
  margin-left: 0;
}
.blockList.reverse .flexBox{
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.blockList li+li{
  margin-top: 4%;
}
.blockListImg{
  width: 42.223%;
}
.blockListTxt{
  width: 47%;
  padding-left: 3%;
  box-sizing: border-box;
}
.reverse .blockListTxt{
  text-align: right;
  margin-left: auto;
  padding-left: 0;
  padding-right: 3%;
}
.blockListTxt h4{
  margin-bottom: 7%;
}
.reverse .blockListTxt h4{
  margin-left: auto;
}
.blockListTxt p{
  font-size: 17px;
  line-height: 1.54;
}

@media screen and (max-width:699px){
  .blockList{
    width: 86.4%;
  }
  .blockListImg{
    width: 47.223%;
  }
  .blockListTxt{
    width: 52%;
  }
  .blockListTxt p{
    font-size: 22px;
  }
}


body [data-aos]{
  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1) !important;
}
.natural{
  overflow: hidden;
}



.mv h1{
  top: 4%;
  right: 6.7%;
  width: 57.1%;
	margin: 7% auto 5.5%;
}
.mv h2{
  top: 45%;
  left: 86%;
  width: 8.7%;
}
.natural .mv hr{
  margin: 8.5% auto 0;
}
@media screen and (max-width:699px){
  .mv h2{
    top: 5%;
    left: 7%;
    width: 43.4%;
  }
}


.concept .blockHeaderInner{
  width: 83.3%;
}
.concept .blockHeader .relative{
  padding-top: 14%;
}
.concept .blockHeader h2{
  top: 8.5%;
  right: -3%;
  width: 28.8%;
  padding: 0;
}
.concept .blockHeader .flexEnd{
  justify-content: flex-start;
}
.concept .blockHeader .flexLeft{
  width: 46.233%;
}
.concept .blockHeader .flexRight{
  width: 10.2%;
  padding-bottom: 6%;
  position: absolute;
  bottom: 0;
  right: 0;
}
.concept .blockHeader .txt01{
  width: 61%;
  margin-top: 2%;
}
@media all and (-ms-high-contrast: none) {
}
@media screen and (max-width:699px){
  .concept .blockHeader h2{
    width: 35.649%;
    top: 4.5%;
  }
  .concept .blockHeader .flexLeft{
    width: 46.233%;
  }
  .concept .blockHeader .flexRight{
    width: 11.255%;
  }
  .concept .blockHeader .txt01{
    width: 57%;
    margin-right: 3%;
  }
}
.concept .blockContent{
  padding-top: 10%;
}
.concept .blockContent h2{
  z-index: 1;
  top: 0;
  left: 27%;
  width: 43.1%;
  padding: 0;
}
.concept .blockContent .flexLeft{
  flex: 1;
}
.concept .blockContent .flexRight{
  width: 50.4%;
  padding-left: 3%;
}
.concept .blockContent .txt01{
  text-align: right;
}
@media screen and (max-width:699px){
  .concept .blockContent h2{
    width: 57.5%;
    left: 9%;
  }
  .concept .blockContent .flexRight{
    width: 59.3%;
  }
}

.myself h2{
  width: 45.9%;
}
.myself .blockHeader .myselfTxt03{
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 4%;
}
.myself .blockHeader .flexLeft p{
  width: 65.82%;
}
.myself .blockHeader .flexRight{
  width: 72.538%;
}
.myself h3{
  width: 40.487%;
  padding: 4% 0 1%;
}
.myself .blockContent ul{
  margin-bottom: 5%;
}
.myself .blockContent li:nth-of-type(1) h4{
  width: 47.676%;
}
.myself .blockContent li:nth-of-type(2) h4{
  width: 47.676%;
}
.myselfSquare{
  width: 63%;
  margin: auto;
  background: url(../img/myself_bg.svg) no-repeat 100% 100%/cover;
  text-align: center;
  padding: 4% 0 4%;
  margin-bottom: 1.2%;
  justify-content: center;
  gap: 0 1%;
}
.myselfSquare>div{
  width: 30%;
}
.myselfSquareTxt01{
  font-size: 24px;
  line-height: 1.84;
  letter-spacing: -.1em;
  color: #727171;
  margin-bottom: 15%;
}
.myselfSquareTxt01::before{
  content: "";
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.myselfSquareTxt02{
  font-size: 18.7px;
  line-height: 1.32;
}
.myselfNote{
  font-size: 15.4px;
  line-height: 1.37;
  width: 63%;
  margin: auto;
}
.myselfNote img{
  width: 100%;
}
@media screen and (max-width:699px){
  .myselfSquare{
    width: 73%;
    padding: 6% 0 6%;
  }
  .myselfSquare .sp{
    width: 82%;
  }
  .myself .blockHeader .myselfTxt03{
    width: 81.367%;
    margin-bottom: 4%;
  }
  .myself .blockHeader .flexLeft p{
    width: 86.82%;
  }
  .myself h2{
    width: 57.9%;
  }
  .myself h3{
    width: 45.487%;
  }
  .myself .blockHeader .flexRight{
    width: 74.538%;
  }
  .myself .blockContent li:nth-of-type(1) h4{
    width: 52.676%;
  }
  .myself .blockContent li:nth-of-type(2) h4{
    width: 52.676%;
  }
  .myselfNote{
    width: 73%;
  }
}


.sustainable h2{
  width: 43.4%;
}
.sustainable .blockHeader .flexLeft{
  width: 69.538%;
}
.sustainable .blockHeader .flexRight p{
  width: 58.54%;
}

.sustainableSquare{
  width: 63%;
  margin: 4% auto 4%;
  background: url(../img/sustainable_bg.svg) no-repeat 100% 100%/cover;
  text-align: center;
  padding: 2% 0 3%;
  justify-content: center;
}
.sustainableSquareTxt01{
  font-size: 24px;
  line-height: 1.84;
  letter-spacing: -.1em;
  color: #727171;
  margin-bottom: 7%;
}
.sustainableSquareTxt01::before{
  content: "";
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.sustainableSquareTxt02{
  font-size: 17px;
  line-height: 1.3;
}

.sustainable h3{
  width: 43.727%;
  margin-top: 4%;
  margin-bottom: 4%;
}
.sustainable .blockHeader .sustainableTxt03{
  font-size: 22px;
  line-height: 1.5;
  text-align: right;
  margin-bottom: 4%;
}
.sustainable .blockContent li:nth-of-type(1) h4{
  width: 66.81%;
}
.sustainable .blockContent li:nth-of-type(2) h4{
  width: 19.803%;
}
.sustainable .blockContent li:nth-of-type(3) h4{
  width: 52.874%;
}
.sustainable .blockContent li:nth-of-type(4) h4{
  width: 77.91%;
}
@media screen and (max-width:699px){
  .sustainable h2{
    width: 53.4%;
  }
  .sustainable .blockHeader .flexLeft{
    width: 74.538%;
  }
  .sustainable .blockHeader .flexRight p{
    width: 88.54%;
  }
  .sustainableSquare{
    width: 77%;
    margin: 5% 13.5% 5% auto;
    padding: 4% 0 4%;
  }
  .sustainableSquare .sp{
    width: 56%;
  }
  .sustainable h3{
    width: 48.727%;
  }
  .sustainable .blockHeader .sustainableTxt03{
    width: 81.02%;
  }
  .sustainable .blockContent li:nth-of-type(1) h4{
    width: 71.81%;
  }
  .sustainable .blockContent li:nth-of-type(2) h4{
    width: 24.803%;
  }
  .sustainable .blockContent li:nth-of-type(3) h4{
    width: 57.874%;
  }
  .sustainable .blockContent li:nth-of-type(4) h4{
    width: 82.91%;
  }
}


.open .blockHeader{
  width: 76.7%;
}
.open h2{
  width: 50.21%;
  margin: 0;
  padding: 8% 0 3.5%;
}
.open .blockContent{
  padding-bottom: 11%;
}
.open .blockContent li:nth-of-type(1) h4{
  width: 74.84%;
}
.open .blockContent li:nth-of-type(2) h4{
  width: 60.43%;
}
@media screen and (max-width:699px){
  .open .blockHeader{
    width: 86.4%;
  }
  .open h2{
    width: 55.21%;
  }
  .open .blockContent li:nth-of-type(1) h4{
    width: 79.84%;
  }
  .open .blockContent li:nth-of-type(2) h4{
    width: 65.43%;
  }
}

.lineUp{
  background: #EBE0D3;
}
.lineUp .blockHeader h2{
  width: 10.8%;
  padding: 6% 0 3.5%;
}
.lineUp .blockContent{
  text-align: center;
}
.lineUp .lineUp01{
  width: 36.4%;
  display: block;
  margin: auto;
}
.lineUp .lineUp02 {
  width: 36.4%;
  display: block;
  margin: auto;
}
.lineUp .lineUpTxt01{
  width: 66.8%;
  padding: 4% 0 10%;
}
.lineUp .lineUpTxt02 {
  width: 66.8%;
  padding: 4% 0 10%;
}
@media screen and (max-width:699px){
  .lineUp .blockHeader h2{
    width: 12.8%;
    padding: 6% 0 3.5%;
  }
  .lineUp .blockContent{
    text-align: center;
  }
  .lineUp .lineUp01{
    width: 48.333%;
  }
  .lineUp .lineUp02 {
    width: 48.333%;
  }
  .lineUp .lineUpTxt01{
    width: 80.5%;
    padding: 4% 0 11%;
  }
  .lineUp .lineUpTxt02 {
    width: 80.5%;
    padding: 4% 0 11%;
  }
}
.flexEndForMyself {
    justify-content: flex-start;
}
@media screen and (max-width:699px){
    .blockHeaderInner {
        width: 86.4%!important;
    }
}