@charset "UTF-8";
article {
  overflow: hidden;
}

.sec-profile {
  margin-top: 0;
}
@media screen and (max-width: 640px) {
  .sec-profile {
    margin-top: 240px;
  }
}
.sec-profile .content-wrapper {
  margin-top: 120px;
  position: relative;
}
.sec-profile .content-wrapper .top {
  margin-bottom: 16px;
  aspect-ratio: 5/2;
}
.sec-profile .content-wrapper .top .tag {
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.sec-profile .content-wrapper .top h1 {
  font-size: 32px;
  margin-bottom: 8px;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  paint-order: stroke;
  position: relative;
  z-index: 2;
}
.sec-profile .content-wrapper .top h1::before {
  content: none;
}
.sec-profile .content-wrapper .top .joining {
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
}
.sec-profile .content-wrapper .top .question {
  font-size: 14px;
  color: #555;
  border-top: 1px solid #ddd;
  padding-top: 24px;
  margin-top: 8px;
  margin-bottom: 8px;
  position: relative;
}
.sec-profile .content-wrapper .top .answer {
  font-size: 24px;
  color: #000;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  paint-order: stroke;
  position: relative;
  z-index: 2;
}

.rotate-image {
  z-index: 1;
}
@media screen and (max-width: 640px) {
  .rotate-image {
    top: -240px !important;
  }
}

.sec-schedule .content-wrapper {
  margin-bottom: 80px;
}
.sec-schedule .schedule {
  background-color: #fff;
  border-radius: 16px;
  border: 1px solid #ddd;
  padding: 56px;
}
.sec-schedule .schedule .grid {
  display: flex;
  gap: 64px;
}
.sec-schedule .schedule .grid .tab-switch {
  width: 30%;
}
.sec-schedule .schedule .grid .tab-switch .glaph {
  position: relative;
  max-width: 500px;
  text-align: center;
}
.sec-schedule .schedule .grid .tab-switch .glaph:not(:last-child) {
  margin-bottom: 32px;
}
.sec-schedule .schedule .grid .tab-switch .glaph .button {
  max-width: 200px;
  margin: 0 auto;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sec-schedule .schedule .grid .tab-switch .glaph .button p {
  margin-bottom: 8px;
}
.sec-schedule .schedule .grid .tab-switch .glaph {
  /* 共通 */
}
.sec-schedule .schedule .grid .tab-switch .glaph .tab {
  width: 88px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.sec-schedule .schedule .grid .tab-switch .glaph {
  /* 押せる（青）ボタンが含まれる場合 */
}
.sec-schedule .schedule .grid .tab-switch .glaph:has(.tab.is-inactive) img, .sec-schedule .schedule .grid .tab-switch .glaph:has(.tab.is-inactive) p {
  opacity: 0.5;
  transition: opacity 0.5s ease;
}
.sec-schedule .schedule .grid .tab-contents {
  width: 70%;
}
.sec-schedule .schedule .grid .tab-contents .is-active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  -moz-column-gap: 36px;
       column-gap: 36px;
  position: relative;
}
.sec-schedule .schedule .grid .tab-contents .is-active div {
  position: relative;
  padding-bottom: 48px;
}
.sec-schedule .schedule .grid .tab-contents .is-active div::before {
  content: "";
  position: absolute;
  color: #ccc;
  left: -16.5px;
  top: 10px;
  width: 1px;
  height: 100%;
  background-color: currentColor;
}
.sec-schedule .schedule .grid .tab-contents .is-active div:last-child {
  padding-bottom: 0;
}
.sec-schedule .schedule .grid .tab-contents .is-active div:last-child::before {
  content: none;
}
.sec-schedule .schedule .grid .tab-contents .is-active div .time {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.sec-schedule .schedule .grid .tab-contents .is-active div .time::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 1;
}
.sec-schedule .schedule .grid .tab-contents .is-active div .ttl {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.sec-schedule .schedule .grid .tab-contents .is-active div .txt {
  font-size: 14px;
}
.sec-schedule .schedule .grid .tab-contents .is-active {
  /* タイムライン用ドット色（1〜8） */
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(1) .time::before {
  background-color: var(--dot-color-1, #078EA1);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(2) .time::before {
  background-color: var(--dot-color-2, #7244B7);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(3) .time::before {
  background-color: var(--dot-color-3, #3068C7);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(4) .time::before {
  background-color: var(--dot-color-4, #B66A14);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(5) .time::before {
  background-color: var(--dot-color-5, #C3320A);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(6) .time::before {
  background-color: var(--dot-color-6, #5A970E);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(7) .time::before {
  background-color: var(--dot-color-7, #A39E00);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(8) .time::before {
  background-color: var(--dot-color-8, #D561B8);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(9) .time::before {
  background-color: var(--dot-color-7, #52B587);
}
.sec-schedule .schedule .grid .tab-contents .is-active div:nth-child(10) .time::before {
  background-color: var(--dot-color-8, #5355CA);
}
.sec-schedule .schedule .grid .tab-contents .tab-panel.is-active.rows-3 {
  grid-template-rows: repeat(3, auto);
}
@media screen and (min-width: 769px) {
  .sec-schedule .schedule .grid .tab-contents .tab-panel.is-active.rows-3 div:nth-child(4)::after {
    content: "";
    position: absolute;
    color: #ccc;
    left: -16.5px;
    top: -48px;
    width: 1px;
    height: 100%;
    background-color: currentColor;
  }
}
.sec-schedule .schedule .grid .tab-contents .tab-panel.is-active.rows-4 {
  grid-template-rows: repeat(4, auto);
}
@media screen and (min-width: 769px) {
  .sec-schedule .schedule .grid .tab-contents .tab-panel.is-active.rows-4 div:nth-child(5)::after {
    content: "";
    position: absolute;
    color: #ccc;
    left: -16.5px;
    top: -48px;
    width: 1px;
    height: 100%;
    background-color: currentColor;
  }
}
.sec-schedule .schedule .grid .tab-contents .tab-panel.is-active.rows-5 {
  grid-template-rows: repeat(5, auto);
}
@media screen and (min-width: 769px) {
  .sec-schedule .schedule .grid .tab-contents .tab-panel.is-active.rows-5 div:nth-child(6)::after {
    content: "";
    position: absolute;
    color: #ccc;
    left: -16.5px;
    top: -48px;
    width: 1px;
    height: 100%;
    background-color: currentColor;
  }
}
@media screen and (max-width: 1080px) {
  .sec-schedule .schedule {
    padding: 32px;
  }
  .sec-schedule .schedule .grid {
    display: block;
  }
  .sec-schedule .schedule .grid .tab-switch {
    display: flex;
    gap: 32px;
    width: 100%;
  }
  .sec-schedule .schedule .grid .tab-switch .glaph:not(:last-child) {
    margin: 0;
  }
  .sec-schedule .schedule .grid .tab-contents {
    width: 100%;
    margin-top: 80px;
    padding-left: 24px;
  }
}
@media screen and (max-width: 480px) {
  .sec-schedule .schedule {
    padding: 24px;
  }
  .sec-schedule .schedule .grid .tab-switch {
    gap: 24px;
  }
  .sec-schedule .schedule .grid .tab-switch p {
    font-size: 14px;
  }
  .sec-schedule .schedule .grid .tab-switch .button {
    font-size: 14px;
  }
  .sec-schedule .schedule .grid .tab-switch .tab {
    width: 70px !important;
  }
  .sec-schedule .schedule .grid .tab-contents {
    margin-top: 32px;
  }
  .sec-schedule .schedule .grid .tab-contents .is-active {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
}

/* タブボタン */
.tab {
  /* 押せる（青） */
}
.tab.is-inactive {
  background: #1558A0;
  color: #fff;
}
.tab.is-inactive:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.tab {
  /* 押せない（グレー） */
}
.tab.is-active {
  background: #E5E5E5;
  color: #777;
  cursor: default;
}
.tab {
  /* フォーカス */
}
.tab:focus-visible {
  outline: 3px solid #0f4a8a;
  outline-offset: 4px;
}

/* タブ中身 */
.tab-panel {
  display: none;
}
.tab-panel.is-active {
  display: block;
}/*# sourceMappingURL=interview-posts.css.map */