@charset "UTF-8";

aside {
  z-index: 12;
}

aside i,
aside b {
  border-bottom-color: #fff;
}

main {
  background: #000;
}

h1 {
  font-size: 6.41vw;
  padding: 13.36vw 0 10.5vw;
  text-align: center;
  color: #fff;
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  position: relative;
  z-index: 12;
}

h1 span {
  display: block;
  font-size: 4.1vw;
  font-weight: 200;
  letter-spacing: .08vw;
}

.tab {
  display: flex;
  justify-content: space-between;
  z-index: 2;
  color: #fff;
  height: 11vw;
  padding: 0 11.82vw;
  position: relative;
  z-index: 12;
}

.tab li {
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4vw;
}

.tab li:not(:last-child) {
  border-right: 1.5px solid;
  border-image: linear-gradient(to bottom, transparent 25%, #FFF 25% 70%, transparent 70%);
  border-image-slice: 1;
  padding-right: 3.33vw;
}

/* .tab li.active::after {
  content: "";
  display: block;
  width: 100%;
  height: 2vw;
  border-bottom: 2px solid #fff;
} */

.tab::after {
  content: "";
  display: block;
  position: absolute;
  left: 13vw;
  bottom: -3vw;
  width: 19.5vw;
  height: 2vw;
  border-bottom: 2px solid #fff;
  transition: all .4s;
}

.project .tab::after {
  left: 40vw;
}

.global .tab::after {
  left: 67vw;
}

.tabContent {
  position: relative;
  color: #fff;
  display: none;
  z-index: 11;
  padding: 0 12.82vw;
  padding: 72vw 12.82vw 0;
  margin: -51vw 0 0;
  height: 344.87vw;
  height: auto;
}

.tabContent.active {
  display: block;
  position: relative;
  z-index: 10;
}

.tabContent h2 {
  font-size: 7.18vw;
  line-height: 12.82vw;
  font-weight: 300;
  padding-bottom: 9.31vw;
  white-space: nowrap;
  margin-left: -.5vw;
}

.tabContent h3 {
  font-size: 7.4vw;
  line-height: 9.82vw;
  letter-spacing: -.4vw;
  font-weight: 400;
  padding: 0 0 10vw;
}

.tabContent p {
  font-weight: 300;
  padding-bottom: 11.21vw;
  font-size: 3.59vw;
  line-height: 6.4vw;
  /* letter-spacing: -.1vw; */
}

.linkWrap a {
  margin-bottom: 8vw;
}

.linkWrap a.design {
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 300;
  letter-spacing: .95vw;
}

#global.tabContent p {
  line-height: 7.2vw;
  padding-bottom: 11.5vw;
  letter-spacing: .1vw;
}

#business.tab {
  flex-flow: column;
  padding: 0 0 3vw;
  height: auto;
}

#business.tab::after {
  display: none;
}

#business li {
  padding: 3.7vw 0;
  font-size: 4.36vw;
  font-weight: 300;
  flex-flow: column;
  justify-content: flex-start;
  border: none;
  align-items: flex-start;
  cursor: initial;
}

#business li h4 {
  cursor: pointer;
  position: relative;
  width: 100%;
}

#business li h4::before,
#business li h4::after,
#business li.active h4::after {
  content: "";
  display: block;
  height: 1px;
  width: 4vw;
  border-bottom: 2px solid #fff;
  position: absolute;
  top: 3.5vw;
  right: 0;
  transform: rotate(0);
  transition: all .3s;
}

#business li h4::after {
  transform: rotate(90deg);
}

#business li p,
#business li img {
  pointer-events: none;
  text-align: left;
  display: none;
}

#business li.active p,
#business li.active img {
  display: block;
}

#business li p {
  margin-top: 9vw;
}

#business li img {
  margin-bottom: 5vw;
}

#business li:not(:last-child) {
  border-bottom: 1px solid #fff;
}

#project {
  background-image: url(/jp/recruitment/assets/img/vision/bg02.png);
  background-repeat: no-repeat;
  height: 344.87vw;
  background-position: top 0;
  background-size: contain;
}

#project img#projectImg {
  display: block;
  margin: 0 auto 14.36vw;
}

#project h3.pt {
  padding: 19.28vw 0 6.41vw;
  font-weight: 600;
  letter-spacing: .25vw;
}

#project p {
  padding-bottom: 9.21vw;
  letter-spacing: -.1vw;
}

#product {
  background: url(/jp/recruitment/assets/img/vision/bg01.png) no-repeat;
  background-size: cover;
  height: 394.1vw;
  padding-bottom: 114.87vw;
}

#product h3 {
  font-size: 5.13vw;
  letter-spacing: initial;
}

#global {
  background: url(/jp/recruitment/assets/img/vision/bg03.png) no-repeat;
  background-size: cover;
  padding: 74vw 12.82vw 0;
}

#global .controllScrollOver {
  margin-left: -12.82vw;
  padding-bottom: 14.5vw;
  width: 100vw;
  width: calc(100% + 12.82vw * 2);
}

#global .controllScrollWrap .controllScrollItemWrap li {
  width: 241vw;
  padding-left: 12.82vw;
}

#map img {
  width: 100%;
}

/* 下部banner */


.subpage #bannerWrap div.ourFigure {
  display: block;
  padding: 18vw 13vw 0;
  background-image: linear-gradient(140deg, #384c5d, #10161c);
  height: 174.87vw;
  background-size: cover;
}

.subpage .ourFigure {
  width: 100vw;
  height: 174.87vw;
  margin-left: auto;
  background-image: linear-gradient(140deg, #384c5d, #10161c);
  color: #fff;
  padding: 20vw 12.82vw 22vw;
}

.subpage .figureCardPcLeft {
  text-align: center;
}

.subpage #bannerWrap .figureCardPcLeft p {
  font-size: 6.37vw;
  padding: 0 0 20.82vw;
  text-align: center;
  text-align-last: center;
  font-weight: 500;
}

.subpage #bannerWrap .ourFigure h2 {
  font-size: 6.41vw;
  font-weight: 500;
  text-align: center;
  padding-bottom: 20vw;

}

.subpage #bannerWrap .ourFigure h3 {
  font-size: 40.51vw;
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 100;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.subpage #bannerWrap .ourFigure h3 span {
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  writing-mode: vertical-lr;
  font-size: 9.74vw;
  line-height: 13vw;
  display: flex;
  width: auto;
}

.subpage #bannerWrap .ourFigure h3 span span {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 8.74vw;
  padding: 0 0 2vw 0;
}

.subpage #bannerWrap .ourFigure>p {
  text-align: center;
  font-size: 6.41vw;
  padding-bottom: 19vw;
}

.subpage #bannerWrap .figureCard {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  text-align: center;
  height: auto;
}

.subpage #bannerWrap .figureCard p:first-child {
  font-size: 5.38vw;
  margin-bottom: -11vw;
  text-align: center;
  text-align-last: center
}

.subpage #bannerWrap .figureCard p:nth-child(3) {
  font-size: 3.59vw;
  line-height: 5.13vw;
  text-align: left;
  text-align-last: left;
  padding: 0 9vw;
  font-weight: 200;
  margin: -3vw 0 0;
}

.subpage #bannerWrap .figureCard a {
  margin-top: 17.95vw;
  border: 2px solid #fff;
  color: #fff;
}