@charset "utf-8";

/* =====================================================================
  汎用プレースホルダー用スタイル
  ===================================================================== */
/* 見出しスタイル */
.c-h2 {
  font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-xxl));
  font-weight: 700;
  text-align: center;
  color: var(--pri-dark);
}

.c-h3 {
  font-size: var(--fs-l);
  font-weight: bold;
  color: var(--txt);
  text-align: center;
}

.c-h4 {
  font-size: var(--fs-m);
  font-weight: bold;
  padding: var(--s2) var(--s3);
  background: var(--sub);
  color: white;
}

/* 見出し内リンク */
.c-hlink,
.c-h2 a{
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0 var(--s5) 0 0;
  position: relative;
  transition: opacity 0.2s ease;
}
.c-h2 a{
  padding-right: var(--s8);
}

.c-hlink::after,
.c-h2 a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-0.2rem, -50%);
  transition: transform 0.2s ease;
  width: 1em;
  height: 1em;
  background-color: var(--pri-dark);
  -webkit-mask-image: url("img/arrow-chevron-mask.svg");
  mask-image: url("img/arrow-chevron-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}
.c-h2 a::after{
  width: 0.8em;
}

.c-hlink:hover,
.c-h2 a:hover{
  text-decoration: none;
  opacity: 0.6;
}

.c-hlink:hover::after,
.c-h2 a:hover::after{
  transform: translate(0, -50%);
}

/* テキストユーティリティ */
.c-lead {
  margin-bottom: var(--s3);
  color: var(--txt);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.c-desc {
  margin: auto;
  max-width: 90rem;
  color: var(--txt);
}

/* ボタン：ホバー時シャイン（btn-web の a::before） */
.btn-web a {
  overflow: hidden;
}

.btn-web a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 40%;
  height: 100%;
  transform: skewX(-20deg);
  pointer-events: none;
  background: linear-gradient(120deg,
      transparent 0%,
      color-mix(in srgb, var(--white) 30%, transparent) 50%,
      transparent 100%);
}

@keyframes c-btn-shine {
  0% {
    left: -80%;
  }

  100% {
    left: 130%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn-web:hover a::before {
    animation: c-btn-shine 1s ease forwards;
  }
}

/* カードコンポーネント */
/* テーブルコンポーネント */
.c-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.c-table th,
.c-table td {
  padding: var(--s2);
  text-align: left;
  border-bottom: 1px solid var(--ln);
}

.c-table tr:last-child th,
.c-table tr:last-child td {
  border-bottom: none;
}

.c-table th {
  background: var(--c2);
  font-weight: bold;
  color: var(--txt);
  width: 20%;
}

/* =====================================================================
  TOP aboutセクション
  ===================================================================== */
.l-mvFixedBg {
  position: relative;
  isolation: isolate;
  background: url("img/mv.webp") no-repeat center / auto 100vh;
  background-attachment: fixed;
}

.mainvisual {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  height: calc(100vh - 24rem);
  padding-top: var(--s8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--txt);
  background: radial-gradient(30% 35% at 20% 65%, rgb(255 255 255 / 100%) 0%, rgba(255, 255, 255, 0) 100%);
  justify-content: center;
}

.mainvisual .l-center {
  width: min(120rem, 100% - var(--s6));
}

.mv-title {
  font-size: clamp(calc(var(--fs-xxl) * 1.3), 5vw, calc(var(--fs-xxl) * 2));
  font-weight: 700;
  color: var(--txt);
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.mv-title__label {
  display: inline-block;
}

.mv-title__deco {
  position: relative;
  display: inline;
  z-index: 0;
}

.mv-title__deco::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: calc(var(--s1) * 52);
  aspect-ratio: 447 / 38;
  background: url("img/deco-mv.png") no-repeat right top / contain;
  pointer-events: none;
  transform: translateY(18%);
}

.mv-text {
  margin: var(--s4) 0;
  max-width: 65%;
  color: var(--txt);
  line-height: 2;
  opacity: 0.9;
  font-weight: 500;
}

.mainvisual .l-grid-2 {
  display: flex;
}

.mainvisual .btn-internal,
.mainvisual .btn-web,
.mainvisual .btn-anchor{
  margin: 0;
  max-width: 32rem;
}

/* =====================================================================
  下層ページ MV（背景・帯装飾のみ／パンくず・h1 は #low-page 側を重ね）
  ===================================================================== */
#low-page .l-center {
  width: 100rem;
}

.mainvisual-lower {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 100%;
  height: 23rem;
}

.mainvisual-lower__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mainvisual-lower__picture {
  display: block;
  width: 100%;
  max-width: 100%;
  block-size: 100%;
}

.mainvisual-lower__img {
  display: block;
  width: 100%;
  max-width: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 88% center;
}

.mainvisual-lower__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--c0) 0%, var(--c0) 38%, rgb(255 255 255 / 44%) 62%, rgb(255 255 255 / 0%) 92%);
}

/* MV スクロールヒント（色・線太さ・文字サイズは .c-scrollHint の変数で調整） */
.c-scrollHint {
  --scroll-hint-color: var(--pri);
  --scroll-hint-fs: var(--fs-s);
  --scroll-hint-line-thick: 0.1rem;
  --scroll-hint-line-len: var(--s6);
  position: absolute;
  z-index: 3;
  top: 110%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--scroll-hint-color);
  pointer-events: none;
  transform: translateX(-50%);
  gap: var(--s1);
}

.c-scrollHint__txt {
  margin: 0;
  font-size: var(--scroll-hint-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.c-scrollHint__line {
  margin-top: var(--s1);
  width: var(--scroll-hint-line-thick);
  min-height: var(--scroll-hint-line-len);
  background: linear-gradient(180deg, var(--pri) 0%, var(--pri-dark) 100%);
}

.c-abt {
  padding: 17rem 0 var(--s14);
  background:
    url("img/abt-l.png") no-repeat left top 12rem / 51rem auto,
    url("img/abt-r.png") no-repeat right top 54rem / 51rem auto,
    linear-gradient(0deg, rgba(0, 0, 0, 0.8) 75%, rgba(102, 102, 102, 0) 100%);
  overflow-x: clip;
}

.c-abt__ttl,
.c-abt__txt,
.c-abt__sub {
  color: var(--white);
  text-align: center;
}

.c-abt__ttl {
  line-height: 1.5;
}

.c-abt__top {
  display: block;
}

.c-abt__txt {
  max-width: 90rem;
  margin: 0 auto;
}

.c-abt__sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: var(--s1) var(--s3);
  background: linear-gradient(90deg, color-mix(in srgb, var(--white) 16%, transparent) 0%, color-mix(in srgb, var(--white) 8%, transparent) 100%);
  line-height: 1.25;
}

.c-abt .l-grid-2>.c-abt__sub {
  justify-self: start;
  text-align: left;
}

.c-abt .l-stack-sm>.c-abt__sub {
  align-self: center;
}

.c-abtLogo {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--s2);
}

.c-abtLogo+.c-abtLogo {
  margin-left: var(--s2);
}

.c-abtLogoViewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.c-abtLogoTrack {
  display: flex;
  width: max-content;
  animation: c-abtLogoMarquee 50s linear infinite;
}

.c-abtLogoViewport .c-abtLogo__i {
  flex: 0 0 auto;
  width: calc(var(--s1) * 28);
}

.c-abtTech {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: column;
  gap: 4px;
}

.c-abtTech__i {
  width: 100%;
  max-width: 90rem;
  padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--txt) 70%, transparent);
}

.c-abtTech__ttl {
  margin: 0;
  padding: 0;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.45;
  color: var(--white);
  background: transparent;
  text-align: left;
}

.c-abtTech__desc {
  margin: var(--s1) 0 0;
  color: color-mix(in srgb, var(--white) 88%, transparent);
}

.c-abtTech .c-abt__txt {
  margin: 0;
  text-align: left;
  line-height: 1.9;
}

.c-abtTech .txt_bold {
  letter-spacing: 0.04em;
}


.c-abtLogo__i img,
.c-abtTech__i img {
  width: 100%;
  max-width: 100%;
}


@keyframes c-abtLogoMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-abtLogoTrack {
    animation: none;
  }

  .c-abtLogoTrack .c-abtLogo+.c-abtLogo {
    display: none;
  }
}

.c-abt .l-grid-2 {
  grid-template-columns: max-content minmax(0, 90rem);
  align-items: start;
  justify-content: center;
}

/* =====================================================================
  TOP reasonセクション
  ===================================================================== */
.c-rsn {
  position: sticky;
  top: var(--s7);
  z-index: 0;
  padding: var(--s10) var(--s2);
  background: url("img/deco-rsn-bl.png") no-repeat left bottom / 35% auto,
    var(--c0);
  height: calc(100vh - var(--s7));
  box-sizing: border-box;
  overflow: hidden;
}

.c-rsn-wrap {
  height: 300vh;
}

.c-rsn::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  top: calc(var(--s10) + (var(--s3) * -1));
  width: min(55vw, calc(var(--s1) * 72));
  height: calc(min(55vw, calc(var(--s1) * 72)) / 1.414);
  background: color-mix(in srgb, var(--pri) 22%, var(--white));
  pointer-events: none;
}

.c-rsn::after {
  content: none;
}

.c-rsn__in {
  position: relative;
  z-index: 1;
  height: 100%;
}

.c-rsn__ttl {
  text-align: left;
  line-height: 1.5;
  max-width: 45%;
}

.c-rsn__desc {
  margin: 0;
}

.c-h2[data-en] {
  position: relative;
  padding-top: var(--s3);
}

.c-h2[data-en]::before {
  content: attr(data-en);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--pri-dark);
  font-size: var(--fs-s);
  line-height: 1;
}

.c-rsn .btn-internal {
  margin-left: 0;
  max-width: 45%;
}

.c-rsn__imgSlide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.c-rsn__txt {
  position: relative;
  height: 100%;
  min-height: 0;
  justify-content: flex-start;
  row-gap: var(--s3);
}

/* 見出し横の番号 */
.c-rsn__h {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.c-rsn__idx {
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;

  font-size: var(--fs-xl);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pri-dark);
  opacity: 0.28;
}

.c-rsn__txtSlider {
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.c-rsn__txtInner {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.63s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

.c-rsn__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: stretch;
  gap: var(--s4);
  flex: 0 0 100%;
  min-height: 0;
}

.c-rsn__slide {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 枠の縦横比は .c-rsn::before（1.414＝√2）と同じ白銀比（B判系） */
.c-rsn__imgWrap {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1.414 / 1;
  align-self: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.c-rsn__imgSlide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.525s cubic-bezier(0.45, 0, 0.55, 1),
    visibility 0s linear 0.525s;
}

.c-rsn__imgSlide.is-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.525s cubic-bezier(0.45, 0, 0.55, 1),
    visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {

  .c-rsn__txtInner,
  .c-rsn__imgSlide {
    transition: none;
  }
}

.c-rsn__ttl[data-en="Reason"],
.c-flw__ttl[data-en="Flow"],
.c-faq__ttl[data-en="FAQ"] {
  width: fit-content;
}

.c-rsn__ttl[data-en="Reason"]::before,
.c-flw__ttl[data-en="Flow"]::before,
.c-faq__ttl[data-en="FAQ"]::before {
  display: inline-block;
  left: 0;
  transform: none;
  z-index: 1;
  padding-right: var(--s2);
  background: var(--c3);
}

.c-rsn__ttl[data-en="Reason"]::after,
.c-flw__ttl[data-en="Flow"]::after,
.c-faq__ttl[data-en="FAQ"]::after {
  content: "";
  position: absolute;
  top: calc(var(--s3) / 2);
  left: var(--s2);
  right: 0;
  border-top: 0.1rem solid var(--pri-dark);
  opacity: 0.5;
}

.c-rsn__sub,
.c-flw__ttl,
.c-faq__ttl,
.c-csCard__ttl,
.c-caseLinks__title,
.c-flwStep__ttl {
  text-align: left;
}
/* 緊急修正用 */
/* 大画面では元の値を維持、低画面のみ縮む */
.c-rsn {
  padding-top: min(var(--s10), 12vh);
  padding-bottom: min(var(--s10), 12vh);
}
.c-rsn__txt {
  row-gap: min(var(--s3), 2vh);
}
.c-rsn__pair {
  gap:         min(var(--s4), 3vh);
  align-items: center;
}
.c-rsn__imgWrap {
  max-height: min(320px, 38vh);
}
/* =====================================================================
  TOP concernsセクション
  ===================================================================== */
.c-cns {
  padding: var(--s10) 0 var(--s14);
  background: var(--c0);
}

.c-cns__ttl {
  text-align: center;
}

.c-cns__g {
  gap: var(--s4);
}

.c-cnsCard {
  align-items: center;
}

.c-cnsCard__fig {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 15rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.c-cnsCard__fig img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.c-cnsCard__ttl {
  text-align: center;
  font-size: var(--fs-l);
}

.c-cnsCard__txt {
  margin: 0;
}

.c-cns__arr {
  text-align: center;
}

.c-cns__arr img {
  width: 8%;
  max-width: 100%;
}

.c-cns__sum {
  margin: 0;
  text-align: center;
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.8;
}

.c-cns .btn-internal {
  margin: 0 auto;
}

/* =====================================================================
  TOP bestfitセクション
  ===================================================================== */
.c-bf {
  padding: var(--s14) var(--s2);
  background: url("img/deco-bf-tl.png") no-repeat left top / 24% auto, var(--c1);
}

.c-bf__head {
  align-items: center;
}

.c-bf__txt {
  margin: 0;
  max-width: 90rem;
}

.c-bf__tbl {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-bf__tbl .c-bf__table {
  min-width: 52rem;
  width: 100%;
  table-layout: fixed;
}

.c-bf__tbl+.c-bf__tbl .c-bf__table {
  table-layout: auto;
}

.c-bf__tbl+.c-bf__tbl .c-bf__table th:first-child {
  width: 17%;
  white-space: nowrap;
}

.c-bf__sym {
  font-family: "Noto Sans Symbols 2", "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1;
  display: inline-block;
}

.c-bf__table b.txt_bold {
  font-family: inherit;
  font-weight: inherit;
}

.c-bf__table th,
.c-bf__table td {
  text-align: center;
}

.c-bf__table tbody tr:last-child th,
.c-bf__table tbody tr:last-child td {
  border-bottom: none;
}

/* =====================================================================
  TOP grind & finishセクション
  ===================================================================== */
.c-gf {
  padding: var(--s14) 0;
  background:
    linear-gradient(color-mix(in srgb, var(--c0) 80%, transparent), color-mix(in srgb, var(--c0) 80%, transparent)),
    url("img/deco-gf-tl.webp") no-repeat -15rem -8rem / 40% auto,
    var(--c3);
}

.c-gf__g,
.c-pp__g {
  gap: 2px;
  max-width: 100%;
  width: 120rem;
}

.c-gfCard,
.c-ppCard {
  padding: var(--s4) var(--s3);
  transition: background-size 0.35s ease;
}

.c-gfCard {
  background:
    linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)),
    url("img/za-nac-00001271.webp") no-repeat center center / cover;
  background-size: auto, 100%;
}

.c-gf__g .c-gfCard:nth-child(2) {
  background-image: linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)), url("img/za-nac-00001274.webp");
}

.c-gf__g .c-gfCard:nth-child(3) {
  background-image: linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)), url("img/za-nac-00001272.webp");
}

.c-gf__g .c-gfCard:nth-child(4) {
  background-image: linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)), url("img/za-nac-00001275.webp");
}

.c-gf__g .c-gfCard:nth-child(5) {
  background-image: linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)), url("img/za-nac-00001273.webp");
}

.c-gf__g .c-gfCard:nth-child(6) {
  background-image: linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)), url("img/za-nac-00001276.webp");
}

.c-gfCard,
.c-gfCard:active,
.c-gfCard:hover,
.c-ppCard,
.c-ppCard:active,
.c-ppCard:hover {
  text-decoration: none;
  opacity: 1;
}

.c-gfCard__ttl,
.c-ppCard__ttl {
  color: var(--white);
  text-align: left;
  font-size: var(--fs-xl);
}

.c-gfCard__txt,
.c-ppCard__txt {
  color: var(--white);
  text-align: left;
  margin: 0;
}

.c-gfCard__arr,
.c-ppCard__arr {
  margin-top: auto;
  text-align: right;
}

.c-gfCard__arr img {
  width: 18%;
}

.c-gfCard__arr img,
.c-ppCard__arr img {
  max-width: 100%;
  transition: transform 0.25s ease;
}

.c-gfCard:hover,
.c-ppCard:hover {
  background-size: auto, 115%;
}

.c-gfCard:hover .c-gfCard__arr img,
.c-ppCard:hover .c-ppCard__arr img {
  transform: translateX(var(--s1));
}

/* =====================================================================
  TOP parts & purposeセクション
  ===================================================================== */
.c-pp {
  padding: var(--s10) 0 var(--s14);
  background: url("img/deco-pp-tr.png") no-repeat right top / 35% auto, var(--c0);
}

.c-pp__txt {
  margin: 0 auto;
  max-width: 90rem;
}


.c-ppCard {
  background:
    linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)),
    url("img/za-nac-00001277.webp") no-repeat center center / cover;
  background-size: auto, 100%;
}

.c-pp__g .c-ppCard:nth-child(2) {
  background-image: linear-gradient(color-mix(in srgb, var(--txt) 80%, transparent), color-mix(in srgb, var(--txt) 80%, transparent)), url("img/za-nac-00001278.webp");
}

.c-ppCard__arr img {
  width: 12%;
}

/* =====================================================================
  TOP case studiesセクション
  ===================================================================== */
.c-cs {
  padding: var(--s14) 0 var(--s10);
  background: linear-gradient(color-mix(in srgb, white 80%, transparent), color-mix(in srgb, white 80%, transparent)),
    url("img/deco-cs-tl.webp") no-repeat -12rem -4rem / 45% auto,
    var(--white);
}

.c-cs__g {
  gap: var(--s4);
}

.c-csCard>img {
  border: 1px solid var(--ln);
}

.c-csCard__ttl .c-hlink {
  width: 100%;
  padding-left: 0;
  box-sizing: border-box;
}

.c-csCard__corp {
  font-size: var(--fs-m);
  font-weight: 700;
}

.c-csCard__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s2);
  row-gap: var(--s-2);
  padding-left: var(--s2);
  border-left: 0.2rem solid var(--pri);
}

.c-csCard__meta dt,
.c-csCard__meta dd {
  font-size: var(--fs-s);
  line-height: 1.5;
}

.c-csCard__meta dt {
  white-space: nowrap;
}

.c-cs .btn-internal {
  margin: auto;
}

/* =====================================================================
  TOP flowセクション
  ===================================================================== */
.c-flw {
  padding: var(--s14) 0 var(--s10);
  background: url("img/deco-flw-tl.png") no-repeat left top / 35% auto,
    var(--c3);
}

.c-flw__in {
  width: 120rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.c-flw__txt {
  margin: 0 auto;
  max-width: 88rem;
}

.c-flwList {
  position: relative;
  max-width: 90rem;
  align-self: anchor-center;
}

.c-flwList.l-stack-sm {
  gap: 0;
}

.c-flwStep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  z-index: 1;
  position: relative;
  padding-bottom: var(--s5);
}

.c-flwStep::before {
  content: "";
  position: absolute;
  top: calc(var(--s6) / 2);
  bottom: 0;
  left: calc(var(--s6) / 2);
  width: 1px;
  background: var(--ln);
  z-index: 0;
}

.c-flwStep:last-child {
  padding-bottom: 0;
}

.c-flwStep:last-child::before {
  content: none;
}

.c-flwStep__dot {
  width: var(--s6);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--pri-dark);
  background: var(--c3);
  position: relative;
  z-index: 1;
}

.c-flwStep__dot img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.c-flwStep__txt {
  margin: 0;
}

.c-flwStep__body {
  position: relative;
  /* padding: var(--s3) var(--s4); */
  /* background: color-mix(in srgb, var(--white) 86%, transparent); */
  /* border: 1px solid color-mix(in srgb, var(--pri-dark) 12%, transparent); */
  /* box-shadow: var(--sd-1); */
}

.c-flwStep__body::before {
  /* content: ""; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.2rem;
  background: linear-gradient(90deg, var(--pri) 0%, var(--pri-dark) 100%);
  opacity: 0.65;
}

.c-flwStep__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s2);
  margin-right: var(--s2);
  /* border-radius: 999px; */
  background: linear-gradient(90deg, var(--pri) 0%, var(--pri-dark) 100%);
  color: var(--white);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

/* =====================================================================
  TOP faqセクション
  ===================================================================== */
.c-faq {
  padding: var(--s14) 0 var(--s10);
  background: url("img/deco-faq-tl.png") no-repeat left top / 35% auto,
    var(--c3);
}

.c-faq__in {
  width: 120rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.c-faqList {
  margin: 0 auto;
  max-width: 90rem;
}

.c-faqItem {
  border-top: 1px solid var(--ln);
  padding: var(--s2) 0;
}

.c-faqItem:last-child {
  border-bottom: 1px solid var(--ln);
}

.c-faqItem__q {
  margin: 0;
  padding: 0 var(--s4) 0 var(--s4);
  position: relative;
  font-size: var(--fs-l);
  font-weight: 700;
  cursor: pointer;
  /* 横線（常時表示） */
  background: linear-gradient(var(--pri-dark), var(--pri-dark)) right 0.1em center / 0.6em 0.12em no-repeat;
}

.c-faqItem__q::before {
  content: "Q";
  color: var(--pri-dark);
  position: absolute;
  left: 0;
  top: 0;
}

.c-faqItem__q::after {
  content: "";
  position: absolute;
  right: 0.35em;
  top: 50%;
  width: 0.1em;
  height: 0.6em;
  transform: translateY(-50%) rotate(0deg) scaleY(1);
  transform-origin: center;
  background: var(--pri-dark);
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.2s ease;
  border-radius: 999px;
}

.c-faqItem__a {
  padding-left: var(--s4);
  padding-top: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: max-height 0.35s ease, opacity 0.2s ease, padding-top 0.35s ease;
}

.c-faqItem.is-open .c-faqItem__q::after {
  /* 縦線が回転して消える（マイナス表現） */
  transform: translateY(-50%) rotate(90deg) scaleY(0);
  opacity: 0;
}

.c-faqItem.is-open .c-faqItem__a {
  padding-top: var(--s2);
  opacity: 1;
  /* 内容が収まる程度の高さ */
  max-height: 60rem;
}

.c-faq .btn-internal {
  margin: auto;
}

.c-faqList--static .c-faqItem__q {
  cursor: default;
}

.c-faqList--static .c-faqItem__q::after {
  display: none;
}

.c-faqList--static .c-faqItem__a {
  padding-top: var(--s2);
  opacity: 1;
  max-height: none;
  overflow: visible;
}

/* =====================================================================
  下層FAQ（acc-*）※見た目はTOP .c-faq に合わせる
  ===================================================================== */
.c-lowFaq .acc-contentsbg-colored,
.c-lowFaq .acc-contentsbg-colored__inner {
  margin: 0;
  padding: 0;
  background: transparent;
}

.c-lowFaq .acc-contentsbg-colored__inner {
  margin-left: auto;
  margin-right: auto;
}

.c-lowFaq .acc-area {
  border-top: 0.1rem solid var(--ln);
  padding: var(--s2) 0;
}

.c-lowFaq .acc-area:last-child {
  border-bottom: 0.1rem solid var(--ln);
}

.c-lowFaq .acc-title.faq-q {
  margin: 0;
  padding: 0 var(--s4) 0 var(--s4);
  position: relative;
  font-size: var(--fs-l);
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(var(--pri-dark), var(--pri-dark)) right 0.1em center / 0.6em 0.12em no-repeat;
}

.c-lowFaq .acc-title.faq-q::before {
  content: "Q";
  color: var(--pri-dark);
  position: absolute;
  left: 0;
  top: 0;
}

.c-lowFaq .acc-title.faq-q::after {
  content: "";
  position: absolute;
  right: 0.35em;
  top: 50%;
  width: 0.1em;
  height: 0.6em;
  transform: translateY(-50%) rotate(0deg) scaleY(1);
  transform-origin: center;
  background: var(--pri-dark);
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.2s ease;
  border-radius: 999px;
}

.c-lowFaq .acc-title.faq-q:not(.close)::after {
  transform: translateY(-50%) rotate(90deg) scaleY(0);
  opacity: 0;
}

.c-lowFaq .acc-content.faq-a {
  position: relative;
  margin: 0;
  padding-left: 0;
  padding-top: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: max-height 0.35s ease, opacity 0.2s ease, padding-top 0.35s ease;
}

.c-lowFaq .acc-title.faq-q:not(.close)+.acc-content.faq-a {
  padding-top: var(--s2);
  opacity: 1;
  max-height: fit-content;
}

.c-lowFaq .acc-content.faq-a dt {
  position: relative;
  padding-left: var(--s4);
  margin-bottom: var(--s1);
}

.c-lowFaq .acc-content.faq-a dd,
.c-lowFaq .acc-content.faq-a p{
  margin: 0;
  padding-left: var(--s4);
}

.c-lowFaq--static .acc-title.faq-q {
  cursor: default;
  background: none;
}

.c-lowFaq--static .acc-title.faq-q::after {
  display: none;
}

.c-lowFaq--static .acc-content.faq-a {
  padding-top: var(--s2);
  opacity: 1;
  max-height: none;
  overflow: visible;
}

/* h内に img を置けないため、見出しテキストとロゴ画像を分離するときに使用 */
.u-visuallyHidden {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
---------------------------------------------
    navigation01 ※TOP、下層共通
*/
.header-area-upper,
.header-title,
.gnavi-ctrl,
.gnavi-btn,
.gnavi-btn-close,
.gnavi-area,
.toggle-content {
  display: none;
}

.header-title a,
.navigation01-logo a,
.navigation01-menu li a,
.navigation01-tel,
.index02-chapter-h a {
  text-decoration: none;
}

.header-title a:hover {
  text-decoration: underline;
}

/*------------------------------------------
 Global menu settings
*/
.navigation01-menu-area {
  background-color: var(--white);
  border-bottom: 1px solid var(--c1);
  position: sticky;
  top: 0;
  z-index: 90;
}

.navigation01-menu-area .l-center {
  width: 100%;
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.navigation01-menu-inner {
  min-height: var(--s7);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  column-gap: var(--s6);
  overflow: visible;
}

.navigation01-logo {
  justify-self: start;
  align-self: center;
  padding-left: var(--s3);
}

.navigation01-logo a {
  width: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation01-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: transparent;
  gap: var(--s3);
  align-self: center;
  overflow: visible;
  max-width: 100%;
}

.navigation01-menu li::before {
  display: none;
}

.navigation01-menu li a {
  padding: var(--s1) 0;
  display: block;
  font-size: clamp(12px, 3.101px + 0.6515vw, 16px);
  line-height: 1.2;
  color: var(--txt);
}

.navigation01-menu li a:hover {
  opacity: 0.6;
}

.navigation01-menu li a.is-current {
  position: relative;
  text-decoration: none;
}

.navigation01-menu li a.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.3rem;
  background-color: var(--pri);
}

/* メガメニュー（PC・子カテゴリ） */
.navigation01-menu__item--mega {
  position: relative;
}

.navigation01-menu .navigation01-menu__item--mega>a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.navigation01-menu .navigation01-menu__item--mega>a.is-current {
  box-shadow: none;
}

.navigation01-menu .navigation01-menu__item--mega>a::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: var(--s2);
  height: var(--s2);
  margin-left: var(--s1);
  background-color: var(--pri);
  mask: url("img/arrow-s-down.svg") no-repeat center / contain;
  -webkit-mask: url("img/arrow-s-down.svg") no-repeat center / contain;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.navigation01-menu__item--mega:hover>a::after,
.navigation01-menu__item--mega:focus-within>a::after {
  transform: rotate(180deg);
}

.c-mega01 {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  width: max-content;
  max-width: calc(100vw - var(--s8));
  transform: none;
  box-sizing: border-box;
  margin-top: 0;
  background: var(--white);
  border-radius: var(--s1);
  box-shadow: var(--sd-2);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.c-mega01::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--s1));
  height: var(--s1);
}

.navigation01-menu__item--mega:hover .c-mega01,
.navigation01-menu__item--mega:focus-within .c-mega01 {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.c-mega01__inner {
  margin: 0;
  padding: var(--s2) var(--s3);
}

.c-mega01__cols {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-mega01__col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-mega01__col+.c-mega01__col {
  border-left: 0;
  padding-left: 0;
  margin-top: 0;
  border-top: 0;
}


.c-mega01__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) 0;
  font-size: var(--fs-s);
  color: var(--txt);
  text-decoration: none;
  max-width: 100%;
  box-sizing: border-box;
}

.c-mega01__link:hover {
  opacity: 0.65;
}

.c-mega01__link::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: var(--s2);
  background-color: var(--pri);
  mask: url("img/arrow-s.svg") no-repeat center / contain;
  -webkit-mask: url("img/arrow-s.svg") no-repeat center / contain;
}

.navigation01-contact {
  display: flex;
  align-items: center;
  gap: var(--s2);
  justify-self: end;
  padding-right: 0;
  height: 100%;
}

.navigation01-tel {
  display: inline-flex;
  align-items: center;
  padding-left: calc(1.4rem + var(--s1));
  color: var(--pri);
  font-size: var(--fs-s);
  font-weight: 700;
  background: none;
  position: relative;
}

.navigation01-tel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  background-color: currentColor;
  mask: url("img/icon-tel.svg") no-repeat center / contain;
  -webkit-mask: url("img/icon-tel.svg") no-repeat center / contain;
}

.navigation01-contact .btn-web {
  margin: 0;
  width: 21rem;
  max-width: none;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  height: calc(100% + var(--s2));
}

.navigation01-contact .btn-web a {
  /* btn-web既存スタイルをベースに、ヘッダー内でのサイズ感を調整 */
  box-shadow: none;
  padding: 0 var(--s4);
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--white);
  background-color: var(--acc);
  justify-content: center;
  border-radius: 0 0 0 var(--s2);
  transition: 0.4s ease;
}

.navigation01-contact .btn-web a:hover {
  transform: none;
  background: var(--acc-dark);
}

/* ==============================================
   目次02 (index02-frame)
   ============================================== */
.index02-frame {
  width: 100%;
  margin-block: var(--s5);
}

.index02-wrap {
  margin: 0 auto;
  padding: var(--s4) var(--s5);
  border: solid 0.1rem var(--c1);
  background: var(--white);
  position: relative;
}

.index02-title {
  padding: 0 var(--s2) var(--s2) 0;
  color: var(--txt);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1;
  background-size: 4rem auto;
  position: relative;
  border-bottom: 0.1rem solid var(--ln);
}

.index02-chapter {
  padding: var(--s2) var(--s2) var(--s2) var(--s1);
  font-weight: 700;
}

.index02-chapter-h {
  margin: 0 0 0 var(--s2);
  font-size: 100%;
  line-height: 1.7;
  position: relative;
}

.index02-chapter-h a {
  display: block;
}

.index02-chapter-h a:hover {
  opacity: 0.6;
}

.index02-chapter-h-two {
  margin-left: var(--s2);
  position: relative;
}

.index02-chapter-h-three {
  margin-left: var(--s4);
  position: relative;
}

.index02-chapter-h-two::before,
.index02-chapter-h-three::before {
  position: absolute;
  top: 0;
  left: -1.5em;
}

.index02-chapter-h-two::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 2rem;
  background-color: var(--pri);
  transform: translateY(-50%);
  top: 0.9em;
}

.index02-chapter-h-three::before {
  content: "└";
}

/*----------------------------------------------
    more content settings
*/
.more-content-gradation {
  position: relative;
  height: auto;
  max-height: 12rem;
  overflow: hidden;
  transition: max-height 1s;
}

.more-content-gradation::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: 0.3s;
  background: linear-gradient(to bottom, transparent 0%, var(--white) 100%);
}

.more-content-gradation.is-open::after {
  display: none;
}

.acc-gr-more-btn {
  max-width: 46rem;
  margin: var(--s2) auto 0 auto;
  padding: var(--s2) var(--s6) var(--s2) var(--s3);
  background: var(--c1);
  text-align: center;
  border-radius: 50vh;
  position: relative;
  transition: opacity 0.3s;
  cursor: pointer;
}

.acc-gr-more-btn::before,
.acc-gr-more-btn::after {
  content: "";
  background: var(--txt);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.acc-gr-more-btn::before {
  width: 2rem;
  height: 0.2rem;
  right: var(--s3);
}

.acc-gr-more-btn::after {
  width: 0.2rem;
  height: 2rem;
  right: calc(var(--s3) + var(--s1));
  transition: transform 0.3s;
}

.acc-gr-more-btn:hover {
  opacity: 0.6;
}

.acc-gr-more-btn.is-open::after {
  transform: translate(0, -50%) rotate(270deg);
}

.related-article01-btn {
  display: block;
  width: 100%;
  max-width: 46rem;
  box-sizing: border-box;
  margin: var(--s2) auto 0 auto;
  padding: var(--s2) var(--s6) var(--s2) var(--s3);
  background: var(--c1);
  text-align: center;
  border-radius: 50vh;
  position: relative;
  transition: opacity 0.3s;
  cursor: pointer;
  border: none;
}

.related-article01-btn::before,
.related-article01-btn::after {
  content: "";
  background: var(--txt);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.related-article01-btn::before {
  width: 2rem;
  height: 0.2rem;
  right: var(--s3);
}

.related-article01-btn::after {
  width: 0.2rem;
  height: 2rem;
  right: calc(var(--s3) + var(--s1));
}

.related-article01-btn:hover {
  opacity: 0.6;
}

/* =====================================================================
  下層：導入事例（c-caseLinks）
  ===================================================================== */
.c-caseLinks__grid {
  gap: var(--s4);
}

.c-caseLinks__item {
  min-height: 0;
}

.c-caseLinks__cardLink {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.c-caseLinks__thumb img {
  max-width: 100%;
  border: 1px solid var(--ln);
}

.c-caseLinks__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.5;
  color: var(--txt);
}

.c-caseLinks__company {
  margin: 0;
  font-weight: 700;
}

#low-page .c-caseLinks__cardLink ul {
  margin: 0;
  padding: 0 0 0 var(--s2);
  border-left: 0.2rem solid var(--pri);
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--s-2);
}

.c-caseLinks__cardLink ul li {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.5;
  padding-left: 0;
}

.c-caseLinks__cardLink ul li:before {
  display: none;
}

.c-caseLinks__more {
  margin: 0;
  margin-top: auto;
  font-weight: 700;
  text-align: right;
  position: relative;
  padding-right: var(--s5);
  color: var(--txt);
  transition: opacity 0.2s ease;
}

.c-caseLinks__more::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-0.2rem, -50%);
  width: 1em;
  height: 1em;
  background-color: var(--pri-dark);
  -webkit-mask-image: url("img/arrow-chevron-mask.svg");
  mask-image: url("img/arrow-chevron-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

  .c-caseLinks__cardLink:hover,
  .c-caseLinks__title:hover {
    opacity: 1;
  }

  .c-caseLinks__cardLink:hover .c-caseLinks__more::after {
    transform: translate(0, -50%);
  }

  .c-caseLinks__cardLink:hover .c-caseLinks__more {
    opacity: 0.6;
  }
}

/* =====================================================================
    下層：2つ・3つ並びカード（low cards）
    ===================================================================== */
.c-lowCards,
.c-lowCardsAltSec,
.c-lowIssueSec,
.c-stepFlowSec,
.c-commentCaseSec,
.c-companyIntroSec,
.c-caseLinksSec,
.c-faqSec,
.c-serviceLinkSec {
  margin-block: var(--s6);
}

.c-commentCaseSec {
  position: relative;
  isolation: isolate;
}

.c-commentCaseSec::before,
.c-commentCaseSec::after {
  content: "";
  position: absolute;
  left: calc(var(--s2) * -1);
  width: calc(var(--s2) * 4);
  aspect-ratio: 1 / 1;
  background: var(--pri);
  z-index: 0;
  pointer-events: none;
}

.c-commentCaseSec::before {
  top: calc(var(--s2) * -1);
}

.c-commentCaseSec::after {
  bottom: calc(var(--s2) * -1);
  right: calc(var(--s2) * -1);
  left: auto;
}

/* =====================================================================
  下層：サービスリンク（c-serviceLink）
  ===================================================================== */
.c-serviceLink__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  text-decoration: none;
  color: inherit;
}

.c-serviceLink__thumb {
  flex: 0 0 auto;
  width: 20rem;
  max-width: 40%;
  padding-top: var(--s1);
}

.c-serviceLink__thumb img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

.c-serviceLink__body {
  flex: 1 1 auto;
  min-width: 0;
}

.c-serviceLink__title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);
  padding: 0 var(--s8) var(--s2) 0;
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.5;
  color: var(--txt);
}

.c-serviceLink__title::after {
  display: none;
}

.c-serviceLink__text {
  margin: 0;
  line-height: 2;
  color: var(--txt);
}

.c-serviceLink__icon {
  position: absolute;
  top: var(--s1);
  right: var(--s4);
  width: 1em;
  height: 1em;
}

.c-serviceLink__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--pri-dark);
  -webkit-mask-image: url("img/arrow-chevron-mask.svg");
  mask-image: url("img/arrow-chevron-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-serviceLink__card:hover {
    opacity: 1;
  }

  .c-serviceLink__card:hover .c-serviceLink__icon::after {
    transform: translate(0.2rem, 0);
  }

  .c-serviceLink__card:hover .c-serviceLink__title {
    opacity: 0.6;
  }
}

.c-lowCards__item,
.c-lowCardsAlt__item {
  padding: var(--s3) var(--s2);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.c-lowCards__title,
.c-lowCardsAlt__title {
  margin: 0;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.5;
  color: var(--sub);
  align-content: center;
}

.c-lowCards__item img,
.c-lowCardsAlt__item img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.c-lowCards__btn,
.c-lowCardsAlt__btn {
  margin-top: auto;
}

.c-lowCards__btn .btn-internal,
.c-lowCards__btn .btn-anchor,
.c-lowCards__btn .btn-web,
.c-lowCards__btn .btn-tel,
.c-lowCardsAlt__btn .btn-internal,
.c-lowCardsAlt__btn .btn-anchor,
.c-lowCardsAlt__btn .btn-web,
.c-lowCardsAlt__btn .btn-tel {
  margin-block: 0;
  width: 95%;
}

@supports (grid-template-rows: subgrid) {

  .c-lowCards__grid,
  .c-lowCardsAlt__grid {
    gap: var(--s3);
    grid-auto-rows: auto;
  }

  .c-lowCards__item,
  .c-lowCardsAlt__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

/* =====================================================================
  下層：こんな課題はありませんか（low issue）
  ===================================================================== */
.c-lowIssue {
  padding: var(--s4);
  background: var(--c1);
}

.c-lowIssue__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.35;
}

#low-page .c-lowIssue ul {
  margin-block: var(--s3) 0;
}

/* =====================================================================
  下層：ステップ（c-stepFlow）※TOPのフロー（c-flwList/c-flwStep）を踏襲
  ===================================================================== */
.c-stepFlow {
  position: relative;
  margin: 0 auto;
  counter-reset: c-stepFlow;
}

.c-stepFlow__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  position: relative;
  z-index: 1;
  padding-bottom: var(--s5);
}

.c-stepFlow__item::before {
  content: "";
  position: absolute;
  top: calc(var(--s6) / 2);
  bottom: 0;
  left: calc(var(--s6) / 2);
  width: 1px;
  background: var(--ln);
  z-index: 0;
}

.c-stepFlow__item+.c-stepFlow__item {
  margin-top: 0;
}

.c-stepFlow__item:last-child {
  padding-bottom: 0;
}

.c-stepFlow__item:last-child::before {
  content: none;
}

.c-stepFlow__rail {
  position: relative;
  width: var(--s6);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.c-stepFlow__dot {
  width: var(--s6);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--pri-dark);
  background: var(--c3);
}

.c-stepFlow__dot img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.c-stepFlow__arrow {
  display: none;
}

.c-stepFlow__content {
  min-width: 0;
}

/* Stepラベルだけ新規でスタイリング */
.c-stepFlow__label {
  width: fit-content;
  margin: 0 0 var(--s2);
  padding: var(--s-2) var(--s2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pri) 10%, var(--white));
  color: var(--pri-dark);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.c-stepFlow__title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.5;
}

.c-stepFlow__title::before {
  counter-increment: c-stepFlow;
  content: "STEP " counter(c-stepFlow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s2);
  margin-right: var(--s2);
  background: linear-gradient(90deg, var(--pri) 0%, var(--pri-dark) 100%);
  color: var(--white);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.c-stepFlow__text {
  margin: 0;
  line-height: 2;
}

/* =====================================================================
  下層：ご担当者様のコメント（c-commentCase）
  ===================================================================== */
.c-commentCase {
  max-width: 120rem;
  margin: 0 auto;
  padding: var(--s4);
  background: var(--white);
  position: relative;
  z-index: 1;
}

.c-commentCase__head {
  display: flex;
  flex-direction: row-reverse;
  align-items: start;
  gap: var(--s5);
  position: relative;
  padding-top: var(--s6);
}

.c-commentCase__headMain {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
  flex: 1;
}

#low-page .c-commentCase__headMain ul {
  margin-block: 0;
  font-weight: bold;
}

.c-commentCase__thumb {
  float: none;
  width: min(40%, calc(var(--s1) * 40));
  margin: 0;
  flex: 0 0 auto;
}

.c-commentCase__meta {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--txt);
  line-height: 1.4;
}

.c-commentCase__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 700;
  color: var(--sub);
  line-height: 1.45;
}

.c-commentCase__headMain ul li {
  padding-left: 0;
  margin-bottom: var(--s-2);
}

.c-commentCase__headMain ul li::before {
  display: none;
}

.c-commentCase__text {
  margin: var(--s3) 0;
  line-height: 2;
}

.c-commentCase__cta {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  background: var(--c1);
}

.c-commentCase__ctaLead {
  margin: 0;
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--txt);
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  font-weight: bold;
}

.c-commentCase__ctaBtn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  flex: 0 0 auto;
}

.c-commentCase__ctaBtn .btn-web,
.c-commentCase__ctaBtn .btn-tel {
  margin: 0;
  max-width: 100%;
  width: 40rem;
}

/* =====================================================================
  CTA（TOP末尾・下層共通）
  ===================================================================== */
.c-cta {
  padding: var(--s14) 0;
  background: linear-gradient(color-mix(in srgb, var(--txt) 90%, transparent), color-mix(in srgb, var(--txt) 90%, transparent));
}

.c-cta .l-stack-md {
  gap: var(--s4);
}

.c-cta.lower {
  background: linear-gradient(color-mix(in srgb, var(--txt) 90%, transparent), color-mix(in srgb, var(--txt) 90%, transparent)),
    url("img/mv.webp") center / cover no-repeat;
  background-attachment: scroll, fixed;
  margin-top: var(--s14);
}

.c-cta__head {
  align-items: center;
}

.c-cta__ttl,
.c-cta__txt {
  margin: 0;
  color: var(--white);
  text-align: center;
}

.c-cta__ttl {
  font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-xxl));
  font-weight: bold;
}

.c-cta__txt {
  max-width: 90rem;
  line-height: 2;
  color: color-mix(in srgb, var(--white) 86%, transparent);
}

.c-cta__btns {
  gap: var(--s4);
  align-items: stretch;
  padding: 0 var(--s3);
}

.c-cta .btn-web,
.c-cta .btn-tel {
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
}

.c-cta .btn-web a,
.c-cta .btn-tel a {
  border-radius: var(--s2);
  box-shadow: none;
  font-size: var(--fs-m);
  padding: var(--s4) var(--s7);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

.c-cta .btn-web a {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  transition: 0.2s ease;
}

.c-cta .btn-web a::after {
  right: var(--s4);
  width: 2.5em;
  height: 2.5em;
  background: url("img/arrow-wh-right.svg") no-repeat;
  background-size: contain;
  mask-image: none;
  -webkit-mask-image: none;
}

.c-cta .btn-web:hover a {
  transform: none;
  box-shadow: none;
  opacity: 1;
  background-color: var(--acc-dark);
}

.c-cta .btn-tel a {
  background: #5a7ea8;
  color: var(--white);
  text-align: center;
  gap: var(--s-2);
}

.c-cta .btn-tel a::after {
  content: none;
}

.c-ctaTel__label,
.c-ctaTel__num,
.c-ctaTel__time {
  display: block;
  margin: 0;
  line-height: 1.35;
}

.c-ctaTel__label {
  font-size: var(--fs-s);
  font-weight: 700;
}

.c-ctaTel__num {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.c-ctaTel__time {
  font-size: var(--fs-s);
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .c-cta .btn-tel a {
    pointer-events: none;
    cursor: default;
  }

  .c-cta .btn-tel:hover a {
    transform: none;
    box-shadow: none;
  }
}

/* =====================================================================
  下層：事例の会社紹介（c-companyIntro）
  ===================================================================== */
.c-companyIntroSec {
  position: relative;
  padding: var(--s4);
  background: var(--c1);
  overflow: hidden;
}

.c-companyIntro {
  position: relative;
  z-index: 1;
  align-items: start;
}

.c-companyIntro__left {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--s3);
}

.c-companyIntro__logo img {
  max-width: min(100%, calc(var(--s1) * 30));
  width: auto;
}

.c-companyIntro__name {
  margin: 0;
  padding: 0 0 var(--s-2) var(--s3);
  border-left: 0.1rem solid var(--pri);
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.5;
  color: var(--txt);
}

#low-page .c-companyIntro__left ul {
  margin: 0;
  padding-left: var(--s3);
  border-left: 0.1rem solid var(--pri);
}

.c-companyIntro__left ul li {
  padding-left: 0;
  margin-bottom: var(--s-2);
  font-weight: bold;
}

.c-companyIntro__left ul li::before {
  display: none;
}

.c-companyIntro__catch {
  margin: 0 0 var(--s3);
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.35;
  color: var(--txt);
  position: relative;
}

.c-companyIntro__catch::before {
  content: "";
  position: absolute;
  left: calc(var(--s4) * -1);
  top: 0;
  bottom: 0;
  width: var(--s1);
  background: var(--pri);
}

.c-companyIntro__text {
  margin: 0;
  line-height: 2;
  color: var(--txt);
}

/* SP用（max-width:768px）まとめ */
@media screen and (max-width: 768px) {

  .c-cta {
    padding: var(--s10) var(--s2);
  }

  .c-cta.lower {
    background: linear-gradient(color-mix(in srgb, var(--txt) 90%, transparent), color-mix(in srgb, var(--txt) 90%, transparent)), url("img/mv-sp.webp") center / cover no-repeat;
    background-attachment: scroll, scroll;
  }

  .c-cta .btn-web a,
  .c-cta .btn-tel a {
    padding: var(--s5) calc(var(--s6) + (var(--s1) * 6)) var(--s5) var(--s6);
  }

  .c-cta .btn-web a::after {
    width: 1.8em;
    height: 1.8em;
  }

  .c-cta .btn-tel a {
    background: #5a7ea8 url("img/icon-tel.svg") no-repeat center right var(--s5) / auto 1.2em;
  }

  .c-cta__btns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }

  .c-ppCard,
  .c-ppCard:hover {
    background-size: auto, cover;
  }

  .c-commentCase {
    padding: var(--s4) var(--s3) 0;
  }

  .c-commentCaseSec::before,
  .c-commentCaseSec::after {
    left: calc(var(--s1) * -1);
    width: calc(var(--s2) * 4);
  }

  .c-commentCaseSec::before {
    top: calc(var(--s1) * -1);
  }

  .c-commentCaseSec::after {
    bottom: calc(var(--s1) * -1);
    right: calc(var(--s1) * -1);
    left: auto;
  }

  .c-commentCase__head {
    display: block;
  }

  .c-commentCase__thumb {
    float: none;
    width: 100%;
    margin: 0 0 var(--s3) 0;
  }

  .c-commentCase__headMain {
    padding-top: 0;
  }

  .c-commentCase__cta {
    margin: var(--s2) calc(var(--s3) * -1) calc(var(--s3) * -1);
    padding: var(--s3) var(--s3);
  }

  .c-commentCase__ctaBtn {
    flex-flow: column;
    max-width: 95%;
  }

  .c-serviceLink__card {
    display: flow-root;
    gap: 0;
  }

  .c-serviceLink__thumb {
    float: left;
    width: 40%;
    max-width: 40%;
    margin: 0 var(--s2) var(--s1) 0;
    padding-top: 0;
  }

  .c-serviceLink__title {
    padding-right: var(--s6);
  }

  .c-companyIntro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }

  .c-companyIntro__right {
    display: contents;
  }

  .c-companyIntro__catch {
    order: 1;
    padding-left: var(--s3);
  }

  .c-companyIntro__left {
    order: 2;
  }

  .c-companyIntro__text {
    order: 3;
  }

  .c-companyIntroSec {
    padding: var(--s7) var(--s2);
  }

  .l-mvFixedBg {
    background: none;
    background-attachment: scroll;
  }

  .l-mvFixedBg::before {
    content: "";
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      url("img/mv-sp.webp") no-repeat center / cover;
    transform: translateZ(0);
  }

  .mainvisual {
    max-width: 100%;
    height: calc(100vh - 5.5rem);
    padding: var(--s6) var(--s2) var(--s10);
    align-items: flex-start;
  }

  .mv-title {
    font-size: calc(var(--fs-xxl) * 1.4);
    transform: scale(0.82);
    transform-origin: left top;
  }

  .mv-title__deco::after {
    width: calc(var(--s1) * 36);
    transform: translateY(22%);
  }

  .mv-text {
    font-size: var(--fs-s);
    max-width: 100%;
    margin: 0;
  }
  .mainvisual .l-grid-2{
    gap: var(--s2);
    margin-top: var(--s2);
  }

  /* 下層MV */
  .mainvisual-lower {
    min-block-size: calc(var(--s12) + var(--s10));
    height: 10rem;
  }

  .mainvisual-lower__img {
    object-position: 80% center;
  }

  .c-scrollHint {
    --scroll-hint-line-len: var(--s6);
    top: 90%;
  }

  /* TOP about（ベース色・重ね順はPC .c-abt に合わせ、画像サイズのみSP向け） */
  .c-abt {
    padding: var(--s7) var(--s2);
    background: url("img/abt-l.png") no-repeat left top / 45% auto,
      url("img/abt-r.png") no-repeat 100% 14rem / 60% auto,
      linear-gradient(0deg, rgba(0, 0, 0, 0.8) 75%, rgba(102, 102, 102, 0) 100%);
  }

  .c-abtLogoViewport .c-abtLogo__i {
    width: calc(var(--s1) * 22);
  }

  .c-abtLogo+.c-abtLogo {
    margin-left: var(--s1);
  }

  .c-abtTech__i {
    width: 100%;
    max-width: 100%;
  }

  .c-abtTech__i+.c-abtTech__i {
    margin-left: 0;
  }

  .c-abtLogo__i+.c-abtLogo__i {
    margin-left: var(--s1);
  }

  .c-abt .l-grid-2 {
    gap: var(--s2);
  }

  /* TOP reason（SPはスクロール連動オフ・縦積み／JSのインライン解除と併用） */
  .c-rsn-wrap {
    height: auto;
  }

  .c-rsn {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: var(--s7) var(--s2);
    background-size: 80% auto;
  }

  .c-rsn__txt {
    height: auto;
    min-height: 0;
  }

  .c-rsn__txtSlider {
    flex: none;
    overflow: visible;
    height: auto;
  }

  .c-rsn__txtInner {
    height: auto;
    flex-direction: column;
    gap: var(--s7);
    transform: none !important;
    will-change: auto;
  }

  .c-rsn__pair {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--s4);
    flex: 0 0 auto;
    min-height: 0;
  }

  .c-rsn__slide {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .c-rsn__imgWrap {
    overflow: hidden;
  }

  .c-rsn__imgSlide {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .c-rsn::before {
    display: none;
    width: 88vw;
    height: calc(88vw / 1.414);
  }

  .c-rsn::after {
    content: none;
  }

  .c-rsn__idx {
    font-size: var(--fs-xl);
  }

  .c-rsn__in {
    min-height: 0;
    height: auto;
  }

  .c-rsn__ttl {
    max-width: 100%;
  }

  .c-rsn .btn-internal {
    max-width: 100%;
  }

  /* TOP concerns */
  .c-cns {
    padding: var(--s7) var(--s2);
  }

  .c-cns__g {
    gap: var(--s5);
  }

  .c-cnsCard__fig {
    height: var(--s10);
  }

  .c-cns__arr img {
    width: 28%;
  }

  .c-cns__sum {
    font-size: var(--fs-m);
  }

  /* TOP bestfit */
  .c-bf {
    padding: var(--s10) var(--s2);
    background-size: 80% auto;
  }

  .c-bf__txt {
    text-align: left;
  }

  .c-bf__tbl::before {
    content: "◀左右にスクロールできます▶";
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    margin-bottom: var(--s1);
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--txt);
  }

  .c-bf__tbl .c-bf__table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--white);
  }

  .c-bf__tbl .c-bf__table thead tr.tbl-head th:first-child {
    z-index: 4;
  }

  .c-bf__tbl .c-bf__table th:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ln);
  }

  .c-bf__tbl .c-bf__table thead tr.tbl-head th:first-child::after {
    height: 2px;
    background: var(--sub);
  }

  .c-bf__tbl .c-bf__table tbody tr:last-child th:first-child::after {
    display: none;
  }

  /* TOP grind & finish */
  .c-gf {
    padding: var(--s10) 0;
    background: linear-gradient(color-mix(in srgb, var(--c0) 80%, transparent), color-mix(in srgb, var(--c0) 80%, transparent)),
      url("img/deco-gf-tl.webp") no-repeat -2rem -2rem / 50% auto,
      var(--c3);
  }

  .c-gf__g {
    gap: var(--s2);
  }

  .c-gfCard__arr img {
    width: 12%;
  }

  /* TOP parts & purpose */
  .c-pp {
    padding: var(--s10) 0;
    background: url("img/deco-pp-tr.png") no-repeat right top / 80% auto, var(--c0);
  }

  .c-pp__g {
    gap: var(--s2);
  }

  /* TOP case studies */
  .c-cs {
    padding: var(--s10) var(--s2) var(--s12);
    background: linear-gradient(color-mix(in srgb, white 80%, transparent), color-mix(in srgb, white 80%, transparent)),
      url("img/deco-cs-tl.webp") no-repeat -4rem -1rem / 50% auto,
      var(--white);
  }

  .c-cs__g {
    gap: var(--s8);
  }

  .c-caseLinks__grid {
    gap: var(--s8);
  }

  .c-flw {
    padding: var(--s10) var(--s2);
    background-size: 80% auto;
  }

  .c-flw__txt {
    text-align: left;
  }

  /* TOP faq */
  .c-faq {
    padding: var(--s10) var(--s2);
    background-size: 80% auto;
  }

  .c-faqSec.c-lowFaq {
    padding: 0;
    background-size: 80% auto;
  }

  /* SP：ロゴ＋ハンバーガーを1行の追従ヘッダーに */
  .header-area {
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s1) var(--s3);
    background-color: var(--white);
    border-bottom: 0.1rem solid var(--ln);
  }

  .header-area-upper {
    display: block;
    flex: 1;
    min-width: 0;
    position: relative;
  }

  .header-title {
    display: block;
    margin: 0;
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: 1.2;
    color: var(--txt);
  }

  .header-title a {
    color: inherit;
    text-decoration: none;
  }

  .c-headerSpLogo {
    display: block;
    line-height: 0;
  }

  .c-headerSpLogo img {
    max-width: calc(var(--s1) * 20);
    width: auto;
    display: block;
  }

  .gnavi-ctrl {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 1;
    visibility: visible;
    position: relative;
  }

  .gnavi-btn {
    width: var(--s7);
    height: var(--s7);
    min-width: var(--s7);
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    position: relative;
    z-index: 120;
    cursor: pointer;
    box-sizing: border-box;
  }

  .gnavi-btn span {
    width: var(--s4);
    height: 0.2rem;
    display: block;
    background: var(--txt);
    position: static;
    left: auto;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
  }

  .gnavi-btn.is-active span:nth-of-type(1) {
    transform: translateY(calc(var(--s1) + 0.2rem)) rotate(-45deg);
  }

  .gnavi-btn.is-active span:nth-of-type(2) {
    opacity: 0;
  }

  .gnavi-btn.is-active span:nth-of-type(3) {
    transform: translateY(calc(-1 * (var(--s1) + 0.2rem))) rotate(45deg);
  }

  .gnavi-btn-close {
    width: 80%;
    margin: 0 auto;
    padding: var(--s2);
    border-radius: 50vh;
    background: var(--sub);
    display: block;
    text-align: center;
  }

  .gnavi-btn-close__inner {
    padding: 0 0 0 var(--s3);
    display: inline-block;
    color: var(--white);
    font-weight: 700;
    position: relative;
  }

  .gnavi-btn-close__inner::before,
  .gnavi-btn-close__inner::after {
    content: "";
    width: 1em;
    height: 0.2rem;
    background: var(--white);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }

  .gnavi-btn-close__inner::before {
    transform: translate(0, -50%) rotate(45deg);
  }

  .gnavi-btn-close__inner::after {
    transform: translate(0, -50%) rotate(135deg);
  }

  .gnavi-area {
    width: 100%;
    height: 100vh;
    padding: var(--s3) var(--s1) var(--s10);
    display: block;
    background: var(--c1);
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.8s ease, opacity 0.8s ease;
    opacity: 0;
  }

  .gnavi-title {
    min-height: var(--s6);
    margin: 0 var(--s8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-s);
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
  }

  .gnavi-area .gnavi-title a {
    text-decoration: none;
    color: inherit;
  }

  .gnavi-pc {
    display: none;
  }

  .gnavi-area .gnavi-list {
    border-bottom: 1px solid var(--txt);
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gnavi-area .gnavi-list li {
    padding-left: 0;
    margin: 0;
  }

  .gnavi-area .gnavi-list__item::before {
    display: none;
  }

  .gnavi-area .gnavi-list__link {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--s2) var(--s4) var(--s2) var(--s2);
    border-top: 0.1rem solid var(--txt);
    display: block;
    font-weight: 700;
    line-height: 2;
    text-decoration: none;
    color: var(--txt);
    position: relative;
  }

  .gnavi-area .gnavi-list__link:visited {
    color: var(--txt);
  }

  .gnavi-area .gnavi-list__link::after {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    background-color: var(--txt);
    -webkit-mask-image: url("img/arrow-s.svg");
    mask-image: url("img/arrow-s.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 50%;
    right: var(--s2);
    transform: translate(0, -50%);
    transition: transform 0.3s ease;
  }

  .gnavi-area .gnavi-list__link--toggle::after {
    background-color: var(--txt);
    -webkit-mask-image: url("img/arrow-s.svg");
    mask-image: url("img/arrow-s.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: translate(0, -50%) rotate(90deg);
    right: var(--s2);
  }

  .gnavi-area .gnavi-list__link--toggle.is-open::after {
    transform: translate(0, -50%) rotate(270deg);
  }

  .gnavi-area .gnavi-list__sub {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--white);
  }

  .gnavi-area .gnavi-list__low .gnavi-list__link {
    padding: var(--s2) var(--s4) var(--s2) var(--s4);
  }

  .gnavi-area .gnavi-list__low .gnavi-list__link::after {
    content: "└";
    width: auto;
    height: auto;
    background: none;
    background-color: transparent;
    mask: none;
    -webkit-mask: none;
    color: var(--txt);
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
    position: absolute;
    top: 40%;
    left: var(--s1);
    right: auto;
    transition: none;
  }

  .is-gnavi-open .gnavi-area {
    opacity: 1;
    transform: translateX(0);
  }

  /*------------------------------------------
  Global menu settings
  */
  .navigation01-menu-area {
    display: none;
  }

  .index02-wrap {
    padding: var(--s1) var(--s2) var(--s3) var(--s2);
  }

  .index02-title {
    padding: var(--s2) var(--s2) var(--s2) 0;
    background-size: 3rem auto;
  }

  .index02-chapter {
    padding-left: var(--s2);
  }

  .acc-gr-more-btn {
    max-width: 95%;
  }
}
/* 修正後：横幅が768px以下、または高さが750px以下の時に縦積みにする */
@media (min-width: 769px) and (max-height: 900px) {
  
  /* --- JSの高さ固定・追従を解除 --- */
  .c-rsn-wrap {
    height: auto !important;
  }

  .c-rsn {
    position: relative;
    top: auto !important;
    height: auto !important;
    min-height: 0;
    overflow: visible;
    padding-top: max(var(--s10), 12vh);
    padding-bottom: max(var(--s10), 12vh);
  }

  .c-rsn__txt,
  .c-rsn__txtSlider {
    height: auto;
    min-height: 0;
    overflow: visible;
    gap: var(--s3);
  }

  /* --- テキストのスライド（translateY）を解除して縦積みに --- */
  .c-rsn__txtInner {
    height: auto;
    will-change: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s10);
  }

  .c-rsn__pair,
  .c-rsn__slide {
    flex: 0 0 auto;
    min-height: 0;
    gap: var(--s5);
  }

/* --- 画像枠の潰れを防止 --- */
  .c-rsn__imgWrap {
    height: 100%;
    overflow: hidden;
    min-height: 60vh;
  }

  .c-rsn__imgSlide {
    position: relative !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .c-scrollHint{
    display: none;
  }
}