@charset "UTF-8";
.line-box {
  position: relative;
  width: 100%;
  height: 4vw; }
  .line-box > div {
    position: absolute; }

.line, .line2 {
  display: inline-block;
  width: 6.68vw;
  width: clamp(42px, 6.68vw, 128px);
  height: 1.4px;
  background: #fff;
  margin: 0 auto;
  /*animation-name:line;*/
  transform-origin: 0 0;
  transition: 0.3s;
  /*animation-fill-mode: forwards;*/
  transform: scale(0, 1);
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-play-state: running; }
  @media (max-width: 768px) {
    .line, .line2 {
      width: clamp(56px, 9.6vw, 80px); } }

.item01 {
  position: absolute;
  top: -10%;
  left: 40%;
  transform: rotate(68deg); }
  .item01 .line {
    animation-name: line;
    animation-delay: 0.8s; }

.item02 {
  position: absolute;
  top: 17%;
  left: 40%;
  transform: rotate(-180deg); }
  .item02 .line {
    animation-name: line-short !important;
    animation-delay: 1.4s; }

.item03 {
  position: absolute;
  top: 48%;
  left: 41%;
  transform: rotate(135deg); }
  @media (max-width: 768px) {
    .item03 {
      top: 48%; } }
  @media (max-width: 414px) {
    .item03 {
      top: 44%; } }
  .item03 .line {
    animation-delay: 2.6s;
    animation-name: line-short !important; }

.item04 {
  top: -60%;
  left: 48%;
  transform: rotate(45deg); }
  .item04 .line.is-draw {
    animation-delay: 4.2s;
    animation-name: line !important; }
  .item04 .line2.is-draw2 {
    animation-delay: 0s;
    animation-name: line !important; }
  @media (max-width: 768px) {
    .item04 {
      top: -100%;
      left: 45%; } }
  @media (max-width: 414px) {
    .item04 {
      top: -200%; } }

.item05 {
  top: 0;
  left: 50%;
  transform: rotate(135deg); }
  .item05 .line.is-draw {
    animation-name: line-short !important; }
  @media (max-width: 768px) {
    .item05 .line {
      display: none; } }

.item06 {
  top: -60%;
  left: 46%;
  transform: rotate(135deg); }
  @media (max-width: 768px) {
    .item06 {
      left: 43%;
      top: -120%; } }
  @media (max-width: 414px) {
    .item06 {
      top: -20%; } }
  .item06 .line.is-draw {
    animation-name: line-short !important; }

.item07 {
  top: -50%;
  left: 49%;
  transform: rotate(45deg); }
  @media (max-width: 768px) {
    .item07 {
      top: -100%; } }
  @media (max-width: 414px) {
    .item07 {
      top: -25%; } }
  .item07 .line.is-draw {
    animation-delay: 0.2s;
    animation-name: line !important; }

.item08 {
  top: 0%;
  left: 50%;
  transform: rotate(45deg); }
  .item08 .line.is-draw {
    animation-name: line !important; }
  @media (max-width: 414px) {
    .item08 {
      left: 45%; } }

.item09 {
  top: 34%;
  left: 46%;
  transform: rotate(158deg); }
  .item09 .line.is-draw {
    animation-delay: 0.4s;
    animation-name: line-harf !important; }
  @media (max-width: 414px) {
    .item09 {
      top: 10%;
      left: 38%; } }

.item10 {
  top: -40%;
  left: 48%;
  transform: rotate(45deg); }
  .item10 .line.is-draw {
    background: #01B5D0;
    animation-name: line;
    animation-delay: 0s; }

.item11 {
  top: 20%;
  left: 44%;
  transform: rotate(135deg); }
  .item11 .line.is-draw {
    background: #01B5D0;
    animation-name: line-harf !important;
    animation-delay: 0.4s; }
  @media (max-width: 414px) {
    .item11 {
      top: -30%;
      left: 41%; } }

.item12 {
  top: 30%;
  left: 50%;
  transform: rotate(45deg); }
  .item12 .line.is-draw {
    background: #01B5D0;
    animation-name: line-harf; }

.item13 {
  position: absolute;
  top: 45%;
  left: 2%;
  transform: rotate(-45deg); }
  .item13 .line {
    width: 11.5vw; }
  .item13 .line.is-draw {
    background: #01B5D0;
    animation-delay: 0.5s; }

.item14 {
  position: absolute;
  top: 37%;
  left: 35%;
  transform: rotate(45deg); }
  .item14 .line {
    width: 11.5vw; }
  .item14 .line.is-draw {
    background: #01B5D0; }

.item15 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(0deg) translate(-50%, -50%); }
  .item15 .line {
    width: 10.5vw; }
  .item15 .line.is-draw {
    background: #01B5D0; }
  @media (max-width: 414px) {
    .item15 {
      top: 60%; } }

/* 動き設定 */
@keyframes line {
  0% {
    transform: scale(0, 1); }
  100% {
    transform: scale(1, 1); } }
@keyframes line-short {
  0% {
    transform: scale(0, 1); }
  100% {
    transform: scale(0.8, 1); } }
@keyframes line-harf {
  0% {
    transform: scale(0, 1); }
  100% {
    transform: scale(0.5, 1); } }
@keyframes line-long {
  0% {
    transform: scale(0, 1); }
  100% {
    transform: scale(1.25, 1); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 8%, 0); }
  100% {
    opacity: 1;
    transform: none; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.fiu, .fiu2, .fiu3 {
  opacity: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transition: 1s;
  animation-play-state: running; }

/*.line-box.is-show .line{
    animation-name:line;
}*/
.fiu.is-show {
  animation-name: fadeInUp; }

.fiu2.is-show2 {
  animation-name: fadeIn; }

.fiu3.is-show2 {
  animation-name: fadeInUp; }

/*.line.is-draw {
  animation-name: line-short; }*/
main {
  background: #000; }

.sec_01 {
  background: url("../image/about/bg_about_01.jpg") no-repeat top center;
  background-size: 100%; }
  @media (max-width: 768px) {
    .sec_01 {
      background: url("../image/about/bg_about_01.jpg") no-repeat top center;
      background-size: 120%; } }
  @media (max-width: 560px) {
    .sec_01 {
      background: url("../image/about/bg_about_01.jpg") no-repeat top center;
      background-size: 768px; } }

.sec_02 {
  background: url("../image/about/bg_about_02.jpg") no-repeat bottom center;
  background-size: 100%; }
  @media (max-width: 560px) {
    .sec_02 {
      background-size: 768px;
      background-position: 75% bottom; } }

.sec_03 {
  background-color: #000; }

.sec_04 {
  background: url("../image/about/bg_about_03.jpg") no-repeat top center;
  background-color: #fff;
  background-size: 100%; }

.sec_05 {
  background-color: #fff; }

.sec .heading {
  margin-bottom: 1.5vw;
  font-size: 26px; }
  @media (max-width: 1400px) {
    .sec .heading {
      font-size: clamp(20px, 2vw, 26px); } }
  @media (max-width: 768px) {
    .sec .heading {
      font-size: 18px; } }
  .sec .heading.en {
    font-size: 30px;
    font-size: clamp(18px, 2.2vw, 30px); }
    @media (max-width: 768px) {
      .sec .heading.en {
        font-size: 16px; } }
.sec .paragraph {
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: clamp(2.2, 2.4, 2.8); }
  .sec .paragraph.en {
    font-size: clamp(12px, 1.1vw, 17px); }
.sec .content-jp,
.sec .content-en {
  position: relative;
  color: #fff; }
  @media (max-width: 1024px) {
    .sec .content-jp,
    .sec .content-en {
      padding: 0 15px; } }
  @media (max-width: 768px) {
    .sec .content-jp,
    .sec .content-en {
      width: 100%; } }
  @media (max-width: 414px) {
    .sec .content-jp,
    .sec .content-en {
      padding: 0 15px; } }
  .sec .content-jp .paragraph,
  .sec .content-en .paragraph {
    color: #fff; }
@media (max-width: 1400px) {
  .sec .content-jp {
    padding-left: 15px; } }
@media (max-width: 768px) {
  .sec .content-jp {
    text-align: left !important;
    width: 100% !important; } }
@media (max-width: 1400px) {
  .sec .content-en {
    padding-right: 15px; } }
@media (max-width: 768px) {
  .sec .content-en {
    display: none; } }
.sec.sec_05 .paragraph {
  color: #595757; }

@media (max-width: 1400px) {
  .del-1400 {
    display: none; } }

@media (max-width: 1024px) {
  .del-1024 {
    display: none; } }

@media (max-width: 768px) {
  .del-768 {
    display: none; } }

.sec_01 {
  padding-bottom: 2vw; }
  @media (max-width: 768px) {
    .sec_01 {
      padding-bottom: 0; } }
  .sec_01 .heroArea {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 66vw; }
    @media (max-width: 768px) {
      .sec_01 .heroArea {
        height: 77vw;
        min-height: 500px; } }
    .sec_01 .heroArea .catchcopy {
      aspect-ratio: 1/0.48;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 768px) {
        .sec_01 .heroArea .catchcopy {
          aspect-ratio: 1/0.75; } }
      @media (max-width: 414px) {
        .sec_01 .heroArea .catchcopy {
          width: 94%; } }
      .sec_01 .heroArea .catchcopy h1 {
        color: #fff;
        font-size: 26px;
        font-size: clamp(18px, 2.4vw, 26px);
        letter-spacing: 0.29rem;
        font-weight: normal;
        margin-left: 10vw; }
        @media (max-width: 1024px) {
          .sec_01 .heroArea .catchcopy h1 {
            font-size: clamp(18px, 2vw, 26px); } }
        @media (max-width: 768px) {
          .sec_01 .heroArea .catchcopy h1 {
            font-size: 18px; } }
        .sec_01 .heroArea .catchcopy h1 span {
          animation-delay: 2.0s; }
          .sec_01 .heroArea .catchcopy h1 span.en {
            animation-delay: 3.2s; }
        .sec_01 .heroArea .catchcopy h1 .en {
          text-align: center;
          display: block;
          font-size: 30px;
          font-size: clamp(18px, 2.2vw, 30px);
          letter-spacing: 0.09rem;
          line-height: 1.5;
          font-weight: 400;
          margin-top: 6.2vw;
          text-indent: 17vw; }
          @media (max-width: 1024px) {
            .sec_01 .heroArea .catchcopy h1 .en {
              font-size: clamp(22px, 2.4vw, 30px); } }
          @media (max-width: 768px) {
            .sec_01 .heroArea .catchcopy h1 .en {
              font-size: 18px;
              text-align: right;
              text-indent: 0;
              margin-top: 7.4vw; } }
          @media (max-width: 414px) {
            .sec_01 .heroArea .catchcopy h1 .en {
              width: 80%;
              margin-left: auto;
              margin-top: 12vw;
              text-align: left; } }
  .sec_01 .content-jp {
    width: 56vw;
    text-align: right; }
    .sec_01 .content-jp.fiu.is-show {
      animation-delay: 4.5s; }
    .sec_01 .content-jp.fiu3.is-show2 {
      animation-delay: 0.1s; }
    @media (max-width: 1400px) {
      .sec_01 .content-jp {
        width: 65vw; } }
    @media (max-width: 768px) {
      .sec_01 .content-jp {
        width: 100%;
        text-align: left;
        max-width: 100%; } }

.sec_02 {
  display: flex;
  flex-direction: column;
  align-items: end;
  aspect-ratio: 12 / 10; }
  @media (max-width: 560px) {
    .sec_02 {
      aspect-ratio: 4 / 5.6; } }
  @media (max-width: 414px) {
    .sec_02 {
      aspect-ratio: 9 / 16; } }
  .sec_02 .content-en {
    width: 60vw;
    padding-right: 6vw; }

.sec_03 {
  padding-bottom: 3vw; }
  @media (max-width: 768px) {
    .sec_03 {
      padding-bottom: 0; } }
  .sec_03 .content-jp {
    width: 53vw;
    text-align: right; }
  .sec_03 .line-box {
    margin-bottom: 10px; }
    @media (max-width: 414px) {
      .sec_03 .line-box {
        height: 10vw; } }

.sec_04 {
  display: flex;
  flex-direction: column;
  align-items: end;
  aspect-ratio: 8 / 9; }
  @media (max-width: 560px) {
    .sec_04 {
      aspect-ratio: 1 / 1.2; } }
  @media (max-width: 414px) {
    .sec_04 {
      margin-top: -70px;
      padding-top: 150px; } }
  @media (max-width: 768px) {
    .sec_04 .line-box {
      height: 8vw; } }
  @media (max-width: 414px) {
    .sec_04 .line-box {
      height: 12vw; } }
  .sec_04 .content-en {
    width: 51vw;
    padding-right: 5vw; }
    .sec_04 .content-en .paragraph.en {
      padding-bottom: 60px; }

.sec_05 {
  padding-bottom: 10vw; }
  @media (max-width: 768px) {
    .sec_05 .line-box {
      height: 8vw; } }
  @media (max-width: 414px) {
    .sec_05 .line-box {
      height: 12vw; } }
  .sec_05 .content-jp {
    width: 52vw;
    text-align: right; }
    .sec_05 .content-jp.fiu.is-show {
      animation-delay: 0.6s; }
    @media (max-width: 768px) {
      .sec_05 .content-jp + .line-box {
        display: none; } }
  .sec_05 .content-en {
    padding-left: 46vw; }
    .sec_05 .content-en .paragraph.en {
      padding-bottom: 60px; }
  .sec_05 .logo-wrap {
    position: relative;
    text-align: center; }
    .sec_05 .logo-wrap.fiu {
      opacity: 1; }
    .sec_05 .logo-wrap.fiu.is-show2 .item13 .line {
      animation-delay: 0s;
      animation-name: line; }
    .sec_05 .logo-wrap.fiu.is-show2 .item14 .line {
      animation-delay: 0.5s;
      animation-name: line; }
    .sec_05 .logo-wrap.fiu.is-show2 .item15 .line {
      animation-delay: 1.0s;
      animation-name: line; }
    .sec_05 .logo-wrap .lineset {
      position: relative;
      width: 20vw;
      height: 12vw;
      margin: 0 auto 20px;
      aspect-ratio: 20/12; }
      @media (max-width: 768px) {
        .sec_05 .logo-wrap .lineset {
          width: 40vw;
          height: 20vw;
          height: auto; }
          .sec_05 .logo-wrap .lineset .line {
            width: 23vw; } }
    .sec_05 .logo-wrap strong {
      display: inline-block; }
    .sec_05 .logo-wrap .en {
      font-size: 30px;
      font-size: clamp(20px, 1.8vw, 30px);
      color: #13768D;
      font-weight: 400;
      letter-spacing: 0.2 0.2rem; }
    .sec_05 .logo-wrap .jp {
      color: #01B5D0;
      font-size: 48px;
      font-size: clamp(26px, 3.2vw, 52px);
      font-weight: normal;
      letter-spacing: 2.2rem;
      letter-spacing: clamp(1rem, 1.5vw, 2.2rem);
      margin-bottom: 5vw;
      text-indent: 0.6rem; }
    .sec_05 .logo-wrap .logo img {
      width: 30vw;
      max-width: 230px; }

.sec_05 .logo-wrap.fiu .en,
.sec_05 .logo-wrap.fiu .jp,
.sec_05 .logo-wrap.fiu .logo {
  opacity: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transition: 1s;
  animation-play-state: running; }

.sec_05 .logo-wrap.fiu.is-show2 .en,
.sec_05 .logo-wrap.fiu.is-show2 .jp,
.sec_05 .logo-wrap.fiu.is-show2 .logo {
  animation-delay: 1.5s;
  animation-name: fadeInUp; }