@charset "UTF-8";

/*
	##### DNP RECRUITING #####
	/recruit/newgraduates/interviews/css/interview_pc.css
*/


/* --------------------------------------------------
INTERVIEW INDEX
-------------------------------------------------- */

@media (width >= 1400px) or (width < 1200px) {
  .people-index,
  .people {
    --bg-name-posi: -14px;
  }
}
@media (1199px < width < 1400px) {
  .people-index,
  .people {
    --bg-name-posi: calc(-14 / 1400 * 100vw);
  }
}
@media (hover) and (min-resolution: 1.26dppx) and (max-resolution: 1.59dppx) and (height < 721px) and (1280px >= width > 1200px) {
  .people-index,
  .people {
    --bg-name-posi: 10px;
  }
}
@media (hover) and (min-resolution: 1.25dppx) and (max-resolution: 1.59dppx) {
  .people {
    --bg-name-posi: 10px;
  }
}

.main-ttl-area {
  display: block;
  width: 100%;
  padding-top: calc(130 var(--w-formulae));
  padding-bottom: calc(105 var(--w-formulae));
  text-align: center;

  @media (width < 1200px) {
    padding-top: 204px
  }

  & .page-ttl {
    font-size: calc(38 var(--w-formulae));
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: calc(24 var(--w-formulae));

  }
  & .en {
    font-size: calc(16 var(--w-formulae));
    font-weight: 400;
    letter-spacing: .08em;

  }
}

.fv-area {
  display: block;
  width: 100%;
  max-width: 1830px;
  padding: 0 15px;
  margin: 0 auto calc(110 var(--w-formulae));

  & .topic-path {
    margin-left: calc(30 var(--w-formulae));
    margin-bottom: calc(15 var(--w-formulae));
  }
}


.sort-selector-area {
  display: block;
  width: 100%;
  max-width: calc(1160 var(--w-formulae));
  min-height: calc(375 var(--w-formulae));
  border-radius: 30px;
  background-color: var(--color3);
  background-image: linear-gradient(#f8f8f9 1px, transparent 0), linear-gradient(90deg, #f8f8f9 1px, transparent 0);
  background-position: center;
  background-size: 18px 18px;
  margin: 0 auto calc(82 var(--w-formulae));
  padding: calc(37 var(--w-formulae));

  @media (width < 1200px) {
    width: calc(100% - 40px);
  }

  & .fieldset {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    max-width: calc(862 var(--w-formulae));
    margin: 0 auto;
    padding: calc(25 var(--w-formulae)) 0 calc(7 var(--w-formulae));
    border: none;
    position: relative;

    & .legend {
      display: flex;
      width: calc(257 var(--w-formulae));
      padding: calc(12 var(--w-formulae)) 0 0 calc(52 var(--w-formulae));
      font-size: calc(18.7 var(--w-formulae));
      font-weight: 700;
      letter-spacing: .08em;
    }

    & .bttns {
      display: flex;
      align-content: flex-start;
      flex-wrap: wrap;
      column-gap: calc(15 var(--w-formulae));
      row-gap: calc(15 var(--w-formulae));
      flex: 0 1 calc(603 var(--w-formulae));
      position: relative;
    }
    & label {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: calc(16 var(--w-formulae));
      font-weight: 500;
      letter-spacing: .08em;
      line-height: 2;
      height: calc(40 var(--w-formulae));
      padding: 0 1em;
      background-color: #fff;
      border-radius: 5px;
      cursor: pointer;

      &:has(input:checked) {
        background-color: #000;
        color: #fff;
      }
      &:has(input[value="smart"]:checked) {
        background-color: var(--biz-color1);
      }
      &:has(input[value="life"]:checked) {
        background-color: var(--biz-color2);
      }
      &:has(input[value="elec"]:checked) {
        background-color: var(--biz-color3);
      }
      &:has(input[value="all"]) {
        position: absolute;
        top: calc(-55 var(--w-formulae));
        left: 0;
      }
    }
    & input {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  & .job {
    padding-top: calc(55 var(--w-formulae));
    padding-bottom: calc(20 var(--w-formulae));
  }
  & .segment::before {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    background: radial-gradient(#b2b2b4 20%, transparent 0) repeat-x 0 0 / 8px 10px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.more-bttn-area {
  margin-bottom: calc(82 var(--w-formulae));
  text-align: center;
  display: flex;
  justify-content: center;
  column-gap: calc(40 var(--w-formulae));

  & .more.bttn {
    display: block;
    width: calc(500 var(--w-formulae));
    height: calc(70 var(--w-formulae));
    border: solid 1px #00437b;
    border-radius: 20px;
    position: relative;

    &::after {
      content: '';
      display: block;
      width: calc(27 var(--w-formulae));
      height: calc(27 var(--w-formulae));
      position: absolute;
      top: 50%;
      right: calc(50 var(--w-formulae));
      transform: translateY(-50%);
      border: solid 1px #00437b;
      border-radius: 50%;
      background-color: #fff;
      background: url(/recruit/newgraduates/shared/images/bttn-link_blu.svg) no-repeat center center / contain;
    }
    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      font-size: calc(18 var(--w-formulae));
      font-weight: 700;
      color: #00437b;
    }
  }
}

@media (hover: hover) {
  .sort-selector-area label {
    transition: color .3s ease, background-color .3s ease
  }
  .sort-selector-area label:hover {
    color: #fff;
    background-color: #000;
  }
  .sort-selector-area label:has(input[value="smart"]):hover {
    background-color: var(--biz-color1);
  }
  .sort-selector-area label:has(input[value="life"]):hover {
    background-color: var(--biz-color2);
  }
  .sort-selector-area label:has(input[value="elec"]):hover {
    background-color: var(--biz-color3);
  }
  .more.bttn::after {
    transition: background-color .3s ease
  }
  .more.bttn:hover::after {
    background-color: #00437b;
    background-image: url(/recruit/newgraduates/shared/images/bttn-link_wht.svg);
  }
}



.person-list > ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(260 var(--w-formulae)), 1fr));
  justify-items: center;
  width: 100%;
  max-width: calc(1200 var(--w-formulae));
  padding: 0 calc(20 var(--w-formulae));
  margin: 0 auto calc(190 var(--w-formulae));
  column-gap: calc(40 var(--w-formulae));
  row-gap: calc(60 var(--w-formulae));
}


/* CAROUSEL & INDX */

.person-card {
  width: 100%;
  height: auto;
  font-feature-settings: "palt";

  & a,
  & dl {
    display: block;
    width: 100%;
    height: 100%;
    color: currentColor;
  }
  & dt {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: calc(310 var(--w-formulae));
    margin-bottom: calc(16 var(--w-formulae));
    border-radius: calc(20 var(--w-formulae));
    overflow: hidden;
    position: relative;

    & .img-box {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;

      & img {
        object-position: top;
      }
    }
    & .job,
    & .segment,
    & .biz {
      align-items: center;
      font-size: calc(13.5 var(--w-formulae));
      font-weight: 500;
      letter-spacing: .06em;
      padding: 0 1em;
      color: #fff;
    }
    & .segment {
      display: flex;
      height: calc(25 var(--w-formulae));
      padding-bottom: .2em;
    }
    & .job {
      display: inline-flex;
      height: calc(24 var(--w-formulae));
      background-color: #000;
    }
    & .biz {
      display: flex;
      height: calc(24 var(--w-formulae));
      background-color: #4e4e54;
      letter-spacing: 0;
      padding-right: 0;
    }
  }
  & dd {
    padding-left: calc(6 var(--w-formulae));

    & .ttl {
      display: inline-block;
      font-size: calc(18 var(--w-formulae));
      font-weight: 700;
      letter-spacing: .08em;
      line-height: 1.6666666666666667;
      margin-bottom: calc(14 var(--w-formulae));
    }

  }
}
.other-people .person-card {
  width: calc(260 var(--w-formulae));
}
.smart dt .segment {
  background-color: var(--biz-color1);
}
.life dt .segment {
  background-color: var(--biz-color2);
}
:is(.corp-staff, .develop) dt .segment {
  background-color: var(--biz-color4);
}
.elec dt .segment {
  background-color: var(--biz-color3);
}

@media (hover: hover) {
  .person-card a img {
    transform: scale(1);
    transition: transform .3s ease-out;
  }
  .person-card a:hover img {
    transform: scale(1.1)
  }
}



/* --------------------------------------------------
PEOPLE PAGES
-------------------------------------------------- */

.people .first-inner {
  overflow: hidden;
}

.mv-area {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  max-width: 1830px;
  margin: 0 auto 78px;
  padding-right: 15px;
  padding-left: 15px;

  @media (1199px < width < 1281px){
    padding: 0 40px
  }

   & .topic-path {
    margin-left: calc(30 var(--w-formulae));
    margin-top: calc(30 var(--w-formulae));

    & li {
      font-size: calc(12 var(--w-formulae));
    }
   }

   & .main-ttl-set {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(550 var(--w-formulae));
    position: relative;

      &::after {
        content: '';
        display: block;
        width: 350px;
        height: 92px;
        background: url(/recruit/newgraduates/shared/images/bg-logo.svg) no-repeat left top / contain;
        position: absolute;
        top: -.5px;
        left: -1px;

        @media (1199px < width < 1281px) {
          width: 237px;
          height: 63px;
          background-image: url(/recruit/newgraduates/shared/images/bg-logo2.svg);
          top: -1px;
        }
      }
      &::before {
        content: '';
        display: block;
        width: 263px;
        height: 134px;
        background: url(/recruit/newgraduates/interviews/images/mask-fv_pc.svg) no-repeat right bottom / cover;
        position: absolute;
        right: -1px;
        bottom: -1px;
        z-index: +1;
      }
   }

   & .image-box,
   & .image-box-2 {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
   }
   & .image-box-2 {
    animation: mv 7.8s ease infinite both;
  }

   & .main-ttl {
    position: relative;
    z-index: +1;
    display: inline-block;
    padding-bottom: 1em;
    padding-left: calc(45 var(--w-formulae));
    color: #fff;
    font-feature-settings: "palt";
    font-size: calc(36 var(--w-formulae));
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.7222222222222223;
    text-shadow: 0 0 5px rgba(0, 0, 0, .5)
   }
}

@media (width < 1200px) {
  .mv-area {
    padding-top: 122px;

    & .main-ttl-set::after {
      display: none;
    }
  }
}

@keyframes mv {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  47% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  97% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.profile-area {
  display: flex;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto calc(170 var(--w-formulae));
  column-gap: 50px;

  & .left-side {
    display: block;
    flex: 1 1 calc(260px + (50% - 700px));

    @media (width < 1200px) {
      flex: 1 1 18.57%
    }
  }
  & .right-side {
    display: block;
    flex: 0 0 calc(1090px + (50% - 700px));
    position: relative;

    @media (width < 1200px) {
      flex: 1 1 77.86%;
    }
  }

  & .profile-ttl {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: calc(40 var(--w-formulae));
    border-radius: 0 20px 20px 0;
    font-weight: 400;
    font-size: calc(25 var(--w-formulae));
    letter-spacing: .08em;
    line-height: calc(40 var(--w-formulae));
    text-align: right;
    color: #fff;
    padding-right: 1em;

    &::before {
      content: '';
      display: inline-block;
      width: calc(8 var(--w-formulae));
      height: calc(8 var(--w-formulae));
      border-radius: 50%;
      background-color: currentColor;
      margin-top: 1.5%;
      margin-right: .5em;
    }
  }
}
.bg-name {
  font-size: calc(134 var(--w-formulae));
  font-weight: 700;
  line-height: 0.8507462686567164;
  color: #f7f7fa;
  text-align: right;
  position: absolute;
  top: calc(-112 var(--w-formulae));
  right: var(--bg-name-posi);
  z-index: -1;
}

.profile-set {
  font-feature-settings: "palt";
  display: inline-flex;
  align-items: center;
  column-gap: calc(46 var(--w-formulae));
  width: 100%;
  max-width: calc(960 var(--w-formulae));
  margin-bottom: calc(73 var(--w-formulae));
  padding-top: calc(8 var(--w-formulae));

  & .name {
    font-size: calc(26 var(--w-formulae));
    font-weight: 700;
    letter-spacing: .06em;
    vertical-align: baseline;
    white-space: nowrap;
  }
  & .des {
    font-size: calc(15 var(--w-formulae));
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.3;

    & span + span::before {
      content: '｜'
    }
  }
}


.career-time-line {
  display: block;
  width: 100%;
  max-width: calc(960 var(--w-formulae));
  border-radius: 28px;
  padding: calc(85 var(--w-formulae)) calc(63 var(--w-formulae)) calc(40 var(--w-formulae));
  position: relative;
  background-position: center;
  background-size: 18px 18px;

  @media (width < 1200px) {
    width: calc(100% - 15px);
  }

  & h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(300 var(--w-formulae));
    height: calc(45 var(--w-formulae));
    background-color: gray;
    border-radius: 0 0 10px 10px;
    font-size: calc(23 var(--w-formulae));
    font-weight: 500;
    letter-spacing: .025em;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.time-line-list {
  color: #fff;

  & th {
    white-space: nowrap;
    font-size: calc(16 var(--w-formulae));
    font-weight: 700;
    letter-spacing: .06em;
    padding-right: calc(22 var(--w-formulae));
    vertical-align: text-top;
    background: url(/recruit/newgraduates/interviews/images/arrw-career.svg) no-repeat left calc(50% - 11px) top calc(50% + 8px) / 15px auto;
  }
  & td {
    font-size: calc(15 var(--w-formulae));
    font-feature-settings: "palt";
    letter-spacing: .06em;
    line-height: 1.8666666666666667;
    vertical-align: text-top;
    padding-bottom: 1.8em;
  }
  & tr:last-child th {
    background: none;
  }
}






.interview-area {
  display: flex;
  width: 100%;
  max-width: calc(1400 var(--w-formulae));
  margin: 0 auto calc(190 var(--w-formulae));
  column-gap: calc(50 var(--w-formulae));

  & .side-menu-area {
    display: block;
    padding-left: 15px;
    flex: 1 1 calc(260 / 1400 * 100%);
  }
  & .answers-area {
    padding-right: 15px;
    flex: 1 1 calc(1090 / 1400 * 100%);

    & .inner-sec + .inner-sec {
      margin-top: calc(120 var(--w-formulae));
    }
  }
}
.anchor-links {
  position: sticky;
  top: 120px;
  float: right;

  & h4 {
    display: inline-block;
    height: 25px;
    padding: 0 1em;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: .08em;
    background-color: gray;
    color: #fff;
    border-radius: 100px;
    margin-bottom: 40px;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: currentColor;
      vertical-align: middle;
      margin-right: 7px;
    }
  }
  & li {
    width: calc(210 var(--w-formulae));
    margin-bottom: 1em;

    & a {
      display: inline-block;
      font-size: calc(13 var(--w-formulae));
      font-weight: 700;
      letter-spacing: .05em;
      line-height: 1.5384615384615385;
      color: currentColor;
      padding-left: 22px;
      text-indent: -22px;
      transition: color .3s ease;

      &::before {
        content: '';
        display: inline-block;
        height: 1px;
        width: 12px;
        background-color: currentColor;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
}

@media (hover: hover) {
  .anchor-links li a {
    opacity: 1;
    transition: opacity .3s ease;

    &:hover {
      opacity: .4;
    }
  }
}





.seg-01 .anchor-links li a.current {
  color: var(--pro-color3);
  transition: color .3s ease;
}
.seg-01 .anchor-links h4,
.seg-01 .profile-area .profile-ttl {
  background-color: var(--pro-color3);
}
.seg-01 .profile-area .profile-set .name {
  color: var(--pro-color3);
}

.seg-01 .profile-area .career-time-line {
  background-color: var(--pro-color3);
  background-image: linear-gradient(rgba(20, 149, 218, .7) 1px, transparent 0), linear-gradient(90deg, rgba(20, 149, 218, .7) 1px, transparent 0);

  & h4 {
    color: var(--pro-color3);
    background-color: #cce8f7;
  }
}


.seg-02 .anchor-links li a.current {
  color: var(--biz-color2);
  transition: color .3s ease;
}
.seg-02 .anchor-links h4,
.seg-02 .profile-area .profile-ttl {
  background-color: var(--biz-color2);
}
.seg-02 .profile-area .profile-set .name {
  color: var(--biz-color2);
}

.seg-02 .profile-area .career-time-line {
  background-color: var(--biz-color2);
  background-image: linear-gradient(#7a63b5 1px, transparent 0), linear-gradient(90deg, #7a63b5 1px, transparent 0);

  & h4 {
    color: var(--biz-color2);
    background-color: #e2ddef;
  }
}


.seg-03 .anchor-links li a.current {
  color: var(--pro-color4);
  transition: color .3s ease;
}
.seg-03 .anchor-links h4,
.seg-03 .profile-area .profile-ttl {
  background-color: var(--pro-color4);
}
.seg-03 .profile-area .profile-set .name {
  color: var(--pro-color4);
}

.seg-03 .profile-area .career-time-line {
  background-color: var(--pro-color4);
  background-image: linear-gradient(#0E6CAE 1px, transparent 0), linear-gradient(90deg, #0E6CAE 1px, transparent 0);

  & h4 {
    color: var(--pro-color4);
    background-color: #cce0ee;
  }
}



.seg-04 .anchor-links li a.current {
  color: var(--corp-color);
  transition: color .3s ease;
}
.seg-04 .anchor-links h4,
.seg-04 .profile-area .profile-ttl {
  background-color: var(--corp-color);
}
.seg-04 .profile-area .profile-set .name {
  color: #000;
}

.seg-04 .profile-area .career-time-line {
  background-color: var(--corp-color);
  background-image: linear-gradient(rgba(126, 126, 131, .7) 1px, transparent 0), linear-gradient(90deg, rgba(126, 126, 131, .7) 1px, transparent 0);

  & h4 {
    color: var(--corp-color);
    background-color: #e3e3e4;
  }
}


.answers-area .sec-ttl {
  font-feature-settings: "palt";
  font-size: calc(36 var(--w-formulae));
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5555555555555556;
  text-align: center;
  width: 100%;
  max-width: 1040px;
  margin-bottom: calc(40 var(--w-formulae));
}


.answers-area .inner {
  width: 100%;
  max-width: calc(1040 var(--w-formulae));

  & .image-area {
    margin-top: calc(50 var(--w-formulae));
    margin-left: 15px;
  }
}
.answers-area .inner.right-txt .image-area {
  margin-left: 0;
  margin-right: 15px;
}
.answers-area .sec02 .inner .img-box {
  display: block;
  width: calc(320 var(--w-formulae));
  height: calc(190 var(--w-formulae));
  border-radius: 30px;
  overflow: hidden;

  & + & {
    margin-top: calc(100 var(--w-formulae));
    float: right; 
  }
}

@media (width >= 1200px) {
  .answers-area .inner {
    display: flex;
    justify-content: space-between;
  
    & .txt-area {
      flex: 0 1 calc(460 var(--w-formulae));
    }
    & .image-area {
      flex: 0 1 calc(500 var(--w-formulae));
    }
  }
  .answers-area .inner.right-txt {
    flex-direction: row-reverse;
  
    & .image-area {
      flex: 0 1 calc(470 var(--w-formulae));
      margin-left: 0;
      margin-right: calc(15 var(--w-formulae));
    }
  }
  .answers-area .sec02 .inner {
    padding-left: calc(80 var(--w-formulae));
  
    & .image-area {
      flex-basis: calc(420 var(--w-formulae));
      padding-top: calc(30 var(--w-formulae));
    }
  }
}


.img-box.mask-1 {
  -webkit-mask: url(/recruit/newgraduates/interviews/images/mask-1.svg) no-repeat center / contain;
  mask: url(/recruit/newgraduates/interviews/images/mask-1.svg) no-repeat center / contain
}
.img-box.mask-2 {
  -webkit-mask: url(/recruit/newgraduates/interviews/images/mask-2.svg) no-repeat center / cover;
  mask: url(/recruit/newgraduates/interviews/images/mask-2.svg) no-repeat center / cover
}

.answers-area .sub-ttl {
  font-feature-settings: "palt";
  font-size: calc(16 var(--w-formulae));
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 2;
  padding-top: calc(50 var(--w-formulae));
  margin-bottom: calc(45 var(--w-formulae));
  padding-left: calc(52 var(--w-formulae));
  text-indent: calc(-52 var(--w-formulae));

  &::before {
    content: '';
    display: inline-block;
    width: calc(44 var(--w-formulae));
    height: 1px;
    background-color: currentColor;
    vertical-align: middle;
    margin-right: calc(8 var(--w-formulae));
  }
}

.answers-area .txt-block {
  margin-bottom: 0;

  & .txt {
    font-feature-settings: "palt";
    font-size: calc(15 var(--w-formulae));
    line-height: 2;
    letter-spacing: .12em;
    text-align: justify;

    & p + p {
      margin-top: 2em;
    }
    & p.more-info {
      font-size: calc(13 var(--w-formulae));
      letter-spacing: .12em;
      margin-top: 1.25em;

      & a {
        font-weight: 600;
        color: #00437b;
        text-decoration: underline;
        text-underline-offset: 5px;
      }
    }
  }
}
@media (hover) {
  .answers-area p.more-info a {
    opacity: 1;
    transition: opacity .3s ease;
  }
  .answers-area p.more-info a:hover {
    opacity: .3;
  }
}

.inter-section .img-box {
  display: block;
  width: 100%;
  max-width: calc(1040 var(--w-formulae));
  margin-top: calc(80 var(--w-formulae));
  position: relative;
  border-radius: 30px;
  overflow: hidden;
}
.inter-section .img-box::before,
.inter-section .img-box::after {
  content: '';
  display: block;
  width: 260px;
  height: 100px;
  position: absolute;
  z-index: +1;
}





.sec01 .inter-section .img-box {
  border-radius: 30px 0 30px 0
}
.sec01 .inter-section .img-box::before {
  background: url(/recruit/newgraduates/interviews/images/mask-bl_pc.svg) no-repeat left bottom / cover;
  left: -.5px;
  bottom: -.5px;
}
.sec01 .inter-section .img-box::after {
  background: url(/recruit/newgraduates/interviews/images/mask-tr_pc.svg) no-repeat left bottom / cover;
  right: -.5px;
  top: -.5px;
}

.sec03 .inter-section .img-box {
  border-radius: 0 30px 0 30px
}
.sec03 .inter-section .img-box::before {
  background: url(/recruit/newgraduates/interviews/images/mask-tl_pc.svg) no-repeat left bottom / cover;
  left: 0;
  top: 0;
}
.sec03 .inter-section .img-box::after {
  background: url(/recruit/newgraduates/interviews/images/mask-br_pc.svg) no-repeat left bottom / cover;
  right: 0;
  bottom: 0;
}

@media (width < 1200px) {
  .answers-area .inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "txt-1" "ph" "txt-2";

    & .txt-area {
      display: contents;

      & .txt-block:nth-child(1) {
        grid-area: txt-1;
      }
      & .txt-block:nth-child(2) {
        grid-area: txt-2;
      }
    }
    & .image-area {
      display: block;
      grid-area: ph;
      margin-left: 0;
      margin-right: 0;
    }
  }
  .answers-area .inner-sec:not([class*='sec02']) .inner .image-area {
    justify-items: center;

    & .img-box {
      width: 500px;
    }
  }
  .answers-area .sec02 .inner .image-area {
    padding: 0 calc(150 / 1200 * 100vw);
  }
  .answers-area .sec02 .inner .img-box {

    & + & {
      margin-top: 30px;
    }
  }
}




.schedule-area {
  display: block;
  width: 100%;
  padding: calc(80 var(--w-formulae)) 15px calc(120 var(--w-formulae));
  margin-bottom: calc(150 var(--w-formulae));
  overflow: hidden;
  background-position: center;
  background-size: 18px 18px;

  & hgroup {
    text-align: center;
    margin-bottom: calc(40 var(--w-formulae));

    & p {
      font-size: calc(28 var(--w-formulae));
      font-weight: 700;
      letter-spacing: .08em;
    }
  }
  & h3 {
    font-size: calc(16 var(--w-formulae));
    font-weight: 400;
    letter-spacing: .08em;
    line-height: calc(25 var(--w-formulae));
    display: inline-block;
    width: calc(160 var(--w-formulae));
    height: calc(25 var(--w-formulae));
    border-radius: 100px;
    background-color: #fff;
    margin-bottom: calc(30 var(--w-formulae));
  }
}

.time-table {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: calc(1160 var(--w-formulae));
  padding: calc(50 var(--w-formulae)) calc(94 var(--w-formulae));
  margin: 0 auto;
  background-color: #fff;
  border-radius: 30px;

  & ol {
    box-sizing: border-box;
    flex: 0 1 46%;
    border-left: solid 1px;

    & li {
      display: flex;
      font-feature-settings: "palt";
      font-size: calc(15 var(--w-formulae));
      letter-spacing: .08em;
      line-height: 2.1333333333333333;

      & + & {
        margin-top: 2em;
      }
    }

    & time {
      flex: 0 0 calc(101 var(--w-formulae));
      font-size: calc(18 var(--w-formulae));
      font-weight: 800;
      letter-spacing: .06em;
      line-height: 1.92;

      &::before {
        box-sizing: border-box;
        content: '';
        display: inline-block;
        width: calc(13 var(--w-formulae));
        height: calc(13 var(--w-formulae));
        border: solid 1px;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        margin-left: calc(-7 var(--w-formulae));
        margin-right: 1em;
        vertical-align: -1px;
      }
    }
  }
  & dt {
    font-weight: 700;
  }
}

.seg-01 .schedule-area {
  background-color: rgba(var(--biz-rgb1), .2);
  background-image: linear-gradient(rgba(var(--biz-rgb1), .092) 1px, transparent 0), linear-gradient(90deg, rgba(var(--biz-rgb1), .092) 1px, transparent 0);

  & h3 {
    color: var(--biz-color1);
  }

  & .time-table ol {
    border-left-color: var(--biz-color1);

    & time {
      color: var(--biz-color1);

      &::before {
        border-color: var(--biz-color1);
      }
    }
  }
}
.seg-02 .schedule-area {
  background-color: rgba(var(--biz-rgb2), .2);
  background-image: linear-gradient(rgba(122, 99, 181, .1) 1px, transparent 0), linear-gradient(90deg, rgba(122, 99, 181, .1) 1px, transparent 0);

  & h3 {
    color: var(--biz-color2);
  }

  & .time-table ol {
    border-left-color: var(--biz-color2);

    & time {
      color: var(--biz-color2);

      &::before {
        border-color: var(--biz-color2);
      }
    }
  }
}
.seg-03 .schedule-area {
  background-color: #cce0ee;
  background-image: linear-gradient(rgba(var(--biz-rgb3), .1) 1px, transparent 0), linear-gradient(90deg, rgba(var(--biz-rgb3), .1) 1px, transparent 0);

  & h3 {
    color: var(--pro-color4);
  }

  & .time-table ol {
    border-left-color: var(--pro-color4);

    & time {
      color: var(--pro-color4);

      &::before {
        border-color: var(--pro-color4);
      }
    }
  }
}
.seg-04 .schedule-area {
  background-color: rgba(var(--corp-rgb), .184);
  background-image: linear-gradient(rgba(var(--corp-rgb), .1) 1px, transparent 0), linear-gradient(90deg, rgba(var(--corp-rgb), .1) 1px, transparent 0);

  & h3 {
    color: var(--corp-color);
  }

  & .time-table ol {
    border-left-color: var(--corp-color);

    & time {
      color: var(--corp-color);

      &::before {
        border-color: var(--corp-color);
      }
    }
  }
}

.other-people {
  display: block;
  width: 100%;
  margin-bottom: calc(190 var(--w-formulae));
  overflow: hidden;

  & hgroup {
    text-align: center;
    margin-bottom: calc(70 var(--w-formulae));

    & p {
      font-size: calc(36 var(--w-formulae));
      font-weight: 700;
      letter-spacing: .08em;
    }
  }
  & h3 {
    font-size: calc(16 var(--w-formulae));
    letter-spacing: .08em;
    line-height: calc(25 var(--w-formulae));
    display: inline-block;
    width: calc(160 var(--w-formulae));
    height: calc(25 var(--w-formulae));
    border-radius: 100px;
    color: #fff;
    margin-bottom: calc(35 var(--w-formulae));
  }
}
.seg-01 .other-people h3 {
  background-color: var(--biz-color1);
}




/* CAROUSEL Override */

.slide-area {
  position: relative;
  width: 100%;
}
.slide-arrow {
  box-sizing: border-box;
  border: solid 1px #000;
  border-radius: 50%;
  width: calc(52 var(--w-formulae));
  height: calc(52 var(--w-formulae));
  background-color: #fff;
  position: absolute;
  top: calc(150 var(--w-formulae));

  &::after {
    font-size: calc(24 var(--w-formulae));
    color: #000;
  }
}
.swiper-button-next {
  right: calc(204 var(--w-formulae));
}
.swiper-button-prev {
  left: calc(204 var(--w-formulae));
}