@charset "UTF-8";
/* ========================================
   card-voice（お客様の声カード）
   TOP section-voice / 下層 section-voice-list で共用
   SP: page-voice-list-sp / TOP SP 4792:6587
   PC: page-voice-list-pc / TOP PC 4792:6586
   ※ PC の calc(* var(--u)) は親（.section-voice / .section-voice-list）で --u を定義すること
======================================== */
.card-voice {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding-top: 14%;
}

.card-voice__photo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 87.838%;
  max-width: 100%;
  overflow: hidden;
  background: #c30e23;
  border-radius: 7.5897295779%/10.9629889493%;
}

.card-voice__photo img,
.card-voice__photo picture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.card-voice__photo img {
  aspect-ratio: 263.514/182.432;
  object-fit: cover;
}

.card-voice__body {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 265px;
  padding: 52.3333333333% 7.77% 24px;
  background: #c30e23;
  border-radius: 10px;
}

.card-voice__text {
  margin: 0;
  color: #ffffff;
  overflow-wrap: break-word;
}

.card-voice__more {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  aspect-ratio: 1/1;
  background: #dfd095;
  border-radius: 30px 0 10px 0;
  color: #c30e23;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.card-voice:hover .card-voice__more,
.card-voice:focus-visible .card-voice__more {
  background: #000000;
  color: #ffffff;
}

.card-voice__more-arrow {
  display: block;
  width: 40%;
  aspect-ratio: 22/14.7279;
}

@media screen and (min-width: 768px) {
  .card-voice {
    padding-top: calc(41 * var(--u));
    background: transparent;
    border-radius: 0;
  }
  .card-voice__photo {
    width: 87.8378378378%;
    border-radius: calc(20 * var(--u));
  }
  .card-voice__photo img {
    aspect-ratio: 260/180;
  }
  .card-voice__body {
    min-height: 300px;
    padding: calc(169 * var(--u)) 7.7702702703% 24px;
    border-radius: calc(10 * var(--u));
  }
  .card-voice__more {
    border-radius: calc(30 * var(--u)) 0 calc(10 * var(--u)) 0;
  }
}
/* ========================================
   card-column（コラムカード）
   TOP section-column / 下層 section-column-list で共用
   SP: TOP section-column / page-column-list-sp
   PC: TOP section-column / page-column-list-pc
======================================== */
.card-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  color: inherit;
}

.card-column__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 320/200;
}

.card-column__thumb img,
.card-column__thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}

.card-column__thumb img {
  object-fit: cover;
}

.card-column__thumb--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dfd095;
}

.card-column__thumb--logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/common/footer-bg-pattern.webp") 37.33% 28.07%/266.48% 593.28% no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.card-column__thumb--logo img {
  position: relative;
  z-index: 1;
  width: 74.0625%;
  height: auto;
  object-fit: contain;
}

.card-column__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.card-column__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.card-column__date {
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 14px;
  color: #000000;
  white-space: nowrap;
}

.card-column__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-column__tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  background: #dfd095;
  border-radius: 50px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 14px;
  color: #000000;
  white-space: nowrap;
}

.card-column__title {
  margin: 0;
  color: #000000;
  overflow-wrap: break-word;
}

.card-column__more {
  display: none;
}

@media screen and (min-width: 768px) {
  .card-column {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .card-column__thumb {
    flex-shrink: 0;
    width: 320px;
    height: 200px;
    aspect-ratio: auto;
  }
  .card-column__body {
    flex: 1 1 0;
    gap: 16px;
  }
  .card-column__more {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    width: 40px;
    aspect-ratio: 1/1;
    background: #c30e23;
    border-radius: 50%;
    color: #ffffff;
    transition: background-color 0.2s ease;
  }
  .card-column:hover .card-column__more,
  .card-column:focus-visible .card-column__more {
    background: #000000;
  }
  .card-column__more-arrow {
    display: block;
    width: 41.8%;
    aspect-ratio: 22.1/14.92;
  }
}
/* ========================================
   section-faq accordion（TOP / faq.html 共通）
======================================== */
.section-faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.section-faq__item {
  width: 100%;
  background: #ffffff;
  border-radius: 10px;
}

.section-faq__q {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 20px;
  cursor: pointer;
  list-style: none;
  text-align: left;
}

.section-faq__q::-webkit-details-marker,
.section-faq__q::marker {
  display: none;
  content: "";
}

.section-faq__mark {
  flex-shrink: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 35px;
  color: #549b35;
}

.section-faq__q-body {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
}

.section-faq__q-text {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.section-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  aspect-ratio: 1/1;
  background: #c30e23;
  border-radius: 50%;
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.section-faq__q:hover .section-faq__icon {
  background: #000000;
}

.section-faq__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
}

.section-faq__item[open] .section-faq__icon {
  background: #000000;
}

.section-faq__item[open] .section-faq__icon svg {
  transform: rotate(180deg);
}

.section-faq__panel {
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .section-faq__panel {
    transition: none;
  }
}
.section-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0 20px 16px 20px;
  padding-top: 16px;
  background-image: repeating-linear-gradient(to right, #000000 0 2px, transparent 2px 4px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}

.section-faq__a-mark {
  flex-shrink: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 35px;
  color: #c30e23;
}

.section-faq__a-text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
  padding-right: 40px;
}

@media screen and (min-width: 768px) {
  .section-faq__list {
    gap: 16px;
  }
  .section-faq__q {
    gap: 16px;
    padding: 16px 32px 16px 40px;
  }
  .section-faq__mark {
    font-size: 4.5rem;
    line-height: 45px;
  }
  .section-faq__q-body {
    gap: 24px;
  }
  .section-faq__icon {
    width: 35px;
  }
  .section-faq__a {
    margin: 0 32px 24px 40px;
  }
  .section-faq__a-mark {
    font-size: 4.5rem;
    line-height: 45px;
  }
  .section-faq__a-text {
    padding-right: 64px;
  }
}
/* ========================================
   title-link（セクション見出し横の丸矢印）
   TOP: voice / faq / column / company（赤）
        case / news（白反転）
======================================== */
.section-voice__title-link,
.section-faq__title-link,
.section-column__title-link,
.section-company__title-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  aspect-ratio: 1/1;
  background: #c30e23;
  border-radius: 50%;
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.section-voice__title-link:hover,
.section-faq__title-link:hover,
.section-column__title-link:hover,
.section-company__title-link:hover {
  background: #000000;
}

.section-case__title-link,
.section-news__title-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  aspect-ratio: 1/1;
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 50%;
  color: #c30e23;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.section-case__title-link:hover,
.section-news__title-link:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.section-voice__title-link-arrow,
.section-faq__title-link-arrow,
.section-column__title-link-arrow,
.section-company__title-link-arrow,
.section-case__title-link-arrow,
.section-news__title-link-arrow {
  display: block;
  width: 44.2%;
  aspect-ratio: 22.1/14.92;
}

/* ========================================
   scroll-card（巻物＋みまもり和尚）
   TOP: .section-guarantee__*
   下層: .section-links__*（about / reason / service）
   ※ 親ラッパー（余白・背景・--u）は各ページ側に残す
======================================== */
.section-guarantee__scroll,
.section-links__scroll {
  position: absolute;
  left: 0;
  top: 18.3734939759%;
  width: 100%;
  z-index: 1;
}

.section-guarantee__scroll img,
.section-links__scroll img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 360/271;
}

.section-guarantee__character,
.section-links__character {
  position: absolute;
  top: 0;
  right: 0;
  width: 33.3333333333%;
  z-index: 2;
  pointer-events: none;
}

.section-guarantee__character img,
.section-links__character img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 120/153;
}

.section-guarantee__copy,
.section-links__copy {
  position: absolute;
  left: 25.5555555556%;
  top: 36.7469879518%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  width: 61.1111111111%;
  box-sizing: border-box;
}

.section-guarantee__title,
.section-links__title {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  color: #c30e23;
}

.section-guarantee__text,
.section-links__text {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.5;
  color: #000000;
}

.section-guarantee__btn,
.section-links__btn {
  position: absolute;
  left: 75.5555555556%;
  top: 71.9879518072%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.1111111111%;
  aspect-ratio: 1/1;
  background: #c30e23;
  border-radius: 50%;
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.section-guarantee__body:hover .section-guarantee__btn,
.section-guarantee__body:focus-visible .section-guarantee__btn,
.section-links__guarantee:hover .section-links__btn,
.section-links__guarantee:focus-visible .section-links__btn {
  background: #000000;
}

.section-guarantee__btn-arrow,
.section-links__btn-arrow {
  display: block;
  width: 44.2%;
  aspect-ratio: 17.68/11.94;
}

@media screen and (min-width: 768px) {
  .section-guarantee__scroll,
  .section-links__scroll {
    top: 0;
  }
  .section-guarantee__scroll img,
  .section-links__scroll img {
    aspect-ratio: 1026/348;
  }
  .section-guarantee__character,
  .section-links__character {
    top: 2.5862068966%;
    right: auto;
    left: 73.0994152047%;
    width: 23.5867446394%;
  }
  .section-guarantee__character img,
  .section-links__character img {
    aspect-ratio: 242/309;
  }
  .section-guarantee__copy,
  .section-links__copy {
    left: 14.8148148148%;
    top: 26.724137931%;
    gap: calc(16 * var(--u));
  }
  .section-guarantee__title,
  .section-links__title {
    font-size: calc(40 * var(--u));
    line-height: calc(40 * var(--u));
  }
  .section-guarantee__text,
  .section-links__text {
    font-size: calc(22 * var(--u));
    font-weight: 700;
    line-height: calc(35 * var(--u));
  }
  .section-guarantee__btn,
  .section-links__btn {
    left: 58.6744639376%;
    top: 50%;
    width: 7.7972709552%;
  }
}
/* ========================================
   TOP — section-mv / intro
   SP: section-mv-sp 4767:6441（400×650）
   PC: page-top-pc 内 MV（900）
======================================== */
.page-top {
  background: #c30e23;
  overflow-x: hidden;
}

.page-top .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.page-top .header.is-fixed {
  position: fixed;
  z-index: 300;
}

/* PC: mv-pc どおり透明ヘッダー（白ロゴ・白ナビ・白お問合せ）※1000px〜 */
@media screen and (min-width: 1000px) {
  .header--on-mv:not(.is-fixed) .header__inner {
    max-width: 1360px;
    width: calc(100% - 80px);
    height: auto;
    min-height: 0;
    margin: 40px auto 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    align-items: flex-start;
  }
  .header--on-mv:not(.is-fixed) .header__logo {
    width: 300px;
  }
  .header--on-mv:not(.is-fixed) .header__nav {
    align-items: center;
    align-self: center;
  }
  .header--on-mv:not(.is-fixed) .header__nav a {
    color: #ffffff;
  }
  .header--on-mv:not(.is-fixed) .header__nav a:hover {
    color: #ffffff;
  }
  .header--on-mv:not(.is-fixed) .header__nav a::before {
    background: #ffffff;
  }
  .header--on-mv:not(.is-fixed) .header__nav a:hover::before {
    opacity: 1;
  }
  .header--on-mv:not(.is-fixed) .header__contact {
    align-items: center;
    align-self: center;
    background: #ffffff;
    color: #c30e23;
    border-color: transparent;
  }
  .header--on-mv:not(.is-fixed) .header__contact-icon {
    background: #c30e23;
  }
  .header--on-mv:not(.is-fixed) .header__contact:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
  }
  .header--on-mv:not(.is-fixed) .header__contact:hover .header__contact-icon {
    background: #ffffff;
  }
  /* 固定時は共通パーツと同じ白カードヘッダー */
  .header--on-mv.is-fixed .header__inner {
    max-width: 1320px;
    width: calc(100% - 80px);
    height: 80px;
    margin: 16px auto;
    padding: 0 30px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
    align-items: center;
  }
  .header--on-mv.is-fixed .header__nav a {
    color: #c30e23;
  }
  .header--on-mv.is-fixed .header__nav a:hover {
    color: #000000;
  }
  .header--on-mv.is-fixed .header__nav a:hover::before {
    opacity: 1;
  }
  .header--on-mv.is-fixed .header__contact {
    background: #c30e23;
    color: #ffffff;
  }
  .header--on-mv.is-fixed .header__contact:hover {
    background: #ffffff;
    color: #c30e23;
    border-color: #c30e23;
  }
  .header--on-mv.is-fixed .header__contact-icon {
    background: #ffffff;
  }
  .header--on-mv.is-fixed .header__contact:hover .header__contact-icon {
    background: #c30e23;
  }
}
/* ========================================
   導入FV
======================================== */
.section-mv-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c30e23;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.section-mv-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.15;
  pointer-events: none;
}

.section-mv-intro.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.is-intro-skip .section-mv-intro {
  display: none;
}

.section-mv-intro__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
  text-align: center;
}

.section-mv-intro__catch,
.section-mv-intro__logo {
  display: block;
  height: auto;
  transform: translateY(48px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
}

.section-mv-intro__catch {
  width: min(100%, 320px);
}

.section-mv-intro__logo {
  width: min(70%, 200px);
  transition-delay: 0s;
}

.section-mv-intro.is-ready .section-mv-intro__catch,
.section-mv-intro.is-ready .section-mv-intro__logo {
  transform: translateY(0);
  opacity: 1;
}

.section-mv-intro.is-ready .section-mv-intro__logo {
  transition-delay: 0.12s;
}

@media screen and (min-width: 768px) {
  .section-mv-intro__catch {
    width: 880px;
    max-width: 100%;
  }
  .section-mv-intro__logo {
    width: 300px;
  }
  .section-mv-intro__catch,
  .section-mv-intro__logo {
    transform: translateY(64px);
  }
  .section-mv-intro.is-ready .section-mv-intro__catch,
  .section-mv-intro.is-ready .section-mv-intro__logo {
    transform: translateY(0);
  }
}
/* ========================================
   本編MV
======================================== */
.section-mv {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
  background: #c30e23;
}

.section-mv__bg {
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
  pointer-events: none;
}

.section-mv__buildings {
  position: absolute;
  left: 0;
  right: 0;
  top: 128px;
  height: 182px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.section-mv__buildings-track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.section-mv__buildings-track picture {
  display: block;
  height: 100%;
  flex-shrink: 0;
}

.section-mv__buildings-track img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

.section-mv.is-ready .section-mv__buildings-track {
  animation: mv-buildings-scroll 40s linear infinite;
}

.section-mv__character {
  position: absolute;
  left: -8.25%;
  right: auto;
  top: 228px;
  bottom: auto;
  z-index: 2;
  width: 110.25%;
  height: 422px;
  overflow: hidden;
  transform: translateY(18%);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  pointer-events: none;
}

.section-mv.is-ready .section-mv__character {
  transform: translateY(0);
  opacity: 1;
}

.section-mv__character picture {
  display: block;
  width: 100%;
  height: 100%;
}

.section-mv__character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.section-mv__badge {
  display: block;
  position: absolute;
  left: 66.75%;
  top: 514px;
  z-index: 3;
  width: 120px;
  height: 120px;
}

.section-mv__badge img {
  display: block;
  width: 120px;
  height: 120px;
}

@media screen and (min-width: 768px) {
  .section-mv {
    height: 900px;
  }
  .section-mv__bg {
    opacity: 0.15;
  }
  .section-mv__buildings {
    top: 229px;
    height: 342px;
  }
  .section-mv__character {
    left: calc((100% - 1440px) / 2 + 273px);
    top: auto;
    bottom: 0;
    width: 834px;
    height: 773px;
    transform: translateY(24%);
  }
  .section-mv.is-ready .section-mv__character {
    transform: translateY(0);
  }
  .section-mv__character img {
    width: 834px;
    height: 773px;
    object-fit: contain;
    object-position: center;
  }
  .section-mv__badge {
    left: auto;
    top: auto;
    right: max(24px, (100% - 1440px) / 2 + 40px);
    bottom: 34px;
    width: 240px;
    height: 240px;
  }
  .section-mv__badge img {
    width: 240px;
    height: 240px;
  }
}
@keyframes mv-buildings-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-mv-intro {
    transition: none;
  }
  .section-mv-intro__catch,
  .section-mv-intro__logo {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .section-mv__character {
    transition: none;
    transform: translateY(0);
    opacity: 1;
  }
  .section-mv.is-ready .section-mv__character {
    transform: translateY(0);
  }
  .section-mv.is-ready .section-mv__buildings-track {
    animation: none;
  }
  .section-worry__marquee-track {
    animation: none;
  }
}
/* ========================================
   section-service-ink
   PC: 3540:8479 / title 3540:8478
   ※SP タイトルは Figma未配置のため幅に合わせて仮サイズ
======================================== */
.section-service-ink {
  padding: 32px 0 0;
  background: #ffffff;
}

.section-service-ink__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: calc(100% - 80px);
  margin: 0 auto;
}

.section-service-ink__title {
  margin: 0;
  width: 100%;
  text-align: center;
}

.section-service-ink__title img {
  display: block;
  width: 100%;
  height: auto;
}

.section-service-ink__inks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-service-ink__item {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.section-service-ink__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.js .section-service-ink:not(.is-inview) .section-service-ink__item {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
}

.section-service-ink.is-inview .section-service-ink__item {
  animation: service-ink-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.section-service-ink.is-inview .section-service-ink__item:nth-child(1) {
  animation-delay: 0.2s;
}

.section-service-ink.is-inview .section-service-ink__item:nth-child(2) {
  animation-delay: 0.38s;
}

.section-service-ink.is-inview .section-service-ink__item:nth-child(3) {
  animation-delay: 0.56s;
}

.section-service-ink.is-inview .section-service-ink__item:nth-child(4) {
  animation-delay: 0.74s;
}

@keyframes service-ink-grow {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .section-service-ink:not(.is-inview) .section-service-ink__item,
  .section-service-ink.is-inview .section-service-ink__item {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media screen and (min-width: 768px) {
  .section-service-ink {
    padding: 82px 0 0;
  }
  .section-service-ink__inner {
    max-width: 1050px;
    width: calc(100% - 40px);
  }
  .section-service-ink__title {
    max-width: 1014px;
  }
  .section-service-ink__inks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
  }
  .section-service-ink__item {
    aspect-ratio: 260/259;
  }
  .section-service-ink__item:nth-child(1) {
    aspect-ratio: 260/248;
  }
  .section-service-ink__item:nth-child(2) {
    aspect-ratio: 260/250;
  }
}
/* ========================================
   section-worry
   PC: 3540:8470（親 section-worry-pc 4767:6446）
   marquee: 3472:6686 + 3472:6689（右→左）
======================================== */
.section-worry {
  position: relative;
  padding: 40px 0 40px;
  background: #ffffff;
  overflow: hidden;
}

.section-worry__inner {
  position: relative;
  z-index: 1;
  max-width: 400px;
  width: calc(100% - 50px);
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 400px) {
  .section-worry__inner {
    width: calc(100% - 24px);
  }
}
.section-worry__head {
  text-align: center;
}

.section-worry__title {
  margin: 0;
  color: #c30e23;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 39px;
}

.section-worry__lead {
  margin: 8px 0 0;
  color: #000000;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 21px;
}

.section-worry__marquee {
  margin-top: 48px;
  overflow: hidden;
}

.section-worry__marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: worry-marquee-scroll 50s linear infinite;
}

.section-worry__marquee-set {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
  flex-shrink: 0;
}

.section-worry__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.section-worry__item img {
  display: block;
  height: 100px;
  width: auto;
  max-width: none;
}

.section-worry__item p {
  margin: 0;
  color: #000000;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 21px;
  text-align: center;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .section-worry {
    padding: 53px 0 80px;
  }
  .section-worry__inner {
    max-width: 1392px;
    width: calc(100% - 40px);
    padding: 0;
  }
  .section-worry__title {
    font-size: 4rem;
    line-height: 60px;
  }
  .section-worry__lead {
    margin-top: 8px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 40px;
  }
  .section-worry__marquee {
    margin-top: 54px;
  }
  .section-worry__marquee-set {
    gap: 56px;
    padding-right: 28px;
  }
  .section-worry__item img {
    height: 150px;
  }
  .section-worry__item p {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 30px;
  }
  .section-worry__item-text--2line {
    line-height: 30px;
  }
}
@keyframes worry-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-worry__marquee-track {
    animation: none;
  }
}
/* ========================================
   section-promise（TOP「お任せください」）
   Figma: section-lead-pc 4767:6447 / section-lead-sp 4770:6467
   ※ 下層の section-lead（about / reason 等）と別物のためリネーム
   SP: __image は Figma 実測 left41/top654/w424/h283（frame400基準）。
   右見切れは frame400 で 41px → 41/400 の比率で他幅も同じ割合だけ見切れ
======================================== */
.section-promise {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  padding: 0;
  background: linear-gradient(to bottom, #ffffff 50%, transparent 50%);
}

.section-promise__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2.5051227321%;
  background: #c30e23;
  clip-path: polygon(100% 0, 0 1.5338025039%, 0 100%, 100% 98.4662741222%);
  pointer-events: none;
  z-index: 0;
}

.section-promise__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
}

.section-promise__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.section-promise__body {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  gap: 32px;
  padding: 80px 0 40px;
  color: #ffffff;
}

.section-promise__title {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 50px;
}

.section-promise__text {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 32px;
}

.section-promise__media {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding-left: 17px;
  box-sizing: border-box;
}

.section-promise__image {
  display: block;
  width: 100%;
}

.section-promise__image img {
  display: block;
  width: 100%;
  height: auto;
}

.section-promise__character {
  display: none;
}

@media screen and (min-width: 768px) {
  .section-promise {
    padding: 0;
    --promise-img-h: calc(50vw * 524 / 720);
    --promise-h: max(983px, calc(var(--promise-img-h) + 224px + 235px));
    --promise-v-pad: calc((var(--promise-h) - var(--promise-img-h)) / 2);
    min-height: var(--promise-h);
  }
  .section-promise__bg {
    bottom: 0;
    clip-path: polygon(0 7.3619631902%, 100% 0, 100% 92.6380368098%, 0 100%);
  }
  .section-promise__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    max-width: 960px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 0;
    min-height: var(--promise-h);
  }
  .section-promise__body {
    width: 480px;
    max-width: 50%;
    margin-left: 0;
    padding: 0;
    gap: 32px;
  }
  .section-promise__title {
    font-size: 4rem;
    line-height: 60px;
  }
  .section-promise__text {
    max-width: 100%;
    font-size: 1.8rem;
    line-height: 40px;
  }
  .section-promise__media {
    position: absolute;
    left: 50%;
    right: 0;
    top: var(--promise-v-pad);
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .section-promise__image {
    width: 100%;
    margin-left: 0;
  }
  .section-promise__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 720/524;
    object-fit: cover;
    border-radius: 40px 0 0 40px;
  }
  .section-promise__character {
    display: block;
    position: absolute;
    left: 68.1933842239%;
    top: 59.3511450382%;
    width: 12.8498727735%;
    height: auto;
    aspect-ratio: 101/104;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
  }
  .section-promise__character img {
    display: block;
    width: 100%;
    height: auto;
  }
}
/* ========================================
   section-gold（金地帯: about / reason-service / guarantee）
   Figma SP: section-about-sp 4780:6530
   背景（金地＋柄）はこの1枚。セクションごとに柄を敷くと、柄の基準位置が
   セクションごとに変わり境目でずれるため集約している。
======================================== */
.section-gold {
  position: relative;
  z-index: 0;
  --promise-overlap: 48px;
  margin-top: calc(-1 * var(--promise-overlap));
  background: #dfd095;
}

.section-gold__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section-gold__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
}

@media screen and (min-width: 768px) {
  .section-gold {
    --promise-overlap: max(72px, calc(max(983px, 50vw * 524 / 720 + 459px) * 72 / 983));
  }
}
/* ========================================
   section-about
   PC: 4780:6468 / 本体 3482:7166（1120×548）
   SP: 4780:6530（card 360×602）
======================================== */
.section-about {
  position: relative;
  --u: min(0.1rem, calc((100vw - 40px) / 360));
  padding: calc(44px + var(--promise-overlap)) 0 16px;
  overflow-x: hidden;
}

.section-about__inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.section-about__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 40px;
  background: #ffffff;
  border-radius: 50px;
  color: inherit;
}

.section-about__card:hover .section-about__btn,
.section-about__card:focus-visible .section-about__btn {
  background: #000000;
}

.section-about__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 83.3333333333%;
  padding-top: 40px;
  margin: 0;
  box-sizing: border-box;
}

.section-about__label {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 21px;
  color: #000000;
}

.section-about__title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 30px;
  color: #c30e23;
}

.section-about__title br {
  display: none;
}

.section-about__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 78.0555555556%;
  margin-top: 24px;
}

.section-about__logo,
.section-about__image {
  display: block;
  width: 100%;
}

.section-about__logo img,
.section-about__image img {
  display: block;
  width: 100%;
  height: auto;
}

.section-about__logo img {
  aspect-ratio: 281/60;
}

.section-about__image img {
  aspect-ratio: 281/223;
}

.section-about__btn {
  width: 88.6111111111%;
  max-width: none;
  min-height: 56px;
  margin-top: 24px;
  padding: 8px 24px;
  font-size: 2.2rem;
  line-height: 40px;
}

@media screen and (min-width: 768px) {
  .section-about {
    --u: min(0.1rem, calc((100vw - 40px) / 1120));
    padding: 147px 0 40px;
  }
  .section-about__inner {
    max-width: calc(1120 * var(--u));
  }
  .section-about__card {
    display: block;
    width: calc(1120 * var(--u));
    height: calc(548 * var(--u));
    margin: 0 auto;
    padding: 0;
    border-radius: calc(50 * var(--u));
  }
  .section-about__head {
    position: absolute;
    top: calc(40 * var(--u));
    left: calc(80 * var(--u));
    width: calc(782 * var(--u));
    gap: calc(16 * var(--u));
    padding: 0;
    margin: 0;
  }
  .section-about__label {
    font-size: calc(22 * var(--u));
    font-weight: 700;
    line-height: calc(40 * var(--u));
  }
  .section-about__title {
    font-size: calc(40 * var(--u));
    line-height: calc(60 * var(--u));
  }
  .section-about__title br {
    display: inline;
  }
  .section-about__body {
    display: contents;
  }
  .section-about__logo {
    position: absolute;
    top: calc(256 * var(--u));
    left: calc(95 * var(--u));
    width: calc(486.5 * var(--u));
    margin: 0;
  }
  .section-about__logo img {
    aspect-ratio: 486.5/103.5;
  }
  .section-about__image {
    position: absolute;
    top: calc(123 * var(--u));
    left: calc(656 * var(--u));
    width: calc(384 * var(--u));
    margin: 0;
  }
  .section-about__image img {
    aspect-ratio: 384/305;
  }
  .section-about__btn {
    position: absolute;
    top: calc(452 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    width: calc(392 * var(--u));
    max-width: none;
    min-height: calc(56 * var(--u));
    margin: 0;
    padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) calc(64 * var(--u));
    gap: calc(16 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: calc(40 * var(--u));
    border-radius: calc(50 * var(--u));
  }
  .section-about__btn .btn-primary__arrow {
    width: calc(20 * var(--u));
    height: calc(8 * var(--u));
  }
}
/* ========================================
   section-reason / section-service
   PC: 3482:7167 / 3482:7168（各 544×337・gap 32）
   SP: 3501:8464 / 3501:8465（各 360×252・gap 16）
======================================== */
.section-reason-service {
  position: relative;
  --u: min(0.1rem, calc((100vw - 40px) / 360));
  padding: 0 0 16px;
  overflow: hidden;
}

.section-reason-service__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.section-reason,
.section-service {
  width: 100%;
}

.section-reason__card,
.section-service__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 40px 0;
  gap: 16px;
  background: #ffffff;
  border-radius: 50px;
  color: inherit;
}

.section-reason__card:hover .section-reason__btn,
.section-reason__card:focus-visible .section-reason__btn,
.section-service__card:hover .section-service__btn,
.section-service__card:focus-visible .section-service__btn {
  background: #000000;
}

.section-reason__head,
.section-service__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 80%;
  box-sizing: border-box;
}

.section-reason__label,
.section-service__label {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 32px;
  color: #000000;
}

.section-reason__title,
.section-service__title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 30px;
  color: #c30e23;
}

.section-reason__btn,
.section-service__btn {
  width: 88.6111111111%;
  max-width: none;
  min-height: 56px;
  padding: 8px 24px;
  font-size: 2.2rem;
  line-height: 40px;
}

@media screen and (min-width: 768px) {
  .section-reason-service {
    --u: min(0.1rem, calc((100vw - 40px) / 1120));
    padding: 0 0 calc(80 * var(--u));
  }
  .section-reason-service__inner {
    flex-direction: row;
    gap: calc(32 * var(--u));
    max-width: calc(1120 * var(--u));
  }
  .section-reason,
  .section-service {
    width: calc(544 * var(--u));
    flex: none;
    min-width: 0;
  }
  .section-reason__card,
  .section-service__card {
    position: relative;
    display: block;
    width: 100%;
    height: calc(337 * var(--u));
    padding: 0;
    border-radius: calc(50 * var(--u));
  }
  .section-reason__head,
  .section-service__head {
    position: absolute;
    top: calc(40 * var(--u));
    left: calc(52 * var(--u));
    width: calc(440 * var(--u));
    max-width: none;
    gap: calc(8 * var(--u));
  }
  .section-reason__label,
  .section-service__label {
    font-size: calc(22 * var(--u));
    font-weight: 700;
    line-height: calc(40 * var(--u));
  }
  .section-reason__title,
  .section-service__title {
    font-size: calc(40 * var(--u));
    line-height: calc(60 * var(--u));
  }
  .section-reason__btn,
  .section-service__btn {
    position: absolute;
    left: calc(52 * var(--u));
    bottom: calc(40 * var(--u));
    width: calc(392 * var(--u));
    max-width: none;
    min-height: calc(56 * var(--u));
    margin: 0;
    padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) calc(64 * var(--u));
    gap: calc(16 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: calc(40 * var(--u));
    border-radius: calc(50 * var(--u));
  }
  .section-reason__btn .btn-primary__arrow,
  .section-service__btn .btn-primary__arrow {
    width: calc(20 * var(--u));
    height: calc(8 * var(--u));
  }
}
/* ========================================
   section-guarantee
   PC: 3216:16990（1026×348）
   SP: 3505:8475（360×332）
   ※オーバーレイ（巻物）は _components.scss（下層 section-links と共通）
======================================== */
.section-guarantee {
  position: relative;
  --u: min(0.1rem, calc((100vw - 40px) / 360));
  padding: 0 0 120px;
  overflow: hidden;
}

.section-guarantee__inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: calc(360 * var(--u));
  margin: 0 auto;
}

.section-guarantee__body {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 360/332;
  color: inherit;
}

.section-guarantee__text br:nth-of-type(2) {
  display: none;
}

@media screen and (min-width: 768px) {
  .section-guarantee {
    --u: min(0.1rem, calc((100vw - 40px) / 1026));
    padding: 0 0 calc(200 * var(--u));
  }
  .section-guarantee__inner {
    max-width: calc(1026 * var(--u));
  }
  .section-guarantee__body {
    aspect-ratio: 1026/348;
  }
  .section-guarantee__copy {
    width: 40.7407407407%;
  }
  .section-guarantee__text br:nth-of-type(2) {
    display: inline;
  }
}
/* ========================================
   section-case（解決実例）
   PC: 4792:6569（1440幅、キャラ+文言+カード3枚が絶対配置）
   SP: 4792:6585（400幅、縦積み）
   配置・幅はスケール単位 --u（canvas SP=400 / PC=1440、フルブリードのため左右ガター控除なし）。
   フォントは --u せずテキストスタイルの固定値（見出し2 / 本文強調1 / 本文(小) / 本文強調2）。
   背景は斜め平行四辺形（左上→右下。上辺・下辺とも同傾き）。section-guarantee の上に重ねる。
======================================== */
.section-case {
  position: relative;
  z-index: 1;
  --u: min(0.1rem, calc(100vw / 400));
  --guarantee-overlap: 80px;
  margin-top: calc(-1 * var(--guarantee-overlap));
  overflow: visible;
  background: transparent;
}

.section-case__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #c30e23;
  clip-path: polygon(0 0, 100% calc(14 * var(--u)), 100% 100%, 0 calc(100% - 14 * var(--u)));
}

.section-case__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
}

.section-case__character {
  position: relative;
  top: -14px;
  z-index: 1;
  display: block;
  width: calc(300 * var(--u));
  margin: 0 0 0 calc(19 * var(--u));
  aspect-ratio: 1646/1226;
}

.section-case__sumi,
.section-case__samurai {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.section-case__sumi {
  z-index: 0;
}

.section-case__samurai {
  z-index: 1;
}

.section-case__samurai img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 墨：スクロールで画面内に入ったら左→右に「書いた軌跡」で描き出す（案B） */
.section-case__sumi-stroke {
  stroke-dashoffset: 0;
}

.js .section-case:not(.is-inview) .section-case__sumi-stroke {
  stroke-dashoffset: 1;
}

.section-case.is-inview .section-case__sumi-stroke {
  animation: section-case-sumi-draw 0.9s cubic-bezier(0.6, 0, 0.3, 1) 0.15s both;
}

@keyframes section-case-sumi-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .section-case:not(.is-inview) .section-case__sumi-stroke,
  .section-case.is-inview .section-case__sumi-stroke {
    stroke-dashoffset: 0;
    animation: none;
  }
}
.section-case__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc(100% - 40px);
  margin: calc(-55.45079 * var(--u)) auto 0;
  padding-bottom: calc(64 * var(--u));
  box-sizing: border-box;
}

.section-case__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.section-case__head-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.section-case__title {
  margin: 0;
  color: #ffffff;
  white-space: nowrap;
}

.section-case__lead {
  margin: 0;
  color: #ffffff;
  width: 100%;
}

.section-case__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-case__item {
  position: relative;
  width: 100%;
  min-height: 102px;
  background: #ffffff;
  border-radius: calc(20 * var(--u));
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.section-case__item-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 102px;
  padding: 16px 56px 16px 24px;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

.section-case__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 4px 16px;
  border-radius: 50px;
  color: #ffffff;
  white-space: nowrap;
}

.section-case__tag--blue {
  background: #0e6eb8;
}

.section-case__tag--red {
  background: #c30e23;
}

.section-case__tag--orange {
  background: #f39800;
}

.section-case__item-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 21px;
  color: #000000;
  overflow-wrap: break-word;
}

.section-case__item-link {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  aspect-ratio: 1/1;
  background: #c30e23;
  border-radius: 50%;
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.section-case__item-card:hover .section-case__item-link,
.section-case__item-card:focus-visible .section-case__item-link {
  background: #000000;
}

.section-case__item-link-arrow--pc {
  display: none;
}

.section-case__item-link-arrow--sp {
  display: block;
  width: 16.7%;
  aspect-ratio: 5.333/12.8;
}

@media screen and (min-width: 768px) {
  .section-case {
    --u: min(0.1rem, calc(100vw / 1440));
    --stagger: clamp(0, calc((100vw - 768px) / (1440px - 768px)), 1);
    --case-list-w: calc(610px + 350px * var(--stagger));
    --guarantee-overlap: calc(120 * var(--u));
    height: auto;
    min-height: calc(847.19 * var(--u));
    overflow: hidden;
    padding-bottom: 118px;
  }
  .section-case__bg {
    clip-path: polygon(0 0, 100% calc(60 * var(--u)), 100% 100%, 0 calc(100% - 60 * var(--u)));
  }
  .section-case__character {
    position: absolute;
    top: 34px;
    left: calc(50% - var(--case-list-w) / 2 - 188 * var(--u));
    width: calc(670 * var(--u));
    margin: 0;
  }
  .section-case__inner {
    display: flex;
    flex-direction: column;
    width: var(--case-list-w);
    max-width: calc(100% - 40px);
    padding: 200px 0 0;
    gap: 0;
    box-sizing: border-box;
  }
  .section-case__head {
    position: static;
    z-index: 2;
    width: calc(474 * var(--u));
    margin-left: calc(486 * var(--u));
    margin-bottom: 24px;
    min-height: calc(205 * var(--u));
    gap: 24px;
  }
  .section-case__head-row {
    gap: 24px;
  }
  .section-case__list {
    position: static;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 24px;
  }
  .section-case__item {
    position: relative;
    width: 610px;
    min-height: 148px;
    flex-shrink: 0;
  }
  .section-case__item:nth-child(1) {
    margin-left: calc(350px * var(--stagger));
  }
  .section-case__item:nth-child(2) {
    margin-left: calc(175px * var(--stagger));
  }
  .section-case__item:nth-child(3) {
    margin-left: 0;
  }
  .section-case__item-card {
    width: 100%;
    min-height: 148px;
    padding: 24px 72px 24px 48px;
    gap: 8px;
  }
  .section-case__item-title {
    font-size: 2.2rem;
    line-height: 35px;
  }
  .section-case__item-link {
    left: auto;
    right: 32px;
    width: 40px;
  }
  .section-case__item-link-arrow--pc {
    display: block;
    width: 42.7%;
    aspect-ratio: 17.1/14.92;
  }
  .section-case__item-link-arrow--sp {
    display: none;
  }
}
/* ========================================
   section-voice-faq（お客様の声の金地）
   section-flow 挿入後は voice のみを包む。下辺は水平（flow の斜めカットが上に重なる）。
======================================== */
.section-voice-faq {
  position: relative;
  z-index: 0;
  --case-overlap: 48px;
  --flow-slant: 14px;
  margin-top: calc(-1 * var(--case-overlap));
  overflow: hidden;
  background: #ffffff;
}

.section-voice-faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #dfd095;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.section-voice-faq__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
}

/* ========================================
   section-voice（お客様の声）
   PC: 4792:6586（白カード 1120×535、カード3枚横並び）
   SP: 4792:6587（白カード 360×1123、カード3枚縦積み）
   SP は通常フロー（inner は左右ガターのみ）。PC は --u（canvas 1120）。
   フォントは --u せずテキストスタイルの固定値（見出し2 / 本文強調2）。
   背景は .section-voice-faq。case 下辺カットへは親の overlap で食い込ませる。
======================================== */
.section-voice {
  position: relative;
  z-index: 1;
  padding: calc(var(--case-overlap) - 14 * min(0.1rem, 0.25vw) + 64px) 0 80px;
}

.section-voice__inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.section-voice__body {
  box-sizing: border-box;
  width: 100%;
  padding: max(40px, 0.14 * (100% - 60px)) 30px 40px;
  background: #ffffff;
  border-radius: 50px;
}

.section-voice__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 24px;
}

.section-voice__title {
  margin: 0;
  color: #c30e23;
  white-space: nowrap;
}

.section-voice__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-voice__list > li {
  width: 100%;
  min-width: 0;
}

@media screen and (min-width: 768px) {
  .section-voice-faq {
    --voice-top-slant: 60px;
    --flow-slant: 60px;
    --case-overlap: 100px;
    padding-bottom: 40px;
  }
  .section-voice-faq__bg {
    clip-path: polygon(0 0, 100% var(--voice-top-slant), 100% 100%, 0 100%);
  }
  .section-voice {
    --u: min(0.1rem, calc((100vw - 40px) / 1120));
    padding: calc(var(--voice-top-slant) + 80px) 0 var(--flow-slant);
  }
  .section-voice__inner {
    max-width: calc(1120 * var(--u));
    width: calc(100% - 40px);
  }
  .section-voice__body {
    padding: calc(47 * var(--u)) calc(80 * var(--u)) calc(53 * var(--u));
  }
  .section-voice__head {
    margin-bottom: calc(34 * var(--u));
  }
  .section-voice__list {
    flex-direction: row;
    gap: calc(36 * var(--u));
  }
  .section-voice__list > li {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* ========================================
   section-flow（ご相談の流れ）
   PC: 5762:7108 section-flow-pc（1440幅、コンテンツ 960、py 120）
   SP: 5762:7134 section-flow-sp（400幅、コンテンツ 360、py 64）
   フルブリード赤＋麻の葉。PC/SP で斜めの向きが逆。
   PC: M0 60 L1440 0 V755 L0 815（左が下・右が上、落差 60）
   SP: Intersect を水平反転 → 左上→右下（落差 14）
   フローレイアウトのため --u は使わない。
======================================== */
.section-flow {
  position: relative;
  z-index: 1;
  --flow-slant: 14px;
  margin-top: calc(-1 * var(--flow-slant));
  overflow: hidden;
  background: transparent;
}

.section-flow__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #c30e23;
  clip-path: polygon(0 0, 100% var(--flow-slant), 100% 100%, 0 calc(100% - var(--flow-slant)));
}

.section-flow__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
}

.section-flow__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 64px 0;
}

.section-flow__title {
  color: #ffffff;
}

.section-flow__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.section-flow__item:not(:last-child)::after {
  content: "";
  display: block;
  width: 5px;
  height: 23px;
  margin: 8px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='23' fill='none'%3E%3Ccircle cx='2.5' cy='2.5' r='2.5' fill='%23fff'/%3E%3Ccircle cx='2.5' cy='11.5' r='2.5' fill='%23fff'/%3E%3Ccircle cx='2.5' cy='20.5' r='2.5' fill='%23fff'/%3E%3C/svg%3E") center/5px 23px no-repeat;
}

.section-flow__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 24px 20px;
  background: #ffffff;
  border-radius: 20px;
}

.section-flow__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.section-flow__num {
  flex-shrink: 0;
  color: #c30e23;
  white-space: nowrap;
}

.section-flow__label {
  width: 240px;
  color: #000000;
}

.section-flow__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  opacity: 0.8;
}

.section-flow__text {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 21px;
  color: #000000;
}

.section-flow__note {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 16px;
  color: #000000;
}

@media screen and (min-width: 768px) {
  .section-flow {
    --flow-slant: 60px;
  }
  .section-flow__bg {
    clip-path: polygon(0 var(--flow-slant), 100% 0, 100% calc(100% - var(--flow-slant)), 0 100%);
  }
  .section-flow__inner {
    max-width: 960px;
    width: calc(100% - 40px);
    padding: 120px 0;
  }
  .section-flow__card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
  }
  .section-flow__head {
    flex-shrink: 0;
    width: auto;
  }
  .section-flow__body {
    flex: 1 1 auto;
    max-width: 550px;
    min-width: 0;
    width: auto;
  }
  .section-flow__text {
    font-size: 1.6rem;
    line-height: 26px;
  }
  .section-flow__note {
    font-size: 1.4rem;
    line-height: 14px;
  }
}
/* ========================================
   section-faq（よくあるご質問）
   PC: 4797:6606（コンテンツ幅 960）／回答オープン: 3587:13704
   SP: 4797:6608（コンテンツ幅 320）／回答オープン: 3531:7543
   回答本文: FAQ下層 2971:4849
   フローレイアウトのため --u は使わない。金地は本セクションの __bg。
======================================== */
.section-faq {
  position: relative;
  z-index: 0;
  --flow-slant: 14px;
  --faq-bottom-slant: 14px;
  margin-top: calc(-1 * var(--flow-slant));
  overflow: hidden;
  background: #ffffff;
  padding: 78px 0 64px;
}

.section-faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #dfd095;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--faq-bottom-slant)));
}

.section-faq__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
}

.section-faq__inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.section-faq__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 24px;
}

.section-faq__title {
  margin: 0;
  color: #000000;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .section-faq {
    --flow-slant: 60px;
    --faq-bottom-slant: 60px;
    padding: 140px 0 120px;
  }
  .section-faq__bg {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--faq-bottom-slant)), 0 100%);
  }
  .section-faq__inner {
    max-width: 960px;
    width: calc(100% - 40px);
  }
  .section-faq__head {
    margin-bottom: 40px;
  }
}
/* ========================================
   section-column（コラム）
   PC: 3202:14449（960×796、コンテンツ幅 960）
   SP: 3512:5603（320×1148、コンテンツ幅 320）
   フローレイアウトのため --u は使わない。
   点線は Figma Vector 7 の stroke #C30E23 / dasharray 2 2。
======================================== */
.section-column {
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 40px 0 64px;
}

.section-column__inner {
  width: calc(100% - 40px);
  margin: 0 auto;
}

.section-column__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 24px;
}

.section-column__title {
  margin: 0;
  color: #000000;
  white-space: nowrap;
}

.section-column__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-column__list > li {
  position: relative;
  padding: 24px 0;
}

.section-column__list > li::before,
.section-column__list > li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(to right, #c30e23 0 2px, transparent 2px 4px);
}

.section-column__list > li::before {
  top: 0;
}

.section-column__list > li:last-child::after {
  bottom: 0;
}

@media screen and (min-width: 768px) {
  .section-column {
    padding: 80px 0 80px;
  }
  .section-column__inner {
    max-width: 960px;
    width: calc(100% - 40px);
  }
  .section-column__head {
    margin-bottom: 40px;
  }
  .section-column__list > li {
    padding: 16px 0;
  }
}
/* ========================================
   section-news（お知らせ）
   PC: 3482:7211（1440×476、リスト幅 600、キャラ 343×401）
   SP: 4798:6610（400×578、赤帯 551、キャラが上に 27px はみ出し）
   フルブリード赤＋麻の葉。SP 配置は --u（canvas 400、ガター控除なし）。
   PC の canvas は max-width 1011（inner 左240〜character 右1251）で中央寄せ。
   フォントは --u せずテキストスタイル（見出し2 / 本文強調1 / 本文(小)）。
======================================== */
.section-news {
  position: relative;
  z-index: 1;
  --u: min(0.1rem, calc(100vw / 400));
  overflow: visible;
  background: #c30e23;
}

.section-news__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #c30e23;
}

.section-news__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-pattern-image) center/var(--bg-pattern-size) var(--bg-pattern-repeat);
  opacity: 0.1;
}

.section-news__canvas {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.section-news__character {
  position: absolute;
  z-index: 2;
  top: calc(-27 * var(--u));
  right: 10px;
  width: calc(172 * var(--u));
  display: block;
  pointer-events: none;
}

.section-news__character img,
.section-news__character picture {
  display: block;
  width: 100%;
  height: auto;
}

.section-news__character img {
  aspect-ratio: 172/201;
}

.section-news__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 21px;
  margin: 0 auto;
  padding: 124px 0 80px;
}

.section-news__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.section-news__title {
  margin: 0;
  color: #ffffff;
  white-space: nowrap;
}

.section-news__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-news__list > li {
  position: relative;
  padding: 24px 0;
}

.section-news__list > li::before,
.section-news__list > li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(to right, #ffffff 0 2px, transparent 2px 4px);
}

.section-news__list > li::before {
  top: 0;
}

.section-news__list > li:last-child::after {
  bottom: 0;
}

.card-news {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.card-news__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.card-news__date {
  color: #ffffff;
  white-space: nowrap;
}

.card-news__title {
  margin: 0;
  color: #ffffff;
  overflow-wrap: break-word;
}

.card-news__more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  aspect-ratio: 1/1;
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 50%;
  color: #c30e23;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.card-news:hover .card-news__more,
.card-news:focus-visible .card-news__more {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.card-news__more-arrow {
  display: block;
  width: 44.2%;
  aspect-ratio: 22.1/14.92;
}

@media screen and (min-width: 768px) {
  .section-news {
    overflow: hidden;
  }
  .section-news__canvas {
    width: 100%;
    max-width: 1051px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }
  .section-news__character {
    position: relative;
    width: 33.92%;
    top: auto;
    left: auto;
    transform: none;
  }
  .section-news__character img {
    aspect-ratio: 343/401;
  }
  .section-news__inner {
    width: 59.34%;
    margin: 0;
    padding: 64px 0;
    gap: 24px;
  }
  .card-news {
    justify-content: space-between;
    gap: 0;
  }
  .card-news__body {
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    gap: 24px;
  }
  .card-news__more {
    width: 40px;
  }
}
/* ========================================
   section-company（会社概要）
   PC: 3202:14455（1040×579、写真 427 / gap 40 / テキスト 573）
   SP: 3512:5742（320×903、写真 320×434 → body gap 24）
   フローレイアウトのため --u は使わない。
   PC の写真・テキスト幅と横 gap は親 1040 に対する %（狭幅で見切れないようにする）。
======================================== */
.section-company {
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 80px 0;
}

.section-company__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.section-company__photo {
  width: 100%;
  overflow: hidden;
  border-radius: 50px;
  aspect-ratio: 320/434;
}

.section-company__photo picture,
.section-company__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.section-company__photo img {
  object-fit: cover;
  object-position: center top;
}

.section-company__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.section-company__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.section-company__title {
  margin: 0;
  color: #000000;
  white-space: nowrap;
}

.section-company__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

.section-company__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.section-company__catch {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 30px;
  color: #000000;
}

.section-company__text {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
}

.section-company__text p {
  margin: 0;
}

.section-company__sign {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #000000;
  white-space: nowrap;
}

.section-company__role {
  color: #000000;
}

.section-company__name {
  color: #000000;
}

.section-company__license {
  width: 100%;
  color: #c30e23;
}

@media screen and (min-width: 768px) {
  .section-company__inner {
    flex-direction: row;
    align-items: center;
    max-width: 1040px;
    width: calc(100% - 40px);
    gap: 3.8461538462%;
    margin-left: max(20px, (100% - 1040px) * 160 / 400);
    margin-right: auto;
  }
  .section-company__photo {
    flex: 0 0 41.0576923077%;
    width: 41.0576923077%;
    aspect-ratio: 427/579;
  }
  .section-company__body {
    flex: 0 0 55.0961538462%;
    width: 55.0961538462%;
    gap: 32px;
  }
  .section-company__lead {
    gap: 24px;
  }
  .section-company__catch {
    font-size: 3rem;
    line-height: 36px;
    white-space: nowrap;
  }
  .section-company__text {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 32px;
  }
}
/* SP 大きめ端末: 左右余白 固定px → 20vw（片側 10vw） */
@media screen and (min-width: 515px) and (max-width: 767px) {
  .section-service-ink__inner,
  .section-about__inner,
  .section-reason-service__inner,
  .section-guarantee__inner,
  .section-case__inner,
  .section-voice__inner,
  .section-flow__inner,
  .section-faq__inner,
  .section-column__inner,
  .section-news__canvas,
  .section-company__inner {
    width: calc(100% - 20vw);
  }
  .section-promise__inner {
    padding: 0 10vw;
  }
}

/*# sourceMappingURL=top.css.map */