/* ==========================================================================
   #mv (Main Visual)
   ========================================================================== */

#mv {
  background: url(../images/mv-bg.jpg) center center / cover no-repeat;
  display: flex;
  height: clamp(460px, 100vw / 1280 * 540, 540px);
  padding: var(--scale-40, 40px) var(--scale-20);
  flex-direction: column;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

/* --- Badge Area --- */
#mv .mv__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--scale-16);
}

#mv .mv__badge .badge__left {
}

#mv .mv__badge .badge__left img {
  width: var(--scale-40, 40px);
}

#mv .mv__badge .badge__text {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}

#mv .mv__badge .badge__text .highlight {
  color: var(--tertiary, #f37100);
}

#mv .mv__badge .badge__right {
}

#mv .mv__badge .badge__right img {
  width: var(--scale-40, 40px);
}

/* --- Main Copy (H1) --- */
#mv h1 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: min(100vw / 375 * 40, 64px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 83.2px */

  display: flex;
  align-items: center;
  gap: var(--scale-4px);
  flex-direction: column;
}

#mv h1 .first-row {
}

#mv h1 .first-row .box {
  padding: 0 var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  border-radius: var(--scale-4, 4px);
  background: var(--primary, #003775);
  color: var(--on-primary-highlight, #ffd21c);
  text-align: center;
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 83.2px */
}

#mv h1 .second-row {
}

/* --- Sub Copy --- */
#mv .mv__sub-copy {
  color: #3c3c3c;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
}

#mv .mv__sub-copy .first-row {
  padding: 0 var(--scale-8, 8px);
  background: var(--surface, #fff);
}

#mv .mv__sub-copy .first-row .highlight {
  color: var(--highlight, #e6002d);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}

#mv .mv__sub-copy .second-row {
  padding: 0 var(--scale-8, 8px);
  background: var(--surface, #fff);
}

@media screen and (max-width: 768px) {
  #mv {
    height: min(100vw / 375 * 600, 1024px);
    background:
      url(../images/mv-bg-sp.png) center bottom / 100% auto no-repeat,
      url(../images/mv-bg.jpg) center center / cover no-repeat;
    justify-content: flex-start;
  }
  #mv .mv__sub-copy .second-row {
    display: contents;
  }
  #mv .mv__sub-copy .second-row span {
    padding: 0 var(--scale-8, 8px);
    background: var(--surface, #fff);
  }
}

/* ==========================================================================
   #cta (Call to Action)
   ========================================================================== */

#cta {
  display: flex;
  padding: 0 var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  background:
    linear-gradient(0deg, rgba(145, 60, 0, 0.3) 0%, rgba(145, 60, 0, 0.3) 100%),
    url(<path-to-image>) lightgray 50% / cover no-repeat;
}

/* --- Inner Container --- */
#cta .cta__inner {
  display: flex;
  width: 100%;
  max-width: var(--width-md, 1080px);
  padding: var(--scale-40, 40px) 0;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  position: relative;
  margin-inline: auto;
}

/* --- Left Side: Image --- */
#cta .cta__image.pc {
  width: var(--scale-220, 220px);
  position: absolute;
  left: 0;
  bottom: 0;
}

#cta .cta__image.sp {
  width: min(100vw / 375 * 80, 200px);
}

#cta .cta__image img {
  width: 100%;
}

/* --- Right Side: Body Content --- */
#cta .cta__body {
}

/* --- Heading with SVG Decor --- */
#cta .cta__heading {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  width: fit-content;
  margin-inline: auto;
}

#cta .cta__heading h2 {
  color: var(--surface, #fff);
  text-align: center;
  text-shadow: 0 var(--scale-2, 2px) var(--scale-2, 2px) rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans JP";
  font-size: min(100vw / 375 * 24, 48px);
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 48px */
}
@media screen and (max-width: 1080px) {
  #cta .cta__image.pc {
    display: none !important;
  }
  #cta .cta__inner {
    gap: 0;
  }
  #cta .cta__heading h2 {
    margin-bottom: 1em;
  }
}

#cta .cta__heading svg {
  height: var(--scale-56, 56px);
  aspect-ratio: 4/7;
}

/* --- Text Area --- */
#cta .cta__text {
  display: flex;
  max-width: 800px;
  padding: var(--scale-20, 20px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  background: var(--surface, #fff);
  margin-inline: auto;
}

#cta .cta__text p {
  color: var(--on-surface, #000);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 31.2px */
}

#cta .cta__text .highlight {
  color: var(--highlight, #e6002d);
}

/* --- Button Area --- */
#cta .cta__buttons {
  width: 100%;
}

/* .button.button--primary (汎用ボタンクラスとしても使えるハコ) */
#cta .button--primary {
  display: flex;
  padding: var(--scale-16, 16px) var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.24) 50%,
      rgba(0, 0, 0, 0.08) 50%,
      rgba(255, 255, 255, 0) 100%
    ),
    var(--tertiary, #f37100);
  background-blend-mode: hard-light, normal;
  box-shadow:
    0 6px 0 0 rgba(0, 0, 0, 0.4),
    0 6px 0 0 var(--tertiary, #f37100);
  color: var(--surface, #fff);
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  font-family: "Noto Sans JP";
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 40.8px */
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* ホバー時：パターン1（沈み込みエフェクト） */
#cta .button--primary:hover {
  /* 3px分下に移動 */
  transform: translateY(3px);
  /* 影も3px分短くすることで、地面に近づいたように見せる */
  box-shadow:
    0 3px 0 0 rgba(0, 0, 0, 0.4),
    0 3px 0 0 var(--tertiary, #f37100);
  /* 少しだけ明るくして、触れている感覚を強調 */
  filter: brightness(1.05);
}

/* クリックした瞬間（さらに深く沈むとよりリアルです） */
#cta .button--primary:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 0 rgba(0, 0, 0, 0.4),
    0 1px 0 0 var(--tertiary, #f37100);
}

/* =========================================================
   portfolio セクション（箱・レイアウト土台）
   ========================================================= */

/* ------------------------------
   セクション全体
------------------------------ */
.portfolio {
  display: flex;
  padding: var(--scale-80, 80px) var(--padding-inline, 20px)
    var(--padding-block, 80px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;
  background: var(--secondary-container, #fffae4);
}

/* ------------------------------
   内側コンテナ
   ・中央寄せ
   ・最大幅
------------------------------ */
.portfolio__inner {
  width: min(1080px, 100%);
  overflow: hidden; /* スライダーのはみ出し防止 */

  padding: var(--scale-40, 40px) var(--scale-20, 20px);
  margin-inline: auto;
  align-items: center;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  background: var(--surface, #fff);
}

/* ------------------------------
   見出しエリア
------------------------------ */
.portfolio__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  align-self: stretch;
}

.portfolio__heading h2 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}

.portfolio__heading h2 .highlight {
  color: var(--tertiary, #f37100);
}

.portfolio__heading p {
  color: var(--on-surface, #000);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
  margin-bottom: var(--scale-40);
}

/* ------------------------------
   スライダー外枠（ナビ含む）
   ・左右ナビ用に余白を確保
------------------------------ */
.portfolio__slide {
  position: relative;
  padding: 0 56px !important; /* 左右ナビの置き場 */
  overflow: hidden;
}

/* ------------------------------
   Swiper本体
   ・子要素がはみ出しても自然に見えるように
------------------------------ */
.portfolio__slide.swiper {
  overflow: visible; /* スライドのチラ見せをするなら visible が便利 */
}

/* Swiper wrapper / slide は Swiper 側のCSSが効く前提だが、
   念のため「レイアウト破綻しにくい」最低限だけ */
.portfolio__slide .swiper-wrapper {
  box-sizing: border-box;
}

.portfolio__slide .swiper-slide {
  height: auto; /* カード高さが自然に伸びる */
}

/* ------------------------------
   カード（各実績アイテム）
   ・画像＋テキストの箱
------------------------------ */
.portfolio__item {
  display: flex;
  padding: var(--scale-20, 20px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-8, 8px);
  border-radius: var(--scale-4, 4px);
  background: var(--primary-container, #ebf7ff);
}

.portfolio__item.tag1::before {
  content: "大規模修繕工事";
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 23.8px */
  display: flex;
  padding: var(--scale-2, 2px) var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: var(--scale-4, 4px) 0;
  background: var(--quaternary, #19bcaf);
  left: 0;
  top: 0;
}

.portfolio__item.tag2::before {
  content: "公共工事";
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 23.8px */
  display: flex;
  padding: var(--scale-2, 2px) var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  position: absolute;
  border-radius: var(--scale-4, 4px) 0;
  background: var(--tertiary, #f37100);
  left: 0;
  top: 0;
}

/* 画像枠：比率を固定して崩れ防止 */
.portfolio__item figure {
  height: var(--scale-200);
  align-self: stretch;
  aspect-ratio: 8/5;
  border-radius: var(--scale-8, 8px);
  object-fit: cover;
}

/* 画像：トリミングで綺麗に */
.portfolio__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル（物件名） */
.portfolio__item p {
  color: var(--on-surface, #000);
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 30.6px */
}

/* ------------------------------
   ナビボタン（左右の矢印SVG）
------------------------------ */
.portfolio__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.portfolio__nav img {
  display: block;
  width: 100%;
  height: auto;
}

/* 左右配置 */
.portfolio__nav--prev {
  left: 0;
}

.portfolio__nav--next {
  right: 0;
}

/* ドット全体の配置 */
.portfolio__pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* 各ドット */
.portfolio__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #ccc;
  opacity: 1;
  border-radius: 50%;
  transition:
    background 0.3s,
    transform 0.3s;
}

/* アクティブなドット */
.portfolio__pagination .swiper-pagination-bullet-active {
  background: #333;
  transform: scale(1.3);
}

/* =========================================================
   reason セクション（箱・レイアウト土台）
   ========================================================= */

/* ------------------------------
   セクション全体
------------------------------ */
#reason {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url(../images/reason-bg.png) top center / auto 100% no-repeat,
    var(--surface, #fff);
}

/* ------------------------------
   見出しエリア
------------------------------ */
.reason__heading {
  display: flex;
  max-width: var(--width-md, 1080px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  margin-inline: auto;
}

.reason__heading h2 {
  align-self: stretch;
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}
.reason__heading h2 .highlight {
  color: var(--tertiary, #f37100);
}
.reason__heading p {
  color: var(--on-surface, #000);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}

/* ------------------------------
   アイテム一覧
   ・縦並びが基本
------------------------------ */
.reason__items {
  display: flex;
  max-width: var(--width-md, 1080px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-56, 56px);
  align-self: stretch;
  margin-inline: auto;
}

/* ------------------------------
   各 reason アイテム
   ・PCは左右2カラム
   ・SPは縦積み
------------------------------ */
.reason__item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-column, 40px);
  align-self: stretch;
}

.reason__item:nth-child(even) {
  flex-direction: row-reverse;
}

/* ------------------------------
   画像側
------------------------------ */
.reason__item .item__image {
  margin: 0;
  width: 100%;
  aspect-ratio: 520 / 292.5; /* 画像比率の土台 */
  overflow: hidden;
  flex: 1 0 0;
}

.reason__item .item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--scale-8, 8px);
}

/* ------------------------------
   テキスト側
------------------------------ */
.reason__item .item__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-8, 8px);
  flex: 1 0 0;
}

/* 番号（REASON 01 など） */
.reason__item .text__number {
  color: var(--secondary, #54abe9);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}

/* 見出し */
.reason__item h3 {
  color: var(--primary, #003775);
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 48px */
  margin-bottom: var(--scale-12);
}
.asterisk {
  font-size: var(--scale-12);
}
.reason__item h3 .highlight {
  color: var(--highlight, #e6002d);
}

/* 説明文 */
.reason__item p {
  color: var(--on-surface, #000);
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 30.6px */
}

/* ------------------------------
   レスポンシブ
------------------------------ */
@media screen and (max-width: 768px) {
  .reason__item:nth-of-type(n) {
    flex-direction: column;
  }

  .reason__item .item__image {
    flex: 1 0 auto;
  }
}

/* =========================================================
   stage セクション（箱・レイアウト土台）
   ========================================================= */

/* ------------------------------
   セクション全体
------------------------------ */
#stage {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;

  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url(../images/stage-bg.png) top center / auto 100% no-repeat,
    var(--primary-container, #ebf7ff);
}

/* セクション見出し */
#stage > h2 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}
#stage > h2 .highlight {
  color: var(--tertiary, #f37100);
  font-family: "Noto Sans JP";
  font-size: var(--scale-56, 56px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
/* ------------------------------
   ステージ一覧（外枠）
------------------------------ */
.stage__items {
  display: flex;
  max-width: 960px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  margin-inline: auto;
}

/* ------------------------------
   各ステージカード（箱）
   ・中身の装飾は最低限
------------------------------ */
.stage__items .items__item {
  display: flex;
  padding: var(--scale-40, 40px) 0;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  background: var(--surface, #fff);
}

/* ------------------------------
   左ブロック（番号 + 画像）
------------------------------ */
.stage__items .items__item .item__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  flex: 0 0 auto;
}

/* 番号（STAGE 01など） */
.stage__items .items__item .item__number {
  display: flex;
  padding-right: var(--scale-20, 20px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.stage__items .items__item .item__number span {
  display: flex;
  padding: 0 var(--scale-20, 20px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 0 1000px 1000px 0;
  background: var(--secondary, #54abe9);
  color: var(--surface-variant, #f0f1f2);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}
/* 画像枠 */
.stage__items .items__item .item__image {
  display: flex;
  padding: 0 var(--scale-40, 40px);
  flex-direction: column;
  align-items: flex-start;
}

/* 画像（SVG） */
.stage__items .items__item .item__image img {
  display: flex;
  width: var(--scale-120, 120px);
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}

/* ------------------------------
   右ブロック（テキスト）
------------------------------ */

.stage__items .items__item .item__right {
  display: flex;
  padding: 0 var(--scale-20, 20px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-20, 20px);
  flex: 1 0 0;
}

.stage__items .items__item .item__right h3 {
  color: var(--primary, #003775);
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 48px */
}

.stage__items .items__item .item__right p {
  color: var(--on-surface, #000);
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 30.6px */
}

/* ------------------------------
   レスポンシブ（SP）
------------------------------ */
@media screen and (max-width: 768px) {
  .stage__items .items__item {
    flex-direction: column;
    align-items: center;
    gap: var(--scale-20, 20px);
  }
  .stage__items .items__item .item__left {
    width: 100%;
  }
}

/* =========================================================
   mgrade セクション（箱・レイアウト土台）
   ========================================================= */

/* ------------------------------
   セクション全体
------------------------------ */
#mgrade {
  display: flex;
  padding: var(--scale-80, 80px) 0;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;
}

/* ------------------------------
   見出しエリア
------------------------------ */
.mgrade__heading {
  display: flex;
  max-width: var(--width-md, 1080px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  margin-inline: auto;
}

.mgrade__heading h2 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}

.mgrade__heading h2 .highlight {
  align-self: stretch;
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
  color: var(--highlight, #e6002d);
}
.mgrade__heading p {
  color: var(--on-surface);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 36px */
}

/* 見出し内の強調（サイズだけ箱として確保） */
.mgrade__heading .big {
  color: var(--tertiary, #f37100);
  font-family: "Noto Sans JP";
  font-size: var(--scale-56, 56px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

/* ------------------------------
   ボディ（画像＋テキスト）
------------------------------ */
.mgrade__body {
  display: flex;
  padding-right: var(--padding-inline, 20px);
  justify-content: center;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  align-items: stretch;
}

@media screen and (max-width: 768px) {
  .mgrade__body {
    flex-direction: column;
  }
}

/* ------------------------------
   画像側
------------------------------ */
.mgrade__image {
  margin: 0;
  width: 100%;
  flex: 1 1 35px;
}

.mgrade__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

/* ------------------------------
   テキスト側
------------------------------ */
.mgrade__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-24, 24px);
  flex: 1 1 93px;
}

.mgrade__text h3 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 64px */
}

.mgrade__text p {
  color: var(--on-surface, #000);
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 36px */
}

.mgrade__text p .underline {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-color: rgba(255, 234, 0, 0.5);
  text-decoration-thickness: 28%;
  text-underline-offset: -2%;
  text-underline-position: from-font;
  display: inline;
}

/* ------------------------------
   レスポンシブ
------------------------------ */
@media (max-width: 767px) {
  #mgrade {
    padding: 64px 0;
  }

  .mgrade__heading {
    margin-bottom: 40px;
    padding: 0 16px;
  }

  .mgrade__body {
    grid-template-columns: 1fr; /* 縦積み */
    gap: 24px;
    padding: 0 16px;
  }

  .mgrade__image {
    aspect-ratio: 16 / 10; /* SPは少し横長にしても崩れにくい */
  }
}

/* =========================================================
   certification（感謝状：ゆっくりループスライド）
   ========================================================= */

#certification {
  display: flex;
  padding: var(--padding-block, 80px) 0;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;
  background: url(../images/certification-bg.jpg) center center / cover
    no-repeat;
}

/* 見出し（箱） */
.certification__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
}

.certification__heading h2 {
  color: #675c37;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}

.certification__heading p {
  color: var(--on-surface, #000);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}

/* スライド表示窓（はみ出し隠す） */
.certification__slide {
  overflow: hidden;
  width: 100%;
  padding: 0 24px;
}

/* ループ用トラック（横並び＋アニメーション） */
.certification__track {
  --cert-gap: 20px; /* カード間の余白 */
  --cert-item-w: 452px; /* 1枚の横幅（お好みで） */
  --cert-speed: 60s; /* ループ速度（大きいほどゆっくり） */

  display: flex;
  gap: var(--cert-gap);
  width: max-content; /* 中身の幅だけ広がる */

  animation: certification-marquee var(--cert-speed) linear infinite;
  will-change: transform; /* パフォーマンス対策 */
}

/* 1枚分の箱 */
.certification__item {
  flex: 0 0 var(--cert-item-w);
}

.certification__item figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 113/80;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
}

.certification__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ループ：2セット分ある前提で「1セット分」だけ左へ送る */
@keyframes certification-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - (var(--cert-gap) / 2)));
  }
}

/* 動きを減らす設定の人には停止 */
@media (prefers-reduced-motion: reduce) {
  .certification__track {
    animation: none;
  }
}

/* SP調整 */
@media (max-width: 767px) {
  #certification {
    padding: 64px 0;
  }

  .certification__heading {
    padding: 0 16px;
  }

  .certification__slide {
    padding: 0 16px;
  }

  .certification__track {
    --cert-item-w: 200px;
    --cert-gap: 16px;
    --cert-speed: 70s; /* ちょいゆっくりでもOK */
  }
}

/* =========================================================
   process セクション（箱・レイアウト土台）
   ========================================================= */

/* ------------------------------
   セクション全体
------------------------------ */
#process {
  display: flex;
  padding: var(--scale-80, 80px) var(--padding-inline, 20px)
    var(--padding-block, 80px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;
  background: var(--primary-container, #ebf7ff);
}

/* ------------------------------
   見出しエリア
------------------------------ */
.process__heading {
  display: flex;
  width: min(1080px, 100%);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  margin-inline: auto;
}

.process__heading h2 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}
.process__heading h2 .highlight {
  color: var(--tertiary, #f37100);
  font-family: "Noto Sans JP";
  font-size: var(--scale-56, 56px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.process__heading p {
  color: var(--on-surface, #000);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}

/* ------------------------------
   工程 全体
------------------------------ */
.process__items {
  display: flex;
  max-width: var(--width-md, 1080px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  margin-inline: auto;
}

/* ------------------------------
   1段目 / 2段目
   ・横並びの「カード + bar + カード ...」構造
------------------------------ */
.process__items .items__first-row,
.process__items .items__second-row {
  display: flex;
  align-items: center;
  align-self: stretch;
}

/* ------------------------------
   各工程カード（箱）
------------------------------ */
.process__items .items__item {
  flex: 1 1 0; /* 同じ幅で均等に並ぶ */
  min-width: 0; /* 長文で横はみ出し防止 */
  display: flex;
  padding-bottom: var(--scale-20, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-16, 16px);
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  background: var(--surface, #fff);
}

/* 番号 */
.process__items .items__item .item__number {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.process__items .items__item .item__number span {
  display: flex;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--scale-8, 8px) 0;
  background: var(--primary, #003775);
  color: var(--surface, #fff);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
}
/* 画像 */
.process__items .items__item .item__image {
  place-items: center;
  width: 80px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.process__items .items__item .item__image img {
  display: block;
  width: min(96px, 100%);
  height: auto;
}

/* タイトル */
.process__items .items__item h3 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
  padding: 0 var(--scale-20, 20px);
}

/* 説明 */
.process__items .items__item p {
  color: var(--on-surface, #000);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
  padding: 0 var(--scale-20, 20px);
}

/* ------------------------------
   bar（つなぎ線：中身は空でOK）
   ・あとで矢印にする、点線にする、など発展できる
------------------------------ */
.process__items .items__bar {
  background: #54abe9;
  aspect-ratio: 2 / 4;
  width: 20px;
}

/* ------------------------------
   2段目の先頭barだけ
   ・「上段から下段へつながった感」を作る余地
   ・現状は同じでOK（箱だけ）
------------------------------ */
.process__items .items__second-row .items__bar:first-child {
  /* ここは今は空でOK（後で縦線や矢印にするなら使う） */
}

/* ------------------------------
   レスポンシブ（SP）
   ・縦1列にして bar を縦線に変える
------------------------------ */
@media (max-width: 767px) {
  /* 2段構成を1列にする */
  .process__items .items__first-row,
  .process__items .items__second-row {
    flex-direction: column;
  }

  /* bar を縦線に */
  .process__items .items__bar {
    aspect-ratio: 2 / 2;
  }
}

/* =========================================================
   contact（お問い合わせ：箱・レイアウト土台）
   ========================================================= */

/* ------------------------------
   セクション全体
------------------------------ */
#contact {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
  align-self: stretch;
}

/* 見出し */
#contact > h2 {
  color: var(--primary, #003775);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* ------------------------------
   ボディ（フォームの外枠）
------------------------------ */
.contact__body {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* WPの本文ラッパ（今回は箱だけ） */
.contact__body .article__content {
  display: flex;
  max-width: 640px;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-56, 56px);
  align-self: stretch;
}

/* ------------------------------
   CF7：フォーム全体
------------------------------ */
.custom-contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--scale-20, 20px);
}

/* 各フォーム行 */
.custom-contact-form .form-group {
  width: 100%;
}

/* CF7はpが入れ子になりがちなので余計なマージンを整理 */
.custom-contact-form .form-group p {
  margin: 0;
}

/* ラベル */
.custom-contact-form label {
  display: inline-flex;
  align-items: center;
  gap: var(--scale-8, 8px);

  color: var(--on-surface, #000);
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 18px */
  margin-bottom: 0.5em;
}

/* 必須タグ（箱だけ） */
.custom-contact-form .required-tag {
  display: flex;
  padding: var(--scale-4, 4px);
  justify-content: center;
  align-items: center;
  background: var(--highlight, #e6002d);

  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 14px */
}

/* 入力欄のwrap */
.custom-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* 入力（text / email など） */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form input[type="url"],
.custom-contact-form textarea {
  display: flex;
  padding: var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: var(--scale-4, 4px);
  border: 1px solid var(--border, #afb3c1);
  background: var(--surface-variant, #f0f1f2);
}

/* ------------------------------
   同意欄（文章が多いので読みやすく）
------------------------------ */
.custom-contact-form .privacy-policy {
  color: var(--on-surface, #000);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
}

.custom-contact-form .privacy-policy a {
  color: var(--primary, #003775);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* チェックボックス行 */
.custom-contact-form .privacy-policy .wpcf7-list-item label {
  display: flex;
  align-items: center;
}

/* ------------------------------
   送信ボタン
------------------------------ */
.custom-contact-form .submit-wrapper {
  margin-top: 8px;
}

.custom-contact-form .submit-wrapper p {
  margin: 0;
}

.custom-contact-form input[type="submit"] {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  max-width: 400px;
  padding: var(--scale-16, 16px) var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.24) 50%,
      rgba(0, 0, 0, 0.08) 50%,
      rgba(255, 255, 255, 0) 100%
    ),
    var(--tertiary, #f37100);
  background-blend-mode: hard-light, normal;
  box-shadow:
    0 6px 0 0 rgba(0, 0, 0, 0.4),
    0 6px 0 0 var(--tertiary, #f37100);
  color: var(--surface, #fff);
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  font-family: "Noto Sans JP";
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  margin-inline: auto;
  line-height: 170%; /* 40.8px */
}

/* ------------------------------
   CF7：エラー表示など（箱だけ）
------------------------------ */
.wpcf7-not-valid-tip {
  margin-top: 8px;
  display: block;
}

.wpcf7-response-output {
  margin-top: 16px;
}