@charset "UTF-8";
/*------------------------------------------------------------


  style.css


------------------------------------------------------------*/
@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {}
@media (max-width: 768px) and (orientation: portrait) {}
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 1dppx) {}
@media (hover: hover) {}


/*============================================================
  top
============================================================*/
#top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 62.5vw;
  max-height: 100vh;
}

#top .group-catch {
  width: 136vh;
  max-width: calc(100% - 16rem);
  margin-top: 3.2vh;
}

#top .group-catch .text-catch span {
  width: 100%;
}

#top .group-catch .text-catch .text-lw,
#top .group-catch .text-catch .text-sw {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 1.2svh;
}

#top .group-catch .text-catch img.text {
  width: 100%;
  height: auto;
}

#top .group-catch .text-name {
  margin-top: 4.8vh;
}

#top .group-catch .text-name svg.logo {
  width: 100%;
  fill: #000;
}

#top .group-catch .text-keyword {
  margin-top: 2vh;
}

@media (max-width: 768px) and (orientation: portrait) {
  #top {
    width: 100%;
    height: 88svh;
    max-height: initial;
  }

  #top .group-catch {
    width: calc(100% - 4rem);
    max-width: initial;
    max-height: calc(88svh - 4rem);
    margin-top: 6.4vh;
  }

  #top .group-catch .text-name {
    margin-top: 3.2vh;
  }
}


/*============================================================
  artwork
============================================================*/
#artwork .group-image img.picture {
  width: 100%;
  height: auto;
}

#artwork .group-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
}

#artwork .dl-artwork > dt,
#artwork .dl-artwork > dd {
  display: inline;
}

#artwork .text-link .icon {
  width: 1rem;
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  margin-left: 0.2em;
  vertical-align: 4%;
}

@media (max-width: 768px) and (orientation: portrait) {
  #artwork .group-image {
    height: 88svh;
    overflow: hidden;
  }
  
  #artwork .group-image img.picture {
    width: auto;
    height: 100%;
    float: right;
  }

  #artwork .group-text {
    flex-direction: column;
  }

  #artwork .text-link {
    display: block;
  }

  #artwork .text-link .icon {
    width: 0.8rem;
  }
}


/*============================================================
  work
============================================================*/
#work .list-work > li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

#work .list-work > li + li {
  margin-top: 8rem;
}

#work .list-work .group-image {
  width: calc(50% - 4rem);
  border-radius: 4rem;
  overflow: hidden;
}

#work .list-work .group-image-item-1,
#work .list-work .group-image-item-2 {
  aspect-ratio: 3 / 2;
}

#work .list-work .group-image img.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#work .list-work .group-outline .group-title {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: baseline;
}

#work .list-work .group-outline {
  width: 31.25%;
  margin-bottom: 4rem;
}

#work .list-work .group-outline .text-catch img.text {
  width: auto;
  height: 10.4rem;
}

#work .list-work .group-outline .list-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

@media (max-width: 768px) and (orientation: portrait) {
  #work .list-work > li {
    flex-direction: column;
    justify-content: normal;
    align-items: normal;
    gap: 2.4rem;
  }

  #work .list-work > li + li {
    margin-top: 4rem;
  }

  #work .list-work .group-image {
    width: 100%;
  }

  #work .list-work .group-outline {
    width: 100%;
    margin-bottom: 0;
  }

  #work .list-work .group-outline .text-catch img.text {
    height: 8.8rem;
  }
}


/*============================================================
  message
============================================================*/
#message .text-keyword {
  text-align: center;
}

#message .text-keyword .text {
  height: 80rem;
  fill: #000;
}

#message .group-message-1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -8rem;
}

#message .group-message-1 .heading-section {
  width: 50%;
}

#message .group-message-1 .text-message {
  width: 50%;
  margin-top: 22.4rem;
}

#message .group-message-1 .text-catch .text {
  width: auto;
  height: 11.6rem;
}

#message .group-message-1 .text-catch-en .text-taigi {
  display: block;
  font-size: 14.4rem;
  line-height: 1.2;
  margin-left: 2.4rem;
  margin-top: -1.6rem;
}

#message .group-message-1 .text-catch-en .text-taigi::before,
#message .group-message-1 .text-catch-en .text-taigi::after {
  content: "";
  display: inline-block;
  width: 6rem;
  height: 4.4rem;
  background: url('../images/symbol-quotation-blk.svg') left top no-repeat;
  background-size: contain;
  vertical-align: 36%;
}

#message .group-message-1 .text-catch-en .text-taigi::after {
  transform: rotate(180deg);
}

#message .group-message-2 .group-point {
  width: 50%;
  margin-left: auto;
  position: relative;
}

#message .group-message-2 .group-point .dl-point {
  width: 62.5%;
  margin-left: auto;
}

#message .group-message-2 .group-point img.symbol {
  width: auto;
  height: 16rem;
  margin: auto 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
}

#message .group-message-2 .group-point img.text {
  width: auto;
  height: 3rem;
}

#message .group-message-3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
}

#message .group-message-3 .group-outline {
  width: calc(50% - 4rem);
}

@media (max-width: 768px) and (orientation: portrait) {
  #message .text-keyword .text {
    height: 72svh;
  }

  #message .group-message-1 {
    flex-direction: column;
    justify-content: normal;
    margin-top: 2.4rem;
  }

  #message .group-message-1 .heading-section {
    width: 100%;
  }

  #message .group-message-1 .text-message {
    width: 100%;
    margin-top: 2.4rem;
  }

  #message .group-message-1 .text-catch .text {
    height: 8.8rem;
  }

  #message .group-message-1 .text-catch-en .text-taigi {
    font-size: 8rem;
    margin-left: 0;
    margin-top: 0.8rem;
  }

  #message .group-message-1 .text-catch-en .text-taigi::before,
  #message .group-message-1 .text-catch-en .text-taigi::after {
    width: 3.6rem;
    height: 2.6rem;
    vertical-align: 40%;
  }

  #message .group-message-2 .group-point {
    width: 100%;
    text-align: center;
  }

  #message .group-message-2 .group-point .dl-point {
    width: 100%;
    margin-left: auto;
    text-align: left;
  }

  #message .group-message-2 .group-point img.symbol {
    width: auto;
    height: 12.8rem;
    margin: auto;
    position: static;
    transform: none;
  }

  #message .group-message-2 .group-point img.text {
    height: 2.4rem;
  }

  #message .group-message-3 {
    display: flex;
    flex-direction: column;
    justify-content: normal;
    align-items: normal;
  }

  #message .group-message-3 .group-outline {
    width: 100%;
  }
}


/*============================================================
  mission
============================================================*/
#mission .heading-section img.text {
  height: 6.4rem;
}

#mission .list-mission > li {
  margin-bottom: 8rem;
}

#mission .list-mission .image-mission {
  width: 31.25%;
  margin-left: auto;
  margin-right: auto;
}

#mission .list-mission .dl-mission {
  width: 50%;
  margin-left: auto;
}

#mission .list-mission .title-subsection {
  font-size: 12rem;
}

#mission .list-mission #mission-gokigen .text-catch img.text {
  width: auto;
  height: 6.8rem;
}

#mission .list-mission #mission-beat .text-catch img.text {
  width: auto;
  height: 10.7rem;
}

#mission #mission-goal {
  background-color: #0068D0;
}

#mission #mission-goal .text-catch img.text {
  width: auto;
  height: 3rem;
}

#mission #mission-goal .text-body {
  width: 87.5%;
}

@media (max-width: 768px) and (orientation: portrait) {
  #mission .heading-section a > strong {
    padding-bottom: 0.4rem;
  }

  #mission .heading-section img.text {
    height: 3.2rem;
  }

  #mission .heading-section .text-keyword {
    margin-left: 0.4rem;
  }

  #mission .list-mission > li {
    margin-bottom: 4rem;
  }

  #mission .list-mission .image-mission {
    width: 50%;
  }

  #mission .list-mission .dl-mission {
    width: 100%;
  }

  #mission .list-mission .title-subsection {
    font-size: 6.4rem;
  }

  #mission .list-mission #mission-gokigen .text-catch img.text {
    height: 5.2rem;
  }

  #mission .list-mission #mission-beat .text-catch img.text {
    width: auto;
    height: 8rem;
  }

  #mission #mission-goal .text-catch img.text {
    height: 8rem;
  }

  #mission #mission-goal .text-body {
    width: 100%;
  }
}


/*============================================================
  service
============================================================*/
#service .list-service  {
  text-align: center;
}

#service .list-service > li {
  margin-bottom: 8rem;
}

#service .list-service > li + li .dl-service > dt {
  border-top: 0.8px solid rgba(0,0,0,0.4);
  padding-top: 4.8rem;
}

#service .dl-service .group-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

#service .dl-service .group-text {
  width: 68.75%;
}

#service .dl-service .group-text .text-body {
  width: 64%;
}

#service #service-step3 .dl-service .group-text {
  width: 81.25%;
}

#service #service-step3 .dl-service .group-text .text-body {
  width: 54%;
}

#service .list-service .title-subsection img.text {
  width: auto;
  height: 4.6rem;
}

#service .list-service .title-subsection .text-en {
  display: inline-block;
}

#service .list-service .text-catch img.text {
  width: auto;
  height: 5.8rem;
}

#service #service-stance {
  background-color: #0068D0;
}

#service #service-stance .text-catch img.text {
  width: auto;
  height: 3rem;
}

#service #service-stance .text-body {
  width: 87.5%;
}

#service .group-example .module-slide {
  width: 62.5%;
  margin-left: auto;
  margin-right: auto;
}

#service .list-example-1 > li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#service .list-example-1 .image-example {
  width: 20%;
  aspect-ratio: 4 / 3;
  border-radius: 0.2rem;
  overflow: hidden;
  position: relative;
}

#service .list-example-1 .image-example::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.02);
  position: absolute;
  left: 0;
  top: 0;
}

#service .list-example-1 .image-example img.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#service .list-example-1 .dl-example {
  width: 75%;
  text-align: left;
}

#service .list-example-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

#service .list-example-2::after {
  content: "";
  display: block;
  width: 30%;
  height: 0;
}

#service .list-example-2 > li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 30%;
}

#service .list-example-2 > li:nth-of-type(n+4) {
  margin-top: 4rem;
}

#service .list-example-2 .image-example {
  width: 10%;
  aspect-ratio: 1 / 1;
  border-radius: 0.2rem;
  overflow: hidden;
  position: relative;
}

#service .list-example-2 .image-example img.picture {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#service .list-example-2 .image-example svg.icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  stroke: #000;
  stroke-width: 0.6px;
  fill: none;
}

#service .list-example-2 .dl-example {
  width: 75%;
  text-align: left;
}

@media (max-width: 768px) and (orientation: portrait) {
  #service .list-service > li {
    margin-bottom: 4rem;
  }

  #service .list-service > li + li .dl-service > dt {
    padding-top: 2.4rem;
  }

  #service .dl-service .group-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: normal;
    gap: 1.6rem;
  }

  #service .dl-service .group-text {
    width: 100%;
  }

  #service .dl-service .group-text .text-body {
    width: 100%;
  }

  #service #service-step3 .dl-service .group-text {
    width: 100%;
  }

  #service #service-step3 .dl-service .group-text .text-body {
    width: 100%;
  }

  #service .list-service .title-subsection img.text {
    height: 3.2rem;
  }

  #service .list-service .text-catch img.text {
    height: 4.8rem;
  }

  #service #service-stance .text-catch img.text {
    height: 8rem;
  }

  #service #service-stance .text-body {
    width: 100%;
  }

  #service .group-example .module-slide {
    width: 100%;
  }

  #service .list-example-1 {
    padding-bottom: 1.6rem;
  }

  #service .list-example-1 > li {
    align-items: flex-start;
  }

  #service .list-example-2::after {
    display: none;
  }

  #service .list-example-2 > li {
    align-items: flex-start;
    width: 100%;
  }

  #service .list-example-2 > li:nth-of-type(n+2) {
    margin-top: 2.4rem;
  }
}


/*============================================================
  media
============================================================*/
#media {
  background-color: #111;
}

#media #media-insidefocus {
  padding-top: 8rem;
  margin-top: -8rem;
}

#media .group-media-outline {
  position: relative;
}

#media .group-media-outline .group-video {
  aspect-ratio: 16 / 9;
  border-radius: 4rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

#media .group-media-outline .group-video::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#media .group-media-outline .group-video::before {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  background: url("../images/icon-loader.svg") center center no-repeat;
  background-size: contain;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

#media .group-media-outline .group-video.play::before {
  display: none;
}

#media .group-media-outline .group-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  position: relative;
  z-index: 0;
}

#media .group-media-outline .group-video.play video {
  visibility: visible;
}

#media .group-media-outline .group-video .poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#media .group-media-outline .group-video.play .poster {
  display: none;
}

#media .group-media-outline .group-text {
  width: 37.5%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

#media .group-media-outline .group-text .title-media {
  font-size: 14rem;
  line-height: 0.8;
  text-align: justify;
  white-space: nowrap;
}

html.windows #media .group-media-outline .group-text .title-media {
  padding-top: 0.04em;
}

#media .group-media-article .module-slide {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
}

#media .group-media-article .module-slide .group-slide-indicator button {
  background-color: #fff;
}

#media .group-media-article .module-slide .group-slide-button button .icon {
  stroke: #fff;
}

#media .group-media-article .list-article {
  padding-bottom: 1.6rem;
} 

#media .group-media-article .list-article article {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
}

#media .group-media-article .list-article .group-outline {
  width: 35.7%;
}

#media .group-media-article .list-article .group-image {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  border-radius: 4rem;
  overflow: hidden;
  position: relative;
}

#media .group-media-article .list-article .group-image-item-1 {
  width: 100%;
  aspect-ratio: 7 / 4;
}

#media .group-media-article .list-article .group-image-item-2,
#media .group-media-article .list-article .group-image-item-3 {
  width: 50%;
  aspect-ratio: 7 / 4;
}

#media .group-media-article .list-article .group-image-item-1::after,
#media .group-media-article .list-article .group-image-item-2::after,
#media .group-media-article .list-article .group-image-item-3::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.08);
  position: absolute;
  left: 0;
  top: 0;
}

#media .group-media-article .list-article .group-image img.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#media .group-media-article .list-article .group-outline {
  width: 35.7%;
}

#media .group-media-article .list-article .text-catch img.text {
  width: auto;
  height: 10.4rem;
}

@media (max-width: 768px) and (orientation: portrait) {
  #media .group-media-outline .group-video {
    border-radius: 2rem;
  }

  #media #media-insidefocus {
    padding-top: 0rem;
    margin-top: 0rem;
  }

  #media .group-media-outline .group-text {
    width: 100%;
    margin-top: 3.2rem;
    position: static;
  }

  #media .group-media-outline .group-text .title-media {
    font-size: 6.4rem;
  }

  #media .group-media-article .module-slide {
    width: 100%;
  }

  #media .group-media-article .list-article article {
    flex-direction: column-reverse;
    justify-content: normal;
    align-items: flex-start;
    gap: 2rem;
  }

  #media .group-media-article .list-article .group-outline {
    width: 100%;
  }

  #media .group-media-article .list-article .group-image {
    border-radius: 2rem;
  }

  #media .group-media-article .list-article .group-image {
    width: 64%;
  }

  #media .group-media-article .list-article .group-outline {
    width: 100%;
  }

  #media .group-media-article .list-article .text-catch img.text {
    height: 8rem;
  }
}


/*============================================================
  company
============================================================*/
#company .group-company-profile {
  margin-top: -2.4rem;
}

#company .group-company-profile .list-profile {
  width: 37.5%;
  margin-left: 50%;
}

#company .group-company-profile .list-profile > li + li {
  margin-top: 1.6rem;
}

#company .group-company-profile .dl-profile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: first-baseline;
}

#company .group-company-profile .dl-profile > dt {
  width: 30%;
}

#company #company-roots {
  margin-top: -4.8rem;
}

#company #company-roots .group-video {
  aspect-ratio: 16 / 9;
  border-radius: 4rem;
  background-color: transparent;
  overflow: hidden;
  position: relative;
}

#company #company-roots .group-video.play {
  background-color: #222;
}

#company #company-roots .group-video.play.loaded {
  background-color: transparent;
}

#company #company-roots .group-video::before {
  content: "";
  display: none;
  width: 4rem;
  height: 4rem;
  background: url("../images/icon-loader.svg") center center no-repeat;
  background-size: contain;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

#company #company-roots .group-video::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#company #company-roots .group-video.play::before {
  display: block;
}

#company #company-roots .group-video.play.loaded::before {
  display: none;
}

#company #company-roots .group-video.play::after {
  display: none;
}

#company #company-roots .group-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  position: relative;
  z-index: 0;
}

#company #company-roots .group-video.play.loaded video {
  visibility: visible;
}

#company #company-roots .group-video .poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#company #company-roots .group-video.play .poster {
  display: none;
}

#company #company-roots .group-video .btn-play {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

#company #company-roots .group-video.play .btn-play {
  display: none;
}

#company #company-roots .group-text {
  width: 37.5%;
  margin-left: 50%;
}

#company .group-company-member .title-member,
#company .group-company-member .list-member {
  width: 37.5%;
  margin-left: 50%;
}

#company .group-company-member .list-member > li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#company .group-company-member .list-member > li + li {
  margin-top: 4rem;
}

#company .group-company-member .image-member {
  width: 20%;
  aspect-ratio: 1 / 1;
  border-radius: 0.2rem;
  overflow: hidden;
}

#company .group-company-member .image-member img.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#company .group-company-member .link-member {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  width: 70%;
}

#company .group-company-member .link-member .text-en {
  display: inline-block;
}

#company .group-company-member .link-member .text-link .icon {
  width: 1rem;
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  margin-left: 0.2em;
  vertical-align: 4%;
}

@media (max-width: 768px) and (orientation: portrait) {
  #company .group-company-profile {
    margin-top: 2.4rem;
  }

  #company .group-company-profile .list-profile {
    width: 100%;
    margin-left: 0;
  }

  #company .group-company-profile .list-profile > li + li {
    margin-top: 1.2rem;
  }

  #company .group-company-profile .dl-profile > dt {
    width: 24%;
  }

  #company #company-roots {
    margin-top: -2.4rem;
  }

  #company #company-roots .group-video {
    border-radius: 2rem;
  }

  #company #company-roots .group-text {
    width: 100%;
    margin-left: 0;
  }

  #company .group-company-member .title-member,
  #company .group-company-member .list-member {
    width: 100%;
    margin-left: 0;
  }

  #company .group-company-member .list-member > li {
    justify-content: space-between;
    justify-content: left;
    gap: 2rem;
    align-items: center;
  }

  #company .group-company-member .list-member > li + li {
    margin-top: 2rem;
  }

  #company .group-company-member .image-member {
    width: 16%;
  }

  #company .group-company-member .link-member {
    width: 64%;
  }

  #company .group-company-member .link-member .text-link .icon {
    width: 0.8rem;
  }
}


/*============================================================
  profile
============================================================*/
#profile {
  justify-content: flex-end;
}

#profile .group-profile {
  width: 50%;
  max-height: calc(100% - 4rem);
  text-align: left;
  background-color: #fff;
  border-radius: 0.4rem;
  margin-right: 4rem;
  position: relative;
  overflow-y: auto;
}

#profile .section-profile {
  display: none;
}

#profile .section-profile.active {
  display: block;
}

#profile .image-profile {
  max-width: 44%;
  max-height: 44svh;
  aspect-ratio: 3 / 4;
  border-radius: 0.2rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

#profile .image-profile img.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) and (orientation: portrait) {
  #profile {
    justify-content: center;
  }

  #profile .group-profile {
    width: calc(100% - 4rem);
    margin-right: 0;
  }
}