@charset "utf-8";
/*-------------- first-view ----------------*/
.first-view {
  position: relative;
  height: 100%;
  margin-top: 80px;
  margin-bottom: 150px;
}
.pe-suke {
  max-width: clamp(200px, 70%, 700px);
  margin: 0 auto;
}
/*svg {
  position: absolute;
  z-index: 1;
  max-width: 1600px;
  width: 100%;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}
.char {
  transform-box: view-box;
  transform-origin: center;
  opacity: 0;
  animation: bounce 1s cubic-bezier(.175, .885, .32, 1.275) forwards;
}
@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}*/
svg {
  position: absolute;
  z-index: 1;
  max-width: 1600px;
  width: 100%;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}
.char {
  /* グループ単位での変形位置を正しく計算させる */
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: bounce 1s cubic-bezier(.175, .885, .32, 1.275) forwards;
}
@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.pop {
  opacity: 0;
  animation: pop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: .3s;
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(120px) scale(0.7);
  }
  40% {
    opacity: 1;
    transform: translateY(-40px) scaleY(1.2);
  }
  70% {
    opacity: 1;
    transform: translateY(8px) scaleX(1.2) scaleY(0.92);
  }
  80% {
    opacity: 1;
    transform: translateY(-3px) scaleX(0.98) scaleY(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/*-------------- keywords ----------------*/
.key-container, .key-container2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.key-container2 {
  width: 66%;
  margin: 0 auto;
}
.key-item {
  position: relative;
  width: 300px;
  height: auto;
  aspect-ratio: 1/1;
}
.circle {
  position: absolute;
  background-color: #fff;
  /*
  border: 1px solid #68ACF1;
*/
  border-radius: 999px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.key-item .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.875rem, 0.511rem + 1.82vw, 1.875rem);
  display: flex;
  justify-content: center;
  text-align: center;
  width: 80%;
  line-height: 1.3;
}
/*-------------- about ----------------*/
#about {
  display: flex;
  gap: 60px;
  align-items: center;
  max-width: none;
  width: 100%;
  /* 左端の余白だけ全体のインナー位置に合わせるための計算 */
  padding-left: max(50px, calc((100% - var(--inner-width)) / 2 + 50px));
  padding-right: 0; /* 右側のパディングは消して右端に密着させる */
  /*paddingを含めたサイズ*/
  box-sizing: border-box;
}
.lead {
  font-weight: 500;
  font-size: clamp(1.25rem, 1.136rem + 0.57vw, 1.563rem);
  margin-bottom: 80px;
}
#about .link {
  position: relative;
  display: flex;
  margin: 20px 10px 15px auto;
  width: fit-content;
  transition: transform .6s ease;
}
#about .text {
  flex: 0 1 40%;
  /*flexアイテムの最小幅解除*/
  min-width: 0;
}
.company {
  flex: 1;
  position: relative;
  height: 700px;
  border-radius: 20px 0 0 20px;
  /*  overflow: hidden;*/
}
.tochipe {
  display: flex;
  justify-content: flex-end;
}
.arrow {
  position: absolute;
  display: inline-block;
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background-color: #ff9e00;
  bottom: -4px;
  right: -20px;
}
.arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background-color: #ff9e00;
  transform: rotate(45deg);
  transform-origin: calc(100% - 2px) 50%;
}
.ivent_1, .ivent_2, .ivent_3 {
  position: absolute;
  border-radius: 999px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.ivent_1 img, .ivent_2 img, .ivent_3 img {
  object-fit: cover;
  height: 100%;
}
.ivent_1 {
  top: 0;
  right: 0;
  width: clamp(15.625rem, 12.216rem + 17.05vw, 25rem);
}
.ivent_2 {
  bottom: 30%;
  left: 0;
  width: clamp(9.375rem, 6.42rem + 14.77vw, 17.5rem);
}
.ivent_3 {
  bottom: 0;
  left: 27%;
  width: clamp(12.5rem, 9.091rem + 17.05vw, 21.875rem);
}
/*-------------- interview ----------------*/
#interview .img-container {
  display: flex;
  gap: 25px;
}
#interview .img-box, .modal-content .img-box {
  display: flex;
  aspect-ratio: 1/1;
  border-radius: 999px;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 10px;
  width: 100%;
  height: auto;
}
#interview .img-box {
  max-width: 380px;
}
.modal-content .img-box {
  max-width: 250px !important;
}
#interview img, #recruit .item {
  transition: all .6s ease;
}
.one {
  border: 5px dotted #f30303;
}
.two {
  border: 5px dotted #D8C300;
}
.three {
  border: 5px dotted #f79ee0;
}
#interview p {
  text-align: center;
}
.slash {
  color: #68ACF1;
  font-weight: bold;
}
.talk-index {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
  margin-top: 50px;
}
.talk-container {
  padding: 30px 0;
}
.theme {
  font-size: 18px;
  font-weight: 500;
  color: #68acf1;
  margin-bottom: 10px;
}
.talk-data {
  padding: 0 20px;
}
/* モーダルの背景*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overscroll-behavior: contain;
  touch-action: none;
}
/* モーダルの白枠 */
.modal-content {
  position: relative;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  max-width: 700px;
  width: 80%;
  max-height: 80%;
  overflow-y: auto; /* スクロール */
  overscroll-behavior: contain;
}
/* 閉じる */
.modal-close {
  position: sticky;
  top: 0;
  right: 0;
  float: right;
  font-size: 40px;
  font-weight: 800;
  /*background: none;*/
  border: none;
  cursor: pointer;
  z-index: 99999;
  background-color: #515151;
  color: #fff;
  border-radius: 999px;
  width: 50px;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
  padding-left: 1px;
}
/*-------------- recruit ----------------*/
#recruit a {
  width: fit-content;
  text-align: center;
  border: 3px solid #68ACF1;
  border-radius: 20px;
  padding: 13px 60px;
  background-color: #DFFAFF;
}
#recruit .item {
  display: flex;
  width: fit-content;
  margin: auto;
}
/*-------------- question ----------------*/
#question details {
  text-align: center;
}
#question details summary {
  border-top: 2px dotted #68ACF1;
  padding: 10px;
  cursor: pointer;
}
#question details ul {
  padding: 14px 15px;
  margin: 0;
}
#question details:nth-of-type(odd) {
  background-color: #fff;
}
#question details:nth-of-type(even) {
  background-color: #efefef;
}
#question details:last-of-type {
  border-bottom: 2px dotted #68ACF1;
}
/*--------------------------info.html---------------------------*/
#description {
  margin-top: 150px;
}
#description h3 {
  text-align: center;
  margin-bottom: 10px;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
}
th, td {
  padding-top: 30px;
  padding-bottom: 30px;
}
th {
  padding-right: 65px;
}
tr {
  border-bottom: 2px dotted #68ACF1;
}
tr:first-of-type {
  border-top: 2px dotted #68ACF1;
}
#description .item {
  margin-bottom: 16px;
}
/*-------------- 選考の流れ --------------*/
#fllow .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
}
#fllow .img-box:nth-of-type(odd) {
  max-width: 150px;
  width: 100%;
  height: auto;
}
#fllow .img-box:nth-of-type(even), #fllow-2 .img-box {
  width: 50px;
  height: auto;
}
#fllow .container p {
  text-align: center;
  margin-top: 20px;
}
#fllow .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  width: 100%;
  background-color: #FFDDAE;
  margin: auto;
  border-radius: 20px;
  padding: 20px 40px;
}
/*-------------- 入社後の流れ --------------*/
#fllow-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
#fllow-2 .text {
  display: flex;
  gap: 30px;
  width: fit-content;
  padding: 25px 45px;
  background-color: #fff;
  border: 2px solid #68acf1;
  border-radius: 20px;
  font-weight: 500;
}
/*-------------- entry --------------*/
#entry div {
  display: flex;
  justify-content: center;
  gap: 100px;
}
.inquiry-btn {
  width: fit-content;
  display: inline-block;
  text-align: center;
  border: 3px solid #FF686B;
  background-color: #ffedf8;
  padding: 8px 30px;
  border-radius: 20px;
}
/*
.apply-btn {
  border: 3px solid #68ACF1;
  background-color: #DFFAFF;
}
*/
/*------------------ inquiry,apply.html ---------------------*/
#apply-sec {
  margin-top: 150px;
}
#apply-sec p {
  text-align: center;
}
.input-text {
  border: 1px solid #68ACF1;
  border-radius: 10px;
  width: 65%;
  padding: 8px 10px;
  background-color: #fff;
}
input::placeholder, textarea::placeholder {
  color: #B5B0B0;
}
.form-item {
  display: flex;
  align-items: center;
  padding: 20px 0 20px 10%;
  border-bottom: 1px dotted #B5B0B0;
}
label:not(.radio-label) {
  width: 25%;
}
.radio-item {
  margin-left: 30px;
}
.required, .own {
  border-radius: 4px;
  margin-left: 10px;
  padding: 0 2px;
  white-space: nowrap;
  color: #fff;
}
.required {
  background-color: #e39191;
}
.own {
  background-color: #848484;
}
#birthday {
  width: fit-content;
}
form .center {
  margin-top: 100px;
  margin-bottom: 100px;
}
.submit-btn {
  width: fit-content;
  text-align: center;
  border: 3px solid #68ACF1;
  border-radius: 20px;
  padding: 10px 35px;
  background-color: #DFFAFF;
}
.contents_textarea {
  color: #E04A4A;
  margin-left: 30px;
  margin-bottom: 10px;
}
/*-------------- hover ----------------*/
@media (hover: hover) {
  #about .link:hover {
    transform: scale(1.2);
  }
  #interview img:hover, #recruit .item:hover {
    transform: scale(1.2);
    opacity: 1;
  }
  #interview img {
    opacity: 0.3;
  }
}
/*--------------------------------------------------------------*/
/*---------------------------- tb ------------------------------*/
@media (max-width:999px) {
  /*#description, #apply-sec {
    margin-top: 100px !important;
  }*/
  /*-------------- about ----------------*/
  #about {
    flex-direction: column;
    gap: 30px;
    padding-left: 25px;
    padding-right: 25px;
  }
  #about .text {
    width: 100%;
  }
  .tochipe {
    margin-top: 10px;
  }
  .lead {
    margin-bottom: 20px;
  }
  .company {
    flex: none;
    margin-right: -25px;
    margin-left: -25px;
    height: 470px;
    width: calc(100% + 50px);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .contact-btn {
    margin: 0 auto 100px;
  }
  /*-------------- apply.html ----------------*/
  .form-item {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
  }
  .radio-box {
    display: flex;
  }
  .form-item *:first-child {
    width: fit-content;
    margin-bottom: 10px;
  }
  .input-text {
    width: 100%;
  }
}
/*-------------------------------------------------------------------*/
/*---------------------------- モバイル ----------------------------*/
@media (max-width:599px) {
  /*-------------- first-view ----------------*/
  .pe-suke {
    max-width: 90% !important;
  }
  /*-------------- keywords ----------------*/
  /*-------------- interview ----------------*/
  #interview .img-container {
    flex-direction: column;
    align-items: center;
  }
  #interview .img-box {
    width: clamp(15.625rem, 13.352rem + 11.36vw, 21.875rem);
  }
  #talk .img-box {
    width: 55%;
  }
  .talk-index {
    flex-direction: column;
  }
  .talk-data {
    padding: 0 10px;
  }
  .modal-content, .talk-data {
    padding: 15px;
  }
  .modal-close {
    font-size: 25px;
    width: 30px;
    height: 30px;
    padding-bottom: 2.5px;
    padding-left: 1px;
  }
  /*--------------------------------------------*/
  /*------------------ info.html --------------------*/
  tr, td {
    display: block;
  }
  th {
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    padding-right: 0;
  }
  td {
    padding-top: 20px;
    padding-left: 20px;
  }
  /*-------------- 選考の流れ、入社後の流れ --------------*/
  #fllow .container, #fllow-2 {
    gap: 20px;
  }
  #fllow .container p {
    font-size: 12px;
  }
  #fllow li, #fllow .text p {
    font-size: 14px;
  }
  #fllow-2 .text {
    flex-direction: column;
    gap: 10px;
  }
  #fllow .img-box:nth-of-type(even), #fllow-2 .img-box {
    width: 40px;
  }
  /*-------------- entry --------------*/
  #entry div {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }
}