@charset "UTF-8";
/* [ 富士テレネット ] service.css */
/* [ 富士テレネット ] setting */
section {
  width: 100%;
  margin: 0 auto 100px;
}
@media only screen and (max-width: 768px) {
  section {
    margin-bottom: 70px;
  }
}

@media only screen and (max-width: 768px) {
  .main-image:has(img[src*="technology_top.jpg"]) {
    margin-bottom: max(42.28vw, 161px);
  }
}
/*==================================================*
 *  [ サービス内容について ]
 *==================================================*/
.service-about {
  position: relative;
  margin-top: min(9.46vw, 181.6px);
  padding: 1.33vw 0 8.49vw;
}
.service-about::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  z-index: -2;
}
.service-about > p {
  width: fit-content;
  font-size: clamp(0.8rem, calc(0.8rem + 0.36vw), 1.5rem);
  font-weight: 900;
  background: #fff;
  padding: 0 17.5px;
  border: 1px solid;
  margin-left: min(13.85vw, 266px);
}
.service-about > p span {
  vertical-align: baseline;
  font-size: clamp(2rem, calc(2.0rem + 0.83vw), 3.6rem);
}
.service-about div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(3.125vw, 60px);
  margin: 1.56vw auto 2.19vw;
}
.service-about div .service-slogan {
  width: min(67.71vw, 1300px);
  font-size: clamp(1.8rem, calc(1.6rem + 1.15vw), 3.8rem);
  font-weight: 900;
}
.service-about div .service-slogan span {
  display: inline-block;
}
.service-about div .slogan-txt {
  width: min(36.25vw, 696px);
  font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 2rem);
  font-weight: 400;
  line-height: 1.75;
}
.service-about div:has(.slogan-txt) .service-slogan {
  width: min(25.73vw, 494px);
}
@media screen and (max-width: 1024px) {
  .service-about > p {
    margin-left: 5%;
  }
  .service-about div {
    padding-left: max(2.15vw, 22px);
    padding-right: max(2.15vw, 22px);
  }
  .service-about div .service-slogan {
    width: 100%;
  }
  .service-about div .slogan-txt {
    width: 55%;
  }
  .service-about div:has(.slogan-txt) .service-slogan {
    width: 35%;
  }
}
@media only screen and (max-width: 768px) {
  .service-about {
    padding: 0 0 3.85vw;
  }
  .service-about::after {
    aspect-ratio: 13 / 16;
  }
  .service-about > p {
    padding: 0 15.5px;
    margin-left: -4px;
  }
  .service-about div {
    display: block;
    width: 100%;
    padding: 7px 22px 22px;
  }
  .service-about div .slogan-txt {
    width: 100%;
  }
  .service-about div:has(.slogan-txt) .service-slogan {
    width: 100%;
    margin-bottom: 14px;
  }
  .service-about div:not(.service-about div:has(.slogan-txt)) {
    margin: 0;
  }
  .service-about img {
    width: 100%;
  }
}

.division-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.23vw;
  background: url("../shared/img/bg_idea.svg") top right/82.29vw auto no-repeat;
}
.division-wrap > img {
  width: min(46.88vw, 50%);
  margin-left: 4.69vw;
}
.division-wrap .division-txt {
  flex: 1;
}
.division-wrap .division-txt > p {
  max-width: 500px;
  width: 100%;
  font-size: clamp(1.4rem, calc(1.4rem + 0.21vw), 1.8rem);
  line-height: 1.667;
}
.division-wrap .division-txt > p + p {
  margin-top: min(1.77vw, 34px);
}
.division-wrap .division-txt > p + p:has(img) {
  text-align: center;
}
.division-wrap .division-txt > p + p:has(img) img {
  width: min(21.09vw, 405px);
}
.division-wrap .division-txt .works-wrap {
  position: relative;
  width: 100%;
  margin-top: min(3.85vw, 74px);
  padding: 1.88vw 5.36vw 2.6vw 5.55vw;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.division-wrap .division-txt .works-wrap::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
  width: min(2.19vw, 42px);
  height: auto;
  aspect-ratio: 42 / 210;
  background: url("../img/production/txt_works.svg") center left/contain no-repeat;
}
.division-wrap .division-txt .works-wrap ul {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.56vw;
}
.division-wrap .division-txt .works-wrap ul li {
  list-style: none;
  width: calc((100% - (1.56vw * 2)) / 3);
  height: auto;
  max-height: 171.68px;
}
.division-wrap .division-txt .works-wrap ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.division-wrap .division-txt .works-wrap ul li a .works-image {
  width: min(100%, 199.1px);
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 5px;
}
.division-wrap .division-txt .works-wrap ul li a .works-image img {
  transition: all .4s ease;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.division-wrap .division-txt .works-wrap ul li a .works-title {
  font-size: clamp(1rem, calc(1.0rem + 0.21vw), 1.4rem);
}
@media (hover: hover) {
  .division-wrap .division-txt .works-wrap ul li:hover a .works-image img {
    transform: scale(1.1);
    transition: all .4s ease;
  }
}
.division-wrap .division-txt .works-wrap ul li:has(.new) .new::before {
  content: '';
  position: absolute;
  top: -0.52vw;
  left: -0.78vw;
  width: min(2.55vw, 49px);
  height: auto;
  aspect-ratio: 1 / 1;
  background: url("../img/production/icon_new.svg") center/contain no-repeat;
  z-index: +1;
}
.division-wrap .division-txt .works-wrap .works-list {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #414A9C;
  font-size: clamp(1rem, calc(1.0rem + 0.21vw), 1.4rem);
  font-weight: 700;
  background: #fff;
  vertical-align: middle;
  padding: 5px 27px;
  border-top-left-radius: 5px;
}
.division-wrap .division-txt .works-wrap .works-list::before {
  display: inline-block;
  content: '';
  width: min(1.5625vw, 30px);
  height: 1px;
  background: #414A9C;
  margin-right: min(0.65vw, 12.5px);
  vertical-align: middle;
}
.division-wrap .division-txt .works-wrap .works-list::after {
  display: inline-block;
  content: '';
  width: 14px;
  height: auto;
  aspect-ratio: 2 / 1;
  background: url("../shared/img/icon_listdot_cmp.svg") center/contain no-repeat;
  margin-left: 6px;
  vertical-align: middle;
}
@media (hover: hover) {
  .division-wrap .division-txt .works-wrap .works-list:hover {
    background: #FEBD04;
  }
}
.division-wrap .division-txt .works-wrap.art {
  padding: 1.88vw;
}
.division-wrap .division-txt .works-wrap.art::before {
  content: none;
}
.division-wrap .division-txt .works-wrap.art ul {
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
}
.division-wrap .division-txt .works-wrap.art ul li {
  width: calc((100% - 1.56vw) / 2);
}
.division-wrap .division-txt .works-wrap.art ul li a .art-image {
  width: min(100%, 335px);
  height: auto;
  aspect-ratio: 5 / 2;
  overflow: hidden;
}
.division-wrap .division-txt .works-wrap.art ul li a .art-image img {
  width: 100%;
  transition: all .4s ease;
}
@media (hover: hover) {
  .division-wrap .division-txt .works-wrap.art ul li:hover a .art-image img {
    transform: scale(1.1);
    transition: all .4s ease;
  }
}
.division-wrap.rev {
  flex-direction: row-reverse;
  background-position: top left;
}
.division-wrap.rev > img {
  margin-left: auto;
  margin-right: 4.69vw;
}
.division-wrap.rev .division-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.division-wrap.rev .division-txt .works-wrap {
  padding-left: 5.36vw;
  padding-right: 5.55vw;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.division-wrap.rev .division-txt .works-wrap::before {
  left: auto;
  right: -2px;
  background-position: center right;
}
.division-wrap.rev .division-txt .works-wrap ul {
  justify-content: flex-end;
}
.division-wrap.rev .division-txt .works-wrap .works-list {
  right: auto;
  left: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 5px;
}
@media screen and (max-width: 1300px) {
  .division-wrap {
    align-items: flex-start;
  }
  .division-wrap .division-txt > p {
    max-width: calc(500px + 4.69vw);
    padding-right: 4.69vw;
  }
  .division-wrap.rev .division-txt > p {
    padding-right: 0;
    padding-left: 4.69vw;
  }
}
@media screen and (max-width: 1024px) {
  .division-wrap .division-txt > p {
    max-width: none;
    width: 90%;
    padding-right: 0;
  }
  .division-wrap .division-txt .works-wrap {
    padding-bottom: 3.2vw;
  }
  .division-wrap.rev .division-txt > p {
    padding-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .division-wrap {
    display: block;
    background: none;
  }
  .division-wrap > img {
    width: max(94.87vw, 370px);
  }
  .division-wrap .division-txt {
    padding-top: 25px;
  }
  .division-wrap .division-txt > p {
    width: 100%;
  }
  .division-wrap .division-txt > p + p {
    margin-top: 24px;
  }
  .division-wrap .division-txt > p + p:has(img) img {
    width: 64.1%;
  }
  .division-wrap .division-txt .works-wrap {
    aspect-ratio: 267 / 107;
    margin-top: 18px;
    padding: 5.51vw 10.95vw 8.79vw 16.36vw;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .division-wrap .division-txt .works-wrap::before {
    width: max(6.07vw, 23.69px);
  }
  .division-wrap .division-txt .works-wrap ul {
    gap: 7.69vw;
  }
  .division-wrap .division-txt .works-wrap ul li {
    width: calc((100% - 7.69vw) / 2);
    max-height: none;
  }
  .division-wrap .division-txt .works-wrap ul li a .works-image {
    width: max(100%, 118.19px);
  }
  .division-wrap .division-txt .works-wrap ul li a .works-image img {
    width: 100%;
  }
  .division-wrap .division-txt .works-wrap ul li a .works-title {
    font-size: min(5.56vw, 1rem);
  }
  .division-wrap .division-txt .works-wrap ul li:has(.new) .new::before {
    top: -2.28vw;
    left: -2.56vw;
    width: max(7.46vw, 29.09px);
  }
  .division-wrap .division-txt .works-wrap ul li:nth-child(n+3) {
    display: none !important;
  }
  .division-wrap .division-txt .works-wrap .works-list {
    padding: 2.5px 10px;
  }
  .division-wrap .division-txt .works-wrap .works-list::before {
    width: min(4.57vw, 17.81px);
    margin-right: min(1.9vw, 7.4px);
  }
  .division-wrap .division-txt .works-wrap .works-list::after {
    width: 8.31px;
  }
  .division-wrap .division-txt .works-wrap.art {
    aspect-ratio: 373 / 315;
    padding: 30px 33px;
  }
  .division-wrap .division-txt .works-wrap.art ul {
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin: 0;
  }
  .division-wrap .division-txt .works-wrap.art ul li {
    width: 100%;
    max-height: none;
  }
  .division-wrap .division-txt .works-wrap.art ul li a .art-image {
    width: 100%;
  }
  .division-wrap .division-txt .works-wrap.art ul li:last-child {
    display: inline !important;
  }
  .division-wrap.rev .division-txt .works-wrap {
    padding-left: 10.95vw;
    padding-right: 16.36vw;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .division-wrap.rev .division-txt .works-wrap::before {
    left: auto;
    right: -2px;
    background-position: center right;
  }
  .division-wrap.rev .division-txt .works-wrap ul {
    justify-content: flex-end;
  }
  .division-wrap.rev .division-txt .works-wrap .works-list {
    right: auto;
    left: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 5px;
  }
}

.work-ex {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2.03vw;
  width: min(80%, 1300px);
  background: #FCECF4;
  border-radius: 38px;
  margin: -5.208vw auto 0;
  padding: 2.526vw 3.656vw 2.838vw;
}
.work-ex div {
  width: calc((100% - (2.03vw * 2)) / 3);
}
.work-ex div .ex-image {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
}
.work-ex div .ex-image img {
  width: 100%;
}
.work-ex div .ex-image span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: fit-content;
  color: #E62E8B;
  font-size: clamp(1.3rem, calc(1.3rem + 0.57vw), 2.4rem);
  font-weight: 700;
  background: #FCECF4;
  padding: 0.156vw 0.625vw;
}
.work-ex div p {
  font-size: clamp(1.2rem, calc(1.2rem + 0.208vw), 1.6rem);
  line-height: 1.688;
}
@media screen and (max-width: 1024px) {
  .work-ex {
    margin-top: 30px;
    width: 90%;
  }
}
@media only screen and (max-width: 768px) {
  .work-ex {
    flex-direction: column;
    gap: 7.69vw;
    width: calc(100% - (5.128vw * 2));
    margin: 6.41vw 5.128vw 0;
    padding: 8.97vw 12.82vw;
    border-radius: 12px;
  }
  .work-ex div {
    width: 100%;
  }
  .work-ex div .ex-image span {
    padding: 0.769vw 3.077vw;
  }
}

.rental {
  width: 100%;
  background: #F5F5F5;
  text-align: center;
  padding: 2.08vw 2.864vw 1.822vw;
}
.rental > p {
  font-size: clamp(1.4rem, calc(1.4rem + 0.208vw), 1.8rem);
  font-weight: 700;
}
.rental .rental-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.604vw;
}
.rental .rental-wrap > a {
  width: calc((100% - (2.604vw * 2)) / 3);
  text-decoration: underline;
}
.rental .rental-wrap > a div {
  width: 100%;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  margin-bottom: 1.041vw;
}
.rental .rental-wrap > a div img {
  display: block;
  width: 100%;
}
@media (hover: hover) {
  .rental .rental-wrap > a:hover {
    text-decoration: none;
  }
  .rental .rental-wrap > a:hover img {
    transform: scale(1.1);
    transition: all .4s ease;
  }
}
@media only screen and (max-width: 768px) {
  .rental {
    padding: 6.15vw 8.46vw 12.82vw;
  }
  .rental > p {
    font-weight: 400;
  }
  .rental .rental-wrap {
    flex-direction: column;
    gap: 3.846vw;
  }
  .rental .rental-wrap > a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.615vw;
    width: 100%;
  }
  .rental .rental-wrap > a div {
    width: max(51.28vw, 200px);
  }
  .rental .rental-wrap > a div img {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 768px) {
  .service-division:nth-child(even) .division-wrap > img {
    margin-left: 0;
    margin-right: 20px;
  }
  .service-division:nth-child(even) .division-wrap .division-txt {
    padding-left: 20px;
  }
  .service-division:nth-child(even) .division-wrap .division-txt > p {
    padding-right: 20px;
  }
  .service-division:nth-child(odd) .division-wrap > img {
    margin-left: 20px;
  }
  .service-division:nth-child(odd) .division-wrap .division-txt {
    padding-right: 20px;
  }
  .service-division:nth-child(odd) .division-wrap .division-txt > p {
    padding-left: 20px;
  }
}
.prod .service-about::after {
  background: rgba(0, 160, 255, 0.2);
  clip-path: polygon(0 0, 100% 24.2%, 100% 100%, 0 75.8%);
}
.prod .service-about > p {
  color: #00A0FF;
  border-color: #00A0FF;
}
.prod .service-about .service-slogan {
  color: #00A0FF;
}
.prod .division-wrap .division-txt .works-wrap {
  background: #00A0FF;
}

.tech .service-about::after {
  background: rgba(230, 46, 139, 0.2);
  clip-path: polygon(0 0, 100% 24.2%, 100% 100%, 0 75.8%);
}
.tech .service-about > p {
  color: #E62E8B;
  border-color: #E62E8B;
}
.tech .service-about .service-slogan {
  color: #E62E8B;
}
.tech .division-wrap {
  align-items: flex-start;
}
.tech .division-wrap .division-txt {
  margin-top: min(3.125vw, 60px);
}
.tech .division-wrap .division-txt .works-wrap {
  background: #E62E8B;
}
@media screen and (max-width: 1300px) {
  .tech .division-wrap .division-txt {
    margin-top: 0;
  }
}

.adv .service-about::after {
  background: rgba(100, 200, 0, 0.2);
  clip-path: polygon(0 0, 100% 24.2%, 100% 100%, 0 75.8%);
}
.adv .service-about > p {
  color: #64C800;
  border-color: #64C800;
}
.adv .service-about .service-slogan {
  color: #64C800;
}
.adv .division-wrap .division-txt .works-wrap {
  background: #64C800;
}