@charset "UTF-8";

/*
 * サービス配下共通ページヘッダー
 * パンくず・タイトル・サブタイトルの位置と文字組みは、このファイルだけで管理する。
 */
.web-design-page .wd-page-head,
.maintenance-support-page .ms-page-head,
.lp-page .lp-page-head,
.online-shop-page .os-page-head,
.price-overview .po-page-head,
#page_head {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 32px clamp(24px, 8.333vw, 120px) 60px;
  background: #fff;
  text-align: left;
}

.web-design-page .wd-breadcrumb,
.maintenance-support-page .ms-breadcrumb,
.lp-page .lp-breadcrumb,
.online-shop-page .os-breadcrumb,
.price-overview .po-breadcrumb,
#page_head .bread {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 28px;
  margin: 0 0 24px;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.web-design-page .wd-breadcrumb a,
.web-design-page .wd-breadcrumb span,
.maintenance-support-page .ms-breadcrumb a,
.maintenance-support-page .ms-breadcrumb span,
.lp-page .lp-breadcrumb a,
.lp-page .lp-breadcrumb span,
.online-shop-page .os-breadcrumb a,
.online-shop-page .os-breadcrumb span,
.price-overview .po-breadcrumb a,
.price-overview .po-breadcrumb span,
#page_head .bread a,
#page_head .bread li {
  color: #71717a;
  text-decoration: none;
}

.web-design-page .wd-breadcrumb span:last-child,
.maintenance-support-page .ms-breadcrumb strong,
.lp-page .lp-breadcrumb strong,
.online-shop-page .os-breadcrumb strong,
.price-overview .po-breadcrumb strong,
#page_head .bread li:last-child {
  color: #e94f86;
  font-weight: 400;
}

.web-design-page .wd-page-head h1,
.maintenance-support-page .ms-page-head h1,
.lp-page .lp-page-head h1,
.online-shop-page .os-page-head h1,
.price-overview .po-page-head h1,
#page_head .main_hl {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-size: 48px;
  font-weight: 700;
  line-height: 72px;
  text-align: left;
}

.web-design-page .wd-page-head > p,
.maintenance-support-page .ms-page-head > p,
.lp-page .lp-page-head > p,
.online-shop-page .os-page-head > p,
.price-overview .po-page-head > p,
#page_head .main_p {
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  color: #71717a;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}

.price-overview .po-page-head > small {
  display: block;
  margin: 12px 0 0;
  color: #71717a;
  font-size: 12px;
  line-height: 20px;
}

/* サービスごとの背景なし組み上げSVG（表示時に一度だけ） */
.maintenance-support-page .ms-page-head,
.lp-page .lp-page-head,
.online-shop-page .os-page-head { position: relative; overflow: visible; }

.maintenance-support-page .ms-page-head > :not(.service-hero-assemble),
.lp-page .lp-page-head > :not(.service-hero-assemble),
.online-shop-page .os-page-head > :not(.service-hero-assemble) { position: relative; z-index: 2; }

.service-hero-assemble {
  position: absolute; top: 50%; right: clamp(42px, 8vw, 130px); z-index: 1;
  width: clamp(150px, 15vw, 230px); aspect-ratio: 1;
  transform: translateY(-42%); pointer-events: none; background: transparent !important;
}
.service-hero-assemble svg { display: block; width: 100%; height: 100%; overflow: visible; background: transparent !important; }
.service-assemble-piece {
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: service-piece-in .72s cubic-bezier(.2,.82,.25,1) forwards;
}
.service-assemble-piece--1 { --piece-x: -70px; --piece-y: -48px; animation-delay: .06s; }
.service-assemble-piece--2 { --piece-x: 70px; --piece-y: -46px; animation-delay: .15s; }
.service-assemble-piece--3 { --piece-x: -68px; --piece-y: 58px; animation-delay: .24s; }
.service-assemble-piece--4 { --piece-x: 68px; --piece-y: 58px; animation-delay: .33s; }
.service-assemble-piece--5 { --piece-x: 0px; --piece-y: 52px; animation-delay: .44s; }
.service-assemble-stroke { fill: none; stroke-width: 14; stroke-linecap: round; }
.service-assemble-cut { fill: #fff; stroke: none; }
@keyframes service-piece-in {
  0% { opacity: 0; transform: translate(var(--piece-x),var(--piece-y)) scale(.72) rotate(-8deg); }
  72% { opacity: 1; transform: translate(0,0) scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: translate(0,0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .service-assemble-piece { opacity: 1; animation: none; } }
@media (max-width: 860px) {
  .maintenance-support-page .ms-page-head,
  .lp-page .lp-page-head,
  .online-shop-page .os-page-head { padding-bottom: 138px; }
  .service-hero-assemble { top: auto; right: 22px; bottom: 10px; width: 112px; transform: none; }
}

/* サービスページ内のピンクの英字見出しは、すべて同じ「■ + LABEL」に統一する。 */
.web-design-page .wd-section-title > span,
.web-design-page .wd-support-heading > span,
.maintenance-support-page .ms-center-title > span,
.maintenance-support-page .ms-left-title > span,
.lp-page .lp-center-title > span,
.lp-page .lp-left-title > span,
.online-shop-page .os-center-title > span,
.online-shop-page .os-left-title > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.web-design-page .wd-section-title > span::before,
.web-design-page .wd-support-heading > span::before,
.maintenance-support-page .ms-center-title > span::before,
.maintenance-support-page .ms-left-title > span::before,
.lp-page .lp-center-title > span::before,
.lp-page .lp-left-title > span::before,
.online-shop-page .os-center-title > span::before,
.online-shop-page .os-left-title > span::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: #e94f86;
}

.maintenance-support-page .ms-center-title,
.lp-page .lp-center-title,
.online-shop-page .os-center-title {
  text-align: left;
}

.maintenance-support-page .ms-center-title > span,
.lp-page .lp-center-title > span,
.online-shop-page .os-center-title > span {
  width: fit-content;
  margin-right: 0;
  margin-left: 0;
}

.maintenance-support-page .ms-center-copy {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

/* サービスページ内の制作事例画像は、WordPress側の画像指定に左右されず枠いっぱいに表示する。 */
.web-design-page .wd-work-image,
.online-shop-page .os-work-image {
  padding: 0 !important;
  overflow: hidden;
}

.web-design-page .wd-work-image img,
.online-shop-page .os-work-image img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 0 !important;
}

/* ホームページ事例の元画像内に含まれる左右余白を、中央拡大でトリミングする。 */
.web-design-page .wd-work-image img {
  transform: scale(1.28);
  transform-origin: center top;
}

/* 「こんなお悩み」「このような方に向いています」の見出しを全サービスで共通化する。 */
.web-design-page .wd-section-title--line,
.maintenance-support-page .ms-line-title,
.lp-page .lp-target-title,
.online-shop-page .os-line-title {
  position: relative;
  display: block;
  margin-bottom: 48px;
  padding-top: 20px;
}

.web-design-page .wd-section-title--line::before,
.maintenance-support-page .ms-line-title::before,
.lp-page .lp-target-title::before,
.online-shop-page .os-line-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 4px;
  background: #e94f86;
}

.maintenance-support-page .ms-line-title > i,
.lp-page .lp-target-title > i,
.online-shop-page .os-line-title > i {
  display: none;
}

.web-design-page .wd-section-title--line h2,
.maintenance-support-page .ms-line-title h2,
.lp-page .lp-target-title h2,
.online-shop-page .os-line-title h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 44px;
}

/* サービスページ共通FAQ */
.service-faq {
  padding: 80px 0;
  background: #fff;
  color: #1a1a1a;
}

.service-faq__inner {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}

.service-faq__heading {
  margin-bottom: 40px;
}

.service-faq__heading > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #e94f86;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}

.service-faq__heading > span::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #e94f86;
}

.service-faq__heading h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 72px;
}

.service-faq__list {
  margin-bottom: 36px;
  border-top: 1px solid #e5e7eb;
}

.service-faq__list details {
  border-bottom: 1px solid #e5e7eb;
  padding: 22px 0;
}

.service-faq__list summary {
  position: relative;
  padding: 0 48px 0 36px;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
}

.service-faq__list summary::-webkit-details-marker {
  display: none;
}

.service-faq__list summary::before {
  content: "Q";
  position: absolute;
  left: 0;
  color: #e94f86;
  font-weight: 700;
}

.service-faq__list summary::after {
  content: "＋";
  position: absolute;
  right: 8px;
  color: #e94f86;
}

.service-faq__list details[open] summary::after {
  content: "−";
}

.service-faq__list details p {
  position: relative;
  margin: 18px 0 0;
  padding: 20px 24px 20px 52px;
  background: #f7f6fc;
  font-size: 16px;
  line-height: 28px;
}

.service-faq__list details p::before {
  content: "A";
  position: absolute;
  top: 20px;
  left: 20px;
  color: #1a1a1a;
  font-weight: 700;
}

.service-faq__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #e94f86;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.service-faq__link > span:not(.service-link-label) {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* 丸矢印付きテキストリンクをトップページのカラフルなデザインに統一する。 */
.web-design-page .wd-text-link > span:not(.service-link-label),
.online-shop-page .os-works-intro > a > b,
.service-faq__link > span:not(.service-link-label) {
  display: block;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  border: 0;
  border-radius: 50%;
  background: url(../images/arrow_02.png) no-repeat center / contain;
  color: transparent;
  font-size: 0;
}

.service-link-label {
  display: inline-block;
  width: auto !important;
  height: auto !important;
  flex: 0 1 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #e94f86 31.67%, #3fa8e5 90.87%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 32px;
}

@media (hover: hover) {
  a:hover > .service-link-label {
    background-image: linear-gradient(270deg, #e94f86 31.67%, #3fa8e5 90.87%) !important;
  }
}

@media (max-width: 860px) {
  .web-design-page .wd-page-head,
  .maintenance-support-page .ms-page-head,
  .lp-page .lp-page-head,
  .online-shop-page .os-page-head,
  .price-overview .po-page-head,
  #page_head {
    width: 100%;
    margin: 0;
    padding: 20px 20px 48px;
  }

  .web-design-page .wd-breadcrumb,
  .maintenance-support-page .ms-breadcrumb,
  .lp-page .lp-breadcrumb,
  .online-shop-page .os-breadcrumb,
  .price-overview .po-breadcrumb,
  #page_head .bread {
    min-height: 20px;
    margin-bottom: 28px;
    font-size: 12px;
    line-height: 20px;
  }

  .web-design-page .wd-page-head h1,
  .maintenance-support-page .ms-page-head h1,
  .lp-page .lp-page-head h1,
  .online-shop-page .os-page-head h1,
  .price-overview .po-page-head h1,
  #page_head .main_hl {
    font-size: 28px;
    line-height: 44px;
  }

  .web-design-page .wd-page-head > p,
  .maintenance-support-page .ms-page-head > p,
  .lp-page .lp-page-head > p,
  .online-shop-page .os-page-head > p,
  .price-overview .po-page-head > p,
  #page_head .main_p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
  }

  .web-design-page .wd-section-title--line,
  .maintenance-support-page .ms-line-title,
  .lp-page .lp-target-title,
  .online-shop-page .os-line-title {
    margin-bottom: 32px;
    padding-top: 16px;
  }

  .web-design-page .wd-section-title--line h2,
  .maintenance-support-page .ms-line-title h2,
  .lp-page .lp-target-title h2,
  .online-shop-page .os-line-title h2 {
    font-size: 24px;
    line-height: 38px;
  }

  .service-faq {
    padding: 64px 0;
  }

  .service-faq__inner {
    width: calc(100% - 40px);
  }

  .service-faq__heading {
    margin-bottom: 28px;
  }

  .service-faq__heading h2 {
    font-size: 28px;
    line-height: 44px;
  }

  .service-faq__list details {
    padding: 18px 0;
  }

  .service-faq__list summary {
    padding-left: 30px;
    padding-right: 38px;
    font-size: 15px;
    line-height: 26px;
  }

  .service-faq__list details p {
    margin-top: 14px;
    padding: 18px 18px 18px 46px;
    font-size: 14px;
    line-height: 26px;
  }

  .service-faq__list details p::before {
    top: 18px;
    left: 18px;
  }

  .service-faq__link {
    font-size: 15px;
  }

  .service-link-label {
    font-size: 15px !important;
    line-height: 26px;
  }

  .service-faq__link > span:not(.service-link-label) {
    width: 42px;
    height: 42px;
  }
}