@charset "utf-8";

/* サービス詳細LP 共通パーツ */
/* ============================================ */

/* ヒーロー（全幅・暗色写真背景） */
/* ============================================ */

.service-detail__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: min(1080px, (1080 / 1920) * 100vw);
  padding-top: clamp(8.5rem, 3.3594rem + 9.1797vw, 14.375rem); /* 230~136(1920~896) */
  padding-bottom: clamp(2rem, 0.25rem + 3.125vw, 4rem); /* 64~32(1920~896) */
  background: var(--font_c);
  color: #fff;
  @media (width <= 896px) {
    min-height: min(732px, (732 / 375) * 100vw);
    padding-top: calc(80px + (30 / 375) * 100vw);
    padding-bottom: 32px;
  }
}
.service-detail__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(68.82deg, color-mix(in srgb, #000 70%, transparent) 57.5%, color-mix(in srgb, #000 30%, transparent) 70.4%);
    @media (width <= 896px) {
      background: linear-gradient(180deg, color-mix(in srgb, #000 30%, transparent) 0%, color-mix(in srgb, #000 70%, transparent) 45%, color-mix(in srgb, #000 80%, transparent) 100%);
    }
  }
}
.service-detail__hero-bgimg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.service-detail__hero-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 40px;
  @media (width <= 896px) {
    gap: 32px;
  }
}
.service-detail__hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-detail__hero-hgroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media (width <= 896px) {
    gap: 8px;
  }
}
.service-detail__hero-en {
  position: relative;
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font_en);
  font-weight: 800;
  font-size: calc((14 / 16) * 1rem); /* 14px */
  line-height: 1.8;
  letter-spacing: .07em;
  text-transform: capitalize;
  color: #fff;
  @media (width <= 896px) {
    margin-left: 16px;
  }
}
.service-detail__hero-en-icon {
  display: block;
  position: absolute;
  top: -10px;
  left: -28px;
  width: 52px;
  height: 52px;
  pointer-events: none;
  /* 共通の .second-headline__jp-icon と同じ切り抜き（テキストが入る側を欠いた円弧にする） */
  clip-path: polygon(
    101.85% 16.68%,
    89.81% 16.68%,
    54.63% 16.68%,
    54.63% 77.79%,
    101.85% 77.79%,
    101.85% 107.42%,
    -2.78% 107.42%,
    -2.78% -10.17%,
    101.85% -10.17%
  );
  /* 濃色背景に載せるため緑のマークを白に反転させる */
  filter: brightness(0) invert(1);
  @media (width <= 896px) {
    top: -8px;
    left: -22px;
    width: 40px;
    height: 40px;
    clip-path: polygon(
      103.19% 41.44%,
      91.01% 41.44%,
      55.36% 41.44%,
      55.36% 88.63%,
      103.19% 88.63%,
      103.19% 108.83%,
      -2.81% 108.83%,
      -2.81% -10.31%,
      103.19% -10.31%
    );
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.service-detail__hero-ttl {
  word-break: keep-all;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(2.25rem, -0.1563rem + 4.2969vw, 5rem); /* 80~36(1920~896) */
  line-height: 1.5;
  color: #fff;
  @media (width <= 896px) {
    line-height: 1.4;
  }
}
.service-detail__hero-catch {
  word-break: keep-all;
  margin-top: clamp(1rem, -2.5rem + 6.25vw, 4rem); /* 64~16(1920~896) */
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(1.5rem, -0.25rem + 3.125vw, 3rem); /* 48~24(1920~896) */
  line-height: 1.4;
  color: #fff;
}
.service-detail__hero-lead {
  word-break: keep-all;
  margin-top: 24px;
  max-width: 820px;
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 2.6;
  color: #fff;
  @media (width <= 896px) {
    margin-top: 12px;
    line-height: 2;
  }
}
/* リード文内で強調する語 */
.service-detail__hero-em {
  font-style: normal;
  font-weight: 600;
}
/* ヒーロー下部のCTA（CVボタン＋白矢印ボタン。service/web/で使用） */
.service-detail__hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 64px;
  @media (width <= 896px) {
    flex-direction: column;
    align-items: stretch;
    margin-top: 32px;
    width: 100%;
    max-width: 330px;
  }
  .common-cv__btn {
    min-width: 262px;
    padding-top: calc((8 / 18) * 1em);
    padding-bottom: calc((8 / 18) * 1em);
    font-size: calc((18 / 16) * 1rem); /* 18px */
    line-height: 2.6;
    @media (width <= 896px) {
      min-width: 0;
      width: 100%;
      font-size: var(--fs_m); /* 16~14 */
    }
  }
  .common-arrow__btn {
    @media (width <= 896px) {
      justify-content: space-between;
      width: 100%;
    }
  }
}
.service-detail__hero-bnr {
  margin-top: clamp(2rem, -0.3333rem + 4.1667vw, 4rem); /* 64~32(1920~896) */
  max-width: 816px;
  width: 100%;
  max-width: 496px;
  container-type: inline-size;
}
/* パンくずはヒーロー下端に配置するため共通の上マージンを打ち消す */
.second-breadcrumb {
  .service-detail__hero-wrap & {
    margin-top: 0;
  }
}


/* 共通メイン */
/* ============================================ */

.service-detail__main {
  --service-detail-main-pt: 196px;
  padding-top: var(--service-detail-main-pt);
  /* overflow:clipはスクロールコンテナを作らないため、子の.service-detail__bgのstickyが効く */
  overflow: clip;
  background: #f7f8f3;
  position: relative;
  @media (width <= 896px) {
    --service-detail-main-pt: 64px;
  }
}

/* 初期位置は.service-detail__mainの右上。上端が画面上端に達したらstickyで画面に固定し、
   .service-detail__mainの下端に達したらそのまま一緒にスクロールアウト（overflow:clipで枠外は非表示）。
   通常フローに置くため、負のmarginで「親のpadding-topを打ち消して元の位置へ戻す」「後続要素を押し下げない」「右へはみ出させる」を行う */
.service-detail__bg {
  --service-detail-bg-h: min(557px, ((557 / 1920) * 100vw));
  --service-detail-bg-top: min(8px, ((8 / 1920) * 100vw));
  --service-detail-bg-right: max(-145px, ((-145 / 1920) * 100vw));
  container-type: inline-size;
  /* 親の地色より前面・各セクションの中身(z-index:1)より背面 */
  z-index: 0;
  width: min(1054px, ((1054 / 1920) * 100vw));
  height: var(--service-detail-bg-h);
  position: sticky;
  top: 0;
  margin-top: calc(var(--service-detail-bg-top) - var(--service-detail-main-pt));
  margin-right: var(--service-detail-bg-right);
  /* margin-top＋高さ＋margin-bottom＝0 にして、フロー上の占有高さを0にする */
  margin-bottom: calc((var(--service-detail-bg-h) + var(--service-detail-bg-top) - var(--service-detail-main-pt)) * -1);
  margin-left: auto;
  pointer-events: none;
  @media (width <= 896px) {
    --service-detail-bg-h: min(309px * 1.5, ((309 / 375) * 100vw));
    --service-detail-bg-top: max(-14px, ((-14 / 375) * 100vw));
    --service-detail-bg-right: max(-168px, ((-168 / 375) * 100vw));
    width: min(557px * 1.5, ((557 / 375) * 100vw));
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.service-detail__blur {
  position: absolute;
  &.service-detail__blur--01 {
    width: calc((269 / 1054) * 100cqw);
    top: 0;
    left: 0;
  }
  &.service-detail__blur--02 {
    width: calc((94 / 1054) * 100cqw);
    top: calc((160 / 1054) * 100cqw);
    left: calc((360 / 1054) * 100cqw);
    @media (width <= 896px) {
      opacity: .3;
    }
  }
  &.service-detail__blur--03 {
    width: calc((189 / 1054) * 100cqw);
    bottom: calc((150 / 1054) * 100cqw);
    left: calc((218 / 1054) * 100cqw);
  }
  &.service-detail__blur--04 {
    width: calc((203 / 1054) * 100cqw);
    bottom: calc((30 / 1054) * 100cqw);
    left: calc((80 / 1054) * 100cqw);
  }
  &.service-detail__blur--05 {
    width: calc((189 / 1054) * 100cqw);
    bottom: calc((8 / 1054) * 100cqw);
    left: calc((400 / 1054) * 100cqw);
  }
}
.service-detail__visual {
  container-type: inline-size;
  width: calc((609 / 1054) * 100cqw);
  position: absolute;
  top: calc((29 / 1054) * 100cqw);
  right: 0;
  @media (width <= 896px) {
    opacity: .3;
  }
}
.service-detail__sprout {
  width: calc((1153 / 2003) * 100cqw);
  position: absolute;
  top: calc((16 / 1101.5) * 100cqw);
  left: calc((132 / 1101.5) * 100cqw);
}

/* bean・sprout の常時ループ演出（JSで.is-floating付与後に発火）。
   下層ヒーロー（.second-hero__visual）より器が小さく動きが目立たないため、専用のkeyframesで移動量を大きくしている */
.service-detail__bean,
.service-detail__sprout {
  will-change: transform;
}
.service-detail__visual.is-floating .service-detail__bean { animation: service-detail-sway 6.5s ease-in-out infinite; }
.service-detail__visual.is-floating .service-detail__sprout { animation: service-detail-float 7.5s ease-in-out .4s infinite; }

@keyframes service-detail-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.8cqw); }
}
@keyframes service-detail-sway {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(1.2cqw, -1.5cqw); }
  66% { transform: translate(-0.9cqw, -0.9cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail__visual.is-floating .service-detail__bean,
  .service-detail__visual.is-floating .service-detail__sprout {
    animation: none;
  }
}


/* 制作実績（濃緑背景・全幅。背景写真はページごとにマークアップで指定） */
/* ============================================ */

.service-detail__works {
  background: #061008;
  position: relative;
  z-index: 2;
  padding-block: 192px;
  color: #fff;
  overflow: clip;
  @media (width <= 896px) {
    padding-block: 64px;
  }
  &::before {
    content: "";
    background: color-mix(in srgb, var(--main_c) 10%, color-mix(in srgb, #000 70%, transparent));
    position: absolute;
    inset: 0;
    z-index: 1;
  }
}
.service-detail__works-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.service-detail__works-wrap {
  position: relative;
  z-index: 1;
}
.service-detail__works-body {
  margin-top: 64px;
  padding-left: 48px;
  @media (width <= 896px) {
    margin-top: 32px;
    padding-left: 0;
  }
}
.service-detail__works-catch {
  word-break: keep-all;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: var(--fs_xl); /* 40~28 */
  line-height: 1.6;
  letter-spacing: .1em;
}
/* キャッチ内の強調語（濃色背景上） */
.service-detail__works-em {
  font-style: normal;
  color: var(--point_c);
}
.service-detail__works-txt {
  margin-top: 32px;
  font-size: var(--fs_ms); /* 18~16 */
  line-height: 1.8;
  @media (width <= 896px) {
    margin-top: 20px;
  }
}
.service-detail__works-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  border-radius: 16px;
  overflow: clip;
  list-style: none;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
}
.service-detail__works-card {
  display: flex;
  border-left: 1px solid color-mix(in srgb, #fff 20%, transparent);
  &:first-child {
    border-left: 0;
  }
  @media (width <= 896px) {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, #fff 20%, transparent);
    &:first-child {
      border-top: 0;
    }
  }
}
.service-detail__works-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: clamp(1.5rem, 0.3333rem + 2.0833vw, 3rem); /* 48~24(1664~896) */
  color: #fff;
  transition: background .3s ease-out;
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      background: color-mix(in srgb, #fff 8%, transparent);
      .service-detail__works-arrow {
        background: var(--point_c);
        &::after {
          translate: 3px 0;
        }
      }
    }
  }
}
.service-detail__works-img {
  width: 100%;
}
.service-detail__works-pic {
  display: block;
  width: 100%;
  aspect-ratio: 442 / 265;
  object-fit: cover;
  border-radius: 4px;
}
.service-detail__works-article {
  display: flex;
  flex: 1;
  min-width: 0;
}
.service-detail__works-detail {
  margin-block: 40px 32px;
  @media (width <= 896px) {
    margin-block: 24px;
  }
}
.service-detail__works-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.service-detail__works-hashtag {
  font-size: calc((12 / 16) * 1rem); /* 12px */
  line-height: 1.8;
  letter-spacing: .08em;
}
.service-detail__works-contents {
  margin-top: 24px;
  @media (width <= 896px) {
    margin-top: 16px;
  }
}
.service-detail__works-client {
  font-size: calc((16 / 16) * 1rem); /* 16px */
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .06em;
}
.service-detail__works-ttl {
  margin-top: 4px;
  font-size: clamp(1.125rem, 0.9792rem + 0.2604vw, 1.25rem); /* 20~18(1664~896) */
  font-weight: 600;
  line-height: 1.8;
}
.service-detail__works-desc {
  margin-top: 24px;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .06em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  @media (width <= 896px) {
    margin-top: 16px;
  }
}
.service-detail__works-arrow {
  flex-shrink: 0;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: auto;
  background: #fff;
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background .3s ease-out;
  &::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: var(--main_c);
    -webkit-mask-image: url(../images/common/arrow_right_white.svg);
    mask-image: url(../images/common/arrow_right_white.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: translate .3s ease-out;
  }
}
.service-detail__works-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}


/* よくあるご質問（FAQアコーディオン） */
/* ============================================ */

.service-detail__faq {
  position: relative;
  z-index: 1; /* 装飾(.service-detail__bg)より前面 */
  padding-block: 192px 0;
  @media (width <= 896px) {
    padding-block: 64px 0;
  }
}
.service-detail__faq-contents {
  display: flex;
  align-items: flex-start;
  gap: 40px 64px;
  @media (width <= 1367px) {
    flex-direction: column;
  }
}
/* FAQの見出しはPCで左カラム固定幅、タブレット以下で上に回り込む */
.second-heading2 {
  .service-detail__faq-wrap & {
    flex-shrink: 0;
    width: calc((604 / 1664) * 100cqw);
    @media (width <= 1367px) {
      width: 100%;
    }
  }
}
.service-detail__faq-list {
  flex: 1;
  min-width: 0;
  width: 100%;
  list-style: none;
}
.service-detail__faq-item {
  background: color-mix(in srgb, #fff 95%, transparent);
  border-bottom: 1px solid var(--line_c);
  &:first-child {
    border-top: 1px solid var(--line_c);
  }
}
.service-detail__faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 32px;
  background: transparent;
  border: 0;
  color: var(--font_c);
  text-align: left;
  cursor: pointer;
  transition: color .3s ease-out;
  @media (width <= 896px) {
    align-items: flex-start;
    gap: 12px;
    padding: 24px 20px;
  }
  &:hover {
    @media (hover: hover) {
      color: var(--main_c);
    }
  }
}
.service-detail__faq-label {
  flex-shrink: 0;
  width: 30px;
  font-family: var(--font_en);
  font-weight: 800;
  font-size: clamp(1.375rem, 1.0833rem + 0.5208vw, 1.6875rem); /* 27~22(1664~896) */
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
  color: var(--main_c);
  @media (width <= 896px) {
    width: 24px;
    line-height: 1.4;
  }
}
.service-detail__faq-q-txt {
  flex: 1;
  min-width: 0;
  font-size: var(--fs_mm); /* 20~16 */
  font-weight: 700;
}
.service-detail__faq-icon {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  background: url(../images/common/accordion_add.svg) no-repeat center / contain;
  @media (width <= 896px) {
    width: 20px;
    height: 20px;
    margin-top: 4px;
  }
  .service-detail__faq-q[aria-expanded="true"] & {
    background-image: url(../images/common/accordion_remove.svg);
  }
}
/* 閉じたときに高さを完全に0にするため、余白は内側の .service-detail__faq-a-txt で持たせる
   （padding付きの要素は max-height: 0 でもpadding分の高さが残るため） */
.service-detail__faq-a {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease-out, opacity .3s ease-out;
  .service-detail__faq-item.is-open & {
    max-height: 640px;
    opacity: 1;
  }
}
.service-detail__faq-a-block {
  padding: 0 32px 32px;
  /* 質問文の左端（Qラベル30px＋gap16px）に回答文の頭を揃える */
  padding-left: calc(32px + 30px + 16px);
  @media (width <= 896px) {
    padding: 0 20px 24px;
    padding-left: calc(20px + 24px + 12px);
  }
}
.service-detail__faq-a-txt {
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  color: #2e3438;
}
.service-detail__faq-a-txt + .service-detail__faq-a-txt {
  margin-top: 16px;
}


/* 「〜のことなら、なんでもご相談ください。」CTA */
/* ============================================ */

.service-detail__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-block: 64px;
  border-top: 2px solid var(--main_c);
  border-bottom: 2px solid var(--main_c);
  @media (width <= 896px) {
    padding-block: 40px;
    gap: 24px;
  }
}
.service-detail__cta-ttl {
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(1.5rem, -0.1042rem + 2.8646vw, 2.875rem); /* 46~24(1664~896) */
  word-break: keep-all;
  text-align: center;
}
.service-detail__cta-body {
  display: flex;
  align-items: center;
  gap: 64px;
  @media (width <= 1367px) {
    gap: 32px;
  }
  @media (width <= 896px) {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
}
.service-detail__cta-txt {
  max-width: 630px;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .06em;
  @media (width <= 896px) {
    max-width: none;
  }
}
.service-detail__cta-actions {
  display: flex;
  align-items: stretch;
  gap: 16px;
  @media (width <= 1367px) {
    flex-direction: column;
  }
  @media (width <= 896px) {
    align-items: center;
    width: 100%;
  }
  .common-cv__btn {
    min-width: 330px;
    padding-top: calc((8 / 20) * 1em);
    padding-bottom: calc((8 / 20) * 1em);
    font-size: calc((18 / 16) * 1rem); /* 18px */
    line-height: 2.6;
    @media (width <= 896px) {
      min-width: 0;
      max-width: 330px;
      width: 100%;
      font-size: var(--fs_m); /* 16~14 */
    }
  }
}
.service-detail__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 330px;
  padding: 17px 44px;
  background: #fff;
  border-radius: 45px;
  color: var(--cv_c);
  text-align: center;
  @media (width <= 896px) {
    min-width: 0;
    max-width: 330px;
    width: 100%;
    padding: 14px 24px;
  }
}
.service-detail__tel-num {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: clamp(1.25rem, 0.9583rem + 0.5208vw, 1.5rem); /* 24~20(1664~896) */
  line-height: 1;
  letter-spacing: .08em;
}
.service-detail__tel-time {
  font-size: calc((12 / 16) * 1rem); /* 12px */
  line-height: 1.8;
  letter-spacing: .08em;
}


/* 関連サービス（濃緑背景） */
/* ============================================ */

.service-detail__relservice {
  position: relative;
  z-index: 1; /* 装飾(.service-detail__bg)より前面 */
  padding-top: 120px;
  background: #0C2811;
  color: #fff;
  @media (width <= 896px) {
    padding-top: 64px;
  }
}
.service-detail__relservice-wrap {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  @media (width <= 1367px) {
    flex-direction: column;
    gap: 40px;
  }
}
.service-detail__relservice-hgroup {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: calc((384 / 1664) * 100%);
  @media (width <= 1367px) {
    width: 100%;
    gap: 16px;
  }
}
.service-detail__relservice-en {
  display: flex;
  align-items: center;
  gap: 4px;
}
.service-detail__relservice-en-dot {
  flex-shrink: 0;
  display: block;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}
.service-detail__relservice-en-txt {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: calc((14 / 16) * 1rem); /* 14px */
  line-height: 1.8;
  letter-spacing: .07em;
  text-transform: capitalize;
}
.service-detail__relservice-ttl {
  font-size: var(--fs_l); /* 32~24 */
  font-weight: 700;
  line-height: 1.375;
}
.service-detail__relservice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 0.8333rem + 2.0833vw, 3rem); /* 48~32(1664~896) */
  flex: 1;
  min-width: 0;
  list-style: none;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    width: 100%;
  }
}
.service-detail__relservice-link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  color: #fff;
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      .service-detail__relservice-pic {
        scale: 1.08;
      }
      .service-detail__relservice-label::before {
        transform: scaleX(1);
      }
    }
  }
}
.service-detail__relservice-img {
  width: 100%;
  overflow: hidden; /* hover時に拡大した画像を角丸の内側に収める */
  border-radius: 8px;
}
.service-detail__relservice-pic {
  display: block;
  width: 100%;
  aspect-ratio: 320 / 100;
  object-fit: cover;
  border-radius: 8px;
  transition: scale .4s ease-out;
}
.service-detail__relservice-label {
  word-break: keep-all;
  position: relative;
  display: block;
  padding: 4px 0;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .06em;
  text-align: right;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-out;
  }
}


/* お問い合わせ */
/* ============================================ */

.second-contact {
  background: #0C2811;
}