@charset "UTF-8";
/* CSS Document */

.webfont {
  transform: rotate(0.001deg);
}
.over {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.aspect {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.imgLarge img {
  aspect-ratio: 6 / 4;
  object-fit: cover;
}

/* ==========================================================================
   下層ページ共通ヘッダー（SERVICE等）セクション（他セクション完全同期版）
   ========================================================================== */
.Head {
  background-color: #000000;
  position: relative;
  overflow: hidden;
  border-bottom: #ffffff 1px solid;
  /* スマホ時の上部パディング（英語のフォントサイズに関係なく上部の余白感を担保） */
  padding: 50px 0 0 0 !important;
}

/* 共通インナー */
.Head .inner {
  position: relative;
  z-index: 5; /* 背面の英語（.en）より確実に前面に表示 */
}

/* ==========================================
   背面の巨大な英語テキスト（SERVICE）
   ========================================== */
.Head .en {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  color: #1c1c1c;
  font-size: clamp(
    8rem,
    16vw,
    14rem
  ); /* カンプの流れるような可変サイズを継承 */
  text-transform: uppercase;
  line-height: 0.8; /* 他セクションと高さを同期させるため0.8に最適化 */

  /* ★画面中央を基準にして、ズレを完全に根絶する共通ロジックへ変更 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* 横幅を強制的に画面全体に広げる */
  padding-left: 0;
  text-align: left; /* テキスト自体は左端からスタートし、カンプのレイアウトを忠実に再現 */

  /* 重なり順：最背面に配置 */
  z-index: 1;
  user-select: none;
  letter-spacing: 0.02em;
  white-space: nowrap;

  /* スマホ表示時：上部パディング（50px）の位置から下線にピタッと接地させる設計 */
  top: 50px;
}

/* ==========================================
           前面の日本語タイトルエリア
           ========================================== */
/* スマホ表示時：背面テキストと高さを完全に同期させてブレをなくす受け皿 */
.HeadTitleLeft {
  height: clamp(
    6.4rem,
    12.8vw,
    11.2rem
  ); /* 背面文字のline-heightを含む高さと完全に一致 */
  display: flex;
  align-items: center;
  margin-top: -6px; /* スマホ時の微調整：背面テキストのline-heightによる高さのズレを完全に解消するために-6pxで微調整 */
  position: relative;
  z-index: 10;
}

.Head h1 {
  color: #ffffff;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;

  position: relative;
  display: inline-block;
  /* 二重の円（24px）＋円とテキストの間の余白（12px） */
  padding-left: 36px;
  width: 100%;
}

/* ------------------------------------------
   二重の円の再現（疑似要素・100%継承）
   ------------------------------------------ */
/* 外側の円：24x24px / #E61615 (不透明度50%) */
.Head h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: rgba(230, 22, 21, 0.5);
  border-radius: 50%;
  display: block;
}

/* 内側の円：12x12px / #E61615 (不透明度100%) */
.Head h1::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #e61615;
  border-radius: 50%;
  display: block;
}

/* ==========================================
   PCサイズ（ブレイクポイント 768px以上）の調整
   ========================================== */
@media screen and (min-width: 768px) {
  .Head {
    /* PC時の上部余白感 */
    padding: 80px 0 0 0 !important;
  }

  /* PCサイズ時：最外枠のセクションパディング（80px）を基準に、
     タイトルエリアの高さ中央にブレなく正確に重なるよう位置を固定 */
  .Head .en {
    top: calc(80px + (clamp(6.4rem, 12.8vw, 11.2rem) / 2));
    transform: translate(-50%, -50%);
    margin-top: 14px; /* PCでの巨大フォント化に合わせ、下線に美しく接地して「少し上」に乗るゴールデン比率 */
  }

  /* 日本語タイトルを完全に上下中央揃えの基準軸に固定 */
  .HeadTitleLeft {
    height: clamp(6.4rem, 12.8vw, 11.2rem);
    display: flex;
    align-items: center;
    margin-top: 0;
  }
}

.fAddress h2,
.title1,
.ul4 > li h4 {
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  line-height: 2em;
  font-weight: 700;
  display: flex;
  align-items: center;
  grid-gap: 8px;
}
.subHead {
  margin-bottom: 32px;
}
.subHead > *:not(:last-child) {
  margin-bottom: 8px;
}
.subHead h2 {
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  line-height: 1.3em;
  font-weight: 500;
}
.subHead .en {
  color: #ffffff;
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.1em;
}
h3 {
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  line-height: 1.5em;
  font-weight: 500;
}
.lead {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.9em;
  font-weight: 500;
  text-align: center;
}
.num {
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.textR {
  text-align: right;
}
.width1 {
  max-width: 924px;
}

/* flex */
.flex,
.column2,
.column3,
.column4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.column2 {
  grid-gap: 24px 80px;
}
.column3 {
  grid-gap: 24px 32px;
}
.column4 {
  grid-gap: 12px 40px;
}
.column2 > *,
.column3 > *,
.column4 > * {
  width: 100%;
}

/* COLOR */
.col1 {
  color: #000000;
}

/* BG */
.bg1 {
  background: #000000;
}
.bg1 * {
  color: #ffffff !important;
}
.bg2 {
  background: #e8f1fa;
}
.bg3 {
  background: #f0f0f0;
}
.bg4 {
  border: #c8c8c8 1px solid;
}
.bgW {
  background: #ffffff;
}

/* TRIANGLE */
.triangle {
  background: #000000;
  width: 60px;
  height: calc(tan(60deg) * 60px / 2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tUp {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tRight {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tDown {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tLeft {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

/* BTN */
.btn {
  width: 100%;
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
}
.btn > * {
  background: #000000;
  color: #ffffff;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  line-height: 56px;
  font-weight: 700;
  text-align: center;
  border-radius: 40px;
  display: block;
}
.bg1 .btn > * {
  background: #ffffff;
  color: #000000 !important;
}
.contactWrap {
  background: url("../images/common/contact_bg.jpg") center center no-repeat;
  background-size: cover;
  color: #ffffff;
  height: 60vw;
  padding: 24px 5.33%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contactWrap .inner > *:not(:last-child) {
  margin-bottom: 32px;
}
.contactWrap .textWrap h2 {
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.5em;
  font-weight: 500;
}
.contactWrap .textWrap .en {
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.5em;
}
.contactWrap .lead {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.8em;
}
.contactWrap .btn > * {
  background: #ffffff;
  color: #141414;
}
.home .contactWrap .inner > *:not(:last-child) {
  margin-bottom: 24px;
}

/* UL */
main ul:not([class]) > li,
main ul.space > li {
  padding-left: 1.6em;
  text-align: justify;
}
main ul:not([class]) > li::before,
main ul.space > li::before {
  content: "・";
  display: block;
  position: absolute;
  left: 0.3em;
  top: 0;
}
main ul.space > li:not(:last-child) {
  margin-bottom: 16px;
}
.ul1 > li:not(:last-child) {
  padding-bottom: 40px;
  margin-bottom: 40px;
}
.ul1 > li:not(:last-child)::after {
  content: "";
  border-bottom: #ffffff 1px solid;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
}
.ul1 > li > *:not(:last-child) {
  margin-bottom: 24px;
}
.ul1 h3 {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 700;
}
.ul1 p {
  text-align: justify;
}
.ul2 > li {
  background: #ffffff;
  padding: 32px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 24px;
}
.ul2 > li:not(:last-child) {
  margin-bottom: 24px;
}
.ul2 > li .note > *:not(:last-child) {
  margin-bottom: 16px;
}
.ul2 > li .mapWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 32px 24px;
}
.ul2 > li .mapWrap .embed {
  padding-top: 76.25%;
}
.ul2 > li .imgWrap {
  border-top: #c8c8c8 1px solid;
  padding-top: 32px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 16px 24px;
}
.ul2 > li .imgWrap figure img {
  margin-bottom: 8px;
}
.ul2 > li .imgWrap figcaption {
  font-weight: 700;
}
.ul3 > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 24px 60px;
}
.ul3 > li:not(:last-child) {
  margin-bottom: 32px;
}
.ul3 > li .note > *:not(:last-child) {
  margin-bottom: 24px;
}
.ul4 > li {
  background: #e8f1fa;
  padding: 24px 16px;
}
.ul4 > li:not(:last-child) {
  margin-bottom: 16px;
}
.ul5 > li {
  border-bottom: #ffffff 1px solid;
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  grid-gap: 16px;
}
.ul5 > li:not(:last-child) {
  margin-bottom: 12px;
}
.ul6 {
}
.ul6 > li {
  border: #c8c8c8 1px solid;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ul6 > li h4 {
  font-size: clamp(1.7rem, 2vw, 2rem);
  line-height: 1.5em;
}
.ul6 > li .en {
  color: #969696;
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.5em;
}
.ul7 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 24px 40px;
}
.ul7 > li {
  border: #ffffff 1px solid;
  width: 100%;
  padding: 32px 24px;
}
.ul7 > li > *:not(:last-child):not(.num) {
  margin-bottom: 16px;
}
.ol1 {
  counter-reset: item;
}
.ol1 > li:not(:last-child) {
  margin-bottom: 40px;
}
.ol1 > li > *:not(:last-child) {
  margin-bottom: 24px;
}
.ol1 > li > h3 {
  padding-left: 1.8em;
}
.ol1 > li > h3::before {
  font-family: "Inter", system-ui;
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  line-height: 1.5em;
  position: absolute;
  left: 0px;
  top: 0px;
}
.ol1 .ul3 > li {
  border: #c8c8c8 1px solid;
  padding: 32px 16px;
  grid-gap: 24px 48px;
}
.ol1 .ul3 > li .note h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
}
.ol1 .ul3 > li .note > *:not(:last-child) {
  margin-bottom: 16px;
}
.annotation {
}
.annotation > * {
  padding-left: 1.5em;
}
.annotation > *::before {
  content: "※";
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
}

/* DL */
dl:not([class]) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em 2em;
}
.dl1 {
  border-bottom: #0000001a 1px solid;
}
.dl1 > * {
  border-top: #0000001a 1px solid;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  grid-gap: 16px;
}
.dl1 > *:first-child {
  border-top: none;
  padding-top: 0;
}
.dl1 dt {
  width: 26%;
  font-weight: 700;
}
.dl1 dd {
  flex: 1;
}
.dl1 dd > *:not(:last-child) {
  margin-bottom: 16px;
}

/* iframe */
.embed {
  width: 100%;
  padding-top: 56.25%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.embed iframe,
.embed object,
.embed embed {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Top */
.Main .over {
  text-align: right;
}
.Main .over img {
  width: 80vw;
}
.Main h1 {
  position: absolute;
  left: 0;
  top: 6vw;
}
.Main h1 span {
  background: #000000;
  color: #ffffff;
  margin-bottom: 8px;
  padding: 8px 16px;
  font-size: clamp(2rem, 4.8vw, 4.8rem);
  line-height: 1.1em;
  font-weight: 600;
  display: block;
}
.home .Company .contWrap .note .en,
.home .Service .contWrap .note .en {
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(6rem, 10vw, 10rem);
  line-height: 1.1em;
  position: absolute;
}
.home .Company .contWrap .note > *:not(:last-child):not(h2),
.home .Service .contWrap .note > *:not(:last-child):not(h2) {
  margin-bottom: 32px;
}
.home .Company .contWrap .note > h2,
.home .Service .contWrap .note > h2 {
  margin-bottom: 24px;
}
.home .Company .itemWrap {
  text-align: center;
}
.home .Company .itemWrap {
  margin-bottom: 64px;
}
.home .Company .itemWrap > *:not(:last-child) {
  margin-bottom: 32px;
}
.home .Company .itemWrap h3 span {
  border-bottom: #000000 3px solid;
  padding-bottom: 8px;
  display: inline-block;
}
.home .Company .itemWrap .ul6 {
  display: flex;
  flex-wrap: wrap;
}
.home .Company .contWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 32px 100px;
}
.home .Company .contWrap .note .en {
  color: #f0f0f0;
}
.home .Company .contWrap .note p {
  text-align: justify;
}
.home .Service {
  background-image: url("../images/top/bg2.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100vw auto;
}
.home .Service .contWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 56px 0;
}
.home .Service .contWrap .note .en {
  color: rgba(0, 0, 0, 0.1) !important;
  mix-blend-mode: multiply;
}
.home .Service .contWrap .note .title1::before {
  color: #ffffff;
}

/* Page */
.Page .cont > *:not(:last-child) {
  margin-bottom: 48px;
}
.Page .contWrap {
  display: flex;
  justify-content: space-between;
  grid-gap: 32px 72px;
}
.Page .contWrap .note > *:not(:last-child) {
  margin-bottom: 32px;
}
.Page .contWrap .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main section:not(.Head):not(.full).Service.Page {
  padding-bottom: 0;
}
.serviceWrap .inner .bgW {
  padding: 0 16px;
}
.serviceWrap .inner .bgW > section:not(:last-child):not(.Link)::after {
  content: "";
  background: #000000;
  width: 100vw;
  height: 1px;
  display: block;
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0;
}
.serviceWrap .pNav {
  padding-top: 32px;
  font-weight: 700;
  display: flex;
  grid-gap: 2em;
}
.serviceWrap .pNav a {
  display: flex;
  align-items: center;
  grid-gap: 10px;
}
.serviceWrap .pNav a i {
  background: #000000;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
}
.serviceWrap .pNav a i::after {
  content: "";
  border-top: #ffffff 2px solid;
  border-right: #ffffff 2px solid;
  width: 0.4em;
  height: 0.4em;
  margin-left: 10px;
  display: block;
  position: absolute;
  left: calc(50% - 0.9em);
  top: calc(50% - 0.4em);
  transform: rotate(135deg);
}
.License h3 {
  text-align: center;
}

.Overview .partnerWrap {
  padding: 32px 16px;
}
.Overview .partnerWrap > *:not(:last-child) {
  margin-bottom: 8px;
}
.Overview .partnerWrap .column3 {
  grid-gap: 8px 32px;
}
.History {
}

/* Contact */
.Contact.Page .telWrap,
.Contact.Page .formWrap {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 16px;
}
.Contact.Page .telWrap h3,
.Contact.Page .formWrap h3 {
  margin-bottom: 20px;
}
.telWrap {
  text-align: center;
}
.telWrap > *:not(:last-child) {
  margin-bottom: 10px;
}
.telWrap .num * {
  color: #000000;
}
.telWrap .num > *:not(:last-child) {
  margin-right: 10px;
}
.telWrap .num span {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  line-height: 1.2em;
}
.telWrap .num a {
  font-size: clamp(3.2rem, 5.6vw, 5.6rem);
  line-height: 1.2em;
}
.telWrap .hour {
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.2em;
}
.formWrap {
  text-align: center;
}

/*SP
-------------------------------------------------------*/
@media screen and (max-width: 767px) {
  /* flex */
  .flex:not(.flexFix) {
    flex-direction: column;
  }

  /* iframe */

  /* BTN*/

  /* UL */

  /* DL */

  /* Top */
  .home .Company,
  .home .Service {
    overflow: hidden;
  }
  .home .Company .itemWrap .sub > *:not(:first-child) {
    margin-bottom: -1vw;
  }
  .home .Company .itemWrap .sub .ul6 > *:not(:last-child) {
    margin-bottom: -1vw;
  }
  .home .Company .itemWrap .ul6 > li {
    width: 23%;
  }
  .home .Company .itemWrap .ul6 > li:not(:first-child) {
    margin-left: -2%;
  }
  .home .Company .itemWrap .ul6 > li:not(:first-child):nth-child(5) {
    margin-left: 10.5%;
  }
  .home .Company .contWrap .note .en,
  .home .Service .contWrap .note .en {
    left: -3rem;
    top: -36px;
  }
  .home .Service .contWrap .note h3 {
    margin-bottom: 0 !important;
  }

  /* Page */
  .Page .contWrap {
    flex-wrap: wrap;
  }
  .Page .contWrap .img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: -56px;
  }

  .Requirements.Page .column2 {
    grid-gap: 0;
  }
  .Requirements.Page .column2 > *:not(:last-child).dl1 {
    border-bottom: none;
  }

  /* Contact */
  .formWrap iframe {
    height: 760px !important;
  }
}

/*PC
-------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
  .imgLarge img {
    aspect-ratio: 4 / 1;
  }
  .Head h1 {
  }
  .subHead {
  }

  /* flex */
  .flex.sb {
    justify-content: space-between;
  }
  .flex.center {
    justify-content: center;
  }
  .flex.vcenter {
    align-items: center;
  }
  .column2 > * {
    width: calc((100% - 80px) / 2);
    height: auto;
  }
  .column3 > * {
    width: calc((100% - (32px * 2)) / 3);
    height: auto;
  }
  .column4 > * {
    width: calc((100% - (40px * 3)) / 4);
    height: auto;
  }

  /* BG */

  /* BTN */
  .btn {
  }
  .btn > * {
    width: 100%;
    height: 64px;
    padding: 0 16px;
    line-height: 64px;
  }
  .btn.pc {
    display: block;
  }
  .btn > *:hover {
    background: #000000;
    color: #ffffff;
  }
  .bg1 .btn > *:hover {
    background: #000000;
    color: #ffffff !important;
  }
  .contactWrap {
    height: 380px;
    padding: 40px;
  }
  .contactWrap .inner > *:not(:last-child) {
    margin-bottom: 48px;
  }
  .home .contactWrap {
    padding: 64px 40px;
  }
  .home .contactWrap .inner > *:not(:last-child) {
    margin-bottom: 32px;
  }
  .home .contactWrap .btn > *:hover {
    color: #ffffff;
  }

  /* UL */
  .ul1 > li:not(:last-child) {
    padding-bottom: 80px;
    margin-bottom: 80px;
  }
  .ul2 > li {
    padding: 40px 48px;
    grid-gap: 48px 24px;
  }
  .ul2 > li:not(:last-child) {
    margin-bottom: 48px;
  }
  .ul2 > li .note {
    width: 27%;
    max-width: 288px;
  }
  .ul2 > li .img,
  .ul2 > li .mapWrap {
    flex: 1;
  }
  .ul2 > li .mapWrap > * {
    width: calc((100% - 24px) / 2);
  }
  .ul2 > li .mapWrap .embed {
    padding-top: 32.25%;
  }
  .ul2 > li .imgWrap {
    padding-top: 48px;
  }
  .ul2 > li .imgWrap > * {
    width: calc((100% - 48px) / 3);
  }
  .ul3 > li:not(:last-child) {
    margin-bottom: 56px;
  }
  .ul3 > li .note {
    flex: 1;
  }
  .ul3 > li .note > *:not(:last-child) {
    margin-bottom: 32px;
  }
  .ul3 > li .img {
    width: 40%;
    max-width: 400px;
  }
  .ul4 > li {
    padding: 32px 40px;
  }
  .ul4 > li:not(:last-child) {
    margin-bottom: 24px;
  }
  .ul7 > li {
    width: calc((100% - 40px) / 2);
    padding: 32px 40px;
  }
  .ol1 > li:not(:last-child) {
    margin-bottom: 100px;
  }
  .ol1 > li > *:not(:last-child) {
    margin-bottom: 32px;
  }
  .ol1 .ul3 > li {
    padding: 48px;
  }
  .ol1 .ul3 > li .note > *:not(:last-child) {
    margin-bottom: 24px;
  }

  /* DL */
  .dl1 > * {
    padding: 40px 0;
  }
  dl:not([class]),
  .dl1 {
    grid-gap: 1.5em 2em;
  }
  .dl1 dt {
    width: 32%;
    max-width: 200px;
  }

  /* Top */
  main.home section:not(.Head):not(.full) {
  }
  .Main .over img {
    width: 75vw;
  }
  .Main h1 {
    left: 0;
    top: 8vw;
  }
  .home .Company .contWrap .note .en,
  .home .Service .contWrap .note .en {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    left: -11rem;
    top: 0;
  }
  .home .Company .contWrap .note,
  .home .Service .contWrap .note {
    flex: 1;
  }
  .home .Company .contWrap .note > *:not(:last-child):not(h2),
  .home .Service .contWrap .note > *:not(:last-child):not(h2) {
    margin-bottom: 48px;
  }
  .home .Company .contWrap .note .btn,
  .home .Service .contWrap .note .btn {
    margin-left: 0;
  }
  .home .Company .itemWrap {
    margin-bottom: 104px;
  }
  .home .Company .itemWrap > *:not(:last-child) {
    margin-bottom: 40px;
  }
  .home .Company .itemWrap .sub {
    padding: 0 26px;
  }
  .home .Company .itemWrap .sub > *:not(:first-child) {
    margin-top: -10px;
  }
  .home .Company .itemWrap .sub > *:nth-child(2n + 2) {
    justify-content: flex-end;
  }
  .home .Company .itemWrap .ul6 > li {
    width: 12.65%;
  }
  .home .Company .itemWrap .ul6 > li:not(:first-child) {
    margin-left: -1%;
  }
  .home .Company .contWrap .img {
    width: 54%;
    max-width: 648px;
  }
  .home .Company .contWrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .home .Service .contWrap > * {
    width: 50%;
  }
  .home .Service::before {
    content: "";
    border-left: #ffffff 1px solid;
    height: 100%;
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
  }
  .home .Service .contWrap {
    align-items: flex-start;
  }
  .home .Service .contWrap > .note {
    padding-right: 80px;
    position: sticky;
    left: 0;
    top: 40px;
  }
  .home .Service .contWrap > .sub .ul1 > li {
    padding-left: 80px;
  }
  .home .Service .contWrap > .sub .ul1 > li:not(:last-child)::after {
    width: 50vw;
  }

  /* Page */
  .Page .cont > *:not(:last-child) {
    margin-bottom: 64px;
  }
  .Page .contWrap {
  }
  .Page .contWrap > * {
    width: calc((100% - 72px) / 2);
  }
  .Page .contWrap .note > *:not(:last-child) {
    margin-bottom: 40px;
  }
  .Page .contWrap .img {
    width: 50vw;
    margin-right: calc(50% - 50vw);
    margin-top: -136px;
    margin-bottom: -136px;
  }
  .gridWrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: 48px 64px;
  }

  .serviceWrap .inner .bgW {
    padding: 0 100px;
  }
  .serviceWrap .pNav {
    padding-top: 56px;
    grid-gap: 4em;
  }

  .Overview .partnerWrap {
    padding: 40px;
  }
  .History .inner {
    display: flex;
    justify-content: space-between;
    grid-gap: 40px;
  }
  .History .inner .subHead {
    width: 26%;
  }
  .History .inner .dl1 {
    flex: 1;
  }

  .Requirements.Page .column2 {
    align-items: flex-start;
  }

  /* Contact */
  .Contact.Page .telWrap,
  .Contact.Page .formWrap {
    padding: 56px 48px;
  }
}

/* Top */
/* Heroblock Slide Container */
#heroSliderContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 2880 / 1182; /* PCの画像比率 */
  background-color: #000;
}

/* 【PC版】Figmaのデザインを忠実に再現（左右から中央へのグラデーション） */
#heroSliderContainer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    70.23deg,
    #000000 0%,
    rgba(0, 0, 0, 0) 50.48%,
    #000000 100%
  );
}

.heroSlide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.heroSlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PC/SPの画像切り替え */
.heroSlide .pc {
  display: block;
}
.heroSlide .sp {
  display: none;
}
.spOnly {
  display: none;
}

/* テキストコンテンツエリア */
.heroContent {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  box-sizing: border-box;
  padding: 45px 6.94%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* メイン・サブタイトルを包むラッパー */
.heroTextWrap {
  margin-bottom: 2%;
  color: #ffffff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.heroMainTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(3.2rem, 7.6vw, 7.6rem);
  font-weight: 500;
  line-height: 1.24;
  margin: 0 0 24px 0;
  letter-spacing: 0.1em;
}

.heroSubTitle {
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.33;
  margin: 0;
  letter-spacing: 0;
}

/* ★フェードインアニメーションの初期状態（下から上にフワッと） */
.heroTextWrap .heroMainTitle,
.heroTextWrap .heroSubTitle {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}
/* 少しディレイをかけてサブタイトルを出す */
.heroTextWrap .heroSubTitle {
  transition-delay: 0.2s;
}

/* アクティブ時のアニメーション発火設定 */
.heroContent.is-animated .heroMainTitle,
.heroContent.is-animated .heroSubTitle {
  opacity: 1;
  transform: translateY(0);
}

/* 賞のテキストバッジ */
.awardBadge {
  position: absolute;
  bottom: 4%;
  right: 0;
  background-color: #000000;
  color: #ffffff;
  padding: 8px 24px;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  line-height: 2;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease-in-out,
    visibility 0.5s;
}

.awardBadge.isActive {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   レスポンシブ (タブレット・スマホ)
   ========================================================== */
@media (max-width: 768px) {
  #heroSliderContainer {
    /* 縦横比を縦長に変更（4:5）。これで写真の下部に文字を置く十分な高さを確保 */
    aspect-ratio: 4 / 5;
    height: auto;
  }

  /* 【SP版】グラデーションの向きを「上から下（#000）」に変更 */
  #heroSliderContainer::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      #000000 95%
    );
  }

  .heroSlide .pc {
    display: none;
  }
  .heroSlide .sp {
    display: block;
  }
  .spOnly {
    display: block;
  }

  /* 画像そのものは上部で綺麗に見せる */
  .heroSlide img {
    object-position: top center;
  }

  .heroContent {
    padding: 6% 6% 60px 6%; /* バッジ（最優秀賞）が下に固定されるため、その分の余白(60px程度)を確保 */
    justify-content: flex-end; /* 中央ではなく、しっかり下部に寄せる */
  }

  .heroTextWrap {
    margin-bottom: 40px; /* テキストと最優秀賞バッジの間の余白 */
    text-align: left; /* 左寄せのまま、バランスをとる */
  }

  /* スマホ用にフォントサイズやマージンの微調整 */
  .heroMainTitle {
    margin: 0 0 12px 0;
    line-height: 1.4;
  }

  .awardBadge {
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 12px;
  }
}

/* ==========================================================================
   SERVICE SECTION - 完全統合版CSS
   ========================================================================== */

/* ==========================================
           セクション全体のコンテナ
           ========================================== */
.serviceSection {
  background-color: #000000;
  /* Figmaに合わせたちょうど良い位置（75%）の斜めグラデーション */
  background-image: linear-gradient(121deg, #000000 75%, #1e1e1e 75%);
  position: relative;
  overflow: hidden;
}

/* 背面の巨大な英語テキスト */
.serviceEn {
  /* フォント指定・サイズ数値を完全維持 */
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  color: #1c1c1c;
  font-size: clamp(7.2rem, 13vw, 14rem);
  text-transform: uppercase;
  line-height: 0.8;

  /* 余白なしで画面の左端に密着させる共通設計 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* 横幅を強制的に画面全体に広げる */
  padding-left: 0; /* 左端余白なしを完全に実現 */
  text-align: left; /* テキスト自体は左端からスタート */
  z-index: 1; /* 背景として下に配置 */
  user-select: none;

  /* ★スマホ表示時：日本語タイトルの「若干上め」に位置が連動するようにtopを調整 */
  top: 0px;
}

/* 共通インナークラス */
.serviceInner {
  position: relative;
  z-index: 5; /* SERVICEの文字より前面に出す */
}

/* ==========================================
           ヘッダーエリア（主なサービス / リード文）
           ========================================== */
.serviceHead {
  position: relative;
  /* 元コードの数値を完全にベースにしつつ、SP時の高さを最適化 */
  min-height: clamp(6rem, 12vw, 10rem);
  margin-bottom: 40px;
}

/* スマホ時：要素が丸ごと重なるのを防ぐため、独立した縦並びのFlexに */
.serviceTitleContainer {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0; /* 重なり防止のためgapではなくmarginで制御 */
}

/* スマホ表示時：「SERVICE」の背面テキストと重ねるための高さと位置を制御 */
.serviceTitleLeft {
  height: clamp(
    5.7rem,
    10.4vw,
    11.2rem
  ); /* 英語テキストのline-heightを含む高さと一致させる */
  display: flex;
  align-items: center;
  margin-top: -6px; /* 英語テキストの上部に微調整で被せるためのマイナスマージン */
}

/* スマホ表示時：タイトル部分に被らないよう、適切なマージンで下に綺麗に回り込ませる */
.serviceTitleRight {
  margin-top: 20px;
}

.serviceJpTitle {
  color: #ffffff;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-left: 36px;
}

.serviceJpTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: rgba(230, 22, 21, 0.5);
  border-radius: 50%;
  display: block;
}

.serviceJpTitle::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #e61615;
  border-radius: 50%;
  display: block;
}

.serviceLeadText {
  margin: 0;
  text-align: justify;
}

/* ==========================================
           メイン特大カード (CUSTOM PAINT) 
           ========================================== */
.mainCard {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  background-color: #151515;
  /* ★Figmaのグラデーション比率（1240pxの比率に対して左から750px＝約60.4%）を完全再現 */
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60.4%),
    url("../images/top/service_custom_paint.webp");
  background-size: cover;
  background-position: center;
  border: 1px solid #222222;
  transition: border-color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .mainCard:hover,
  .subCard:hover {
    border-color: #ffffff;
  }
}

.mainCardContent {
  padding: 32px 20px 60px 20px;
  max-width: 664px;
}

.cardLabelEn {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-size: clamp(2.8rem, 3.4vw, 3.4rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 4px 0;
  color: #ffffff;
}

.cardLabelJp {
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
}

.cardDescription {
  margin: 0;
  color: #ffffff;
  text-align: justify;
}

/* 右下の「MORE」赤ボタン */
.moreButtonFake {
  position: absolute;
  right: 0;
  bottom: 0;

  /* 1. サイズを80pxの正方形に固定 */
  width: 60px;
  height: 60px;

  /* 2. 中の文字（MORE）を上下左右中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* paddingは不要になるので削除（または0に） */
  padding: 0;

  background-color: #e61615;
  color: #ffffff;
  font-family: "STIX Two Text", serif;
  font-weight: 400;
  transition: background-color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .mainCard:hover .moreButtonFake,
  .subCard:hover .moreButtonFake {
    background-color: #b81110;
  }
}

/* ==========================================
           下部3カラムカードグリッド 
           ========================================== */
.subCardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

.subCard {
  position: relative;
  display: block;
  width: 100%;
  background-color: #151515;
  background-size: cover;
  background-position: center;
  border: 1px solid #222222;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease;
}

.subCard.bodywork {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%),
    url("../images/top/service_bodywork.webp");
}
.subCard.buying {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%),
    url("../images/top/service_buying.webp");
}
.subCard.coating {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%),
    url("../images/top/service_coating.webp");
}

.subCardContent {
  padding: 32px 20px 60px 20px;
}

/* ==========================================
           下部「VIEW MORE」ボタン
           ========================================== */
.serviceSection .viewMoreContainer {
  text-align: center;
  margin-top: 50px;
}

/* スマホ表示時：テキスト左揃え・サイズ固定 */
.serviceSection .viewMoreButton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ffffff;
  font-family: "STIX Two Text", serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;

  width: 222px;
  height: 52px;
  padding-left: 24px; /* Figma基準の左余白 */

  position: relative;
  box-sizing: border-box;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* 矢印の設計 */
.serviceSection .viewMoreButton::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);

  /* 見切れるのを防ぐため、描画ボックスを少し広めに確保 */
  width: 12px;
  height: 14px;
  background-color: #ffffff;

  /* ボックスの内側に1pxのバッファを持たせ、先端が潰れない完璧な「＞」をくり抜く座標 */
  clip-path: polygon(
    16.67% 14.29%,
    25% 7.14%,
    83.33% 50%,
    25% 92.86%,
    16.67% 85.71%,
    66.67% 50%
  );
  transform: translateY(calc(-50% - 1px));
  transition: background-color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .serviceSection .viewMoreButton:hover {
    background-color: #ffffff;
    color: #000000;
  }

  .serviceSection .viewMoreButton:hover::after {
    background-color: #000000;
  }
}

/* ==========================================
           レスポンシブ対応 (PCサイズ: 768px以上)
           ========================================== */
@media screen and (min-width: 768px) {
  .serviceSection {
    padding: 185px 0 155px 0 !important;
  }

  /* PCサイズ：背面の文字の配置を親コンテナ（serviceHead）全体の上下中央に固定 */
  .serviceEn {
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 6px; /* PCサイズでも視覚的な「若干上め」の比率を維持 */
  }

  .serviceHead {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
  }

  /* ヘッダーの横並び設定（Flexboxで綺麗に横一列に整列、かつ中央揃え） */
  .serviceTitleContainer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  /* PC表示ではスマホ用のレイアウト・高さを解除し、綺麗に横並びにする */
  .serviceTitleLeft {
    height: auto;
    width: 45%;
    margin-top: 0;
  }

  .serviceTitleRight {
    margin-top: 0;
    width: 52.5%;
  }

  .mainCard {
    margin-bottom: 11px;
  }

  .mainCardContent {
    padding: 68px 44px;
  }

  /* 下部3カラムの横並び設定 */
  .subCardGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
  }

  .subCardContent {
    padding: 67px 20px 67px 44px;
  }

  .cardDescription {
    text-align: left;
  }

  .serviceSection .viewMoreContainer {
    margin-top: 80px;
  }

  /* PCサイズ時：Figma指定サイズ（274px × 64px） */
  .serviceSection .viewMoreButton {
    width: 274px;
    height: 64px;
    padding-left: 32px; /* Figma基準の左余白 */
  }

  /* PCのボタンサイズに合わせて、右端からの距離を32pxに完全固定 */
  .serviceSection .viewMoreButton::after {
    right: 32px;
  }
  .serviceLeadText {
    text-align: left;
  }
  .moreButtonFake {
    /* モバイル用にサイズを縮小 */
    width: 80px;
    height: 80px;
  }
}

@media screen and (max-width: 767px) {
  .mainCard {
    /* グラデーションをなくし、全体を均一に50%の黒（0.5）で覆う */
    background-image:
      linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url(../images/top/service_custom_paint.webp);
  }
}

/* ==========================================================================
   施工事例（WORKS）トップページスライダーセクション（修正・完全版）
   ========================================================================== */

/* セクション全体のコンテナ */
.home .worksSection {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  padding: 56px 0 56px 0 !important;
}

/* 共通インナー（SERVICEの文字より前面に出す） */
.worksInner {
  position: relative;
  z-index: 5;
}

/* 背面の巨大な英語テキスト（左端密着・SP/PC位置連動共通設計） */
.worksEn {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  color: #f4f4f4;
  font-size: clamp(7.2rem, 13vw, 14rem);
  text-transform: uppercase;
  line-height: 0.8;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding-left: 0;
  text-align: left;
  z-index: 1;
  user-select: none;
  letter-spacing: 0.02em;

  /* スマホ表示時：日本語タイトルの「若干上め」に位置が連動するようにtopを調整 */
  top: 0px;
}

/* ==========================================================================
   ヘッダーエリア（タイトル / リード文 / ナビゲーション）
   ========================================================================== */
.worksHead {
  position: relative;
  min-height: clamp(6rem, 12vw, 10rem);
  margin-bottom: 30px;
}

/* スマホ時：要素が丸ごと重なるのを防ぐため、独立した縦並びのFlexに */
.worksTitleContainer {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* スマホ表示時：「WORKS」の背面テキストと重ねるための高さと位置を制御 */
.worksTitleLeft {
  height: clamp(5.7rem, 10.4vw, 11.2rem);
  display: flex;
  align-items: center;
  margin-top: -6px;
}

/* スマホ表示時：タイトル部分に被らないよう、適切なマージンで下に綺麗に回り込ませる */
.worksTitleRight {
  margin-top: 20px;
}

/* 日本語タイトル（二重の赤い円を背景文字に重ねる調整） */
.worksJpTitle {
  color: #000000;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-left: 36px;
}

/* 二重の円の装飾 */
.worksJpTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: rgba(227, 24, 24, 0.4);
  border-radius: 50%;
  display: block;
}

.worksJpTitle::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #e31818;
  border-radius: 50%;
  display: block;
}

/* 右側のリードテキスト */
.worksLeadText {
  color: #000000;
  margin: 0 0 25px 0;
  text-align: justify;
}

/* スライダーの左右ナビゲーション矢印ボタンコンテナ */
.worksNaviContainer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 15px;
}

/* 矢印ボタン（赤座布団） */
.worksNaviBtn {
  width: 45px;
  height: 45px;
  background-color: #e31818;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .worksNaviBtn:hover {
    background-color: #b31212;
  }
}

/* 矢印形状をCSSで表現 */
.worksNaviBtn::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  display: block;
}

.swiperButtonPrev::after {
  transform: rotate(-45deg);
  margin-left: 3px;
}

.swiperButtonNext::after {
  transform: rotate(135deg);
  margin-right: 3px;
}

/* ==========================================================================
   スライダー本体 & カード設定
   ========================================================================== */
.worksSliderWrapper {
  overflow: hidden;
  padding-bottom: 40px;
}

/* ★【重要】インナー幅の中で overflow: visible を指定し、
   左右の画面外（.worksSectionの端まで）前後のスライドが見切れて露出するようにする */
.worksSwiper {
  width: 100%;
  overflow: visible !important;
}

/* スライドカードリンク */
.sliderCardLink {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* URLがないリンク無効スライドの設定
   マウスクリック動作、タップイベントを遮断し、矢印カーソルに戻す */
.sliderCardLink.noLink {
  pointer-events: none;
  cursor: default;
}

/* 画像表示枠（Figma比率 3:2 を完全にホールド） */
.worksSliderWrapper .imageContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #eeeeee;
}

.worksSliderWrapper .imageContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* カテゴリテキスト */
.sliderCardLink .cardCategory {
  font-size: 12px;
  color: #000000;
  margin-top: 12px;
  margin-bottom: 0;
  font-weight: 400;
  text-align: right;
}

@media print, screen and (min-width: 768px) {
  /* ホバー時の画像ズーム効果（リンクが有効な場合のみに制限）
     :not(.noLink) を付与したことで、リンクなし要素へのホバー時はアニメーションが発動しなくなる */
  .sliderCardLink:not(.noLink):hover .imageContainer img {
    transform: scale(1.05);
  }
}

/* ==========================================================================
   下部「VIEW MORE」ボタン
   ========================================================================== */
.worksSection .viewMoreContainer {
  text-align: center;
  margin-top: 5px;
}

.worksSection .viewMoreButton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #000000;
  font-family: "STIX Two Text", serif;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  width: 222px;
  height: 52px;
  padding-left: 24px;
  position: relative;
  box-sizing: border-box;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.worksSection .viewMoreButton::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 14px;
  background-color: #000000;
  clip-path: polygon(
    16.67% 14.29%,
    25% 7.14%,
    83.33% 50%,
    25% 92.86%,
    16.67% 85.71%,
    66.67% 50%
  );
  transform: translateY(calc(-50% - 1px));
  transition: background-color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .worksSection .viewMoreButton:hover {
    background-color: #000000;
    color: #ffffff;
  }

  .worksSection .viewMoreButton:hover::after {
    background-color: #ffffff;
  }
}

/* ==========================================================================
   レスポンシブ対応 (PCサイズ: 768px以上)
   ========================================================================== */
@media screen and (min-width: 768px) {
  .home .worksSection {
    padding: 110px 0 132px 0 !important;
  }

  /* PCサイズ：背面の文字の配置をヘッダーの「上下中央」に完全固定 */
  .worksEn {
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 6px;
  }

  .worksHead {
    display: flex;
    align-items: center;
  }

  .worksTitleContainer {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 40px;
    gap: 0;
    width: 100%;
  }

  .worksTitleLeft {
    height: clamp(5.7rem, 10.4vw, 11.2rem);
    display: flex;
    align-items: center;
    width: 30%;
    margin-top: 0;
  }

  .worksTitleRight {
    margin-top: 0;
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: left;
    justify-content: center;
    padding-top: 10px;
  }

  .worksLeadText {
    margin-bottom: 30px;
    width: 100%;
    max-width: 550px;
    text-align: left;
  }

  .worksNaviContainer {
    margin-bottom: 0;
  }

  .worksSection .viewMoreButton {
    width: 274px;
    height: 64px;
    padding-left: 32px;
  }

  .worksSection .viewMoreButton::after {
    right: 32px;
  }

  /* 崩れを根本解決するスライダーコンテナ設定
     幅を無理に拡張せずインナー（100%）に留め、左右両方向への露出を許可する。
  */
  .worksSliderWrapper.over {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: block;
    overflow: visible; /* 左右へのはみ出しを綺麗に許可 */
  }

  /* 左右両方の見切れ（はみ出し）をブラウザの画面端まで100%突き抜けさせる設定。
     JS側をcenteredSlides: trueにしたため、clip-pathで左右両端（-100vw 〜 100vw）を
     すべてマスクせずに露出させることで、ファーストビューから完璧に画像が表示される。
  */
  .worksSwiper {
    width: 100%;
    max-width: none;
    clip-path: inset(0 -100vw 0 -100vw); /* 左右両方の画面外を完全に表示 */
    overflow: visible !important;
    margin-left: 0; /* 不要なズレを確実にリセット */
  }

  .worksSwiper .swiper-slide {
    height: auto;
  }
}

/* ==========================================================================
   会社概要（ABOUT）セクション（位置・重なり完全同期版）
   ========================================================================== */
.aboutSection {
  background-color: #000000;
  /* Figmaカンプのデザイン通りの美しいドットパターン間隔（24px） */
  background-image: radial-gradient(#222222 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  position: relative;
  overflow: hidden;
  padding: 56px 0 56px 0 !important;
}

/* 共通インナー（文字より前面に出す） */
.aboutInner {
  position: relative;
  z-index: 5;
}

/* 背面の巨大な英語テキスト（一番外側のセクションを基準にすることで、Flexboxの影響を完全に遮断） */
.aboutEn {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  color: #1c1c1c;
  font-size: clamp(7.2rem, 13vw, 14rem);
  text-transform: uppercase;
  line-height: 0.8;

  /* 余白なしで画面の左端に密着させる共通設計 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding-left: 0;
  text-align: left;

  /* 重なり順：最背面に配置 */
  z-index: 1;
  user-select: none;
  letter-spacing: 0.02em;

  /* スマホ表示時：上部パディング（56px）から日本語タイトルの位置にピタッと合わせる */
  top: 56px;
}

/* ==========================================
           レイアウトコンテナ（テキストエリア & 画像）
           ========================================== */
.aboutFlexContainer {
  display: flex;
  flex-direction: column;
  gap: 35px;
  position: relative;
  z-index: 2; /* 背景文字より前面に表示 */
}

/* --- 左側：テキストブロック --- */
.aboutTextBlock {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* スマホ表示時：「ABOUT」の背面テキストと重ねるための高さを制御 */
.aboutTitleLeft {
  height: clamp(
    5.7rem,
    10.4vw,
    11.2rem
  ); /* 英語テキストのline-heightを含む高さと一致させる */
  display: flex;
  align-items: center;
  margin-top: -6px;
  position: relative;
  z-index: 10;
}

/* スマホ表示時：タイトル部分に被らないよう、適切なマージンで下に綺麗に回り込ませる */
.aboutTitleRight {
  margin-top: 20px;
  position: relative;
  z-index: 10;
}

.aboutJpTitle {
  color: #ffffff;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-left: 36px;
}

/* 二重の円の装飾（赤色を完全に継承） */
.aboutJpTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: rgba(230, 22, 21, 0.5);
  border-radius: 50%;
  display: block;
}

.aboutJpTitle::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #e61615;
  border-radius: 50%;
  display: block;
}

/* 会社概要の紹介文 */
.aboutDescription {
  color: #ffffff;
  margin: 0 0 30px 0;
  text-align: justify;
}

/* --- 右側：画像ブロック --- */
.aboutImageBlock {
  width: 100%;
  position: relative;
  z-index: 10;
}

.aboutImageHolder {
  width: 100%;
  overflow: hidden;
  margin-bottom: 40px;
}

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

/* ==========================================
           下部「VIEW MORE」ボタン（共通仕様）
           ========================================== */
.aboutSection .viewMoreContainer {
  text-align: center;
}

.aboutSection .viewMoreButton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ffffff;
  font-family: "STIX Two Text", serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;

  width: 222px;
  height: 52px;
  padding-left: 24px;

  position: relative;
  box-sizing: border-box;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.aboutSection .viewMoreButton::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 14px;
  background-color: #ffffff;
  clip-path: polygon(
    16.67% 14.29%,
    25% 7.14%,
    83.33% 50%,
    25% 92.86%,
    16.67% 85.71%,
    66.67% 50%
  );
  transform: translateY(calc(-50% - 1px));
  transition: background-color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .aboutSection .viewMoreButton:hover {
    background-color: #ffffff;
    color: #000000;
  }

  .aboutSection .viewMoreButton:hover::after {
    background-color: #000000;
  }
}

/* ==========================================
           レスポンシブ対応 (PCサイズ: 768px以上)
           ========================================== */
@media screen and (min-width: 768px) {
  .aboutSection {
    padding: 150px 0 156px 0 !important;
  }

  /* ★PCサイズ時：最外枠のセクションパディング（150px）を基準に、
     タイトルエリアの高さ中央にブレなく正確に重なるよう位置を固定 */
  .aboutEn {
    top: calc(150px + (clamp(5.7rem, 10.4vw, 11.2rem) / 2));
    transform: translate(-50%, -50%);
    margin-top: 6px; /* PCサイズでも視覚的な「若干上め」の比率を維持 */
  }

  /* PC時は左右2カラムの横並びへ */
  .aboutFlexContainer {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0;
  }

  /* 左側テキストの幅調整 */
  .aboutTextBlock {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* 日本語タイトルを完全に上下中央揃え */
  .aboutTitleLeft {
    height: clamp(5.7rem, 10.4vw, 11.2rem);
    display: flex;
    align-items: center;
    margin-top: 0;
  }

  /* 右側のリード文・ボタンコンテナ */
  .aboutTitleRight {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 80px;
  }

  /* 右側画像の幅調整 */
  .aboutImageBlock {
    width: 48.39%;
    display: flex;
    align-items: center;
  }

  .aboutDescription {
    margin-bottom: 80px;
    text-align: left;
  }

  .aboutImageHolder {
    margin-bottom: 0;
  }

  .aboutSection .viewMoreContainer {
    text-align: left;
  }

  /* PCサイズ時：Figma指定サイズ（274px × 64px）へ可変拡張 */
  .aboutSection .viewMoreButton {
    width: 274px;
    height: 64px;
    padding-left: 32px;
  }

  .aboutSection .viewMoreButton::after {
    right: 32px;
  }
}

/* ==========================================================================
   新着情報（NEWS）セクション
   ========================================================================== */
.newsSection {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  padding: 56px 0 56px 0 !important;
}

/* 共通インナー（文字より前面に出す） */
.newsInner {
  position: relative;
  z-index: 5;
}

/* 背面の巨大な英語テキスト（一番外側のセクションを基準にすることで、ズレを完全に根絶） */
.newsEn {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  color: #f4f4f4;
  font-size: clamp(7.2rem, 13vw, 14rem);
  text-transform: uppercase;
  line-height: 0.8;

  /* 余白なしで画面の左端に密着させる共通設計 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding-left: 0;
  text-align: left;

  /* 重なり順：最背面に配置 */
  z-index: 1;
  user-select: none;
  letter-spacing: 0;

  /* スマホ表示時：上部パディング（56px）から日本語タイトルの位置にピタッと合わせる */
  top: 56px;
}

/* ==========================================
           レイアウトコンテナ（タイトル & お知らせリスト）
           ========================================== */
.newsFlexContainer {
  display: flex;
  flex-direction: column;
  gap: 35px;
  position: relative;
  z-index: 2;
}

/* --- 左側：タイトルブロック --- */
.newsTitleBlock {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* スマホ表示時：「NEWS」の背面テキストと重ねるための高さを制御 */
.newsTitleLeft {
  height: clamp(
    5.7rem,
    10.4vw,
    11.2rem
  ); /* 英語テキストのline-heightを含む高さと一致させる */
  display: flex;
  align-items: center;
  margin-top: -6px;
  position: relative;
  z-index: 10;
}

.newsJpTitle {
  color: #000000;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-left: 36px;
}

/* 二重の円の装飾（これまでの赤を完全に継承） */
.newsJpTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: rgba(230, 22, 21, 0.4);
  border-radius: 50%;
  display: block;
}

.newsJpTitle::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #e61615;
  border-radius: 50%;
  display: block;
}

/* --- 右側：お知らせリストブロック --- */
.newsListBlock {
  width: 100%;
  position: relative;
  z-index: 10;
  margin-top: 10px;
}

/* 各お知らせの区切り枠 */
.newsItem {
  border-bottom: 1px solid #e5e5e5;
  padding: 30px 0;
}

.newsItem:first-child {
  padding-top: 0;
}

/* 日付とタイトルエリア */
.newsMeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.newsDate {
  color: rgba(0, 0, 0, 0.2);
  font-weight: 400;
  letter-spacing: 0;
}

.newsItemTitle {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  line-height: 1.4;
  margin: 0;
}

/* お知らせの本文テキスト */
.newsText {
  color: #000000;
  letter-spacing: 0;
  margin: 0 0 15px 0;
  text-align: justify;
}

.newsItem .newsText:last-child {
  margin-bottom: 0;
}

/* テキストリンク（「詳しくはこちら」） */
.newsLink {
  display: inline-block;
  color: #e61615; /* ブランドカラーの赤 */
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: underline;
  margin-top: 10px;
  transition: color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .newsLink:hover {
    color: #b81110;
  }
}

/* 画像付きの場合の3列グリッド */
.newsImageGrid {
  display: flex;
  flex-direction: column; /* スマホ時は縦並び */
  gap: 12px;
  margin-top: 15px;
}

.newsDummyImage {
  flex: 1;
  aspect-ratio: 16 / 9; /* スマホ縦並び時に間延びして巨大化するのを防ぐスタイリッシュな比率 */
  background-color: #d9d9d9;
}

/* ==========================================
           レスポンシブ対応 (PCサイズ: 768px以上)
           ========================================== */
@media screen and (min-width: 768px) {
  .newsSection {
    padding: 146px 0 117px 0 !important;
  }

  /* PCサイズ時：最外枠のセクションパディング（146px）を基準に、
     タイトルエリアの高さ中央にブレなく正確に重なるよう位置を固定 */
  .newsEn {
    top: calc(146px + (clamp(5.7rem, 10.4vw, 11.2rem) / 2));
    transform: translate(-50%, -50%);
    margin-top: 6px; /* PCサイズでも視覚的な「若干上め」の比率を維持 */
  }

  /* PC時はタイトルとリストを左右2カラムの横並びへ */
  .newsFlexContainer {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch; /* 左右のブロック高さを同期させて整列の基準を作る */
    gap: 0;
  }

  /* 左側タイトルの幅 */
  .newsTitleBlock {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* 日本語タイトルを完全に上下中央揃え */
  .newsTitleLeft {
    height: clamp(5.7rem, 10.4vw, 11.2rem);
    display: flex;
    align-items: center;
    margin-top: 0;
  }

  /* 右側お知らせリストの幅 */
  .newsListBlock {
    width: 65%;
    margin-top: 0;
    /* 左の日本語タイトル中央軸から1件目の文章が綺麗に流れるようにマージンとパディングを最適化 */
    padding-top: 18px;
  }

  /* 各お知らせの区切り枠（PC用調整） */
  .newsItem {
    padding: 40px 0;
  }

  .newsItem:first-child {
    padding-top: 0;
  }

  /* PC時は日付とタイトルを美しいインライン横並びへ */
  .newsMeta {
    flex-direction: row;
    gap: 30px;
    align-items: center;
    margin-bottom: 10px;
  }

  .newsDate {
    min-width: 80px; /* 日付の幅を固定 */
  }

  .newsItemTitle {
    font-size: 16px;
  }

  .newsText {
    padding-left: 0;
    margin-bottom: 0;
    text-align: left;
  }

  .newsLink {
    margin-left: 0;
    margin-bottom: 0;
  }

  .newsImageGrid {
    flex-direction: row;
    margin-left: 0;
    gap: 20px;
  }

  .newsDummyImage {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   お問合せ（CONTACT）セクション（完全改修・中央寄せ連動版）
   ========================================================================== */
.contactSection {
  background-color: #000000;
  position: relative;
  overflow: hidden;
  padding: 56px 0 0 0 !important;
}

/* 背面の巨大な英語テキスト（一番外側のセクションを基準にすることで、ズレを完全に根絶） */
.contactEn {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  color: #1c1c1c;
  font-size: clamp(
    7.2rem,
    13vw,
    14rem
  ); /* 他セクションと最大の大きさを完全に同期 */
  text-transform: uppercase;
  line-height: 0.8;

  /* 画面中央を基準にしてぴったり真ん中に重ねる共通設計 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  text-align: center;

  /* 重なり順：最背面に配置 */
  z-index: 1;
  user-select: none;
  letter-spacing: 0.02em;
  white-space: nowrap;

  /* スマホ表示時：上部パディング（56px）から日本語タイトルの位置にピタッと合わせる */
  top: 56px;
}

/* 共通インナークラス */
.contactInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
  position: relative;
  z-index: 5;
}

/* ==========================================
           ヘッダーエリア（お問合せ / リード文）
           ========================================== */
.contactHead {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 40px;
}

/* スマホ表示時：「CONTACT」の背面テキストと重ねるための高さを制御（他セクションと同期） */
.contactTitleLeft {
  height: clamp(
    5.7rem,
    10.4vw,
    11.2rem
  ); /* 英語テキストのline-heightを含む高さと一致させる */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -6px;
  position: relative;
  z-index: 10;
}

.contactJpTitle {
  color: #ffffff;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-left: 36px;
  z-index: 10; /* 英語テキストより確実に前面に出す */
}

/* 二重の円の装飾（これまでの赤を完全に継承） */
.contactJpTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: rgba(230, 22, 21, 0.5);
  border-radius: 50%;
  display: block;
}

.contactJpTitle::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #e61615;
  border-radius: 50%;
  display: block;
}

/* 中央のリードテキスト */
.contactLeadText {
  position: relative;
  z-index: 10;
  margin-top: 20px;
}

/* ==========================================
           お問合せ白いコンテナボード
           ========================================== */
.contactContentBoard {
  background-color: #ffffff;
  color: #000000;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  border-radius: 10px;
  position: relative;
  z-index: 10;
}

/* --- 電話お問い合わせエリア --- */
.contactTelZone {
  text-align: center;
  padding: 20px 0 20px 0;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  max-width: 585px;
  margin: 0 auto 40px auto;
}

.contactTelNumber {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.6vw, 5.6rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.contactTelMeta {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1.78;
  color: #000000;
  margin: 0;
  letter-spacing: 0.05em;
}

/* --- フォーム埋め込み用エリア --- */
.contactFormPlaceholder {
  width: 100%;
}

/* ==========================================
           レスポンシブ対応 (PCサイズ: 768px以上)
           ========================================== */
@media screen and (min-width: 768px) {
  .contactSection {
    padding: 140px 0 0 0 !important;
  }

  /* PCサイズ時：最外枠のセクションパディング（140px）を基準に、
     タイトルエリアの高さ中央にブレなく正確に重なるよう位置を固定 */
  .contactEn {
    top: calc(140px + (clamp(5.7rem, 10.4vw, 11.2rem) / 2));
    transform: translate(-50%, -50%);
    margin-top: 6px; /* PCサイズでも視覚的な「若干上め」の比率を維持 */
  }

  .contactHead {
    margin-bottom: 84px;
    padding-top: 0; /* 高さは.contactTitleLeftで担保するためリセット */
  }

  /* 日本語タイトルを完全に上下左右の中央揃え */
  .contactTitleLeft {
    height: clamp(5.7rem, 10.4vw, 11.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .contactLeadText {
    margin-top: 50px;
  }

  .contactContentBoard {
    padding: 100px 60px 70px 60px;
  }

  .contactTelZone {
    padding: 46px 0 46px 0;
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 767px) {
  .contactFormPlaceholder iframe {
    width: 100%;
    height: 700px !important; /* スマホでのフォーム表示に適した高さ */
  }
}

/* service_paint カスタムペイント_鈑金塗装 */
.customPageContainer {
  width: 100%;
  padding-top: 130px;
  overflow-x: hidden;
}

.customPageInner {
}

/* 共通フォント定義 */
.customPaintMainTitleEn,
.bodyworkMainTitleEn,
.customPaintServiceSectionTitle,
.customPaintServiceCardTitleEn {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0;
}

/* ===================================================
   1. CUSTOM PAINT（カスタムペイント）セクション【黒背景】
==================================================== */
.customPaintSection {
  padding: 110px 0 148px 0 !important;
  background-color: #000000;
  color: #ffffff;
}

/* ローカルナビゲーション */
.customPaintLocalNav {
}
.customPaintLocalNavList {
  display: flex;
  gap: 20px;
  list-style: none;
}
.customPaintLocalNavLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ffffff;
  padding: 18px 24px;
  width: 274px;
  background-color: transparent;
  text-decoration: none;
  color: #ffffff;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
.customPaintLocalNavLinkText {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}

@media print, screen and (min-width: 768px) {
  .customPaintLocalNavLink:hover {
    background-color: #ffffff;
    color: #000000;
  }
}

.customPaintLocalNavLinkIcon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  transform: rotate(45deg);
  margin-top: -6px;
}

@media print, screen and (min-width: 768px) {
  .customPaintLocalNavLink:hover .customPaintLocalNavLinkIcon {
    border-color: #000000;
  }
}

/* セクションメインヘッダー */
.customPaintMainHeader {
}
.customPaintMainTitleEn {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.6rem, 7.2vw, 7.2rem);
  letter-spacing: 0;
  line-height: 1;
}
.customPaintMainTitleJa {
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-top: 20px;
}

/* 「選ばれる4つの理由」コンテナ */
.customPaintFeatureContainer {
  margin-top: 112px;
}
.customPaintSubSectionTitle {
  background-color: #1c1c1c;
  padding: 15px 25px;

  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 83px;
}

/* ジグザグ行レイアウト（PC基本設定） */
.customPaintFeatureRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 95px;
  margin-bottom: 90px;
}

/* ★修正：01, 03（奇数番目）の行を左右反転させ、画像が右側にくるように変更 */
.customPaintFeatureRow:nth-child(odd) {
  flex-direction: row-reverse;
}

.customPaintFeatureTextCol {
  flex: 1;
  max-width: 500px;
}
.customPaintFeatureNum {
  display: block;
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.2rem, 5.6vw, 5.6rem);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 30px;
}
.customPaintFeatureTitle {
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
}
.customPaintFeatureDesc {
}
.customPaintFeatureImgCol {
  flex: 1;
  max-width: 660px;
}
.customPaintFeatureImg {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   詳細サービス（Service Custom Paint 横スクロール・動画最適化仕様）
   ========================================================================== */
.customPaintServiceContainer {
  margin-top: 154px;
  /* 親のmax-width（インナー幅）を無視して画面右端まで突き抜けさせる設定 */
  width: auto;
  margin-right: calc(50% - 50vw);
}

.customPaintServiceSectionTitle {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 28px;
  /* タイトルだけは元のインナー幅（右側の余白）に合わせるための設定 */
  padding-right: calc(50vw - 50%);
}

/* ラッパー：はみ出た要素のスクロールエリアを定義 */
/* --- スクロールバー全体の挙動設定 --- */
.customPaintServiceScrollArea {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* 標準仕様（Firefox用）の割り当て：バーを細く、色を調整 */
  scrollbar-width: thin;
  scrollbar-color: #444444 #111111;

  /* コンテンツとスクロールバーの間の余白 */
  padding-bottom: 25px;
}

/* --- Webkit系ブラウザ（Chrome, Safari, Edgeなど）用の装飾 --- */

/* 1. スクロールバー全体のサイズ（横スクロールなので「高さ」を指定） */
.customPaintServiceScrollArea::-webkit-scrollbar {
  height: 4px;
}

/* 2. スクロールバーの背景（レール部分） */
.customPaintServiceScrollArea::-webkit-scrollbar-track {
  background: #111111;
  border-radius: 10px;
}

/* 3. 動くつまみ（ハンドル）部分 */
.customPaintServiceScrollArea::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 10px;
  transition: background 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  /* 4. マウスホバー時につまみの色を少し明るくして操作感を出す */
  .customPaintServiceScrollArea::-webkit-scrollbar-thumb:hover {
    background: #666666;
  }
}

/* Flexコンテナ：常に横並び一行に固定 */
.customPaintServiceFlex {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  /* スクロールした最後、右端に余白（突き抜け感）を残すための調整 */
  padding-right: calc(50vw - 50%);
}

/* 各カード：PCでの固定幅設定 */
.customPaintServiceCard {
  flex: 0 0 auto; /* 固定幅を崩さない */
  scroll-snap-align: start;
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: 780px; /* 動画355px + 隙間32px + テキスト約390px = おおよそ780px */
}

/* 動画表示エリア */
.customPaintServiceVideoWrapper {
  flex: 0 0 355px;
  height: 585px;
  background-color: #111111;
  margin-bottom: 0;
  overflow: hidden;
}
.customPaintServiceVideo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* テキストコンテンツエリア */
.customPaintServiceContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.customPaintServiceCardTitleEn {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3rem, 4vw, 4rem);
  letter-spacing: 0;
  line-height: 1;
}
.customPaintServiceCardTitleJa {
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 28px;
}
.customPaintServiceCardDesc {
  letter-spacing: 0;
  text-align: justify;
}

.customPaintServiceBottomLine {
}

/* ==========================================
   参考価格表
   ========================================== */
.customPaintPriceContainer {
  margin-top: 150px;
}

.customPaintPriceSectionTitle {
  background-color: #1c1c1c;
  padding: 15px 25px;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 63px;
}

/* テーブルを囲むラッパー
   ※SP（ブレイクポイント）までは横スクロールさせないため、
   初期状態では overflow を制御し、PCでは100%幅で伸縮させる。
*/
.customPaintTableWrapper {
  width: 100%;
}

/* テーブル本体 */
.customPaintPriceTable {
  width: 100%;
  border-collapse: collapse;
  color: #000000;
  background-color: #ffffff;
  table-layout: fixed;
  margin-top: 1px;
  letter-spacing: 0;
}

/* --- ヘッダー（th）の調整 --- */
.customPaintPriceTable th {
  background-color: #e61615;
  color: #ffffff;
  font-weight: bold;
  padding: 6.5px 10px;
  text-align: center;

  /* 外周（上・左右）には線を引かない */
  border-top: none;
  border-bottom: none;
  border-left: none;
  /* 内側の境界線として、右側にだけ白線を引く */
  border-right: 1px solid #ffffff;
}

/* 一番右端の th は、テーブルの「一番外の右」になるので白線を消す */
.customPaintPriceTable th:last-child {
  border-right: none;
}

/* 施工内容（幅比率: 30%） */
.customPaintPriceTable th.customPaintThContent {
  width: 30%;
  padding-left: 20px;
}

/* クラスA〜F（残り70%を6等分） */
.customPaintPriceTable th:not(.customPaintThContent) {
  width: calc(70% / 6);
}

/* --- データセル（td）の調整 --- */
.customPaintPriceTable td {
  padding: 6.5px 8px;
  text-align: center;

  /* 外周（上・左）には線を引かない */
  border-top: none;
  border-left: none;
  /* 内側の境界線として、下と右にだけグレーの線を引く */
  border-bottom: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}

/* 一番右端の列の td は、テーブルの「一番外の右」になるのでグレーの線を消す */
.customPaintPriceTable td:last-child {
  border-right: none;
}

/* 一番最後の行の td は、テーブルの「一番外の下」になるのでグレーの線を消す */
.customPaintPriceTable tbody tr:last-child td {
  border-bottom: none;
}

.customPaintPriceTable td.customPaintTdContent {
  text-align: left;
  padding-left: 26px;
}

/* --- 注記・その他 --- */
.customPaintPriceNotes {
  margin-top: 30px;
  padding-left: 1em;
  text-indent: -1em;
  text-align: justify;
}

/* ===================================================
   2. BODYWORK（鈑金塗装）セクション【白背景】
==================================================== */
.bodyworkSection {
  padding: 157px 0 140px 0 !important;
  background-color: #ffffff;
  color: #000000;
}
.bodyworkMainHeader {
  margin-bottom: 68px;
}
.bodyworkMainTitleEn {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.6rem, 7.2vw, 7.2rem);
  letter-spacing: 0;
  line-height: 1;
  color: #000000;
}
.bodyworkMainTitleJa {
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #000000;
  margin-top: 20px;
}

.bodyworkLeadBlock {
  margin-bottom: 70px;
}
.bodyworkLeadTitle {
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.33;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}
.bodyworkLeadDesc {
  color: #000000;
}
.bodyworkLeadDescSpacer {
}
.bodyworkGridContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 140px;
}
.bodyworkGridCard {
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  width: calc(33.333% - 8px);
  padding: 45px 30px 24px 30px;
  display: flex;
  flex-direction: column;
}
.bodyworkCardIconWrapper {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.bodyworkCardIcon {
  max-height: 100%;
  width: auto;
}
.bodyworkCardTitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.bodyworkCardDesc {
  color: #000000;
}

/* よくある質問（FAQ） */
.bodyworkFaqContainer {
}
.bodyworkFaqSectionTitle {
  background-color: #f4f4f4;
  color: #000000;
  padding: 15px 25px;

  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 48px;
}
.bodyworkFaqList {
  display: flex;
  flex-direction: column;
}
.bodyworkFaqItem {
  border-bottom: 1px solid #000000;
  padding: 50px 0;
}
.bodyworkFaqItem:first-child {
  padding-top: 0;
}
.bodyworkFaqItem:last-child {
  border-bottom: 1px solid #000000;
}

.bodyworkFaqQuestionRow,
.bodyworkFaqAnswerRow {
  display: flex;
  align-items: flex-start;
}
.bodyworkFaqQuestionRow {
  margin-bottom: 20px;
}

.bodyworkFaqLabelQ,
.bodyworkFaqLabelA {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1;
  width: 50px;
  flex-shrink: 0;
}
.bodyworkFaqLabelQ {
  color: #000000;
}
.bodyworkFaqLabelA {
  color: #000000;
}

.bodyworkFaqQuestionText {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  color: #000000;
}
.bodyworkFaqAnswerText {
  color: #000000;
  max-width: 1039px;
  letter-spacing: 0;
}
.bodyworkFaqAnswerText p {
  margin-bottom: 4px;
}
.bodyworkFaqAnswerText p:last-child {
  margin-bottom: 0;
}

/* ===================================================
   レスポンシブ・メディアクエリ（ブレイクポイント）
==================================================== */
@media print, screen and (min-width: 768px) {
  .customPaintServiceCardDesc {
    max-width: 309px; /* PCでのテキスト幅を動画とバランスの取れた約310pxに制限 */
  }
  .bodyworkLeadDescSpacer {
    text-align: left;
  }
}

/* タブレットサイズ */
@media screen and (max-width: 992px) {
  .bodyworkGridCard {
    width: calc(50% - 12px);
    padding: 35px 20px;
  }
  .customPaintServiceFlex {
    gap: 30px;
  }
  .customPaintServiceCard {
    flex: 0 0 380px;
  }
}

/* スマートフォンサイズ */
@media screen and (max-width: 768px) {
  .customPaintSection {
    padding: 56px 0 56px 0 !important;
  }
  .bodyworkSection {
    padding: 56px 0 56px 0 !important;
  }
  .customPageContainer {
    padding-top: 56px;
  }
  .customPageInner {
  }

  /* ローカルナビ */
  .customPaintLocalNavList {
    flex-direction: column;
    gap: 12px;
  }
  .customPaintLocalNavLink {
    width: 222px;
    height: 52px;
    margin: 0 auto;
  }

  /* メインヘッダーフォント縮小 */
  .customPaintMainTitleEn,
  .bodyworkMainTitleEn {
  }

  .customPaintPriceContainer {
    margin-top: 40px;
  }

  .customPaintFeatureContainer {
    margin-top: 40px;
  }

  .customPaintMainTitleJa,
  .bodyworkMainTitleJa {
    margin-top: 5px;
  }

  .customPaintSubSectionTitle,
  .customPaintPriceSectionTitle,
  .bodyworkFaqSectionTitle {
    margin-bottom: 30px;
  }

  /* 01〜04理由リスト：縦並び＋順序統一化（上画像・下テキスト） */
  .customPaintFeatureRow,
  .customPaintFeatureRow:nth-child(odd) {
    flex-direction: column-reverse; /* PC用の反転設定をスマホですべて同一順序に上書き */
    gap: 25px;
    margin-bottom: 60px;
  }
  .customPaintFeatureTextCol,
  .customPaintFeatureImgCol {
    max-width: 100%;
    width: 100%;
  }
  .customPaintFeatureNum {
    margin-bottom: 5px;
  }
  .customPaintFeatureTitle {
    margin-bottom: 15px;
  }
  .customPaintFeatureDesc {
    text-align: justify;
  }

  /* スマートフォン向け横スクロール微調整 */
  .customPaintServiceContainer {
    margin-top: 56px;
    margin-right: 0;
  }
  .customPaintServiceSectionTitle,
  .customPaintServiceBottomLine {
    padding-right: 0;
    margin-right: 0;
  }
  .customPaintServiceFlex {
    gap: 20px;
    padding-right: 0;
  }
  .customPaintServiceCard {
    flex: 0 0 85%;
    flex-direction: column;
    width: auto;
    gap: 0;
  }
  .customPaintServiceVideoWrapper {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 355 / 585;
    height: auto;
    margin-bottom: 25px;
  }

  .customPaintServiceContent {
    justify-content: flex-start;
  }

  /* 価格表テーブルの横スクロール */
  .customPaintTableWrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .customPaintPriceTable {
    /* SP画面では縮みすぎると崩れるため、固定幅を持たせてスクロールさせる */
    min-width: 1000px;
    table-layout: auto;
  }

  .customPaintPriceTable td.customPaintTdContent {
    padding-left: 8px;
  }

  /* リード文調整 */
  .bodyworkMainHeader {
    margin-bottom: 40px;
  }
  .bodyworkLeadTitle {
    line-height: 1.6;
  }

  .bodyworkLeadBlock {
    margin-bottom: 40px;
  }

  .bodyworkLeadDesc {
    text-align: justify;
  }

  /* 6個のグリッドカード：完全1列化 */
  .bodyworkGridContainer {
    gap: 16px;
    margin-bottom: 56px;
  }
  .bodyworkGridCard {
    width: 100%;
    padding: 30px 20px;
    text-align: center;
  }

  /* FAQスペース微調整 */
  .bodyworkFaqItem {
    padding: 20px 0;
  }
  .bodyworkFaqLabelQ {
    line-height: 1.9;
    width: 24px;
  }

  .bodyworkFaqLabelA {
    line-height: 1.4;
    width: 24px;
  }

  .bodyworkFaqQuestionText {
  }
  .bodyworkFaqAnswerText {
    line-height: 1.8;
  }
  .bodyworkFaqQuestionRow {
    margin-bottom: 15px;
  }
}

/* service_sales 車買取・販売/コーティング */
/* 全体を包むコンテナ */
.pageWrapper {
  width: 100%;
  padding-top: 130px;
  overflow: hidden;
}

.sectionInner {
}

/* 共通セクションタイトル */
.sectionTitleEn {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.6rem, 7.2vw, 7.2rem);
  letter-spacing: 0;
  line-height: 1;
}
.sectionTitleJa {
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 20px;
}

/* ===================================================
   1. BUYING & SELLING セクション（黒背景）
==================================================== */
.buyingSellingSection {
  background-color: #000000;
  color: #ffffff;
  padding: 110px 0 152px 0 !important;
}

/* ローカルナビゲーション（ヘッダーとの競合を完全に回避） */
.localNav {
}
.localNavList {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.localNavItem {
  flex: none; /* header.php 側の .navItem { flex: 1; } の影響をリセット */
  text-align: left;
}
.localNavLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ffffff;
  padding: 18px 24px;
  width: 274px;
  background-color: transparent;
  text-decoration: none;
  color: #ffffff;
  transition: opacity 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .localNavLink:hover {
    background-color: #ffffff;
    color: #000000;
  }
}

.localNavLinkText {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}
/* 下向きのV字矢印 */
.localNavLinkIcon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  transform: rotate(45deg);
  margin-top: -4px;
}

@media print, screen and (min-width: 768px) {
  .localNavLink:hover .localNavLinkIcon {
    border-color: #000000;
  }
}

/* メインコンテンツ配置 */
.buyingSellingContent {
}

.buyingSellingContent .sectionHeader {
  margin-bottom: 112px;
}

.buyingSellingBody {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.leadBlock {
  max-width: 700px;
}
.leadTitle {
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  line-height: 1.33;
  font-weight: 500;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
}
.leadText {
  letter-spacing: 0;
}
.leadText p {
}
.leadText .textSpacer {
  margin-top: 30px;
}

/* 右下ボタン */
.buttonArea {
  margin-bottom: 10px;
}
.primaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  color: #000000;
  text-decoration: none;
  width: 274px;
  height: 64px;
  padding-left: 24px;
  position: relative;
  box-sizing: border-box;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* 右向きの＞矢印 */
.primaryButton:after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 14px;
  background-color: #000000;
  clip-path: polygon(
    16.67% 14.29%,
    25% 7.14%,
    83.33% 50%,
    25% 92.86%,
    16.67% 85.71%,
    66.67% 50%
  );
  transition: background-color 0.3s ease;
}

@media print, screen and (min-width: 768px) {
  .primaryButton:hover {
    background-color: #000000;
    color: #ffffff;
  }

  .primaryButton:hover:after {
    background-color: #ffffff;
  }
}

/* ===================================================
   2. COATING セクション（白背景）
==================================================== */
.coatingSection {
  background-color: #ffffff;
  color: #000000;
  padding: 157px 0 148px 0 !important;
}

.coatingSection .sectionHeader {
  margin-bottom: 40px;
}

/* 上段：紹介エリア（2カラム） */
.coatingIntroRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 90px;
}

.introTextCol {
  flex: 1;
  max-width: 550px;
}

.introText {
  color: #000000;
  letter-spacing: 0;
}
.introText p {
}

.introImageCol {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.imageWrapperInner {
  width: 100%;
  max-width: 540px;
}
.introImage {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 下段：おすすめ提案エリア */
.recommendContainer {
  width: 100%;
  margin-top: 40px;
}
.recommendMainTitle {
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  line-height: 1.9em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  letter-spacing: 0.05em;
}

/* カード並び：Flexboxで上3・下2を美しく中央寄せ */
.recommendFlex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 2段目を中央に寄せる */
  gap: 12px;
}

/* 各カードのベース */
.recommendCard {
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  width: calc(33.333% - 8px);
  min-width: 300px;
  padding: 40px 20px 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cardTarget {
  font-size: 16px;
  color: #000000;
}

.cardSolution {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: normal;
  color: #000000;
}

/* V字の点線・矢印装飾 */
.cardDecoration {
  width: 104px;
  height: 24px;
  margin: 17px auto 12px;
  background-image: url("../images/service_sales/dec_card_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ===================================================
   レスポンシブ・メディアクエリ（タブレット・スマホ対応）
==================================================== */
@media screen and (max-width: 992px) {
  /* カードレイアウトをPCの3カラムから2カラムへ調整 */
  .recommendCard {
    width: calc(50% - 12px);
  }
}

@media screen and (max-width: 768px) {
  .pageWrapper {
    padding-top: 56px;
  }
  .buyingSellingSection {
    padding: 56px 0 56px 0 !important;
  }
  .sectionInner {
  }
  /* ローカルナビゲーションのスマホ対応 */
  .localNavList {
    flex-direction: column;
    gap: 12px;
  }
  .localNavLink {
    width: 222px;
    height: 52px;
    margin: 0 auto;
  }

  /* BUYING & SELLING セクションの縦並び化 */
  .buyingSellingContent .sectionHeader {
    margin-bottom: 40px;
  }
  .sectionTitleJa {
    margin-top: 5px;
  }
  .buyingSellingBody {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .primaryButton {
    width: 222px;
    height: 52px;
  }
  .leadTitle {
  }

  /* COATING セクション紹介の縦並び化 */
  .coatingSection {
    padding: 56px 0 56px 0 !important;
  }
  .coatingIntroRow {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
  }
  .introTextCol,
  .introImageCol {
    max-width: 100%;
    width: 100%;
  }
  .sectionTitleEn {
  }

  /* カードレイアウトを完全な1カラム縦積みに */
  .recommendFlex {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .recommendCard {
    width: 100%;
    min-width: 100%;
    padding: 35px 16px;
  }
  .recommendMainTitle {
    margin-bottom: 40px;
  }
}

/* Works 施工事例 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* 施工事例一覧 共通セクションヘッダー調整 */
.worksPageContainer .worksSection {
  padding: 130px 0 0 0 !important;
}

/* 画像コンテナ（アスペクト比 3:2 を維持してトリミング） */
.worksPageContainer .imageContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #222222;
}

.worksPageContainer .imageContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ==========================================================================
   施工事例一覧ページ（グリッドレイアウト）
   ========================================================================== */
.worksPageContainer .worksGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.worksCard {
  background-color: #1c1c1c;
  display: flex;
  flex-direction: column;
}

.cardInnerLink {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* URLがない（リンク無効）時の設定
   pointer-events: none により、クリックもホバー反応も完全にシャットアウトする */
.cardInnerLink.noLink {
  pointer-events: none;
  cursor: default;
}

.cardContent {
  padding: 24px;
  /* 右下に配置されるMOREボタン（横幅80px）とテキストが重ならないよう余白を確保 */
  padding-right: 96px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  min-height: 170px;
}

.cardContent .cardCategory {
  font-size: 12px;
  font-weight: 700;
  line-height: 2.67;
  color: #ffffff;
  margin-bottom: 8px;
  display: block;
}

.cardTitle {
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 700;
  line-height: 2;
  margin: 0;
  color: #ffffff;
  letter-spacing: 0;
}

/* カンプ再現のMOREボタン（右下固定の赤座布団） */
.moreButton {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: #e61615;
  color: #ffffff;
  font-family: "STIX Two Text", serif;
  font-weight: 400;
  transition: background-color 0.3s ease;
}

/* ==========================================================================
   PC用ホバーエフェクト（リンクが有効な場合のみ反応）
   ========================================================================== */
@media print, screen and (min-width: 768px) {
  /* :not(.noLink) を使うことで、リンクがない時は拡大しない */
  .cardInnerLink:not(.noLink):hover .imageContainer img {
    transform: scale(1.05);
  }

  /* リンクがない時はボタンの色も変わらない */
  .cardInnerLink:not(.noLink):hover .moreButton {
    background-color: #b31212;
  }
}

/* ==========================================================================
   レスポンシブ対応（Media Queries）
   ========================================================================== */

/* タブレット・中画面（960px以下） */
@media (max-width: 960px) {
  .worksPageContainer .worksGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* スマートフォン（560px以下） */
@media (max-width: 560px) {
  .worksPageContainer .worksSection {
    padding: 56px 0 0 0 !important;
  }
  .worksPageContainer .worksGrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .cardContent {
    padding: 16px;
    padding-right: 76px;
    min-height: auto;
  }
  .moreButton {
    width: 60px;
    height: 60px;
  }
}

/* About 会社概要 */
/* ==========================================================================
   コンセプトセクション
   ========================================================================== */
.conceptSection {
  padding: 126px 0 0 0 !important;
}

.conceptTitle {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  line-height: 1;
  font-size: 40px;
  font-weight: normal;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.conceptText {
  margin-bottom: 35px;
  letter-spacing: 0;
}

.conceptText p {
}

.conceptSignature {
  text-align: right;
  font-size: 15px;
  letter-spacing: 0;
  color: #ffffff;
}

.conceptSignature span {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.6;
}

/* ==========================================================================
   スタッフセクション
   ========================================================================== */
.staffSection {
  padding: 56px 0 56px 0 !important;
}

.sectionHeader {
  margin-bottom: 40px;
}

.sectionMainTitle {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.6rem, 7.2vw, 7.2rem);
  letter-spacing: 0;
  line-height: 1;
}

.sectionSubTitle {
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin-top: 20px;
}

.staffGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.staffCard {
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a;
  aspect-ratio: 320 / 380;
}

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

.staffInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px;
  /* Figmaの「見た目」を再現するために、中間点を追加して濃い部分を広げるイージング */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 45%,
    /* 濃い部分を長く保持し、上部で急に消えるようにする */ rgba(0, 0, 0, 0) 100%
  );
}

.staffName {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 5px;
}

.staffTitle {
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  line-height: 2;
}

.staffRole {
  letter-spacing: 0;
}

/* ==========================================================================
   PCレイアウト（768px以上）
   ========================================================================== */
@media print, screen and (min-width: 768px) {
  .staffSection {
    padding: 126px 0 178px 0 !important;
  }
  /* .inner の中でヘッダーとグリッドを左右に並べる */
  .staffSection .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .sectionHeader {
    margin-bottom: 0;
  }

  /* 右側の3枚のカードエリアの幅調整 */
  .staffGrid {
    width: 83.87%; /* 3枚のカードとgapを含めた全体幅を調整 */
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: flex-start;
  }

  .staffCard {
    aspect-ratio: 320 / 380;
  }

  /* 右端（藤井さん）を基準(0)とし、中央、左へと段階的に80pxずつ下げる */
  .staffCard.cardRight {
    margin-top: 0;
  }

  .staffCard.cardCenter {
    margin-top: 80px;
  }

  .staffCard.cardLeft {
    margin-top: 160px;
  }
}

/* ==========================================================================
   タブレット・スマホ特有の微調整（767px以下）
   ========================================================================== */
@media (max-width: 767px) {
  .conceptSection {
    padding: 56px 0 0 0 !important;
  }
  .conceptTitle {
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 1.4;
  }

  .conceptText {
    text-align: justify;
  }
}

/* ==========================================================================
   会社情報セクション（COMPANY）
   ========================================================================== */
.companySection {
  padding: 157px 0 117px 0 !important;
  background: #ffffff;
  color: #000000;
}

.companySection .sectionHeader {
  margin-bottom: 40px;
}

.companySection .sectionMainTitle {
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.6rem, 7.2vw, 7.2rem);
  letter-spacing: 0;
  line-height: 1;
}

.companySection .sectionSubTitle {
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: #000000;
  letter-spacing: 0.05em;
  margin-top: 20px;
}

/* 表が入るコンテナ */
.companyContent {
  width: 100%;
  margin-top: 40px;
}

.companyTablePlaceholder {
  width: 100%;
}

/* ==========================================================================
   PCレイアウト（768px以上）
   ========================================================================== */
@media print, screen and (min-width: 768px) {
  .companySection .sectionHeader {
    margin-bottom: 0;
  }

  /* 右側の表エリアの幅調整 */
  .companyContent {
    width: 65.56%; /* 表の幅を調整 */
    margin-top: 85px;
    margin-left: auto;
  }
}

/* ==========================================================================
   タブレット・スマホ特有の微調整（767px以下）
   ========================================================================== */
@media (max-width: 767px) {
  .companySection {
    padding: 56px 0 56px 0 !important;
  }

  .companySection .sectionMainTitle {
  }

  .companySection .sectionSubTitle,
  .sectionSubTitle {
    margin-top: 5px;
  }
}