@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap);
:root {
  --ff-noto-sans: "Noto Sans JP", Meiryo, sans-serif;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-gray-light: #eeeeee;
  --c-green-primary: #23ac48;
  --c-green-dark: #009943;
  --c-green-light: #7bcd91;
  --c-text-main: #333333;
  --c-red-accent: #b34040;
}

/* ==========================================================================//
//
//　calc関数、エディターコンパイル用
//（calc関数をそのままscssに入れてコンパイルすると、自動で計算後のvwに変換されるため用意しています。）
//
//
// ========================================================================== */
/** -------------------------------- **
	PC用
*** ----------------------------------------------------------------- ***/
/*-- 基本ヘッダーフッター用、またはコンテンツ幅を超えてアートボードいっぱいにデザインされているもの --*/
/*-- mainタグ内（デザインのコンテンツ幅1280pxと両サイドのpadding40pxを足して1320） --*/
/** -------------------------------- **
	タブレット用
*** ----------------------------------------------------------------- ***/
/** -------------------------------- **
	SP用
*** ----------------------------------------------------------------- ***/
.service-overview {
  display: flex;
  flex-direction: column;
  gap: min(calc(60 / 1320 * 100vw), 60px);
}
@media (max-width: 767px) {
  .service-overview {
    gap: calc( 70/375 * 100vw);
  }
}
.service-overview__categories {
  display: flex;
  gap: min(calc(8 / 1320 * 100vw), 8px);
  font-size: min(calc(14 / 1320 * 100vw), 14px);
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  align-items: end;
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-block: 120px 60px;
  letter-spacing: 0.025em;
}
@media (max-width: 767px) {
  .service-overview__categories {
    gap: calc( 10/375 * 100vw);
    font-size: calc( 13/375 * 100vw);
    margin-block: calc( 70/375 * 100vw) calc( 35/375 * 100vw);
    padding-inline: calc( 10/375 * 100vw);
  }
}
.service-overview__categories::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  margin-top: 4px;
  bottom: 0;
  left: 0;
}
@media (max-width: 767px) {
  .service-overview__categories::after {
    height: 2px;
  }
}
.service-overview__categories.printing::after {
  background: #b2d4b4;
}
.service-overview__categories.creation::after {
  background: #dad2a2;
}
.service-overview__categories.promotion::after {
  background: #acd1d6;
}
.service-overview__categories-item {
  width: 14.2857142857%;
  text-align: center;
  padding: 9px 20px 12px;
  background: #d9d9d9;
  color: #fff;
  border-radius: 12px 12px 0 0;
  line-height: 1;
}
@media (max-width: 767px) {
  .service-overview__categories-item {
    display: none;
    width: auto;
  }
}
.service-overview__categories-item.active {
  padding: 12px 20px 15px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .service-overview__categories-item.active {
    display: block;
    padding: 8px 15px 11px;
  }
}
.service-overview__categories-item.active.printing {
  background: #b2d4b4;
}
.service-overview__categories-item.active.creation {
  background: #dad2a2;
}
.service-overview__categories-item.active.promotion {
  background: #acd1d6;
}
.service-overview__item {
  display: flex;
  gap: min(calc(40 / 1320 * 100vw), 40px);
  padding-top: min(calc(40 / 1320 * 100vw), 40px);
}
@media (max-width: 767px) {
  .service-overview__item {
    flex-direction: column;
    gap: calc( 40/375 * 100vw);
  }
}
@media (max-width: 767px) {
  .service-overview__item--text-left {
    flex-direction: column;
  }
}
.service-overview__item--text-left .service-overview__image {
  width: calc(100% - min(calc(20 / 1320 * 100vw), 20px));
  margin-left: auto;
}
@media (max-width: 767px) {
  .service-overview__item--text-left .service-overview__image {
    width: 100%;
    margin-left: auto;
  }
}
.service-overview__item--text-left .service-overview__caption {
  right: min(calc(20 / 1320 * 100vw), 20px);
}
@media (max-width: 767px) {
  .service-overview__item--text-left .service-overview__caption {
    right: 0;
    left: 0;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .service-overview__item--text-right {
    flex-direction: column-reverse;
  }
}
.service-overview__item--text-right .service-overview__image {
  width: calc(100% - min(calc(20 / 1320 * 100vw), 20px));
  margin-right: auto;
}
@media (max-width: 767px) {
  .service-overview__item--text-right .service-overview__image {
    width: 100%;
    margin-left: auto;
  }
}
.service-overview__item--text-right .service-overview__caption {
  left: min(calc(20 / 1320 * 100vw), 20px);
}
@media (max-width: 767px) {
  .service-overview__item--text-right .service-overview__caption {
    right: 0;
    left: 0;
    margin: 0 auto;
  }
}
.service-overview__content {
  flex: 1;
}
.service-overview__title {
  padding-block-end: min(calc(20 / 1320 * 100vw), 20px);
  border-bottom: 1px solid #ccc;
  font-size: min(calc(30 / 1320 * 100vw), 30px);
  font-weight: 600;
}
.service-overview__title::before {
  content: "●";
  display: inline;
  margin-inline-end: min(calc(10 / 1320 * 100vw), 10px);
  color: var(--c-green-primary);
  font-size: min(calc(20 / 1320 * 100vw), 20px);
  vertical-align: min(calc(3 / 1320 * 100vw), 3px);
}
@media (max-width: 767px) {
  .service-overview__title::before {
    margin-inline-end: min(calc( 20/375 * 100vw), 20px);
    font-size: calc( 20/375 * 100vw);
  }
}
.creation .service-overview__title::before {
  color: #a3a521;
}
.promotion .service-overview__title::before {
  color: #37b3b7;
}
@media (max-width: 767px) {
  .service-overview__title {
    padding-block-end: calc( 20/375 * 100vw);
    font-size: calc( 20/375 * 100vw);
  }
}
.service-overview__text {
  margin-top: min(calc(46 / 1320 * 100vw), 46px);
  font-size: min(calc(16 / 1320 * 100vw), 16px);
  line-height: 2;
  letter-spacing: 0.025em;
}
@media (max-width: 767px) {
  .service-overview__text {
    margin-top: calc( 30/375 * 100vw);
    font-size: calc( 16/375 * 100vw);
  }
}
.service-overview__figure {
  position: relative;
  flex: 1;
}
.service-overview__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .service-overview__image {
    border-radius: calc( 15/375 * 100vw);
  }
}
.service-overview__caption {
  position: absolute;
  bottom: min(calc(20 / 1320 * 100vw), 20px);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: min(calc(40 / 1320 * 100vw), 40px);
  color: var(--c-white);
  text-shadow: 0px 2px 9.8px rgba(0, 0, 0, 0.5);
  font-weight: 600;
}
@media (max-width: 767px) {
  .service-overview__caption {
    font-size: calc( 20/375 * 100vw);
    bottom: calc( 12/375 * 100vw);
    text-align: center;
  }
}