@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap");
:root {
  --color1: #008CA1;
  --color2: #B2DCE2;
  --gray: #EBEBEB;
  --w6: itc-avant-garde-gothic-pro, "Hiragino Kaku Gothic W6 JIS2004", メイリオ, Meiryo, sans-serif;
  --w5: itc-avant-garde-gothic-pro, "Hiragino Kaku Gothic W5 JIS2004", メイリオ, Meiryo, sans-serif;
  --w4: itc-avant-garde-gothic-pro, "Hiragino Kaku Gothic W4 JIS2004", メイリオ, Meiryo, sans-serif;
  --w3: itc-avant-garde-gothic-pro, "Hiragino Kaku Gothic W3 JIS2004", メイリオ, Meiryo, sans-serif;
  --w0: itc-avant-garde-gothic-pro, "Hiragino Kaku Gothic W0 JIS2004", メイリオ, Meiryo, sans-serif;
  --roboto: 'Roboto Condensed', メイリオ, Meiryo, sans-serif; }

@media only screen and (max-width: 750px) {
  #headImageWrap .en {
    padding-top: 8rem;
    font-size: 6.8rem;
    line-height: 1; }
    #headImageWrap .en span {
      font-size: 4rem; } }

@media only screen and (max-width: 750px) {
  #headImageWrap .jp {
    margin-top: 2rem; } }

#mission {
  padding-bottom: 6rem; }
  @media only screen and (max-width: 750px) {
    #mission {
      padding-bottom: 30rem; } }
  #mission .scrollAnim.scrollUp {
    opacity: 0;
    transform: translateY(3rem); }
    #mission .scrollAnim.scrollUp.animated {
      opacity: 1;
      transform: translateY(0);
      transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
  #mission .scrollAnim.fadeIn {
    opacity: 0; }
    #mission .scrollAnim.fadeIn.animated {
      opacity: 1;
      transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
  #mission .sectionInner {
    max-width: 60rem;
    margin: auto;
    font-family: var(--w4);
    line-height: 1.5;
    letter-spacing: 0; }
    @media only screen and (max-width: 750px) {
      #mission .sectionInner {
        max-width: none;
        width: 64rem; } }
  #mission h2 {
    position: relative;
    margin-top: 11.5rem;
    color: var(--color1);
    font-size: 4rem;
    font-family: var(--w4);
    text-align: center;
    line-height: 1.2; }
    @media only screen and (max-width: 750px) {
      #mission h2 {
        margin-top: 22rem;
        font-size: 7rem; } }
    #mission h2:after {
      content: "";
      position: absolute;
      width: 0;
      height: 1px;
      left: 50%;
      bottom: 0;
      background: var(--color1);
      transform: translateX(-50%); }
      @media only screen and (max-width: 750px) {
        #mission h2:after {
          height: 2px; } }
    #mission h2.animated:after {
      width: 54rem;
      transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      @media only screen and (max-width: 750px) {
        #mission h2.animated:after {
          width: 100%; } }
  #mission p {
    font-family: var(--roboto); }
  #mission strong {
    font-family: inherit; }
  #mission .leadText {
    margin-block: 1.2rem 1.8rem;
    font-size: 2rem;
    font-family: var(--roboto);
    text-align: center;
    line-height: 1.8; }
    @media only screen and (max-width: 750px) {
      #mission .leadText {
        margin-block: 2.4rem 3.6rem;
        font-size: 3.4rem; } }
  #mission .borderWrap {
    position: relative; }
    #mission .borderWrap:before, #mission .borderWrap:after {
      content: "";
      position: absolute;
      background: var(--color1);
      transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
    #mission .borderWrap:before {
      width: 0;
      height: 1px;
      top: 0;
      left: 0; }
      @media only screen and (max-width: 750px) {
        #mission .borderWrap:before {
          height: 2px; } }
    #mission .borderWrap:after {
      width: 1px;
      height: 0;
      top: 0;
      right: 0;
      transition-delay: 0.2s; }
      @media only screen and (max-width: 750px) {
        #mission .borderWrap:after {
          width: 2px; } }
    #mission .borderWrap .borderInner {
      position: relative;
      width: 100%;
      height: 100%; }
      #mission .borderWrap .borderInner:before, #mission .borderWrap .borderInner:after {
        content: "";
        position: absolute;
        background: var(--color1);
        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      #mission .borderWrap .borderInner:before {
        width: 0;
        height: 1px;
        right: 0;
        bottom: 0;
        transition-delay: 0.4s; }
        @media only screen and (max-width: 750px) {
          #mission .borderWrap .borderInner:before {
            height: 2px; } }
      #mission .borderWrap .borderInner:after {
        width: 1px;
        height: 0;
        left: 0;
        bottom: 0;
        transition-delay: 0.6s; }
        @media only screen and (max-width: 750px) {
          #mission .borderWrap .borderInner:after {
            width: 2px; } }
      #mission .borderWrap .borderInner > * {
        opacity: 0;
        transform: translateY(3rem); }
    #mission .borderWrap.animated:before {
      width: 100%; }
    #mission .borderWrap.animated:after {
      height: 100%; }
    #mission .borderWrap.animated .borderInner:before {
      width: 100%; }
    #mission .borderWrap.animated .borderInner:after {
      height: 100%; }
    #mission .borderWrap.animated .borderInner > * {
      opacity: 1;
      transform: translateY(0);
      transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      transition-delay: 0.8s; }
  #mission #conceptMovie {
    width: 700px;
    margin: 80px auto 0; }
    #mission #conceptMovie .movieStage {
      position: relative;
      width: 100%;
      padding-top: 56.25%; }
      #mission #conceptMovie .movieStage iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0; }
  #mission .wordWrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center; }
    #mission .wordWrap:not(.row) {
      flex-direction: column;
      text-align: center;
      gap: 1rem; }
    #mission .wordWrap.row .wordSet {
      width: 4.5em;
      letter-spacing: 0.3rem; }
      @media only screen and (max-width: 750px) {
        #mission .wordWrap.row .wordSet {
          width: 100%; } }
    #mission .wordWrap.row .wordDescription {
      width: 22.5em; }
      @media only screen and (max-width: 750px) {
        #mission .wordWrap.row .wordDescription {
          width: 100%; } }
    #mission .wordWrap:nth-child(n+2) {
      margin-top: 4.4rem; }
      @media only screen and (max-width: 750px) {
        #mission .wordWrap:nth-child(n+2) {
          margin-top: 8.8rem; } }
  #mission .wordSet {
    font-size: 4.2rem; }
    @media only screen and (max-width: 750px) {
      #mission .wordSet {
        font-size: 8.4rem; } }
  #mission .wordDescription {
    color: var(--color1); }
    #mission .wordDescription p {
      font-size: 1.8rem;
      text-align: left; }
      @media only screen and (max-width: 750px) {
        #mission .wordDescription p {
          font-size: 3.2rem;
          text-align: center; } }
  #mission .section01 .borderWrap .borderInner {
    padding-block: 5rem; }
  @media only screen and (max-width: 750px) {
    #mission .section01 .borderWrap .wordWrap {
      flex-direction: column;
      gap: 2rem; } }
  #mission .section01 .borderWrap .wordSet {
    display: flex; }
    @media only screen and (max-width: 750px) {
      #mission .section01 .borderWrap .wordSet {
        justify-content: center; } }
    #mission .section01 .borderWrap .wordSet strong {
      display: block;
      position: relative;
      color: var(--color1);
      opacity: 0; }
      #mission .section01 .borderWrap .wordSet strong:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0.4rem;
        left: 0;
        bottom: 0.5rem;
        background: var(--color2); }
        @media only screen and (max-width: 750px) {
          #mission .section01 .borderWrap .wordSet strong:after {
            height: 0.8rem;
            bottom: 1rem; } }
    #mission .section01 .borderWrap .wordSet span {
      display: block;
      opacity: 0;
      transform: translateY(0.5em); }
  #mission .section01 .borderWrap .wordDescription {
    opacity: 0; }
  #mission .section01 .borderWrap.animated .wordSet strong {
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
    #mission .section01 .borderWrap.animated .wordSet strong:after {
      width: 100%;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      transition-delay: 1.5s; }
  #mission .section01 .borderWrap.animated .wordSet span {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(1) {
      transition-delay: 2s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(2) {
      transition-delay: 2.2s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(3) {
      transition-delay: 2.4s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(4) {
      transition-delay: 2.6s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(5) {
      transition-delay: 2.8s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(6) {
      transition-delay: 3s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(7) {
      transition-delay: 3.2s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(8) {
      transition-delay: 3.4s; }
    #mission .section01 .borderWrap.animated .wordSet span:nth-child(9) {
      transition-delay: 3.6s; }
  #mission .section01 .borderWrap.animated .wordDescription {
    opacity: 1;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition-delay: 3.5s; }
  #mission .section02 .borderWrap .borderInner {
    padding-block: 6rem; }
  #mission .section02 h3 {
    display: flex;
    margin-block: 3.5rem 1rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.3; }
    @media only screen and (max-width: 750px) {
      #mission .section02 h3 {
        margin-block: 7rem 2rem; } }
    #mission .section02 h3 .en {
      color: var(--color1);
      font-size: 2.9rem; }
      @media only screen and (max-width: 750px) {
        #mission .section02 h3 .en {
          font-size: 5.8rem; } }
    #mission .section02 h3 .jp {
      font-size: 1.4rem; }
      @media only screen and (max-width: 750px) {
        #mission .section02 h3 .jp {
          font-size: 2.8rem; } }
  @media only screen and (max-width: 750px) {
    #mission .section02 .wordWrap .wordSet {
      font-size: 5.2rem; } }
  #mission .section02 .wordList li {
    display: flex;
    justify-content: center; }
    @media only screen and (max-width: 750px) {
      #mission .section02 .wordList li {
        flex-direction: column;
        padding-inline: 4rem; } }
    #mission .section02 .wordList li:nth-child(n+2) {
      margin-top: 1.8rem; }
      @media only screen and (max-width: 750px) {
        #mission .section02 .wordList li:nth-child(n+2) {
          margin-top: 3.6rem; } }
    #mission .section02 .wordList li .wordSet {
      display: flex;
      width: 15em;
      font-size: 2.4rem;
      gap: 1rem; }
      @media only screen and (max-width: 750px) {
        #mission .section02 .wordList li .wordSet {
          flex-wrap: wrap;
          width: 100%;
          font-size: 3.6rem; } }
      #mission .section02 .wordList li .wordSet:before {
        content: attr(data-number) ".";
        flex-shrink: 0; }
    #mission .section02 .wordList li .wordDescription {
      width: 12em;
      font-size: 1.5rem; }
      @media only screen and (max-width: 750px) {
        #mission .section02 .wordList li .wordDescription {
          width: 100%;
          font-size: 3rem;
          text-align: left; } }
  #mission .section02 .mindTable {
    position: relative;
    width: 100%;
    font-size: 1.3rem;
    font-family: var(--roboto);
    border: 1px solid var(--color1); }
    @media only screen and (max-width: 750px) {
      #mission .section02 .mindTable {
        border-width: 2px;
        font-size: 2.2rem; } }
        #mission .section02 .mindTableWrap {
          position: relative;
        }
        #mission .section02 .mindTableWrap:before {
          content: "";
          position: absolute;
          width: 225px;
          height: 100%;
          top: 0;
          right: 0;
          background-image: linear-gradient( 43deg, rgb(56, 89, 167) 0%, rgb(45, 96, 169) 7%, rgb(23, 120, 174) 23%, rgb(0, 149, 172) 41%, rgb(55, 164, 184) 63%, rgb(103, 175, 193) 72.25%, rgb(200, 223, 230) 100% );
        }
    @media only screen and (max-width: 750px) {
        #mission .section02 .mindTableWrap:before {
        	width: 50%;
        }
    }
    @media only screen and (max-width: 750px) {
      #mission .section02 .mindTable tr {
        display: flex;
        flex-wrap: wrap; } }
    #mission .section02 .mindTable th, #mission .section02 .mindTable td {
      vertical-align: middle; }
      @media only screen and (max-width: 750px) {
        #mission .section02 .mindTable th, #mission .section02 .mindTable td {
          display: flex;
          text-align: center;
          align-items: center;
          justify-content: center; } }
    @media only screen and (max-width: 750px) {
      #mission .section02 .mindTable th {
        width: 100%;
        background: var(--gray); } }
    #mission .section02 .mindTable th + td {
      color: #000;
      border-right: 1px solid #fff;
      background: #D9D9D9; }
      @media only screen and (max-width: 750px) {
        #mission .section02 .mindTable th + td {
          border-width: 2px; } }
    #mission .section02 .mindTable td {
      color: #fff;
      background: none; }
      @media only screen and (max-width: 750px) {
        #mission .section02 .mindTable td {
          width: 50%; } }
    #mission .section02 .mindTable thead th, #mission .section02 .mindTable thead td {
      padding-block: 0.8rem 0.6rem;
      text-align: center;
      border-bottom: 2px solid var(--gray); }
    @media only screen and (max-width: 750px) {
      #mission .section02 .mindTable thead th {
        display: none; }
      #mission .section02 .mindTable thead td {
        padding-block: 1.6rem 1rem; } }
    #mission .section02 .mindTable tbody tr:not(:last-child) {
      border-bottom: 1px solid var(--gray); }
    #mission .section02 .mindTable tbody th, #mission .section02 .mindTable tbody td {
      padding: 0.6rem 1.5rem 0.2rem; }
    @media only screen and (min-width: 751px) {
      #mission .section02 .mindTable tbody th {
        text-align: left; } }
    #mission .section02 .mindTable tbody th:before {
      content: attr(data-number) ".";
      margin-right: 0.2rem; }
  #mission .section03 .arrow {
    margin-block: 3rem;
    font-size: 0;
    line-height: 0;
    text-align: center; }
    @media only screen and (max-width: 750px) {
      #mission .section03 .arrow {
        margin-block: 5rem; } }
    #mission .section03 .arrow:before {
      content: "";
      display: inline-block;
      border-style: solid;
      border-width: 2.5rem 1.7rem 0 1.7rem;
      border-color: var(--color1) transparent transparent transparent; }
      @media only screen and (max-width: 750px) {
        #mission .section03 .arrow:before {
          border-width: 5rem 3rem 0 3rem; } }
  #mission .section03 .leadText + .imgWrap {
    border-radius: 1.3rem;
    overflow: hidden; }
    @media only screen and (max-width: 750px) {
      #mission .section03 .leadText + .imgWrap {
        width: 69rem;
        margin-left: calc(-5rem / 2);
        border-radius: 2.6rem; } }
  #mission .section03 .borderWrap .borderInner {
    padding: 5.5rem 4.5rem; }
  #mission .section03 h3 {
    margin-bottom: 2rem;
    color: var(--color1);
    font-size: 2.5rem;
    text-align: center;
    line-height: 1.5; }
    @media only screen and (max-width: 750px) {
      #mission .section03 h3 {
        font-size: 4rem;
        margin-bottom: 4rem; } }
  #mission .section03 article {
    width: 42rem;
    margin: auto; }
    @media only screen and (max-width: 750px) {
      #mission .section03 article {
        width: 100%; } }
    #mission .section03 article + article {
      margin-top: 3.5rem; }
    #mission .section03 article h4 {
      padding-top: 0.5rem;
      color: #fff;
      font-size: 1.9rem;
      text-align: center;
      letter-spacing: 0.1rem;
      border-radius: 0.5rem;
      background: var(--color1); }
      @media only screen and (max-width: 750px) {
        #mission .section03 article h4 {
          padding-block: 0.6rem 0.3rem;
          font-size: 3.2rem;
          border-radius: 1rem; } }
    #mission .section03 article p {
      margin-block: 2rem 1.5rem;
      font-size: 1.3rem;
      text-align: center; }
      @media only screen and (max-width: 750px) {
        #mission .section03 article p {
          margin-block: 4rem 3rem;
          font-size: 2.8rem; } }
      #mission .section03 article p.attention {
        color: var(--color1);
        padding-left: 4rem;
        text-indent: -1rem;
        text-align: left; }
        @media only screen and (max-width: 750px) {
          #mission .section03 article p.attention {
            font-size: 2.2rem;
            padding-left: 8rem;
            text-indent: -2rem; } }
    #mission .section03 article dl {
      color: var(--color1); }
      #mission .section03 article dl dt {
        font-size: 1.1rem;
        text-align: center; }
        @media only screen and (max-width: 750px) {
          #mission .section03 article dl dt {
            font-size: 2.4rem; } }
        #mission .section03 article dl dt span {
          position: relative; }
          #mission .section03 article dl dt span:before, #mission .section03 article dl dt span:after {
            content: "";
            position: absolute;
            width: 3rem;
            height: 1px;
            top: calc(50% - 2px);
            background: var(--color1); }
            @media only screen and (max-width: 750px) {
              #mission .section03 article dl dt span:before, #mission .section03 article dl dt span:after {
                width: 6rem;
                height: 2px;
                top: calc(50% - 4px); } }
          #mission .section03 article dl dt span:before {
            right: calc(100% + 1rem); }
            @media only screen and (max-width: 750px) {
              #mission .section03 article dl dt span:before {
                right: calc(100% + 2rem); } }
          #mission .section03 article dl dt span:after {
            left: calc(100% + 1rem); }
            @media only screen and (max-width: 750px) {
              #mission .section03 article dl dt span:after {
                left: calc(100% + 2rem); } }
      #mission .section03 article dl dd {
        position: relative;
        margin-top: 1rem;
        padding-left: 3rem;
        color: var(--color1);
        font-size: 1.7rem;
        font-family: var(--roboto);
        text-align: left;
        letter-spacing: 0.1rem; }
        @media only screen and (max-width: 750px) {
          #mission .section03 article dl dd {
            margin-top: 2rem;
            font-size: 3.2rem;
            padding-left: 6rem; } }
        #mission .section03 article dl dd:before {
          content: "";
          position: absolute;
          top: calc(50% - 0.2rem);
          left: 0.5rem;
          border-style: solid;
          border-width: 0.5rem 0 0.5rem 0.7rem;
          border-color: transparent transparent transparent var(--color1);
          transform: translateY(-50%); }
          @media only screen and (max-width: 750px) {
            #mission .section03 article dl dd:before {
              left: 1rem;
              border-width: 1rem 0 1rem 1.4rem; } }
  #mission .section03 .futureWrap {
    padding-block: 4rem 4rem;
    color: #fff;
    text-align: center;
    border-radius: 1.5rem;
    background: linear-gradient( 43deg, rgb(56, 89, 167) 0%, rgb(45, 96, 169) 7%, rgb(23, 120, 174) 23%, rgb(0, 149, 172) 41%, rgb(55, 164, 184) 63%, rgb(103, 175, 193) 72.25%, rgb(200, 223, 230) 100% ); }
    @media only screen and (max-width: 750px) {
      #mission .section03 .futureWrap {
        padding-block: 8rem 10rem;
        border-radius: 3rem; } }
    #mission .section03 .futureWrap p {
      font-size: 1.8rem;
      letter-spacing: 0.1rem; }
      @media only screen and (max-width: 750px) {
        #mission .section03 .futureWrap p {
          font-size: 3.4rem;
          line-height: 1.8; } }
    #mission .section03 .futureWrap .future {
      display: flex;
      margin-top: 4rem;
      flex-direction: column;
      gap: 2rem; }
      @media only screen and (max-width: 750px) {
        #mission .section03 .futureWrap .future {
          margin-top: 6rem;
          gap: 6rem; } }
      #mission .section03 .futureWrap .future .en {
        font-size: 4.9rem;
        letter-spacing: 0.2rem; }
        @media only screen and (max-width: 750px) {
          #mission .section03 .futureWrap .future .en {
            font-size: 9.8rem;
            line-height: 1.3; } }
      #mission .section03 .futureWrap .future .jp {
        font-size: 3.5rem;
        letter-spacing: 0.3rem; }
        @media only screen and (max-width: 750px) {
          #mission .section03 .futureWrap .future .jp {
            font-size: 4.8rem; } }