@font-face {
  font-family: "tsunagi";
  src: url("../font/TsunagiGothic.woff") format("woff"); }
.anchor {
  display: block;
  position: relative;
  padding: 100px 0 0;
  margin: -100px 0 0;
  z-index: -9999;
  pointer-events: none; }

/*****************************************/
body {
  background: none; }

header {
  background-color: #fff; }

/*****************************************/
h2 {
  position: relative;
  padding: 0 0 0 25px;
  font: 2.4rem/1em "Prompt", sans-serif, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: 600;
  letter-spacing: 0.06em; }
  h2 span {
    padding: 5px 0 0;
    letter-spacing: 0;
    font: 1.6rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 700;
    display: block; }
  h2:before {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #F8C559;
    left: 0;
    top: 5px; }

/*****************************************/
.mv {
  width: 100%;
  height: calc(100vh - 90px);
  min-height: 660px;
  background: url("../images/recruit/mv.jpg") center center repeat;
  background-size: auto 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center; }
  .mv h1 {
    font: 4.2rem/1.8em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    width: calc(100% - 80px);
    margin: 0 auto 10px;
    text-align: center;
    text-shadow: 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A, 0 0 3px #79503A; }
    .mv h1 br {
      display: none; }
  .mv p {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../images/recruit/mv_txt.svg") center center no-repeat;
    background-size: contain;
    aspect-ratio: 981/179;
    width: calc(100% - 80px);
    max-width: 981px;
    height: auto; }

@media (max-width: 1280px) {
  .mv {
    min-height: 640px; }
    .mv h1 {
      font: 3.9rem/1.8em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700; }
    .mv p {
      width: calc(100% - 120px); } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .mv {
    height: 100%;
    min-height: 100%;
    aspect-ratio: 4/3.1;
    width: 100%;
    max-width: 100%; }
    .mv h1 {
      font: 3.8rem/1.5em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      width: calc(100% - 80px); }
      .mv h1 br {
        display: block; }
    .mv p {
      aspect-ratio: 981/179;
      width: calc(100% - 80px);
      max-width: 640px;
      height: auto; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .mv h1 {
    font: 2.8rem/1.5em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 700;
    width: calc(100% - 80px); }
    .mv h1 br {
      display: block; }
  .mv p {
    width: calc(100% - 40px); } }
/*max-width:768px*/
@media (max-width: 480px) {
  .mv h1 {
    font: 2.2rem/1.5em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 700;
    width: calc(100% - 40px); }
    .mv h1 br {
      display: block; }
  .mv p {
    aspect-ratio: 981/179;
    width: calc(100% - 30px);
    max-width: 640px;
    height: auto; } }
/*max-width:480px*/
/*****************************************/
.message {
  padding: 120px 0 45px; }
  .message .message_box {
    width: calc(100% - 200px);
    max-width: 1280px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .message .right {
    width: calc(100% - 590px);
    max-width: 640px; }
    .message .right p {
      font: 1.6rem/2.4em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 500;
      letter-spacing: 0.06em;
      margin: 0 0 20px;
      text-align: justify;
      text-justify: inter-ideograph; }
  .message .left {
    width: 583px; }
  .message h2 {
    margin-bottom: 55px; }
  .message .catchcopy {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../images/recruit/catch.svg") center center no-repeat;
    background-size: contain;
    aspect-ratio: 552/264;
    width: 100%;
    max-width: 552px;
    height: auto;
    margin: 0 0 50px; }
  .message img {
    display: block;
    margin: 0 auto; }

@media (max-width: 1280px) {
  .message {
    padding: 120px 0 45px; }
    .message .message_box {
      width: calc(100% - 200px);
      max-width: 1280px;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between; }
    .message .right {
      width: 55%;
      max-width: 640px; }
      .message .right p {
        font: 1.6rem/2.4em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 500;
        letter-spacing: 0.06em;
        margin: 0 0 20px;
        text-align: justify;
        text-justify: inter-ideograph; }
    .message .left {
      width: 40%; }
    .message h2 {
      margin-bottom: 55px; }
    .message .catchcopy {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      background: url("../images/recruit/catch.svg") center center no-repeat;
      background-size: contain;
      aspect-ratio: 552/264;
      width: 100%;
      max-width: 552px;
      height: auto;
      margin: 0 0 50px; }
    .message img {
      display: block;
      margin: 0 auto; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .message {
    padding: 120px 0 45px; }
    .message .message_box {
      width: calc(100% - 80px);
      max-width: 1280px;
      margin: 0 auto;
      display: block; }
    .message .right {
      width: 100%;
      max-width: 100%;
      margin: 0 auto; }
    .message .left {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      align-items: center;
      margin: 0 auto 40px; }
    .message h2 {
      width: 100%;
      margin-bottom: 55px; }
    .message .catchcopy {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      background: url("../images/recruit/catch.svg") center center no-repeat;
      background-size: contain;
      aspect-ratio: 552/264;
      width: 50%;
      max-width: 480px;
      height: auto;
      margin: 0 0 50px; }
    .message img {
      width: 50%;
      max-width: 280px;
      display: block;
      margin: 0 auto; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .message {
    padding: 100px 0 45px; }
    .message .catchcopy {
      width: 100%;
      max-width: 350px;
      height: auto;
      margin: 0 auto 30px; }
    .message img {
      width: 100%;
      max-width: 240px;
      display: block;
      margin: 0 auto; }
    .message .right p {
      font: 1.5rem/2.2em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 500; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .message {
    padding: 50px 0 45px; }
    .message .message_box {
      width: calc(100% - 40px); }
    .message .left {
      width: 100%;
      display: block;
      align-items: center;
      margin: 0 auto 40px; }
    .message h2 {
      width: 100%;
      margin-bottom: 20px; }
    .message .catchcopy {
      max-width: 300px;
      margin: 0 auto 20px; }
    .message img {
      max-width: 200px; } }
/*max-width:480px*/
/*****************************************/
.about {
  position: relative;
  padding: 100px 0 0 0; }
  .about .about_box {
    position: relative;
    z-index: 5;
    width: calc(100% - 200px);
    max-width: 1280px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between; }
  .about:before {
    position: absolute;
    content: "";
    display: block;
    width: 85%;
    height: calc(100% - 10%);
    left: 0;
    top: 0;
    background-color: #F9CC6E;
    border-radius: 0 100px 100px 0; }
  .about .left {
    width: 425px; }
    .about .left h2 {
      margin: 0 0 30px; }
      .about .left h2:before {
        background-color: #79503A; }
    .about .left ul {
      width: 100%;
      padding: 0 0 0 25px; }
    .about .left li {
      border-bottom: 1px solid #79503A; }
      .about .left li a {
        display: block;
        text-decoration: none;
        width: 100%;
        padding: 20px 50px 20px 0;
        font: 2rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        letter-spacing: 0.03em;
        transition: .3s;
        background: url("../images/common/icon_arrow02.svg") center right 10px no-repeat;
        background-size: 26px; }
  .about .right {
    width: calc(100% - 460px);
    max-width: 800px;
    height: auto;
    position: relative; }
    .about .right .about_yumeji {
      position: absolute;
      z-index: 10;
      display: block;
      aspect-ratio: 107/131;
      width: 100%;
      max-width: 200px;
      height: auto;
      right: -100px;
      bottom: 0; }
    .about .right .pic {
      overflow: hidden;
      width: 100%;
      height: 640px;
      border-radius: 100px;
      background: url("../images/recruit/about.jpg") center center no-repeat;
      background-size: cover;
      transition: .3s; }
      .about .right .pic.about01 {
        background: url("../images/recruit/about.jpg") center center no-repeat;
        background-size: cover; }
      .about .right .pic.about02 {
        background: url("../images/recruit/about02.jpg") center center no-repeat;
        background-size: cover; }
      .about .right .pic.about03 {
        background: url("../images/recruit/about03.jpg") center center no-repeat;
        background-size: cover; }
      .about .right .pic.about04 {
        background: url("../images/recruit/about04.jpg") center center no-repeat;
        background-size: cover; }
      .about .right .pic.about05 {
        background: url("../images/recruit/about05.jpg") center center no-repeat;
        background-size: cover; }
      .about .right .pic.about06 {
        background: url("../images/recruit/about06.jpg") center center no-repeat;
        background-size: cover; }

@media (max-width: 1280px) {
  .about .about_box {
    width: calc(100% - 100px);
    max-width: 1280px;
    margin: 0 0 0 auto; }
  .about .right .about_yumeji {
    width: 100%;
    max-width: 180px;
    height: auto;
    right: 0;
    bottom: 0; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .about {
    position: relative;
    padding: 0; }
    .about .about_box {
      position: relative;
      z-index: 5;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      display: block; }
    .about:before {
      display: none; }
    .about .left {
      padding: 100px 40px 150px;
      width: 100%;
      position: relative; }
      .about .left:before {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #F9CC6E; }
      .about .left h2 {
        margin: 0 0 30px; }
        .about .left h2:before {
          background-color: #79503A; }
      .about .left ul {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 640px;
        padding: 0 0 0 25px;
        margin: 0; }
    .about .right {
      position: relative;
      z-index: 10;
      width: 80%;
      max-width: 800px;
      margin: -100px auto 0; }
      .about .right .about_yumeji {
        width: 100%;
        max-width: 150px;
        height: auto;
        right: -40px;
        bottom: 0; }
      .about .right .pic {
        overflow: hidden;
        width: 100%;
        height: auto;
        aspect-ratio: 40/32;
        max-width: 800px;
        border-radius: 100px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .about .left {
    padding: 80px 40px 150px; }
  .about .right .about_yumeji {
    width: 100%;
    max-width: 100px;
    height: auto;
    right: -20px;
    bottom: 0; }
  .about .right .pic {
    margin: 0 auto;
    width: 85%;
    max-width: 480px;
    border-radius: 50px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .about {
    position: relative; }
    .about .left {
      padding: 50px 20px 150px; }
      .about .left ul {
        padding: 0; }
      .about .left li a {
        padding: 20px 0px 20px 0;
        font: 1.8rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        letter-spacing: 0.03em;
        background: url("../images/common/icon_arrow02.svg") center right 5px no-repeat;
        background-size: 22px; }
    .about .right .about_yumeji {
      width: 100%;
      max-width: 80px;
      height: auto;
      right: -20px;
      bottom: 0; }
    .about .right .pic {
      margin: 0 auto;
      width: 100%;
      max-width: 480px;
      border-radius: 20px; } }
/*max-width:480px*/
@media (hover: hover) {
  .about .left li a:hover {
    background: url("../images/common/icon_arrow02.svg") center right 5px no-repeat #FFECC4; } }
/*****************************************/
.recruit_menu {
  padding: 0 0 150px; }
  .recruit_menu ul {
    max-width: 1080px;
    width: calc(100% - 200px);
    margin: 0 auto 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: flex-start; }
  .recruit_menu li {
    width: calc((100% - 40px)/3);
    max-width: 300px; }
  .recruit_menu a {
    top: 0;
    transition: .3s;
    background-color: #ccc;
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-decoration: none;
    position: relative;
    overflow: hidden; }
    .recruit_menu a.nijimon {
      background: url("../images/recruit/nijimon_s.svg") center center no-repeat;
      background-size: contain; }
    .recruit_menu a.guideline {
      background: url("../images/recruit/guideline_s.svg") center center no-repeat;
      background-size: contain; }
    .recruit_menu a.form {
      background: url("../images/recruit/form_s.svg") center center no-repeat;
      background-size: contain; }
    .recruit_menu a p {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap; }
  .recruit_menu > p {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../images/recruit/catch.svg") center center no-repeat;
    background-size: contain;
    aspect-ratio: 552/264;
    width: 100%;
    max-width: 615px;
    height: auto;
    margin: 0 auto; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .recruit_menu {
    padding: 0 0 150px; }
    .recruit_menu ul {
      width: calc(100% - 80px); }
    .recruit_menu > p {
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      background: url("../images/recruit/catch.svg") center center no-repeat;
      background-size: contain;
      aspect-ratio: 552/264;
      width: calc(100% - 80px);
      max-width: 500px;
      height: auto;
      margin: 0 auto; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .recruit_menu {
    padding: 0 0 150px; }
    .recruit_menu ul {
      display: block; }
    .recruit_menu li {
      width: 100%;
      max-width: 480px;
      margin: 0 auto 20px; }
      .recruit_menu li a {
        aspect-ratio: none;
        width: 100%;
        max-width: 100%;
        height: 100px;
        text-decoration: none;
        border-radius: 15px; }
        .recruit_menu li a.nijimon {
          background-image: none;
          background-color: #FFDBDB;
          position: relative;
          padding: 0 0 0 65px; }
          .recruit_menu li a.nijimon:before {
            position: absolute;
            content: "";
            background: url("../images/recruit/nijimon_chan.svg") center center no-repeat;
            background-size: contain;
            width: 106px;
            height: 104px;
            right: -30px;
            bottom: -30px; }
          .recruit_menu li a.nijimon:after {
            position: absolute;
            content: "";
            background: url("../images/recruit/nijimon.svg") center center no-repeat;
            background-size: contain;
            left: 30px;
            width: 115px;
            height: 70px; }
          .recruit_menu li a.nijimon p {
            margin: 0 auto;
            color: #79503A;
            background: url("../images/common/icon_arrow02.svg") right center no-repeat;
            background-size: 30px; }
        .recruit_menu li a.guideline {
          padding: 0 0 0 65px;
          background-image: none;
          background-color: #D6674D; }
          .recruit_menu li a.guideline:after {
            position: absolute;
            content: "";
            background: url("../images/recruit/guideline.svg") center center no-repeat;
            background-size: auto 60px;
            left: 30px;
            width: 130px;
            height: 70px; }
        .recruit_menu li a.form {
          padding: 0 0 0 65px;
          background-image: none;
          background-color: #51B5C3; }
          .recruit_menu li a.form:after {
            position: absolute;
            content: "";
            background: url("../images/recruit/foam.svg") center center no-repeat;
            background-size: contain;
            left: 30px;
            width: 105px;
            height: 80px; }
      .recruit_menu li p {
        position: relative;
        z-index: 10;
        color: #fff;
        font: 2.4rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        overflow: inherit;
        text-indent: 0;
        white-space: inherit;
        padding: 5px 45px 5px 0;
        width: fit-content;
        display: block;
        background: url("../images/common/icon_arrow.svg") right center no-repeat;
        background-size: 30px; }
    .recruit_menu > p {
      max-width: 480px;
      height: auto;
      margin: 0 auto; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .recruit_menu {
    padding: 0 0 100px; }
    .recruit_menu ul {
      display: block;
      width: calc(100% - 40px); }
    .recruit_menu li {
      width: 100%;
      max-width: 315px;
      margin: 0 auto 20px; }
      .recruit_menu li a {
        aspect-ratio: none;
        width: 100%;
        max-width: 100%;
        height: 100px;
        text-decoration: none;
        border-radius: 15px; }
        .recruit_menu li a.nijimon {
          background-image: none;
          background-color: #FFDBDB;
          position: relative;
          padding: 0 0 0 75px; }
          .recruit_menu li a.nijimon:before {
            width: 100px;
            height: 80px;
            right: -30px;
            bottom: -20px; }
          .recruit_menu li a.nijimon:after {
            left: 25px;
            width: 95px;
            height: 70px; }
          .recruit_menu li a.nijimon p {
            margin: 0 auto;
            color: #79503A;
            background: url("../images/common/icon_arrow02.svg") right center no-repeat;
            background-size: 25px; }
        .recruit_menu li a.guideline {
          padding: 0 0 0 75px; }
          .recruit_menu li a.guideline:after {
            background: url("../images/recruit/guideline.svg") center center no-repeat;
            background-size: contain;
            left: 30px;
            width: 94px;
            height: 50px; }
        .recruit_menu li a.form {
          padding: 0 0 0 65px; }
          .recruit_menu li a.form:after {
            left: 11px;
            width: 98px;
            height: 67px; }
      .recruit_menu li p {
        font: 2rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        padding: 5px 40px 5px 0;
        background: url("../images/common/icon_arrow.svg") right center no-repeat;
        background-size: 25px; } }
/*max-width:480px*/
@media (hover: hover) {
  .recruit_menu a:hover {
    top: -10px; } }
/*****************************************/
.voice {
  padding: 135px 0 170px;
  width: calc(100% - 200px);
  max-width: 1280px;
  margin: 0 auto; }
  .voice .youtube {
    background-color: #D00000;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    max-width: 530px;
    height: 70px;
    color: #fff;
    text-decoration: none;
    transition: .3s; }
    .voice .youtube span {
      display: block;
      width: fit-content;
      padding: 0 15px 0 60px;
      margin: 0 auto;
      font: 2rem/68px "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      letter-spacing: 0.03em;
      background: url("../images/recruit/youtube.svg") center left no-repeat; }
  .voice h2 {
    margin-bottom: 60px; }
  .voice p {
    font: 1.8rem/1.5em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 500;
    padding: 10px 0 0 20px;
    position: relative; }
    .voice p:before {
      position: absolute;
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      background-color: #FFA200;
      left: 3px;
      top: 18px; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .voice {
    padding: 135px 0 170px;
    width: calc(100% - 80px); } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .voice p {
    font: 1.6rem/1.5em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 500;
    padding: 5px 0 0 20px;
    position: relative; }
    .voice p:before {
      position: absolute;
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      background-color: #FFA200;
      left: 3px;
      top: 13px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .voice {
    padding: 135px 0 170px;
    width: calc(100% - 40px); }
    .voice .youtube {
      margin: 0 auto;
      max-width: 530px;
      height: 70px; }
      .voice .youtube span {
        padding: 0 15px 0 45px;
        margin: 0 auto;
        font: 1.6rem/68px "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        letter-spacing: 0.03em;
        background: url("../images/recruit/youtube.svg") center left no-repeat;
        background-size: 35px; } }
/*max-width:480px*/
@media (hover: hover) {
  .voice .youtube:hover {
    opacity: 0.5; } }
/**************************************************************/
.movie_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1020px;
  margin: 0 auto; }
  .movie_list li {
    max-width: 480px;
    margin-bottom: 70px;
    width: calc((100% - 60px) / 2); }
    .movie_list li:hover {
      cursor: pointer; }

.movie_box {
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #efefef;
  overflow: hidden;
  border-radius: 15px; }
  .movie_box:before {
    width: 60px;
    height: 60px;
    background: url("../images/recruit/movie.svg") center center no-repeat;
    background-size: contain;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.9; }
  .movie_box img {
    transition: .3s;
    width: 100%;
    position: absolute;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .movie_list {
    margin: 0 auto 40px; }
    .movie_list li {
      max-width: 480px;
      margin-bottom: 30px;
      width: calc((100% - 20px) / 2); }
      .movie_list li:hover {
        cursor: pointer; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .movie_list li {
    max-width: 480px;
    width: calc((100% - 20px) / 2); }
    .movie_list li:hover {
      cursor: pointer; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .movie_list {
    display: block; }
    .movie_list li {
      max-width: 480px;
      margin-bottom: 30px;
      width: 100%; }
      .movie_list li:hover {
        cursor: pointer; } }
/*max-width:480px*/
@media (hover: hover) {
  .movie_list li:hover {
    cursor: pointer; }
    .movie_list li:hover .movie_box img {
      transform: translate(-50%, -50%) scale(1.1); } }
/**************************************************************/
.movie_box {
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer; }

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999; }

.modal-overlay.active {
  display: block; }

.modal_area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9; }

.modal_area iframe {
  width: 100%;
  height: 100%;
  border: none; }

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 4rem;
  cursor: pointer; }