@charset "UTF-8";

/*******************************************************************
  common
*******************************************************************/
.sub_main {
  padding: 120px 0;
}
.sub_main .en {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  line-height: 1;
}

.sub_main_number {
  background: url("../img/number/sub_bg.jpg") no-repeat center;
  background-size: cover;
}

.sub_main_requirement {
  background: url("../img/requirement/sub_bg.jpg") no-repeat center;
  background-size: cover;
}

.sub_main_entry {
  background: url("../img/entry/sub_bg.jpg") no-repeat center;
  background-size: cover;
}

.sub_main_crosstalk {
  background: url("../img/crosstalk/sub_bg.jpg") no-repeat center;
  background-size: cover;
}

.sub_main_career {
  background: url("../img/career/sub_bg.jpg") no-repeat center;
  background-size: cover;
}

.sub_main_message {
  background: url("../img/message/sub_bg.jpg") no-repeat center;
  background-size: cover;
}

.group_ttl {
  max-width: 890px;
  width: 70%;
  gap: 30px;
  transform: skewX(-24deg);
}
.group_ttl .ja,
.group_ttl .en {
  transform: skewX(24deg);
}
.group_ttl .en {
  color: #8ac5ff;
}

@media screen and (max-width: 1400px) {
  .group_ttl {
    margin-bottom: 4.2vw;
  }
  .group_ttl .ja {
    font-size: 3.14vw;
  }
  .group_ttl .en {
    font-size: 2.57vw;
  }
}


/*******************************************************************
  message
*******************************************************************/
.msg_intro_inner {
  backdrop-filter: blur(20px);
  padding: 50px 80px;
}
.msg_intro_inner .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DEEFFF;
  opacity: 52%;
  border-radius: 20px;
}
.msg_intro_inner .text {
  width: 62%;
}
.msg_intro_inner .text .text_anime {
  width: fit-content;
}
.msg_intro_inner .text .text_anime span {
  width: fit-content;
  font-size: 2.18vw;
}
.msg_intro_inner .text .comment {
  width: 70%;
}
.msg_intro .image01 {
  width: 20.8vw;
  top: 185px;
  right: 21%;
}
.msg_intro .image02 {
  width: 15.1vw;
  top: 435px;
  right: 5%;
}
.msg_intro .image03 {
  width: 11.9vw;
  top: 620px;
  right: 23%;
}
.msg_intro .image04 {
  width: 36.7vw;
  border-radius: 120px 0 0 0;
  bottom: 150px;
  right: 0;
}
.msg_product {
  background-image: url("../img/message/bg_product.jpg");
  background-repeat: no-repeat;
}
.msg_product .image_box {
  gap: 5%;
}
.msg_product .image_box .item {
  width: 30%;
  border-radius: 10px;
  overflow: hidden;
}
.msg_product .image_box .item img {
  width: 100%;
}
.msg_appeal_inner {
  backdrop-filter: blur(20px);
  padding-top: 120px;
}
.msg_appeal_inner .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 52%;
  border-radius: 20px;
}
.msg_appeal_inner .group_ttl {
  max-width: 590px;
  width: 40%;
  top: -50px;
  left: 0;
  right: 0;
  margin: auto;
}
.msg_appeal_inner .point_box {
  width: 82%;
}
.msg_appeal_inner .point_box .detail:nth-child(odd) {
  flex-direction: row-reverse;
}
.msg_appeal_inner .point_box .detail .image {
  width: 40%;
  border-radius: 20px;
  overflow: hidden;
}
.msg_appeal_inner .point_box .detail .image img {
  width: 100%;
}
.msg_appeal_inner .point_box .detail .text {
  width: 50%;
}
.msg_appeal_inner .point_box .detail .text h4 span {
  border-right: 3px solid #036dd6;
  line-height: 1;
  margin-right: 15px;
  padding-right: 15px;
}
.msg_appeal_inner .image_bottom {
  width: 100%;
  border-radius: 0 0 20px 20px;
}



/*******************************************************************
  number
*******************************************************************/
.data_box_inner {
  backdrop-filter: blur(20px);
  padding: 50px 80px;
}
.data_box_inner .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DEEFFF;
  opacity: 52%;
  border-radius: 20px;
}
.data_box_inner .group_box div:nth-child(n+4) {
  margin-top: 4%;
}
.data_box_inner .group_box .group_box_item_lg {
  width: 49%;
  border-radius: 10px;
  overflow: hidden;
}
.data_box_inner .group_box .group_box_item_sm {
  width: 32%;
  border-radius: 10px;
  overflow: hidden;
}
.data_box_inner .group_box .group_box_item_lg .factor,
.data_box_inner .group_box .group_box_item_sm .factor {
  min-width: 200px;
  width: fit-content;
  font-size: 1.25vw;
  border-radius: 0 0 10px 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.data_box_inner .group_box .group_box_item_lg img,
.data_box_inner .group_box .group_box_item_sm img {
  width: 100%;
}


/*******************************************************************
  career
*******************************************************************/
.careerplan {
  position: relative;
}
.careerplan .inner {
  backdrop-filter: blur(20px);
  position: relative;
  z-index: 2;
}
.careerplan .inner .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 52%;
  border-radius: 20px;
}
.careerplan .inner h3 {
  top: -50px;
  left: 5%;
  z-index: 2;
}
.careerplan .inner h3 img {
  width: 100%;
}
.careerplan .inner .step {
  width: 20%;
}
.careerplan .inner .step br {
  display: none;
}
.careerplan .inner .step img {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}
.careerplan .inner .step .text {
  padding: 20px 30px;
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step .text {
    padding: 20px 20px;
  }
}
.careerplan .inner .step .text h4 {
  background: #fff;
  padding: 3px 0;
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step .text h4 {
    font-size: 24px;
  }
}
@media screen and (max-width: 1400px) {
  .careerplan .inner .step .text h4 {
    font-size: 20px;
  }
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step .text h4 span {
    font-size: 24px;
  }
}
@media screen and (max-width: 1400px) {
  .careerplan .inner .step .text h4 span {
    font-size: 20px;
  }
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step .text p span {
    font-size: 12px;
  }
}
.careerplan .inner .step:nth-child(3) .text {
  background: #d4e5f6;
  border-radius: 5px 0 0 0;
  height: 13vw;
}
@media screen and (max-width: 1800px) {
  .careerplan .inner .step:nth-child(3) .text {
    height: 18vw;
  }
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step:nth-child(3) .text {
    height: 18vw;
  }
}
@media screen and (max-width: 1400px) {
  .careerplan .inner .step:nth-child(3) .text {
    height: 21vw;
  }
}
.careerplan .inner .step:nth-child(4) .text {
  background: #b6d8f9;
  border-radius: 5px 0 0 0;
  height: 17vw;
}
@media screen and (max-width: 1800px) {
  .careerplan .inner .step:nth-child(4) .text {
    height: 20vw;
  }
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step:nth-child(4) .text {
    height: 20vw;
  }
}
@media screen and (max-width: 1400px) {
  .careerplan .inner .step:nth-child(4) .text {
    height: 23vw;
  }
}
.careerplan .inner .step:nth-child(5) .text {
  background: #a1cffd;
  border-radius: 5px 0 0 0;
  height: 21vw;
}
@media screen and (max-width: 1800px) {
  .careerplan .inner .step:nth-child(5) .text {
    height: 22vw;
  }
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step:nth-child(5) .text {
    height: 22vw;
  }
}
@media screen and (max-width: 1400px) {
  .careerplan .inner .step:nth-child(5) .text {
    height: 25vw;
  }
}
.careerplan .inner .step:nth-child(6) .text {
  background: #92c9ff;
  border-radius: 5px 5px 0 0;
  height: 25vw;
}
@media screen and (max-width: 1800px) {
  .careerplan .inner .step:nth-child(6) .text {
    height: 24vw;
  }
}
@media screen and (max-width: 1600px) {
  .careerplan .inner .step:nth-child(6) .text {
    height: 24vw;
  }
}
@media screen and (max-width: 1400px) {
  .careerplan .inner .step:nth-child(6) .text {
    height: 27vw;
  }
}


/*******************************************************************
  crosstalk
*******************************************************************/
.ct_member .inner .text {
  /* max-width: 680px; */
  width: 100%;
}
.ct_member .inner .text .text_anime span {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.ct_member .inner .text .image01 {
  width: 13.5vw;
  top: 0;
  left: 0;
}
.ct_member .inner .text .image02 {
  width: 11.4vw;
  top: 300px;
  right: 3%;
}
.ct_member .inner .people {
  backdrop-filter: blur(20px);
  gap: 4%;
}
.ct_member .inner .people .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 52%;
  border-radius: 20px;
}
.ct_member .inner .people .sub_ttl {
  width: 100%;
  letter-spacing: 0.02em;
}
.ct_member .inner .people .profile {
  width: 16%;
}
.ct_member .inner .people .profile img {
  width: 100%;
}
.ct_member .inner .people .profile .name {
  letter-spacing: 0.02em;
}
.ct_member .inner .people .profile .dept {
  width: fit-content;
  background-color: #036dd6;
  border-radius: 5px;
  padding: 4px 20px;
}
.ct_q1,
.ct_q3,
.ct_q5 {
  backdrop-filter: blur(20px);
  position: relative;
}
.ct_q1 .bg_color,
.ct_q3 .bg_color,
.ct_q5 .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DEEFFF;
  opacity: 52%;
  border-radius: 20px;
}
.ct_q1 .catch,
.ct_q3 .catch,
.ct_q5 .catch {
  width: 95%;
  flex-direction: row-reverse;
  margin-left: auto;
  margin-right: 0;
  gap: 4%;
}
.ct_q1 .catch .image,
.ct_q3 .catch .image,
.ct_q5 .catch .image {
  max-width: 800px;
  width: 50%;
  border-radius: 100px 0 0 0;
  overflow: hidden;
}
.ct_q1 .catch .image img,
.ct_q3 .catch .image img,
.ct_q5 .catch .image img {
  width: 100%;
}
.ct_q1 .catch .text .text_anime span,
.ct_q3 .catch .text .text_anime span,
.ct_q5 .catch .text .text_anime span {
  width: fit-content;
  font-size: 1.6vw;
}
.ct_q1 .dialogue,
.ct_q3 .dialogue,
.ct_q5 .dialogue {
  width: 75%;
  position: relative;
  z-index: 2;
}
.ct_q1 .dialogue .talk,
.ct_q3 .dialogue .talk,
.ct_q5 .dialogue .talk {
  gap: 5%;
}
.ct_q1 .dialogue .talk .face,
.ct_q3 .dialogue .talk .face,
.ct_q5 .dialogue .talk .face {
  width: 12%;
}
.ct_q1 .dialogue .talk .face img,
.ct_q3 .dialogue .talk .face img,
.ct_q5 .dialogue .talk .face img {
  width: 100%;
}
.ct_q1 .dialogue .talk .text,
.ct_q3 .dialogue .talk .text,
.ct_q5 .dialogue .talk .text {
  width: 83%;
  height: fit-content;
  position: relative;
  border-radius: 10px;
  padding: 20px 60px;
}
.ct_q1 .dialogue .talk .text:before,
.ct_q3 .dialogue .talk .text:before,
.ct_q5 .dialogue .talk .text:before {
  content: "";
  position: absolute;
  left: -24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 24px solid #fff;
  border-left: 0;
}
.ct_q2,
.ct_q4 {
  backdrop-filter: blur(20px);
  position: relative;
}
.ct_q2 .bg_color,
.ct_q4 .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 52%;
  border-radius: 20px;
}
.ct_q2 .catch,
.ct_q4 .catch {
  width: 95%;
  margin-left: 0;
  margin-right: auto;
  gap: 4%;
}
.ct_q2 .catch .image,
.ct_q4 .catch .image {
  max-width: 800px;
  width: 50%;
  border-radius: 0 100px 0 0;
  overflow: hidden;
}
.ct_q2 .catch .image img,
.ct_q4 .catch .image img {
  width: 100%;
}
.ct_q2 .catch .text .text_anime span,
.ct_q4 .catch .text .text_anime span {
  width: fit-content;
  font-size: 1.6vw;
}
.ct_q2 .dialogue,
.ct_q4 .dialogue {
  width: 75%;
  position: relative;
  z-index: 2;
}
.ct_q2 .dialogue .talk,
.ct_q4 .dialogue .talk {
  gap: 5%;
}
.ct_q2 .dialogue .talk .face,
.ct_q4 .dialogue .talk .face {
  width: 12%;
}
.ct_q2 .dialogue .talk .face img,
.ct_q4 .dialogue .talk .face img {
  width: 100%;
}
.ct_q2 .dialogue .talk .text,
.ct_q4 .dialogue .talk .text {
  background-color: #e0f0ff;
  width: 83%;
  height: fit-content;
  position: relative;
  border-radius: 10px;
  padding: 20px 60px;
}
.ct_q2 .dialogue .talk .text:before,
.ct_q4 .dialogue .talk .text:before {
  content: "";
  position: absolute;
  left: -24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 24px solid #e0f0ff;
  border-left: 0;
}
.ct_q2 .catch .text_bg {
  right: calc((100vw - 1260px) / 2 + 22vw);
}
.ct_q4 .catch .text_bg {
  right: calc((100vw - 1260px) / 2 + 25.5vw);
}
.int_image img {
  width: 100%;
}

/*******************************************************************
  requirement
*******************************************************************/
.req_place_list {
  width: 48%;
}
.req_place_list:nth-child(3),
.req_place_list:nth-child(4) {
  margin-top: 4%;
}
.req_place_list:nth-child(3) .place_ttl,
.req_place_list:nth-child(4) .place_ttl {
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.req_place_item {
  border-left: 2px solid #aed8ff;
  border-right: 2px solid #aed8ff;
  border-bottom: 2px solid #aed8ff;
  padding: 2.5% 5%;
}
.req_place_item:hover {
  opacity: 0.75;
}
.req_place_item .image {
  width: 30%;
  border-radius: 5px;
}
.req_place_item .text {
  width: 65%;
}
.detail_box_inner {
  backdrop-filter: blur(20px);
  padding: 50px 80px;
}
.detail_box_inner .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 52%;
  border-radius: 20px;
}
.detail_box_inner table {
  width: 100%;
}
.detail_box_inner table tr {
  border-bottom: 1px solid #036dd6;
}
.detail_box_inner table tr th {
  width: 18%;
}
.detail_box_inner table tr td {
  width: 82%;
}
@media screen and (max-width: 1600px) {
  .req_place_item .text p {
    font-size: 1.2vw;
  }
}
@media screen and (max-width: 1400px) {
  .req_place_list .place_ttl {
    font-size: 1.71vw;
  }
  .req_place_item .text p {
    font-size: 1.57vw;
  }
  .detail_box_inner table tr th {
    width: 22%;
    font-size: 1.42vw;
  }
  .detail_box_inner table tr td {
    width: 78%;
    font-size: 1.28vw;
  }
  .detail_box_inner table tr td a,
  .detail_box_inner table tr td span {
    font-size: 1.28vw;
  }
}


/*******************************************************************
  entry
*******************************************************************/
.howto_inner {
  backdrop-filter: blur(20px);
  padding: 90px 80px 50px;
}
.howto_inner .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 52%;
  border-radius: 20px;
}
.howto_inner .group_ttl {
  top: -50px;
  left: 0;
  right: 0;
  margin: auto;
}
.howto_inner .group_ttl .en {
  color: #f2f5f7;
}
.howto_inner .button_box .button_entryform {
  width: 47%;
  border-radius: 50px 0 50px 0;
  overflow: hidden;
}
.howto_inner .button_box .button_entryform:hover {
  opacity: 0.75;
}
.howto_inner .button_box .button_entryform:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-radius: 50px 0 50px 0;
  border: 5px solid transparent;
  background: linear-gradient(90deg,rgba(0, 74, 255, 1) 0%,#73DAFF 100%) border-box border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
}
.howto_inner .button_box .button_entryform .image {
  width: 100%;
  border-radius: 50px 0 0 0;
}

.mynavi_inner {
  backdrop-filter: blur(20px);
  padding: 90px 80px 50px;
}
.mynavi_inner .bg_color {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DEEFFF;
  opacity: 52%;
  border-radius: 20px;
}
.mynavi_inner .others_ttl {
  max-width: 960px;
  width: 60%;
  top: -35px;
  left: 0;
  right: 0;
  margin: auto;
}
.mynavi_inner .button_box {
  max-width: 960px;
  width: 70%;
}
.mynavi_inner .button_box .button_entryform {
  width: 47%;
  border: 3px solid #036dd6;
  border-radius: 15px 0 15px 0;
  overflow: hidden;
}
.mynavi_inner .button_box .button_entryform:hover {
  opacity: 0.75;
}
.mynavi_inner .button_box .button_entryform .image {
  width: 100%;
}
.mynavi_inner .button_box .button_entryform .text {
  background-color: #036dd6;
}

@media screen and (max-width: 1500px) {
  .mynavi_inner .button_box {
    width: 85%;
  }
  .mynavi_inner .button_box .button_entryform .text p {
    font-size: 1.5vw;
  }
  .mynavi_inner .button_box .button_entryform .text .material-symbols-outlined {
    font-size: 2vw;
  }
}