@charset "UTF-8";
/* ------------------------------------------------------------
   Variables
------------------------------------------------------------ */
/* ----- Breakpoint ----- */
/* ----- Content width ----- */
/* ----- Font family ----- */
/* ------------------------------------------------------------
   mixin
------------------------------------------------------------ */
/* ----- Media Queries ----- */
/* ----- image filter ----- */
/* ----- diagonal filter ----- */
/* ------------------------------------------------------------
   Function
------------------------------------------------------------ */
/* ------------------------------------------------------------
   Top
------------------------------------------------------------ */
.top {
  background: #F1F4F8;
  /* ----- mainvisual ----- */
  overflow: hidden;
  /* ----- solution ----- */
  /* ----- product ----- */
  /* ----- ourvalue ----- */
  /* ----- cases ----- */
  /* ----- column ----- */
  /* ----- topics ----- */
  /* ----- company recruit ----- */
}
.top .p-top {
  position: relative;
  overflow: hidden;
}
.top .top-movie-box {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
.top .top-movie-box #movie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.top .top-movie-box #movie .video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.top .sp-movie {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  margin-bottom: -16px;
}
.top .sp-movie .sp-movie-movie {
  position: fixed;
  z-index: -1; /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
.top .sp-movie .video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  /*縦横幅指定*/
  width: 100%;
}
.top .mainvisual {
  width: 81.25%;
  aspect-ratio: 1/1;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.top .mainvisual::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  right: 40px;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(100% 0, 100% 100%, 0% 100%);
}
.top .mainvisual .swiper-wrapper {
  margin-left: auto;
}
.top .mainvisual-slider {
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  right: 0;
  bottom: 0;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(100% 0, 100% 100%, 0% 100%);
  position: relative;
}
.top .mainvisual-slider::before {
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.2);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(100% 0, 100% 100%, 0% 100%);
  z-index: 2;
  pointer-events: none;
}
.top .mainvisual-slider {
  position: relative;
  height: 100%;
  width: 100%;
}
.top .mainvisual-slider .swiper-wrapper {
  max-width: 100vw;
  position: relative;
  overflow: hidden;
}
.top .mainvisual-slider .swiper-slide img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  cursor: pointer;
}
.top .mainvisual-slider .swiper-slide-active img,
.top .mainvisual-slider .swiper-slide-duplicate-active img,
.top .mainvisual-slider .swiper-slide-prev img {
  -webkit-animation: zoom-in 7s linear 0s normal both;
  animation: zoom-in 7s linear 0s normal both;
}
@-webkit-keyframes zoom-in {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}
@keyframes zoom-in {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}
.top .p-top-bg-sp::before {
  content: "";
  width: 100%;
  background: #f6f6f4;
  position: absolute;
  z-index: -1;
}
.top .p-movie-txtbox {
  color: #fff;
  position: absolute;
  top: 30.55555vmin;
  left: 4.1666%;
  width: 100%;
  pointer-events: none;
  z-index: 3;
}
.top .p-movie-txtbox__main {
  font-family: "Oswald", sans-serif;
  -moz-text-align-last: left;
  text-align-last: left;
  font-weight: bold;
  text-transform: uppercase;
  font-size: clamp(80px, 7.9545454545vw, 8.75rem);
  color: var(--txtcolor);
  line-height: 1.2;
}
.top .splitTxtmain, .top .splitTxtmain2 {
  opacity: 0;
}
.top .splitTxtmain .char {
  opacity: 0;
}
.top .p-movie-txtbox__sub {
  font-family: "Oswald", sans-serif;
  font-weight: bold;
  color: var(--txtcolor);
  margin-top: clamp(20px, 2.8409090909vw, 50px);
}
.top .solution {
  position: relative;
  padding-top: clamp(50px, 7.5568181818vw, 133px);
  z-index: 1;
}
.top .solution::before {
  content: "";
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  z-index: -1;
}
.top .solution .c-text-autoscroll {
  position: absolute;
  top: 0;
  z-index: -1;
}
.top .solution .c-text-autoscroll ._looptxt {
  color: rgba(241, 244, 248, 0.5);
  font-size: 11.4583333333vw;
  font-family: "Oswald", sans-serif;
}
.top .p-solution {
  width: 94.79166%;
  min-height: 720px;
  background: #fff;
  margin-right: auto;
  margin-left: 20px;
  position: relative;
}
.top .p-solution::before {
  content: "";
  width: calc(100% + 20px);
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 0;
  top: 20px;
  z-index: -1;
}
.top .p-solution-content {
  padding: 60px;
  min-height: 720px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.top .p-solution-content::before {
  content: "";
  width: 84.61538%;
  height: 100%;
  background: url(../../../img/top/solution_bg@2x.webp) no-repeat;
  background-size: cover;
  background-position: right top;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: -1;
}
.top .p-solution-content::after {
  content: "";
  width: 84.61538%;
  aspect-ratio: 1/1;
  height: auto;
  background: rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-position: right;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 0;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.top .p-solution-txtbox {
  position: absolute;
  bottom: 11.11111%;
  right: 15.38462%;
  z-index: 1;
}
.top .p-solution-txtbox-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}
.top .p-solution-icon {
  display: inline-block;
  width: 95px;
  height: 95px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #222d3c;
  position: relative;
}
.top .p-solution-icon::before {
  content: "";
  width: 59px;
  height: 59px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.top .p-solution-icon.--com::before {
  background: url(../../../img/common/icon_office.svg) no-repeat;
  background-size: contain;
}
.top .p-solution-icon.--edu::before {
  background: url(../../../img/common/icon_education.svg) no-repeat;
  background-size: contain;
}
.top .p-solution-icon.--store::before {
  background: url(../../../img/common/icon_store.svg) no-repeat;
  background-size: contain;
}
.top .p-solution-arwBox {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 15.38462%;
}
.top .p-solution-arw {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.top .c-circle-arw {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  width: 110px;
  height: 110px;
  background: #fff;
  border-radius: 50%;
}
.top .c-circle-arw::before, .top .c-circle-arw::after {
  content: "";
  display: block;
}
.top .c-circle-arw::before {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e2e7e8;
  opacity: 1;
  -webkit-transition: all 0.2s var(--linear);
  transition: all 0.2s var(--linear);
}
.top .c-circle-arw::after {
  z-index: 2;
  position: relative;
  width: 33.4px;
  height: 19.8px;
  background: url(../../../img/common/arrow_r_bk.svg) no-repeat;
  background-size: contain;
}
.top .p-maker-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  gap: 70px 40px;
  position: relative;
  z-index: 1;
}
.top .p-maker-list._2 li.p-maker-listItem:nth-child(-n+2) {
  display: none;
}
.top .p-maker-listItem {
  background: #fff;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: clamp(15px, 1.7045454545vw, 30px);
  position: relative;
  padding-right: 5.128%;
}
.top .p-maker-listItem::before {
  content: "";
  width: calc(100% + 20px);
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 0;
  top: 20px;
  z-index: -1;
}
.top .p-maker-listItem p {
  text-align: left;
}
.top .p-maker-img {
  width: 28.205%;
  min-width: 70px;
  height: 100%;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.top .p-maker-img img {
  -webkit-transition: all 0.2s var(--linear);
  transition: all 0.2s var(--linear);
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.top .p-maker-img.--share {
  background: url(../../../img/top/shure_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--bose {
  background: url(../../../img/top/bose_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--yamaha {
  background: url(../../../img/top/yamaha_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--sennheiser {
  background: url(../../../img/top/sennheiser_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--poly {
  background: url(../../../img/top/poly_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--meleon {
  background: url(../../../img/top/meleon_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--tokyo {
  background: url(../../../img/top/tokyoblinds_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--netgear {
  background: url(../../../img/top/netgear_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--extron {
  background: url(../../../img/top/extron_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--amx {
  background: url(../../../img/top/amx_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--cf {
  background: url(../../../img/top/crestronfusion_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--crestron {
  background: url(../../../img/top/crestron_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--canare {
  background: url(../../../img/top/canare_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-img.--genelec {
  background: url(../../../img/top/genelec_hov@2x.webp) no-repeat;
  background-size: cover;
}
.top .p-maker-arrow {
  width: clamp(55px, 5vw, 88px);
  height: auto;
  aspect-ratio: 1/1;
  background: #f1f4f8;
  border-radius: 50%;
  position: relative;
  z-index: 0;
  margin-left: auto;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.top .p-maker-arrow::before {
  content: "";
  width: 33.4px;
  height: 19.8px;
  background: url(../../../img/common/arrow_r_bk.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 1;
}
.top .p-maker-arrow::after {
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(315deg, #1976e0 0%, #19c5e0 100%);
  background: linear-gradient(-225deg, #1976e0 0%, #19c5e0 100%);
  border-radius: 100%;
  opacity: 0;
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transition: all 0.2s var(--linear);
  transition: all 0.2s var(--linear);
  z-index: 0;
}
.top .p-maker-box {
  text-align: center;
}
.top .p-maker-box .c-closebtn {
  display: inline-block;
  text-align: center;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}
.top .p-ov-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.top .p-ov-content__column.--img {
  margin-left: calc(50% - 50vw);
  width: 50vw;
}
.top .p-ov-content__column.--txt {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.top .p-ov-img {
  margin-left: auto;
  margin-right: clamp(20px, 5.6818181818vw, 100px);
  position: relative;
}
.top .p-ov-img::before {
  content: "";
  width: calc(100% + 20px);
  height: 100%;
  position: absolute;
  right: -20px;
  top: 20px;
  background: rgba(0, 0, 0, 0.1);
}
.top .p-ov-strong-list li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-bottom: 2.0833333333vw;
  gap: clamp(15px, 1.7045454545vw, 30px);
  position: relative;
}
.top .p-ov-strong-list li:nth-child(n+2) {
  padding-top: 2.0833333333vw;
  border-top: 1px solid rgba(155, 172, 182, 0.5);
}
.top .p-ov-strong-list dl {
  position: relative;
}
.top .p-ov-icon {
  display: inline-block;
  width: 4.4270833333vw;
  height: 4.4270833333vw;
  aspect-ratio: 1/1;
  background: #222d3c;
  border: 2px solid #1976e0;
  border-radius: 50%;
  position: relative;
}
.top .p-ov-icon::before {
  content: "";
  width: 2.5520833333vw;
  height: 2.5520833333vw;
  aspect-ratio: 1/1;
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.top .p-ov-icon._1::before {
  background: url(../../../img/common/icon_onestop.svg) no-repeat;
  background-size: contain;
}
.top .p-ov-icon._2::before {
  background: url(../../../img/common/icon_good.svg) no-repeat;
  background-size: contain;
}
.top .p-ov-icon._3::before {
  background: url(../../../img/common/icon_psni.svg) no-repeat;
  background-size: contain;
}
.top .p-cases-field {
  padding-right: 15px;
  padding-left: clamp(2px, 9.0909090909vw, 160px);
}
.top .p-cases-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: -56px;
}
.top .p-cases-listItem {
  position: relative;
  overflow: hidden;
}
.top .p-cases-listItem figcaption {
  position: absolute;
  left: 3.8461%;
  top: 6.25%;
}
.top .p-cases-listItem .c-btn-arrow {
  position: absolute;
  right: 4.8%;
  bottom: 7.8125%;
}
.top .p-cases-listItem img {
  -webkit-transition: all 0.2s var(--linear);
  transition: all 0.2s var(--linear);
}
.top .cases-img {
  height: 100%;
}
.top .cases-img img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.top .p-cases-listItem:nth-child(3n+2) {
  position: relative;
  top: calc(clamp(20px, 4.5454545455vw, 80px) * -1);
}
.top .p-cases-listItem:nth-child(3n) {
  position: relative;
  top: calc(clamp(20px, 9.0909090909vw, 160px) * -1);
}
.top .p-cases-taglist {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.top .p-cases-taglist li {
  line-height: 18px;
  background: #222d3c;
  display: inline-block;
  border-radius: 20px;
}
.top .p-cases-taglist li span {
  padding: 0 10px;
  font-weight: 500;
  font-size: 0.75rem;
  text-align: center;
  color: #19c5e0;
}
.top .p-cases-ttl p {
  display: inline;
}
.top .p-cases-ttl span._in {
  padding: 0.4166666667vw 0.78125vw;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: #222d3c;
  color: #fff;
}
.top .p-cases-ttl div {
  display: inline;
  background: #fff;
  font-weight: 500;
  font-size: 0.75rem;
}
.top .p-cases-sub {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.top .p-cases-sub p {
  display: inline-block;
  background: #222d3c;
  color: #fff;
}
.top .p-cases-sub ._year {
  padding: 5px 5px 5px 0.78125vw;
}
.top .p-cases-sub ._att {
  background: #222d3c;
  padding: 5px 0.78125vw 5px 0;
}
.top .p-cases-sub ._att span {
  background: #fff;
  color: #222d3c;
  font-weight: 500;
  border-radius: 20px;
  font-size: 0.75rem;
  line-height: 18px;
  padding: 0 10px;
}
.top .p-cases-btn {
  position: relative;
  z-index: 1;
}
.top .cases-swiper {
  position: relative;
}
.top .cases-swiper .swiper-pagination {
  top: 100%;
}
.top .cases-swiper .swiper-button-prev, .top .cases-swiper .swiper-button-next {
  height: 34px;
  width: 34px;
  z-index: 3;
}
.top .cases-swiper .swiper-button-prev {
  left: 3%;
  background: url(../../../img/common/nav_prev_wh.svg) no-repeat;
  background-size: contain;
}
.top .cases-swiper .swiper-button-next {
  right: 3%;
  background: url(../../../img/common/nav_next_wh.svg) no-repeat;
  background-size: contain;
}
.top .p-column-field {
  padding-right: 15px;
  padding-left: clamp(2px, 9.0909090909vw, 160px);
}
.top .p-column-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.top .p-column-listItem {
  width: calc((100% - 60px) / 4);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}
.top .p-column-listItem figure {
  overflow: hidden;
}
.top .p-column-listItem figure img {
  -webkit-transition: -webkit-transform 0.2s var(--linear);
  transition: -webkit-transform 0.2s var(--linear);
  transition: transform 0.2s var(--linear);
  transition: transform 0.2s var(--linear), -webkit-transform 0.2s var(--linear);
}
.top .p-column-listItem:nth-child(2) {
  top: calc(clamp(20px, 3.4090909091vw, 60px) * -1);
}
.top .p-column-listItem:nth-child(3) {
  top: calc(clamp(20px, 6.8181818182vw, 120px) * -1);
}
.top .p-column-listItem:nth-child(4) {
  top: calc(clamp(20px, 10.2272727273vw, 180px) * -1);
}
.top .p-column-detail {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: clamp(15px, 1.4204545455vw, 25px) clamp(15px, 1.4204545455vw, 25px) 80px;
  position: relative;
  background: #fff;
}
.top .p-column-detail .c-btn-arrow {
  width: 70px;
  height: 24px;
  border-radius: 12px;
  position: relative;
  position: absolute;
  right: 25px;
  bottom: 25px;
  -webkit-transition: all 0.2s var(--linear);
  transition: all 0.2s var(--linear);
}
.top .p-column-meta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.top .p-column-meta ._cat {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  border-radius: 20px;
  background: #9bacb6;
  min-width: 80px;
  text-align: center;
  padding: 0 4px;
  line-height: 1.5;
}
.top .column-swiper {
  position: relative;
}
.top .column-swiper .swiper-pagination {
  top: 100%;
}
.top .column-swiper .swiper-button-prev, .top .column-swiper .swiper-button-next {
  height: 34px;
  width: 34px;
  z-index: 3;
}
.top .column-swiper .swiper-button-prev {
  left: 3%;
  background: url(../../../img/common/nav_prev_bk.svg) no-repeat;
  background-size: contain;
}
.top .column-swiper .swiper-button-next {
  right: 3%;
  background: url(../../../img/common/nav_next_bk.svg) no-repeat;
  background-size: contain;
}
.top .p-topics {
  max-width: 1440px;
  width: 100%;
  background: #9bacb6;
  margin: auto;
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.4722222222vw, 50px) clamp(20px, 8.3333333333vw, 120px);
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.top .p-topics::before {
  content: "";
  width: 50%;
  aspect-ratio: 1/1;
  background: #222d3c;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.top .p-topics__ttl {
  cursor: pointer;
  padding: 25px clamp(20px, 3.4722222222vw, 50px);
}
.top .p-topics__ttl ._day span {
  font-weight: 500;
  font-size: 0.875rem;
}
.top .p-topics__ttl ._ttl {
  font-weight: bold;
  font-size: 1.125rem;
  padding-right: 30px;
}
.top .p-topics__ttl-field {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  position: relative;
}
.top .p-topics__ttl-field::before, .top .p-topics__ttl-field::after {
  content: "";
}
.top .p-topics__ttl-field::before {
  width: 24px;
  height: 24px;
  background: #222d3c;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.top .p-topics__ttl-field::after {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  right: 8px;
  top: 48%;
  -webkit-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
  -webkit-transition: var(--trans02s);
  transition: var(--trans02s);
}
.top .p-topics__ttl.open .p-topics__ttl-field::after {
  top: 52%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
}
.top .p-topics__content {
  padding: 0 clamp(20px, 3.4722222222vw, 50px) 25px;
}
.top .p-topics__content-in {
  border-top: 1px solid rgba(155, 172, 182, 0.5);
  padding-top: 25px;
}
.top .p-topics__column.--head {
  min-width: 272px;
  position: relative;
}
.top .p-topics__column.--content {
  -webkit-flex-basis: 66.6%;
  -ms-flex-preferred-size: 66.6%;
  flex-basis: 66.6%;
}
.top .p-topics-listItem {
  background: #fff;
}
.top .p-topics-listItem:nth-child(n+2) {
  margin-top: 5px;
}
.top .p-top-bottom {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
.top .p-top-bottomBox {
  position: relative;
  background: #fff;
  height: 25vw;
  z-index: 1;
  overflow: hidden;
}
.top .p-top-bottomBox::before {
  content: "";
  width: 100%;
  height: 79.1666%;
  background: var(--themegrd);
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.top .p-top-bottomBox::after {
  content: "";
  width: 81.25%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.top .p-top-bottomBox figure {
  max-width: 81.25%;
  margin-top: auto;
  margin-left: auto;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.top .p-top-bottomBox figure img {
  margin-right: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left bottom;
  object-position: left bottom;
  height: 100%;
  -webkit-transition: all 0.2s var(--linear);
  transition: all 0.2s var(--linear);
}
.top .p-top-bottomBox .p-top-bottomBox__arrow {
  width: clamp(56px, 7.6388888889vw, 110px);
  height: clamp(56px, 7.6388888889vw, 110px);
  background: #fff;
  position: absolute;
  border-radius: 50%;
  left: 8.333333%;
  bottom: 20.83333%;
}
.top .p-top-bottomBox .p-top-bottomBox__arrow::before {
  content: "";
  width: 33.4px;
  height: 19.8px;
  background: url(../../../img/common/arrow_r.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.top .p-top-bottomBox .c-ttl1 {
  position: absolute;
  top: 8.333333%;
  left: 8.333333%;
}
@media only screen and (max-width: 1600px) {
  main {
    min-height: 480px;
  }
}
@media only screen and (max-width: 1280px) {
  main {
    min-height: 480px;
  }
}
@media only screen and (max-width: 1024px) {
  main {
    min-height: 480px;
  }
  .top .mainvisual::before {
    right: 0px;
    top: -20px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
  }
  .top .p-top-bg-sp::before {
    top: calc(172.5vw - 1px);
    height: 48%;
  }
  .top .p-movie-txtbox__main {
    font-size: 7.8125vw;
  }
  .top .solution .c-text-autoscroll {
    top: 0%;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  .top .solution .c-text-autoscroll ._looptxt {
    font-size: 21.484375vw;
  }
  .top .p-solution::before {
    width: calc(100% + 10px);
    top: 10px;
  }
  .top .p-solution-content::before {
    width: 75%;
  }
  .top .p-solution-content::after {
    width: 75%;
  }
  .top .p-solution-txtbox {
    right: 25%;
  }
  .top .p-solution-arwBox {
    width: 25%;
  }
  .top .p-maker-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .top .p-maker-listItem::before {
    width: calc(100% + 10px);
    top: 10px;
  }
  .top .p-maker-arrow::before {
    width: 25.4px;
    height: 15.8px;
  }
  .top .p-ov-icon {
    width: 6.4453125vw;
    height: 6.4453125vw;
  }
  .top .p-ov-icon::before {
    width: 3.7109375vw;
    height: 3.7109375vw;
  }
  .top .p-cases-field {
    padding-left: 15px;
  }
  .top .p-cases-list {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: auto;
  }
  .top .p-cases-listItem:nth-child(3n+2) {
    top: auto;
  }
  .top .p-cases-listItem:nth-child(3n) {
    top: auto;
  }
  .top .p-cases-btn .c-btn {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }
  .top .p-column-field {
    padding-left: 15px;
  }
  .top .p-column-listItem {
    width: calc((100% - 20px) / 2);
  }
  .top .p-column-listItem:nth-child(2) {
    top: auto;
  }
  .top .p-column-listItem:nth-child(3) {
    top: auto;
  }
  .top .p-column-listItem:nth-child(4) {
    top: auto;
  }
  .top .p-column-btn .c-btn {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }
  .top .p-topics {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .top .p-top-bottomBox {
    height: 36.62109375vw;
  }
}
@media only screen and (max-width: 767.98px) {
  main {
    min-height: 480px;
  }
  .top .p-top-bg-sp::before {
    top: calc((100vw - 95px) * 1.725 + 172.5vw - 1px);
    height: 34%;
  }
  .top .p-movie-txtbox__main {
    font-size: 10.4166666667vw;
  }
  .top .p-solution-content-head {
    width: 100%;
    padding: 30px 15px;
    text-align: center;
    background: url(../../../img/top/solution_bg_sp@2x.webp) no-repeat;
    background-size: cover;
  }
  .top .p-solution {
    min-height: auto;
  }
  .top .p-solution-content {
    padding: 0;
    min-height: auto;
  }
  .top .p-solution-content::before {
    content: none;
  }
  .top .p-solution-content::after {
    content: none;
  }
  .top .p-solution-txtbox {
    position: relative;
    bottom: auto;
    right: auto;
    padding: 30px 15px;
  }
  .top .p-solution-txtbox-item {
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(155, 172, 182, 0.4);
  }
  .top .p-solution-icon {
    width: 60px;
    height: 60px;
  }
  .top .p-solution-icon::before {
    width: 34px;
    height: 34px;
  }
  .top .p-solution-arwBox {
    display: none;
  }
  .top .p-maker-list:first-of-type li.p-maker-listItem:nth-last-child(-n+2) {
    display: none;
  }
  .top .p-maker-list._2 li.p-maker-listItem:nth-child(-n+2) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .top .p-ov-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .top .p-ov-content__column.--img {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: auto;
    width: 100%;
  }
  .top .p-ov-content__column.--txt .c-btn {
    margin-left: auto;
    margin-right: auto;
  }
  .top .p-ov-img {
    margin-top: 26px;
    margin-right: auto;
    height: 50vw;
    margin-bottom: 45px;
  }
  .top .p-ov-img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .top .p-ov-img::before {
    right: auto;
    top: 10px;
    left: -10px;
    width: calc(100% + 10px);
  }
  .top .p-cases-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 0;
  }
  .top .p-column-list {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
  }
  .top .p-column-listItem {
    width: 100%;
  }
  .top .p-topics::before {
    width: 115.4666%;
  }
  .top .p-topics__column.--head .c-ttl1 {
    text-align: center;
  }
  .top .p-top-bottom {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .top .p-top-bottomBox {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    height: 48.8917861799vw;
  }
  .top .p-top-bottomBox::after {
    width: 76.53333%;
    height: 79.1666%;
  }
  .top .p-top-bottomBox figure {
    width: 76.53333%;
    height: 79.1666%;
  }
  .top .p-top-bottomBox .p-top-bottomBox__arrow {
    bottom: 16.3934%;
  }
  .top .p-top-bottomBox .p-top-bottomBox__arrow::before {
    width: 16.04px;
    height: 9.9px;
  }
}
@media only screen and (max-width: 600px) {
  main {
    min-height: 480px;
  }
  .top .mainvisual {
    height: calc(100% - 60px);
    max-height: 600px;
  }
  .top .mainvisual::before {
    height: calc(100% + 20px - 60px);
  }
  .top .mainvisual-slider {
    height: calc(100% - 60px);
  }
  .top .p-top-bg-sp::before {
    height: 47%;
  }
  .top .p-movie-txtbox__main {
    font-size: 11.3333333333vw;
  }
  .top .p-maker-listItem {
    padding: 15px;
  }
  .top .p-maker-img {
    width: 70px;
    height: 70px;
  }
  .top .p-maker-img.--share {
    background: none;
  }
  .top .p-maker-img.--bose {
    background: none;
  }
  .top .p-ov-strong-list li {
    padding-bottom: 5vw;
  }
  .top .p-ov-strong-list li:nth-child(n+2) {
    padding-top: 5vw;
  }
  .top .p-ov-strong-list li:last-child {
    border-bottom: 1px solid rgba(155, 172, 182, 0.5);
  }
  .top .p-ov-strong-list dl {
    padding-right: 84px;
  }
  .top .p-ov-icon {
    position: absolute;
    right: 0;
    top: 5vw;
    width: 10vw;
    height: 10vw;
  }
  .top .p-ov-icon::before {
    width: 5.6666666667vw;
    height: 5.6666666667vw;
  }
  .top .p-ov-icon._1 {
    top: 0;
  }
  .top .p-cases-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .top .p-topics__ttl-field {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 6px;
  }
}
@media screen and (min-width: 1201px) {
  main {
    margin-top: 0;
  }
}
@media screen and (max-width: 1200px) {
  main {
    margin-top: 0;
  }
}
@media (hover: hover) {
  .top .p-solution:hover {
    background: #222D3C;
  }
  .top .p-solution:hover .p-solution-content::after {
    background: rgba(0, 0, 0, 0.3);
  }
  .top .p-solution:hover .p-solution-content .p-solution-content-head .c-ttl1 span {
    color: #fff;
  }
  .top .p-solution:hover .p-solution-icon {
    border-color: var(--themecolor);
    background: #222d3c;
  }
  .top .p-solution:hover .p-solution-icon::before {
    -webkit-filter: var(--fil-wh);
    filter: var(--fil-wh);
  }
  .top .p-solution:hover dl dt {
    color: #fff;
  }
  .top .p-solution:hover dl dt span.u-fc-main2 {
    color: #19c5e0;
  }
  .top .p-solution:hover dl dd {
    color: #fff;
  }
  .top .p-solution:hover .c-circle-arw::before {
    opacity: 0;
  }
  .top .p-maker-listItem:hover img {
    visibility: hidden;
    opacity: 0;
  }
  .top .p-maker-listItem:hover .p-maker-arrow::before {
    -webkit-filter: var(--fil-wh);
    filter: var(--fil-wh);
  }
  .top .p-maker-listItem:hover .p-maker-arrow::after {
    opacity: 1;
  }
  .top .p-cases-listItem:hover figure img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  .top .p-cases-listItem:hover .c-btn-arrow {
    background: -webkit-gradient(linear, left top, right top, from(#1976e0), color-stop(80%, #1976e0), to(#19c5e0)) #1976e0;
    background: -webkit-linear-gradient(left, #1976e0 0%, #1976e0 80%, #19c5e0 100%) #1976e0;
    background: linear-gradient(90deg, #1976e0 0%, #1976e0 80%, #19c5e0 100%) #1976e0;
    background-size: 200% auto;
    background-position: right center;
  }
  .top .p-cases-listItem:hover .c-btn-arrow::before {
    -webkit-filter: var(--fil-wh);
    filter: var(--fil-wh);
    -webkit-animation: btnArrow2 0.2s var(--linear);
    animation: btnArrow2 0.2s var(--linear);
  }
  .top .p-column-listItem:hover figure img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  .top .p-column-listItem:hover .c-btn-arrow {
    background: -webkit-gradient(linear, left top, right top, from(#1976e0), color-stop(80%, #1976e0), to(#19c5e0)) #1976e0;
    background: -webkit-linear-gradient(left, #1976e0 0%, #1976e0 80%, #19c5e0 100%) #1976e0;
    background: linear-gradient(90deg, #1976e0 0%, #1976e0 80%, #19c5e0 100%) #1976e0;
    background-size: 200% auto;
    background-position: right center;
  }
  .top .p-column-listItem:hover .c-btn-arrow::before {
    -webkit-animation: btnArrow2 0.2s var(--linear);
    animation: btnArrow2 0.2s var(--linear);
  }
  .top .p-top-bottomBox a:hover {
    background-size: 120%;
  }
  .top .p-top-bottomBox a:hover figure img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  .top .p-top-bottomBox a:hover .p-top-bottomBox__arrow {
    background: #222d3c;
  }
  .top .p-top-bottomBox a:hover .p-top-bottomBox__arrow::before {
    -webkit-filter: var(--fil-wh);
    filter: var(--fil-wh);
  }
}
@media only screen and (max-width: 480px) {
  .top .p-top-bottomBox {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    height: 78.125vw;
  }
}
/*# sourceMappingURL=../../map/object/project/top.css.map */