.alert{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100dvw;
  height: 100dvh;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 1000;
}
.alert__inner{
  max-width: 350px;
  width: 100%;
  max-height: 450px;
  height: 100%;

  border: solid 1px var(--black);

  background-color: var(--white);
}
  .alert__wrapper{
    width: 100%;
    height: 100%;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
    .alert__wrapper .alert__close{
      position: absolute;
      top: 10px;
      right: 10px;

      width: 20px;
      height: 20px;
    }
      .alert__wrapper .alert__close img{
        width: 100%;
        height: 100%;
      }
    .alert__wrapper .alert__conatiner{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 50px;
    }
      .alert__wrapper .alert__conatiner .logo{
        height: var(--accent-font-sise);
      }
        .alert__wrapper .alert__conatiner .logo img{
          height: 100%;
        }
      .alert__wrapper .alert__conatiner .desc{
        text-align: left;
      }
        .alert__wrapper .alert__conatiner .desc p{
          font-size: var(--desc-font-sise);
        }
      .alert__wrapper .alert__conatiner .btns{
        display: flex;
        flex-direction: column;
        gap: 15px;
      }
        .alert__wrapper .alert__conatiner .btns a{
          width: 220px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
          .alert__wrapper .alert__conatiner .btns a p{
            font-size: var(--default-font-sise);
          }
        .alert__btns__black{
          background-color: var(--black);
        }
          .alert__btns__black p{
            color: var(--white);
          }
        .alert__btns__white{
          background-color: var(--white);
          border: solid 1px var(--black);
        }
          .alert__btns__white p{
            color: var(--black);
          }

.hero{
  position: fixed;
  top: 0;
  left: 0;

  width: 100dvw;
  height: 100dvh;
}
  .hero__inner{
    width: 100%;
    height: 100%;
  }
    .hero__container{
      position: relative;
      width: 100%;
      height: 100%;
    }
      .hero__icon__wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 1;
      }
        .hero__icon__wrapper a{
          color: var(--black);
        }
          .hero__icon__wrapper a h3{
            font-size: 100px;
            font-family: var(--second-font-family);
            transition: color 0.3s ease;
          }
      .hero__visual__wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);

        width: 100%;
        height: 100%;
      }
        .hero__visual__wrapper .hero__visual__list{
          width: 100%;
          height: 100%;
        }
          .hero__visual__wrapper .hero__visual__list .visual-box{
            display: none;
            width: 100%;
            height: 100%;
            background-color: transparent;
          }
          .hero__visual__wrapper .hero__visual__list .visual-box#default{
            background-color: var(--red);
          }
          .hero__visual__wrapper .hero__visual__list .visual-box.active{
            display: block;
          }
            .hero__visual__wrapper .hero__visual__list .visual-box img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
.modals{
}
  .modal{
    position: fixed;
    /* background-color: black; */
    left: calc(100dvw - 50px);
    transition: none;
    overflow-x: hidden;
    z-index: 10;
    width: calc(100dvw + 50px);
  }
  .modal__company{
    height: fit-content;

    bottom: 260px;
  }
  .modal__mail{
    height: 40px;

    bottom: 200px;
  }
  .modal__news{
    height: 40px;

    bottom: 140px;
  }
  .modal__recruit{
    height: 40px;

    bottom: 80px;
  }
    .modal .modal__inner{
      /* padding: 10px 15px; */
      box-sizing: border-box;
      /* background-color: var(--black); */
    }
      .modal .modal__inner .modal__toggle{
        padding: 10px 12px;
        width: 44px;
        height: 40px;

        transition: border-radius 0.2s ease;
        border-radius: 20px;
        background-color: var(--black);
      }
      .modal__company .modal__inner .modal__toggle{
        width: 50px;
        height: fit-content;
        border-radius: 0;
      }
        .modal .modal__inner .modal__toggle a{
          width: 100%;
          height: 100%;

          display: flex;
          align-items: center;
          justify-content: center;
        }
          .modal .modal__inner .modal__toggle a p{
            font-size: var(--accent-font-sise);
            font-family: var(--default-font-family);
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            color: var(--white);
            white-space: nowrap;
          }
          .modal .modal__inner .modal__toggle a img{
            width: 100%;
            height: 100%;
          }
      .modal__content {
        position: fixed;
        top: env(safe-area-inset-top, 0px);
        right: 0;

        width: 100dvw;
        height: 100dvh;

        opacity: 0;
        transition: opacity 0.6s ease;
        pointer-events: none;
        z-index: 1000;
      }
        .modal__content .modal__content__inner{
          position: relative;
          width: 100%;
          height: 100%;
        }
          .modal__content .modal__content__inner .modal__content__company__info{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            width: 95%;
            height: 95%;
          }
            .modal__content .modal__content__inner .modal__content__company__info h3{
              font-family: var(--default-font-family);
              font-size: var(--subtitle-font-sise);
              font-weight: normal;
              color: var(--white);
            }
          .modal__content .modal__content__inner .modal__content__mail{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);

            width: 100%;
            height: 100%;
          }
            .modal__content__mail__inner{
              position: relative;
              width: 100%;
              height: 100%;
            }
              .modal__content .modal__content__inner .modal__content__mail .modal__content__mail__form{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);

                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 40px;
              }
                .modal__content .modal__content__inner .modal__content__mail h5{
                  font-size: var(--accent-font-sise);
                  font-family: var(--default-font-family);
                  color: var(--white);
                  font-weight: bold;
                }
                .modal__content .modal__content__inner .modal__content__mail a{
                  width: 300px;
                  height: 50px;

                  display: flex;
                  justify-content: center;
                  align-items: center;

                  background-color: var(--white);
                }
                .modal__content .modal__content__inner .modal__content__mail a p{
                  font-size: var(--accent-font-sise);
                  font-family: var(--default-font-family);
                  color: var(--black);
                }
              .modal__content .modal__content__inner .modal__content__mail .modal__content__mail__logo{
                position: absolute;
                bottom: 15%;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
              }
                .modal__content .modal__content__inner .modal__content__mail img{
                  height: var(--accent-font-sise);
                }
          .modal__content .modal__content__inner .modal__content__news{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            width: 95%;
            height: 95%;

            overflow-x: hidden;
            overflow-y: scroll;
          }
            .modal__content__news .modal__content__news__list{
              width: 100%;
              height: auto;
              display: flex;
              flex-direction: column;
              gap: 10px;
            }
              .modal__content__news .modal__content__news__list li{
                width: 100%;
                height: fit-content;
              }
                .modal__content__news .modal__content__news__list li a{
                  width: 100%;
                  height: auto;

                  display: flex;
                  flex-direction: column;
                }
                  .modal__content__news .modal__content__news__list li h6{
                    width: fit-content;
                    position: relative;
                    font-size: var(--subtitle-font-sise);
                    font-weight: normal;
                    font-family: var(--default-font-family);
                    color: var(--white);
                    overflow: hidden; 
                  }
                      .modal__content__news .modal__content__news__list li h6::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        height: 1px;
                        width: 100%;
                        background-color: var(--white);
                        transform: scaleX(0);
                        transform-origin: left center;
                        transition: transform 0.3s ease;
                      }
                      .modal__content__news .modal__content__news__list li a:hover h6::after {
                        transform: scaleX(1);
                      }
                  .modal__content__news .modal__content__news__list li p{
                    font-size: var(--desc-font-sise);
                    font-weight: normal;
                    font-family: var(--default-font-family);
                    color: var(--white);
                  }
          .modal__content .modal__content__inner .modal__content__close{
            position: absolute;
            top: 2.5%;
            right: 2.5%;

            width: 25px;
            height: 25px;
          }
            .modal__content__close__btn{
              width: 100%;
              height: 100%;
            }
            .modal__content__close__btn img{
              width: 100%;
              height: 100%;
            }
  /* active */
/* ステップ1：左へスライド（0.6s） */
.modal.expand-step1 {
  left: -40px;
  transition: left 0.6s ease;
}

/* ステップ2-1：横幅拡大（0.6s） */
.modal.expand-step2-x {
  width: calc(100dvw + 50px);
  transition: width 0.6s ease;
}

/* ステップ2-2：縦幅拡大（1s） */
.modal.expand-step2-y {
  height: 130dvh;
  top: 0;
  transition: height 1s ease, top 1s ease;
}

/* ステップ3：コンテンツ表示（0.6s） */
.modal__content {
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.modal.show-content .modal__content {
  opacity: 1;
  pointer-events: auto;
}
      .modal.show-content .modal__content {
        opacity: 1;
        pointer-events: auto;
      }
.modal,
.modal .modal__inner {
  background-color: transparent;
  transition: background-color 0.1s ease 0.2s; /* 0.2s遅延後に0.1秒でフェード */
}

.modal.bg-black,
.modal.bg-black .modal__inner {
  background-color: var(--black);
}
.modal.radius-zero .modal__inner .modal__toggle {
  border-radius: 0;
}









@media screen and (max-width: 440px){
      .hero__icon__wrapper a h3{
        font-size: 80px;
      }

  .modal{
    left: calc(100vw - 40px);
    width: calc(100vw + 40px);
  }
  .modal:hover{
    left: calc(100vw - 40px);
  }
  .modal__company{
    bottom: 210px;
  }
  .modal__mail{
    height: 30px;
    bottom: 160px;
  }
  .modal__news{
    height: 30px;
    bottom: 110px;
  }
  .modal__recruit{
    height: 30px;
    bottom: 60px;
  }
    .modal .modal__inner{
    }
      .modal .modal__inner .modal__toggle{
        width: 36px;
        height: 30px;
        padding: 7px 10px;
        border-radius: 15px;
      }
      .modal__company .modal__inner .modal__toggle{
        width: 40px;
        height: fit-content;
        border-radius: 0;
      }
          .modal .modal__inner .modal__toggle a p{
            font-size: var(--default-font-sise);
          }
                .modal__content .modal__content__inner .modal__comtent__company__info h3{
                  font-size: var(--accent-font-sise);
                  line-height: var(--accent-font-sise);
                }
              .modal__content .modal__content__inner .modal__content__close{
                position: absolute;
                top: 2.5%;
                right: 2.5%;

                width: 20px;
                height: 20px;
              }
          .modal__content .modal__content__inner .modal__comtent__mail{
          }
            .modal__content .modal__content__inner .modal__comtent__mail .modal__comtent__mail__form{
              gap: 20px;
            }
                  .modal__content .modal__content__inner .modal__comtent__mail h5{
                    font-size: var(--default-font-sise);
                  }
                  .modal__content .modal__content__inner .modal__comtent__mail a{
                    width: 200px;
                    height: 40px;
                  }
                  .modal__content .modal__content__inner .modal__comtent__mail a p{
                    font-size: var(--default-font-sise);
                  }
                  .modal__content .modal__content__inner .modal__comtent__mail img{
                    height: var(--default-font-sise);
                  }
          .modal__content .modal__content__inner .modal__comtent__news{
          }
            .modal__comtent__news .modal__comtent__news__list{
            }
              .modal__comtent__news .modal__comtent__news__list li{
              }
                .modal__comtent__news .modal__comtent__news__list li a{
                }
                  .modal__comtent__news .modal__comtent__news__list li h6{
                    font-size: var(--accent-font-sise);
                  }
                  .modal__comtent__news .modal__comtent__news__list li p{
                    font-size: var(--desc-font-sise);
                  }
}