@-webkit-keyframes fade-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes rotate-anim {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate-anim {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes marquee {
    0% {
        translate: 0
    }

    100% {
        translate: calc(-100% - 1em)
    }
}

@keyframes marquee {
    0% {
        translate: 0
    }

    100% {
        translate: calc(-100% - 1em)
    }
}

@-webkit-keyframes marquee-vertical {
    0% {
        -webkit-transform: translateY(calc(-100% - 1em));
        transform: translateY(calc(-100% - 1em))
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes marquee-vertical {
    0% {
        -webkit-transform: translateY(calc(-100% - 1em));
        transform: translateY(calc(-100% - 1em))
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes stroke_circle_anim {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes stroke_circle_anim {
    to {
        stroke-dashoffset: 0
    }
}

.animate.fade-up {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-animation: fade-up 1s ease forwards;
    animation: fade-up 1s ease forwards
}

.kv__top {
    background: url("/wp-content/themes/aishin_recruit_wp/assets/images/common/page_kv_bg.png") no-repeat;
    background-size: cover
}

@media screen and (max-width: 767px) {
    .kv__top {
        background: url("/wp-content/themes/aishin_recruit_wp/assets/images/common/page_kv_bg_sp.png") no-repeat;
        background-size: cover
    }
}

.movie {
    padding: clamp(177.78px, 17.36vw, 333.33px) 0 clamp(99.56px, 9.72vw, 186.67px);
    background: #f4f4f4;
    position: relative;
    /*margin-bottom: clamp(145.78px, 14.24vw, 273.33px)*/
}

@media screen and (max-width: 767px) {
    .movie {
        padding: 37.3vw 1.6vw 21.3vw;
        margin-bottom: 24vw
    }
}

.movie__container {
    max-width: clamp(860.44px, 84.03vw, 1613.33px);
    margin-left: auto;
    margin-right: auto
}

@media(max-width: clamp(860.44px, 84.03vw, 1613.33px)) {
    .movie__container {
        padding: 0 clamp(14.22px, 1.39vw, 26.67px)
    }
}

@media screen and (max-width: 767px) {
    .movie__container {
        max-width: 100%;
        padding-inline: 4.8vw
    }
}

.movie__header{
    margin-bottom: clamp(71.11px, 6.94vw, 133.33px)}

.movie__header__heading {
    margin-bottom: clamp(71.11px, 6.94vw, 133.33px)
}

@media screen and (max-width: 767px) {
    .movie__header__heading {
        margin-bottom: 6.4vw
    }
}

.movie__header__heading__en {
    position: absolute;
    right: 0;
    top: clamp(91.02px, 8.89vw, 170.67px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media screen and (max-width: 767px) {
    .movie__header__heading__en {
        right: -0.8vw;
        top: 20vw
    }
}


@media screen and (max-width: 767px) {
    .kv__bottom picture img{
        width: 100%;
    }
}




.movie__header__heading__en__large {
    color: #fff;
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    font-size: clamp(177.78px, 17.36vw, 333.33px);
    line-height: .8
}

@media screen and (max-width: 767px) {
    .movie__header__heading__en__large {
        font-size: 20.3vw;
        letter-spacing: normal
    }
}

.movie__header__heading__en__small {
    color: #31a784;
    font-family: "Archivo", sans-serif;
    font-weight: 500;
    font-size: clamp(23.47px, 2.29vw, 44px);
    letter-spacing: 0.02em;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl
}

@media screen and (max-width: 767px) {
    .movie__header__heading__en__small {
        position: relative;
        right: -4.8vw;
        font-size: 4.5vw;
        letter-spacing: normal
    }
}

.movie__header__heading__ja {
    /*font-family: "Noto Serif JP", serif;*/
    color: #6a6a6a;
    font-weight: 600;
    font-size: clamp(32px, 3.13vw, 60px);
    letter-spacing: 0.09em;
    position: relative;
    z-index: 0
}

@media screen and (max-width: 767px) {
    .movie__header__heading__ja {
        font-size: 6.7vw;
        letter-spacing: 0.08em;
    }
}

.mark{
    color: var(--color-main-dark)

}

.movie__content {
    position: relative;

}

@media all and (min-width: 768px)and (max-width: 1024px) {
    .movie__content__inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-column-gap: clamp(14.22px, 1.39vw, 26.67px);
        -moz-column-gap: clamp(14.22px, 1.39vw, 26.67px);
        column-gap: clamp(14.22px, 1.39vw, 26.67px)
    }
}

@media screen and (max-width: 767px) {
    .movie__content__inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

.movie__content__text p {
    font-weight: 500;
    margin-bottom: clamp(67.56px, 6.6vw, 126.67px);
    line-height: 2
}

@media screen and (max-width: 767px) {
    .movie__content__text p {
        font-size: 4.3vw;
        line-height: 1.75;
        margin-bottom: 8.8vw;
        letter-spacing: 0.06em;
    }
}

.movie__content__text img {
    position: relative;
    left: clamp(-142.22px, -13.89vw, -266.67px)
}

@media all and (min-width: 768px)and (max-width: 1024px) {
    .movie__content__text img {
        position: static
    }
}

@media screen and (max-width: 767px) {
    .movie__content__text img {
        left: -6.1vw
    }
}

.movie__content__image {
    position: absolute;
    bottom: 0;
    right: clamp(-142.22px, -13.89vw, -266.67px);
    width: clamp(366.22px, 35.76vw, 686.67px)
}

@media all and (min-width: 768px)and (max-width: 1024px) {
    .movie__content__image {
        position: static;
        width: clamp(426.67px, 41.67vw, 800px)
    }
}

@media screen and (max-width: 767px) {
    .movie__content__image {
        position: static;
        width: 100%;
        margin-bottom: 10.7vw
    }
}

.product__container,
.people__container {
    max-width: clamp(860.44px, 84.03vw, 1613.33px);
    margin-left: auto;
    margin-right: auto
}

@media(max-width: clamp(860.44px, 84.03vw, 1613.33px)) {

    .product__container,
    .people__container {
        padding: 0 clamp(14.22px, 1.39vw, 26.67px)
    }
}

@media screen and (max-width: 767px) {

    .product__container,
    .people__container {
        max-width: 100%;
        padding-inline: 4.8vw
    }
}

.product__inner,
.people__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: clamp(58.31px, 5.69vw, 109.33px);
    -moz-column-gap: clamp(58.31px, 5.69vw, 109.33px);
    column-gap: clamp(58.31px, 5.69vw, 109.33px)
}

@media screen and (max-width: 767px) {

    .product__inner,
    .people__inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 1.3vw
    }
}

.product__image,
.people__image {
    width: clamp(323.56px, 31.6vw, 606.67px)
}

@media screen and (max-width: 767px) {

    .product__image,
    .people__image {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        width: 94.1vw;
        margin-bottom: 10.7vw
    }
}

.product__image img,
.people__image img {
    width: 100%
}

.product__text,
.people__text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (max-width: 767px) {

    .product__text,
    .people__text {
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        display: contents
    }
}

@media screen and (max-width: 767px) {

    .product__text__content,
    .people__text__content {
        display: contents
    }
}

.product__text__heading,
.people__text__heading {
    margin-bottom: clamp(35.56px, 3.47vw, 66.67px)
}

@media screen and (max-width: 767px) {

    .product__text__heading,
    .people__text__heading {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

.product__text__heading__en,
.people__text__heading__en {
    color: #4dbc9d;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: clamp(12.09px, 1.18vw, 22.67px);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.06em
}

@media screen and (max-width: 767px) {

    .product__text__heading__en,
    .people__text__heading__en {
        font-size: 4.5vw;
        line-height: .7;
        letter-spacing: 0.06em;
        position: relative;
        top: 1.9vw;
        width: 0
    }
}

.product__text__heading__ja,
.people__text__heading__ja {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    line-height: .8;
    font-size: clamp(27.02px, 2.64vw, 50.67px);
    letter-spacing: 0.19em
}

@media screen and (max-width: 767px) {

    .product__text__heading__ja,
    .people__text__heading__ja {
        font-size: 8.8vw;
        letter-spacing: 0.2em;
        white-space: nowrap
    }
}

.product__text__heading__ja__strong,
.people__text__heading__ja__strong {
    color: var(--color-main-dark);
    font-size: clamp(51.91px, 5.07vw, 97.33px);
    line-height: .8;
    letter-spacing: 0.1em
}

@media screen and (max-width: 767px) {

    .product__text__heading__ja__strong,
    .people__text__heading__ja__strong {
        font-size: 17.1vw;
        letter-spacing: 0.1em
    }
}

.product__text__heading__ja__larger,
.people__text__heading__ja__larger {
    font-size: clamp(32px, 3.13vw, 60px);
    letter-spacing: 0.16em
}

@media screen and (max-width: 767px) {

    .product__text__heading__ja__larger,
    .people__text__heading__ja__larger {
        font-size: 10.4vw;
        letter-spacing: 0.17em
    }
}

@media screen and (max-width: 767px) {

    .product__text__description,
    .people__text__description {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        font-size: 4.3vw;
        line-height: 1.75;
        margin-bottom: 8.5vw
    }
}

@media screen and (max-width: 767px) {

    .product__text__image,
    .people__text__image {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4
    }
}

.product {
    margin-bottom: clamp(170.67px, 16.67vw, 320px)
}

@media screen and (max-width: 767px) {
    .product {
        margin-bottom: 26.7vw
    }
}

.people {
    margin-bottom: clamp(142.22px, 13.89vw, 266.67px)
}

@media screen and (max-width: 767px) {
    .people {
        margin-bottom: 33.6vw
    }
}

.people__inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

@media screen and (max-width: 767px) {
    .people__inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media screen and (max-width: 767px) {
    .people__image {
        position: relative;
        left: -6.1vw
    }
}

@media screen and (max-width: 767px) {
    .people__text__heading {
        margin-left: auto
    }
}










  .movie__heading__h3 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 350px;
    flex-shrink: 0;
    row-gap: clamp(12px, 1vw, 15px);
    /*margin-bottom: clamp(71.11px, 6.94vw, 133.33px)*/
}

@media screen and (max-width: 767px) {
    .movie__heading__h3 {
    row-gap: 2.7vw;
    /*width: 100%;*/

    }
}

@media screen and (min-width: 1600px) {
    .movie__heading__h3 {
     width: 400px;
     row-gap: 1.5vw;

    }
}

.movie__heading__h3__en {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    white-space: nowrap;
    -webkit-column-gap: clamp(10.67px, 1.04vw, 20px);
    -moz-column-gap: clamp(10.67px, 1.04vw, 20px);
    column-gap: clamp(10.67px, 1.04vw, 20px);
    color: var(--color-main-dark);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: clamp(17.78px, 1.74vw, 33.33px);
    line-height: 1;
    letter-spacing: normal;
    padding-bottom: clamp(14.22px, 1.39vw, 26.67px);
    border-bottom: 1px solid #cacaca;
    /*padding-right: clamp(89.6px, 8.75vw, 168px);*/
    width: 350px;
}

@media screen and (max-width: 767px) {
    .movie__heading__h3__en {
        -webkit-column-gap: 2.7vw;
        -moz-column-gap: 2.7vw;
        column-gap: 2.7vw;
        font-size: 5.3vw;
        padding-right: 13.9vw;
        padding-bottom: 3.2vw
    }
}


.movie__heading__h3__en:before {
    content: "";
    display: block;
    width: clamp(18.49px, 1.81vw, 34.67px);
    height: clamp(15.64px, 1.53vw, 29.33px);
    background: url("/wp-content/themes/aishin_recruit_wp/assets/images/common/three-dots_color.svg") no-repeat;
    background-size: contain
}

@media screen and (max-width: 767px) {
    .movie__heading__h3__en:before {
        width: 4.8vw;
        height: 4vw
    }
}

.movie__heading__h3__ja {
    color: var(--color-main-dark);
    font-size: clamp(21.33px, 2.08vw, 40px);
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1em
}

@media screen and (max-width: 767px) {
    .movie__heading__h3__ja {
        font-size: 6.7vw;
        letter-spacing: 0.12em
    }
}

@media screen and (max-width: 767px) {
    .movie__heading__h3 {
        /*margin-bottom: 17.1vw*/
    }
}


.heading__block {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: nowrap;
  align-items: flex-start;
 

}

/* スマホ向け（幅が狭いときに縦並び） */
@media screen and (max-width: 768px) {
  .heading__block {
    flex-direction: column;
  }
}

/*.movie__iframe {
clear: both;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 2vh;
  height: 0;
  overflow: hidden;

}*/

.movie__iframe {
  max-width: 960px;
  margin: 0 auto;
}

.movie__iframe__wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9比率 → 9 ÷ 16 = 0.5625 */
  height: 0;
  overflow: hidden;
}

.movie__iframe__wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bg_white{
    padding: clamp(60px, 6vw, 250px) 0 clamp(99.56px, 9.72vw, 186.67px);
    background-color: #fff;
    margin-bottom: clamp(145.78px, 14.24vw, 273.33px)
}



@media screen and (max-width: 767px) {
    .bg_white {
        padding: 71.11px, 6.94vw, 133.33px;
        margin-bottom: 24vw
    }
}