@charset "UTF-8";
/*
* aboutus.css
*
*/
/* --------------------------------
   aboutus
-------------------------------- */
.content {
  position: relative;
}
.content a {
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.content a:hover {
  opacity: 0.6;
}

.lead_ttl {
  width: 220px;
}
@media (min-width: 768px) {
  .lead_ttl {
    width: 550px;
  }
}

.lead_inner {
  position: relative;
}

.lead_txt_block {
  position: unset;
}
.lead_txt_block::before {
  top: 0;
  right: 0; 
  width: 375px;
  height: 314px;
  background: url(/img/aboutus/lead_ttl_decoration.png) no-repeat center/contain;
}
@media (min-width: 768px) {
  .lead_txt_block::before {
    top: 0;
    right: 0; 
    width: 855px;
    height: 503px;
    background: url(/img/aboutus/lead_ttl_decoration_lg.png) no-repeat center/contain;
  }
}

@media (max-width: 767.98px) {
  .lead_txt::before {
    height: 146px;
  }
}

.lead_desc {
  letter-spacing: 0;
}
@media (max-width: 767.98px) {
  .lead_desc {
    line-height: 1.8;
  }
}

@media (min-width: 768px) {
  .aboutus_nav {
    padding: 40px 0 0;
  }
}

.aboutus_nav_list {
  display: none;
}
@media (min-width: 768px) {
  .aboutus_nav_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    max-width: 836px; 

    -webkit-box-pack: center; 

        -ms-flex-pack: center; 

            justify-content: center;
    -webkit-column-gap: 28px;
       -moz-column-gap: 28px;
            column-gap: 28px;
  }
}

.aboutus_nav_listItem {
  position: relative;
}
@media (min-width: 768px) {
  .aboutus_nav_listItem {
    padding-bottom: 18px;
    width: 286px; 
    cursor: pointer;
    letter-spacing: 0.05em;
    font-size: 16px;
    line-height: 1.15;
  }
  .aboutus_nav_listItem:hover::before {
    background-color: #333;
  }
  .aboutus_nav_listItem:hover::after {
    -webkit-transform: translateY(5px) rotate(-45deg);
        -ms-transform: translateY(5px) rotate(-45deg);
            transform: translateY(5px) rotate(-45deg);
  }
  .aboutus_nav_listItem::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-transition: background-color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background-color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 
    background-color: #d4d4d4;
  }
  .aboutus_nav_listItem::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 1px;
    margin: auto;
    border: 2px solid;
    border-color: transparent transparent #525252 #525252;
    width: 9px;
    height: 9px;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 
    -webkit-transform: translateY(0) rotate(-45deg); 
        -ms-transform: translateY(0) rotate(-45deg); 
            transform: translateY(0) rotate(-45deg);
  }
}

.section {
  padding: 60px 0 0;
}
.section.section01 {
  overflow: hidden; 
  padding: 60px 44px 240px;
}
@media (min-width: 768px) {
  .section.section01 {
    padding: 180px 30px 160px;
  }
}
.section.section01 .section_ttl {
  opacity: 0;
  width: 226px;
  -webkit-transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); 
  -webkit-transform: translateY(20px); 
      -ms-transform: translateY(20px); 
          transform: translateY(20px);
}
@media (min-width: 768px) {
  .section.section01 .section_ttl {
    width: 498px;
  }
}
.section.section01 .section_ttl.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.section.section01 .section_img {
  margin: 25px auto 0;
  padding-right: 16px; 
  width: 95%;
}
.section.section01 .section_block_desc {
  margin-top: -31px; 
  padding: 0 43px;
}
.section.section02 {
  padding: 60px 44px 80px;
  background-color: #f5f7ed;
}
@media (min-width: 768px) {
  .section.section02 {
    padding: 170px 30px 160px;
  }
}
.section.section02 .section_ttl {
  opacity: 0;
  width: 250px;
  -webkit-transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); 
  -webkit-transform: translateY(20px); 
      -ms-transform: translateY(20px); 
          transform: translateY(20px);
}
@media (min-width: 768px) {
  .section.section02 .section_ttl {
    width: 745px;
  }
}
.section.section02 .section_ttl.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.section_ttl {
  z-index: 2;
  margin: 0 auto;
}

.section_txt {
  margin-top: 8px;
  padding: 40px 20px;
}
@media (min-width: 768px) {
  .section_txt {
    margin: 24px auto 0;
    padding: 48px 0;
    max-width: 800px;
  }
}
.section_txt.section_txt_section01 {
  margin: 0 auto; 
  background: url(/img/aboutus/frame_02.jpg) no-repeat center;
  background-size: 100% 100%;
}
@media (max-width: 767.98px) {
  .section_txt.section_txt_section01 {
    max-width: 286px;
  }
}
@media (min-width: 768px) {
  .section_txt.section_txt_section01 {
    margin-top: 20px; 
    background: url(/img/aboutus/frame_02_lg.jpg) no-repeat;
    background-size: 100% 100%;
  }
}
@media (min-width: 768px) {
  .section_txt.section_txt_section01 p {
    letter-spacing: 0.13em;
  }
}
.section_txt p {
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  line-height: 2.6;
}
@media (min-width: 768px) {
  .section_txt p {
    letter-spacing: 0.15em;
    font-size: 1.125rem;
    line-height: 2.8;
  }
}
.section_txt p + p {
  margin-top: 28px;
}
@media (min-width: 768px) {
  .section_txt p + p {
    margin-top: 50px;
  }
}
.section_txt p .js-charFade {
  opacity: 0.1;
  -webkit-transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.section_txt p .js-charFade.is-active {
  opacity: 1;
}

.mission_desc {
  position: relative;
  padding-top: 26px;
}
@media (min-width: 768px) {
  .mission_desc {
    margin: 0 auto;
    padding-top: 90px; 
    max-width: 1440px;
  }
}
.mission_desc::before,
.mission_desc::after {
  opacity: 0;
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
}
@media (min-width: 768px) {
  .mission_desc::before,
  .mission_desc::after {
    -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
            transform: translateY(40px);
  }
}
.mission_desc::before {
  content: "";
  position: absolute;
  z-index: 0; 
  bottom: -226px;
  left: -44px;
  width: 212px;
  height: 326px;
  background: url(/img/aboutus/mission_deco_left_lg.png) no-repeat center/contain;
}
@media (min-width: 768px) {
  .mission_desc::before {
    z-index: 0; 
    top: -30px;
    bottom: unset;
    left: -10px;
    width: 420px;
    height: 646px;
    background: url(/img/aboutus/mission_deco_left_lg.png) no-repeat center/contain;
  }
}
.mission_desc::after {
  content: "";
  position: absolute;
  z-index: 0; 
  right: -52px;
  bottom: -222px;
  width: 243px;
  height: 305px;
  background: url(/img/aboutus/mission_deco_right_sm.png) no-repeat center/contain;
}
@media (min-width: 768px) {
  .mission_desc::after {
    right: -10px;
    bottom: 0;
    width: 480px;
    height: 605px;
    background: url(/img/aboutus/mission_deco_right_lg.png) no-repeat center/contain;
  }
}
.mission_desc.before-active::before,
.mission_desc.after-active::after {
  opacity: 1;
  -webkit-transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 1.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 1.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.7s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 1.7s cubic-bezier(0.075, 0.82, 0.165, 1); 
  -webkit-transform: translateY(0); 
      -ms-transform: translateY(0); 
          transform: translateY(0);
}

/* SVGテスト */
.section_svg_ttl {
  position: relative;
  margin: 0 auto; 
  width: -webkit-fit-content; 
  width: -moz-fit-content; 
  width: fit-content;
}
@media (min-width: 768px) {
  .section_svg_ttl {
    margin: 0 auto;
  }
}
.section_svg_ttl .section_svg_ttl_img {
  opacity: 0;
  position: absolute;
  top: 46%;
  left: 50%;
  width: 180px;
  -webkit-transition: opacity 0.7s linear;
  transition: opacity 0.7s linear;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s; 
  -webkit-transform: translate(-50%, -50%); 
      -ms-transform: translate(-50%, -50%); 
          transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  .section_svg_ttl .section_svg_ttl_img {
    top: 50%;
    width: 288px;
  }
}
.section_svg_ttl .section_svg_ttl_img.is-active {
  opacity: 1;
}
.section_svg_ttl #svgMission {
  opacity: 0.1; 
  width: 160px;
  height: auto;
}
@media (min-width: 768px) {
  .section_svg_ttl #svgMission {
    width: 320px;
  }
}
.section_svg_ttl #base path {
  fill: #000;
}
.section_svg_ttl #mask path {
  fill: none;
  stroke: #fff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.section_svg_ttl .mission_ttl {
  position: absolute;
  top: 75%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center; 
  font-size: 20px;
  font-weight: 700;
}

/* -------------------------------- */
.mission_txt_block {
  position: relative;
  z-index: 1;
  padding-top: 5px;
}
@media (min-width: 768px) {
  .mission_txt_block {
    margin: 0 auto;
    padding-top: 24px;
    max-width: 800px;
  }
}
.mission_txt_block .mission_txt {
  opacity: 0;
  -webkit-transition: opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
  -webkit-transform: translateY(20px); 
      -ms-transform: translateY(20px); 
          transform: translateY(20px);
  letter-spacing: 0.05em;
  font-size: 12px;
  line-height: 1.75;
}
@media (min-width: 768px) {
  .mission_txt_block .mission_txt {
    text-align: center; 
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
  }
}
.mission_txt_block .mission_txt + .mission_txt {
  margin-top: 18px;
}
@media (min-width: 768px) {
  .mission_txt_block .mission_txt + .mission_txt {
    margin-top: 30px;
  }
}
.mission_txt_block .mission_txt._bold {
  font-size: 13px;
  font-weight: 700;
  line-height: 2;
}
@media (min-width: 768px) {
  .mission_txt_block .mission_txt._bold {
    font-size: 18px;
  }
}
.mission_txt_block .mission_txt.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.section_contents {
  position: relative;
  padding: 15px 0 0;
}
@media (min-width: 768px) {
  .section_contents {
    margin: 0 auto;
    padding: 45px 0 0;
    max-width: 800px;
  }
}
.section_contents .desc_wrap {
  position: relative;
}
@media (min-width: 768px) {
  .section_contents .desc_wrap:nth-of-type(1) > dd {
    text-indent: 0.15em;
  }
}
@media (min-width: 768px) {
  .section_contents .desc_wrap:nth-of-type(3) > dd {
    text-indent: 0.2em;
  }
}
.section_contents .desc_wrap:nth-of-type(4) > dd {
  text-indent: 0.1em;
}
@media (min-width: 768px) {
  .section_contents .desc_wrap:nth-of-type(4) > dd {
    text-indent: 0.45em;
  }
}
@media (min-width: 768px) {
  .section_contents .desc_wrap:nth-of-type(5) > dd {
    text-indent: 0.15em;
  }
}
.section_contents .desc_wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(#000), color-stop(28%, #000), color-stop(28%, #d4d4d4), to(#d4d4d4));
  background: linear-gradient(90deg, #000 0%, #000 28%, #d4d4d4 28%, #d4d4d4 100%);
}
@media (min-width: 768px) {
  .section_contents .desc_wrap::before {
    background: linear-gradient(90deg, #000 0%, #000 100px, #d4d4d4 100px, #d4d4d4 100%);
  }
}
@media (min-width: 768px) {
  .section_contents .desc_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap;
  }
}
.section_contents .desc_wrap:last-of-type::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(#000), color-stop(28%, #000), color-stop(28%, #d4d4d4), to(#d4d4d4));
  background: linear-gradient(90deg, #000 0%, #000 28%, #d4d4d4 28%, #d4d4d4 100%);
}
@media (min-width: 768px) {
  .section_contents .desc_wrap:last-of-type::after {
    background: linear-gradient(90deg, #000 0%, #000 100px, #d4d4d4 100px, #d4d4d4 100%);
  }
}
.section_contents .desc_wrap > dt {
  opacity: 0;
  position: relative;
  padding: 10px 0 0;
  -webkit-transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
  -webkit-transform: translateY(20px); 
      -ms-transform: translateY(20px); 
          transform: translateY(20px);
  letter-spacing: 0.05em;
  color: #000;
  font-size: 11px;
  font-weight: bold;
}
@media (min-width: 768px) {
  .section_contents .desc_wrap > dt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 31px 0;
    width: 100px;
    font-size: 14px;
    line-height: 1.15;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
  }
}
.section_contents .desc_wrap > dt.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.section_contents .desc_wrap > dt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
}
.section_contents .desc_wrap > dd {
  display: -ms-grid;
  display: grid;
  opacity: 0;
  position: relative;
  padding: 6px 0 24px;
  -webkit-transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.2s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
  -webkit-transform: translateY(20px); 
      -ms-transform: translateY(20px); 
          transform: translateY(20px);
  letter-spacing: 0.2em;

  row-gap: 5px;
}
@media (min-width: 768px) {
  .section_contents .desc_wrap > dd {
    padding: 31px 0 31px 60px;
    width: calc(100% - 100px);
    line-height: 2; 

    -ms-grid-columns: 420px 1fr; 

        grid-template-columns: 420px 1fr;
    row-gap: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.section_contents .desc_wrap > dd.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.section_contents .desc_wrap > dd::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
}
.section_contents .desc_wrap > dd .conduct_desc_en {
  letter-spacing: 0.05em;
  font-size: 16px;
  font-weight: 500; 
  line-height: 1.15;
}
@media (min-width: 768px) {
  .section_contents .desc_wrap > dd .conduct_desc_en {
    letter-spacing: 0.08em; 
    font-size: 28px;
  }
}
.section_contents .desc_wrap > dd .conduct_desc_en::first-letter {
  letter-spacing: 0.06em;
  font-size: 20px;
  font-weight: 900;
}
@media (min-width: 768px) {
  .section_contents .desc_wrap > dd .conduct_desc_en::first-letter {
    letter-spacing: 0.09em; 
    font-size: 36px;
  }
}
.section_contents .desc_wrap > dd .conduct_desc_ja {
  text-indent: 0; 
  letter-spacing: 0.05em;
  font-size: 11px;
}
@media (min-width: 768px) {
  .section_contents .desc_wrap > dd .conduct_desc_ja {
    font-size: 14px;
  }
}

.object {
  position: absolute;
  z-index: 1; 
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
  max-width: 1366px;
  height: 100%;
  pointer-events: none;
}
.object img {
  position: absolute;
}
.object .obj01 {
  top: 12%; 
  left: 11%;
}
@media (max-width: 767.98px) {
  .object .obj01 {
    top: 12%;
    left: 2%; 
    width: 62px;
  }
}
.object .obj02 {
  top: 28%;
  right: 5%;
}
@media (max-width: 767.98px) {
  .object .obj02 {
    display: none;
  }
}
.object .obj03 {
  top: 43%;
  right: 10%;
}
@media (max-width: 767.98px) {
  .object .obj03 {
    top: 19%;
    right: 1%; 
    width: 66px;
  }
}
.object .obj04 {
  top: 39.5%;
  left: 25%;
  width: 24px;
}
@media (max-width: 767.98px) {
  .object .obj04 {
    top: 33%; 
    left: 7%;
    width: 15px;
  }
}
.object .obj05 {
  top: 85%;
  right: 5%;
}
@media (max-width: 767.98px) {
  .object .obj05 {
    top: 78%;
    right: unset;
    left: 7%;
    width: 23px;
  }
}
.object .obj06 {
  bottom: -7%;
  left: 2%;
}
@media (max-width: 767.98px) {
  .object .obj06 {
    right: 1%;
    bottom: -12%;
    left: unset;
    width: 50px;
  }
}
.object .obj07 {
  top: 70%;
  right: unset; 
  left: 8%;
}
@media (max-width: 767.98px) {
  .object .obj07 {
    top: 50%;
    right: 1%;
    left: unset;
    width: 30px;
  }
}