@charset "UTF-8";

.pc {
  display: block;
}

@media screen and (max-width: 960px) {
  .pc {
    display: none!important;
  }
}

.sp {
  display: none;
}

@media screen and (max-width: 960px) {
  .sp {
    display: block;
  }
}

.flex_box {
  display: flex;
  align-items: stretch;
}
@media screen and (max-width: 960px) {
  .flex_box {
    display: block;
  }
}

.flex_box_row {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
}
@media screen and (max-width: 960px) {
  .flex_box_row {
    display: block;
  }
}

.flex_box01 {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 960px) {
  .flex_box01 {
    display: block;
  }
}

.cont_right {
  flex: 1;
  margin: auto;
}
@media screen and (max-width: 960px) {
  .cont_right {
    display: block;
    padding: 30px;
  }
}

.cont_right_inner {
  max-width: 500px;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .cont_right_inner {
    max-width: 100%;
  }
}

.cont_left_inner {
    padding: 22% 100px;
  }

@media screen and (min-width: 1560px) {
  .cont_left_inner {
    padding: 28% 150px;
  }
}
@media screen and (max-width: 1420px) {
  .cont_left_inner {
    padding: 50px;
  }
}
@media screen and (max-width: 960px) {
  .cont_left_inner {
    padding: 0;
  }
}

/* 余白 */
.mt-40 {
  margin-top: 40px;
}


/* scroll */
.scrolldown {
  position:absolute;
  right:30px;
  bottom:10px;
  height:50px;
}
@media screen and (max-width: 960px) {
  .scrolldown {
    right: 20px;
    bottom: 2px;
  }
}

/*Scrollテキストの描写*/
.scrolldown span {
  position: absolute;
  left:-5px;
  top: -70px;
  color: #000;
  font-size: 10px;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
}

/* 線の描写 */
.scrolldown::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 50px;
  background: #000;
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

@keyframes pathmove {
  0%{
    height: 0;
    top: 10px;
    opacity: 0;
  }
  30%{
    height: 30px;
    opacity: 1;
  }
  100%{
    height: 0;
    top: 60px;
    opacity: 0;
  }
}

/* top_mv */
#top_mv {
    height: 100%;
}
@media screen and (max-width: 960px) {
#top_mv {
    height: 162vw;
  }
}

.top_bg {
  position: absolute;
  background-image: url(../img/bg.png);
  height: 750px;
  background-repeat: no-repeat;
  width: 80%;
  z-index: -2;
  top: 0;
  right: 0;
  background-size: cover;
}
@media screen and (max-width: 1580px) {
.top_bg {
    width: 75%;
  }
}
@media screen and (max-width: 1340px) {
.top_bg {
    width: 70%;
  }
}
@media screen and (max-width: 1120px) {
.top_bg {
    width: 65%;
  }
}

@media screen and (max-width: 960px) {
.top_bg {
    width: 100%;
    background-repeat: no-repeat;
    background-image: none;
  }
}

.top_bg1 {
  position: absolute;
  background-image: url(../img/bg1.png);
  height: 528px;
  background-repeat: no-repeat;
  width: calc(100% - 40px);
  z-index: -1;
  top: 222px;
  left: 40px;
}
@media screen and (max-width: 960px){
.top_bg1 {
    background-image: none;
  }
}
.top_bg2 {
  position: absolute;
  height: 309px;
  width: 556px;
  z-index: 1;
  top: 222px;
  left: 40px;
}
@media screen and (max-width: 960px){
.top_bg2 {
    display: none;
  }
}
.top_mv_inner {
  position: relative;
  height: 620px;
  padding: 0 50px;
  z-index: 100;
}
@media screen and (max-width: 960px) {
  .top_mv_inner {
    width: 100%;
    height: 160vw;
    padding: 0 10px;
  }
}

.top_ttl {
  font-family: 'TT Norms Pro', sans-serif;
  font-size: 82px;
  font-weight: bold;
  color: transparent;
  background: repeating-linear-gradient( 90deg, #ff6914 0, #fffc00 100% );
  -webkit-background-clip: text;
  margin-top: 102px;
  line-height: 0.9em;
  width: 45%;
}
@media screen and (max-width: 960px) {
  .top_ttl {
    font-size: 13.2vw;
    width: 100%;
    margin-top: 0;
    padding-top: 79.5%;
    line-height: 0.97em;
  }
}

.txt_space {
  letter-spacing: -0.01em;
}

.txt_space01 {
  letter-spacing: -0.028em;
}

.top_subttl {
  font-size: 27px;
  font-weight: bold;
  color: transparent;
  background: repeating-linear-gradient( 90deg, #ff6914 0, #fffc00 100% );
  -webkit-background-clip: text;
  width: 30%;
  margin-top: 38px;
  letter-spacing: -0.06em;
}
@media screen and (max-width: 960px) {
  .top_subttl {
    font-size: 4.2vw;
    width: 50%;
    margin-top: 6%;
  }
}
/* game */
#game {
  background: #f8f8f8;
}
@media screen and (max-width: 960px) {
}

#game .cont_right {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 60px 20px;
}
@media screen and (max-width: 960px) {
  #game .cont_right {
    display: block;
    padding: 30px;
  }
}

.cont_ttl {
  font-family: 'TT Norms Pro-b', sans-serif;
  font-size: 50px;
  font-weight:bold;
}
@media screen and (max-width: 1070px){
.cont_ttl {
    font-size: 4vw;
  }
}
@media screen and (max-width: 960px) {
  .cont_ttl {
    font-size: 40px;
  }
}

.cont_ttl01 {
  font-family: 'TT Norms Pro-b', sans-serif;
  font-size: 43px;
  font-weight:bold;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .cont_ttl01 {
    font-size: 36px;
    text-align: left;
  }
}

.cont_ttl02 {
  font-family: 'TT Norms Pro-b', sans-serif;
  font-size: 43px;
  font-weight:bold;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .cont_ttl02 {
    font-size: 40px;
    text-align: left;
  }
}

.cont_ttl_small {
  font-weight: 500;
}
@media screen and (max-width: 1070px) {
.cont_ttl_small {
    font-size: 1.2vw;
 }
}
@media screen and (max-width: 960px) {
  .cont_ttl_small {
    font-size: 11px;
     margin-top: 5px;
  }
}

.cont_ttl_small:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #000;
  vertical-align: middle;
  margin-right: 10px;
}
@media screen and (max-width: 960px) {
  .cont_ttl_small:before {
    width: 10px;
    margin-right: 5px;
  }
}

.cont_ttl_small01 {
  font-weight: 500;
}
@media screen and (max-width: 1070px) {
.cont_ttl_small01 {
    font-size: 1.2vw;
 }
}
@media screen and (max-width: 960px) {
  .cont_ttl_small01 {
    font-size: 11px;
     margin-top: 5px;
  }
}

.cont_ttl_small01:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #fff;
  vertical-align: middle;
  margin-right: 10px;
}
@media screen and (max-width: 960px) {
  .cont_ttl_small01:before {
    width: 10px;
    margin-right: 5px;
  }
}

.cont_subttl {
  font-size: 34px;
  font-weight: bold;
  color: transparent;
  background: repeating-linear-gradient( 90deg, #ff6914 0, #fffc00 100% );
  -webkit-background-clip: text;
  margin-top: 45px;
  line-height: 1.4em;
}
@media screen and (max-width: 960px) {
  .cont_subttl {
    font-size: 30px;
    margin-top: 24px;
    line-height: 1.3em;
  }
}

.cont_txt {
  font-size: 13px;
  line-height: 2em;
  max-width: 500px;
  margin-top: -17px;
}
@media screen and (max-width: 960px) {
  .cont_txt {
    width: 100%;
    margin-bottom: 5px;
  }
}

.game_cont {
  background: #fefefe;
  padding: 5px 20px 20px;
  margin-top: 50px;
}

@media screen and (max-width: 960px) {
  .game_cont {
    padding: 1px 15px 18px;
    margin-top: 24px;
  }
}

.cont_txt01 {
  font-size: 12px;
  line-height: 2em;
  max-width: 500px;
  margin-top: 20px;
}
@media screen and (max-width: 960px) {
  .cont_txt01 {
    font-size: 3vw;
    width: 100%;
    margin-top: 15px;
  }
}

.game_img {
  flex: 1;
}

.bnr-img img {
  margin-bottom: 30px;
}

.game_ttl {
  font-weight: bold;
}
@media screen and (max-width: 960px) {
  .game_ttl {
    font-size: 14px;
    padding-bottom: 0;
  }
}

.game_btn_wrapper {
  margin-top: 20px;
}

@media screen and (max-width: 960px) {
  .game_btn_wrapper {
    margin-top: 16px;
  }
}

.game_btn a {
  font-family: 'TT Norms Pro-b', sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #ffa500;
}

@media screen and (max-width: 960px) {
  .game_btn a {
    font-family: 'TT Norms Pro-m', sans-serif;
    font-weight: normal;
    font-size: 3.1vw;
  }
}

/* game_btn */
.view_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  padding: 2em;
  width: 400px;
  height: 66px;
  position: relative;
  display: inline-block;
  text-align: center;
  border-radius: 50px;
  background: #000;
  margin-top: 47px;
}
@media screen and (max-width: 960px) {
  .view_btn a {
    padding: 1.5em;
    width: 100%;
    height: 50px;
    margin-top: 27px;
  }
}

.view_btn a::after {
  content: '';
  background-image: url(../img/arrow.png);
  position: absolute;
  top: 50%;
  right: 30px;
  width: 17px;
  height: 8px;
  transform: translateY(-50%);
}

/* works */
#works {
  width: 100%;
  margin: 0 auto;
  background: #efefef;
}
@media screen and (max-width: 960px) {
  #works {
    width: 100%;
  }
}

#works .flex_box {
  justify-content: space-between;
  align-items: baseline;
  margin-top: 40px;
}

#works .cont_inner {
  max-width: 948px;
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
}
@media screen and (max-width: 960px) {
  #works .cont_inner {
    width: 100%;
    padding: 30px;
  }
}

.works_cont {
  width: 290px;
}
@media screen and (max-width: 960px) {
  .works_cont {
    width: 100%;
    margin: 35px auto;
  }
}

.works_ttl {
  border-bottom: 1px solid #000;
  padding-bottom: 20px;
  font-weight: bold;
}
@media screen and (max-width: 960px) {
  .works_ttl {
    font-size: 14px;
    padding-bottom: 10px;
  }
}

.works_txt {
  font-size: 13px;
  line-height: 2em;
}
@media screen and (max-width: 960px) {
  .works_txt {
    margin-top: -8px;
  }
}

/* company */
#company {
  background: #f8f8f8;
}
@media screen and (max-width: 960px) {
  #company {
    padding-bottom: 70px;
  }
}

#company .flex_box {
  align-items: center;
}
@media screen and (max-width: 960px) {
  #company .flex_box {
    
  }
}

#company dl {
  margin-top: 35px;
  line-height: 1.4em;
  width: 100%;
}

#company dt ,dd {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 30px 0;
}
media screen and (max-width: 1070px)
#company dt, dd {
    padding: 1.2em 0;
}
@media screen and (max-width: 480px) {
  #company dt, dd {
    font-size: 3.4vw;
    padding: 0;
  }
}

#company dt {
  width: 28%;
}
@media screen and (max-width: 960px) {
  #company dt {
    width: 35%;
  }
}

#company dd {
  color: #666666;
}

#company .item {
  display: flex;
  border-bottom: 1px solid #d4d6d2;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 960px) {
  #company .item {
    gap: 0;
    padding: 16px 0;
  }
}

.company_img {
  flex: 1;
}

/* company_btn */
.map_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  padding: 0.9em;
  width: 100px;
  position: relative;
  text-align: center;
  border-radius: 30px;
  background: #000;
  margin-left: 20px;
}
@media screen and (max-width: 960px) {
  .map_btn a {
    display: block;
    width: 80px;
    font-size: 10px;
    padding: 0.6em;
    margin: 8px 0 0 0;
  }
}

@media screen and (max-width: 960px) {
  .map_btn a::after {
    content: '';
    background-image: url(../img/arrow_map.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 15px;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
  }
}

/* recruit */
#recruit {
    background-image: url(../img/recruit_img.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 160px 0;
}
@media screen and (max-width: 960px) {
  #recruit {
    padding: 100px 30px;
  }
}
@media screen and (max-width: 480px) {
  #recruit {
    background-image: url(../img/recruit_img_sp.png);
  }
}

.recruit_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 2em;
  color: #fff;
  text-align: center;
  margin: 40px auto 0;
}
@media screen and (max-width: 960px) {
  .recruit_txt {
    font-size: 13px;
    text-align: left;
  }
}

.contact_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  padding: 2.6em;
  width: 478px;
  height: 100px;
  text-align: center;
  border-radius: 50px;
  background: repeating-linear-gradient( 90deg, #fffc00 0, #ffca14 100% );
  margin: 80px auto 0;
}
@media screen and (max-width: 960px) {
  .contact_btn a {
    font-size: 13px;
    padding: 1.6em;
    max-width: 320px;
    width: 100%;
    height: 50px;
    margin-top: 50px;
    position: relative;
  }
  .contact_btn a::after {
    content: '';
    background-image: url(../img/arrow_contact.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 25px;
    width: 7px;
    height: 15px;
    transform: translateY(-50%);
  }
}

/* contact */
#contact {
  background: #f6f6f6;
  padding: 160px 0;
}
@media screen and (max-width: 960px) {
  #contact {
    padding: 80px 30px 100px;
  }
}
.contact_inner {
  max-width: 910px;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .contact_inner {
    width: 100%;
  }
}

.contact_small {
  font-size: 14px;
  font-weight: 500;
}
@media screen and (max-width: 960px) {
  .contact_small {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8em;
    margin-top: 50px;
  }
}

.contact_attention {
  font-size: 13px;
  color: #e93930;
  text-align: end;
  margin-top: 45px;
}
@media screen and (max-width: 960px) {
  .contact_attention {
    font-size: 10px;
  }
}

@media screen and (max-width: 960px) {
  #contact form {
    margin-top: -24px;
  }
}

#contact dl {
  font-size: 14px;
  font-weight: 500;
  display: block;
  padding-bottom: 15px;
  margin: 0;
  border-radius: 0px;
}
@media screen and (max-width: 960px) {
  #contact dl {
    font-size: 13px;
    padding-bottom: 20px;
  }
}

#contact dt {
  display: table-cell;
  width: 250px;
  vertical-align: middle;
}
@media screen and (max-width: 960px) {
  #contact dt {
    display: block;
    margin-bottom: 10px;
  }
}

.last_dt {
  vertical-align: top;
  padding-top: 20px;
}

#contact dd {
  display: table-cell;
  line-height: 1.5em;
  padding: 0;
}
@media screen and (max-width: 960px) {
  #contact dd {
    display: block;
  }
}

#contact dd input {
  background: #fff;
  width: 687px;
  height: 60px;
  padding: 0 40px;
  border-radius: 6px;
  box-shadow:0px 0px 5px 1px rgba(4,0,0, 0.1) inset;
}
@media screen and (max-width: 960px) {
  #contact dd input {
    width: 100%;
    padding: 0 15px;
  }
}

.contact_txt select {
  -webkit-appearance: none;
  appearance: none;
  width: 687px;
  height: 60px;
  padding: 0 0 0 40px;
  border-radius: 6px;
  box-shadow:0px 0px 5px 1px rgba(4,0,0, 0.1) inset;
}
@media screen and (max-width: 960px) {
  .contact_txt select {
    width: 100%;
    padding: 0 0 0 15px;
  }
}

.contact_select {
  display: table-cell;
  line-height: 1.5em;
  position: relative;
}
@media screen and (max-width: 960px) {
  .contact_select {
    display: block;
  }
}

.contact_select::before {
  border-bottom: 7px solid #000;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  position: absolute;
  right: 9px;
  top: 20px;
  width: 0;
  pointer-events: none;
}
.contact_select::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid #000;
  content: "";
  position: absolute;
  right: 9px;
  top: 32px;
  width: 0;
  pointer-events: none;
}

textarea {
  width: 687px;
  border-radius: 6px;
  box-shadow:0px 0px 5px 1px rgba(4,0,0, 0.1) inset;
  padding: 20px 40px;
  resize: none;
}
@media screen and (max-width: 960px) {
  textarea {
    width: 100%;
    padding: 20px 15px;
  }
}

::placeholder {
  color: #ccc;
}

.submit_check {
  max-width: 687px;
  margin-left: 210px;
  font-size: 13px;
  position: relative;
}
@media screen and (max-width: 960px) {
  .submit_check {
    width: 100%;
    margin: 0 auto;
  }
}

.submit_check p {
  padding-left: 30px;
  font-size: 13px;
  color: #333333;
  line-height: 1.6em;
}
@media screen and (max-width: 960px) {
  .submit_check p {
    font-size: 12px;
    margin-left: 12%;
  }
}

.u_line {
  border-bottom: 1px solid #333333;
}

.submit_check input {
  display: none;
}

.submit_check label::before,
.submit_check label::after {
  content: "";
  display: inline-block;
  position: absolute;
}

.submit_check label::before {
  background-color: #fff;
  border-radius: 0%;
  border: 2px solid #000;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  top: 12px;
}
@media screen and (max-width: 960px) {
  .submit_check label::before {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    top: 20px;
    left: 8%;
  }
}

.submit_check label::after {
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  opacity: 0;
  height: 5px;
  width: 7px;
  transform: rotate(-45deg);
  top: 8px;
  left: 4px;
}
@media screen and (max-width: 821px) {
  .submit_check label::after {
    height: 10px;
    width: 14px;
    top: 13px;
    left: 62px;
  }
}
@media screen and (max-width: 480px) {
  .submit_check label::after {
    height: 10px;
    width: 14px;
    top: 12px;
    left: 34px;
  }
}

.submit_check input:checked + label::after {
  opacity: 1;
}

.submit_btn input {
  display: block;
  width: 240px;
  height: 60px;
  background: #000;
  color: #fff;
  border-radius: 30px;
  margin: 50px 0 0 100px;
}
@media screen and (max-width: 960px) {
  .submit_btn input {
    width: 250px;
    height: 50px;
    margin: 60px auto 0;
  }
}

.submit_btn input:hover {
  opacity: 0.6;
}

.asterisk {
  color: #e93930;
  margin-left: 10px;
}
@media screen and (max-width: 960px) {
  .asterisk {
    font-size: 10px;
  }
}

.err {
  display: block;
  color: #e93930;
  font-weight: 400;
}

input:invalid + .err {
  display: block;
}

textarea:invalid + .err {
  display: block;
}

/* contact_confirm */
#contact_confirm form {
  margin-top: 100px;
}
@media screen and (max-width: 960px) {
  #contact_confirm form {
    margin-top: 40px;
  }
}

#contact_confirm dl {
  font-size: 14px;
  font-weight: 500;
  display: block;
  padding-bottom: 15px;
  margin: 0;
  border-radius: 0px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 960px) {
  #contact_confirm dl {
    display: block;
    font-size: 13px;
    padding-bottom: 20px;
  }
}

#contact_confirm dt {
  width: 250px;
  vertical-align: middle;
}
@media screen and (max-width: 960px) {
  #contact_confirm dt {
    display: block;
    margin-bottom: 10px;
  }
}

#contact_confirm dd {
  line-height: 1.5em;
  padding: 1.6em;
  overflow-wrap: break-word;
  width: 70%;
  border-bottom: 1px solid #efefef;
}
@media screen and (max-width: 960px) {
  #contact_confirm dd {
    display: block;
    width: 100%;
    padding: 1em;
  }
}

#contact_confirm textarea {
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #efefef;
}

@media screen and (max-width: 960px) {
  #contact_confirm .submit_btn input {
    margin-top: 40px;
  }
}

/* contact_complete */
#contact_complete .article_inner {
  padding: 0 2em;
}
@media screen and (max-width: 480px) {
  #contact_complete .article_inner {
    padding: 0;
  }
}

.contact_complete_txt {
  margin: 170px 0 285px 0;
}
@media screen and (max-width: 960px) {
  .contact_complete_txt {
    margin: 40px 0 140px 0;
  }
}

.contact_complete_txt p {
  font-size: 14px;
  font-weight: 500;
  line-height: 2em;
}

/* privacy policy */
.header02 {
  position: sticky;
  top: 0;
  background: #fff;
}

@media screen and (max-width: 960px) {
  .header02 {
    position: fixed;
    width: 100%;
    height: 64px;
    z-index: 999;
    background: #fff;
  }
}

#header .pc_nav_02 {
  height: 75px;
}

.logo_02 {
  margin: 0;
}

#header .nav_logo02 img {
  width: 140px;
}

.nav_logo02 {
  margin: 0 0 0 64px;
}

.article_inner {
  max-width: 920px;
  width: 100%;
  margin: 80px auto;
}
@media screen and (max-width: 960px) {
  .article_inner {
    width: 91%;
    margin: 80px auto 38px;
  }
}

.article_ttl {
  font-family: 'TT Norms Pro-b', sans-serif;
  font-size: 43px;
  font-weight:bold;
  text-align: left;
}
@media screen and (max-width: 960px) {
  .article_ttl {
    font-size: 34px;
  }
}

.privacy_txt_ttl {
  font-size: 24px;
  font-weight: 500;
  margin: 96px 0 0 0;
}
@media screen and (max-width: 960px) {
  .privacy_txt_ttl {
    font-size: 17px;
    margin: 40px 0 0 0;
  }
}

.privacy_txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 2.5em;
  margin-top: 90px;
}
@media screen and (max-width: 960px) {
  .privacy_txt {
    line-height: 2em;
    margin-top: 40px;
  }
}

.privacy_txt01 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8em;
}

.privacy_txt02 {
  font-size: 14px;
  font-weight: 500;
  line-height: 2.5em;
  margin-top: 70px;
}
@media screen and (max-width: 960px) {
  .privacy_txt02 {
    margin-top: 30px;
    line-height: 2em;
  }
}