@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;
}

/* ==========================================================================
   Head Section
   ========================================================================== */
.Head {
  position: relative; /* 疑似要素の基準 */
  overflow: hidden; /* 疑似要素のはみ出し防止 */
  background: #00142d;
  color: #ffffff;
  /* SP時のパディング：下部に角丸(20px)が入るため、少し多め(80px)に設定 */
  padding: 100px 0 80px 0;
}

/* 英語の見出し */
.Head .en {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(5.6rem, 8.8vw, 8.8rem);
  line-height: 1.3em;
  margin-bottom: 4px;

  /* アニメーション設定 */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

/* 日本語の見出し */
.Head h1 {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.1em;

  /* アニメーション設定 */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.4s;
}

/* 白い角丸を表現する疑似要素（デフォルト：SP向け 20px） */
.Head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px; /* SP角丸サイズ */
  background-color: #ffffff;
  border-radius: 20px 20px 0 0; /* 左上、右上に20pxの角丸 */
}

/* --- フェードイン用のキーフレーム --- */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Media Query (PC)
   ========================================================================== */
@media print, screen and (min-width: 768px) {
  .Head {
    /* PC時のパディング：下部に角丸(40px)が入るため、130pxにしてコンテンツとのバランスを調整 */
    padding: 187px 0 130px 0;
  }

  .Head .en {
    margin-bottom: 12px;
  }

  /* PCのみ角丸を40pxに上書き */
  .Head::after {
    height: 40px; /* PC角丸サイズ */
    border-radius: 40px 40px 0 0; /* 左上、右上に40pxの角丸 */
  }
}

.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: #00479d;
  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: #00479d;
}

/* BG */
.bg1 {
  background: #00479d;
}
.bg1 * {
  color: #ffffff !important;
}
.bg2 {
  background: #e8f1fa;
}
.bg3 {
  background: #f0f0f0;
}
.bg4 {
  border: #c8c8c8 1px solid;
}
.bgW {
  background: #ffffff;
}
.bgGray {
  background: #f6f6f6;
  border-radius: 10px;
}

/* 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: #00479d;
  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: #00479d !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: #c8c8c8 1px solid;
}
.dl1 > * {
  border-top: #c8c8c8 1px solid;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  grid-gap: 16px;
}
.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 */
.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: #00479d 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: #00479d;
  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: #00479d;
  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 10px 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: #00479d;
}
.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: 1455px !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: #00479d;
    color: #ffffff;
  }
  .bg1 .btn > *:hover {
    background: #00479d;
    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 */
  dl:not([class]),
  .dl1 {
    grid-gap: 1.5em 2em;
  }
  .dl1 dt {
    width: 32%;
    max-width: 200px;
  }

  /* Top */
  main.home section:not(.Head):not(.full) {
  }
  .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;
  }
}

/* 01_トップ */

#heroSliderContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 2880 / 1714;
  background-color: #000;
}

/* PC/SPの出し分け定義（アニメーションの無駄な動作を防ぐ） */
.heroSlide .pc {
  display: block;
}
.heroSlide .sp {
  display: none;
}

@media (max-width: 768px) {
  #heroSliderContainer {
    aspect-ratio: 1 / 1.2;
    height: auto;
  }
  .heroSlide .pc {
    display: none;
  }
  .heroSlide .sp {
    display: block;
  }

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

.heroSlide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: 1;
  pointer-events: none; /* 非アクティブ時の誤クリック防止 */
}

/* 1. 次に表示されていく、最前面のアクティブ画像 */
.heroSlide.is-active {
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

/* 2. 現在消えかけている、一つ前の画像 */
.heroSlide.is-prev {
  opacity: 0;
  z-index: 2;
}

.heroSlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 【重要】表示中の画像、かつ「display: block」になっている画像のみを動かす */
.heroSlide.is-active img,
.heroSlide.is-prev img {
  will-change: transform; /* 動く時だけGPUの最適化を有効化 */
}

.heroSlide.is-active .pc,
.heroSlide.is-prev .pc,
.heroSlide.is-active .sp,
.heroSlide.is-prev .sp {
  /* display: block（または指定された値）の画像のみアニメーションを適用 */
  animation: omodakayaZoom 6.5s linear forwards; /* transition(3s)より少し長めに設定して余韻を残す */
}

@keyframes omodakayaZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* ==========================================================================
   Concept Hero Section
   ========================================================================== */

/* ベースとなるセクション設定 */
.conceptHeroSection {
  position: relative;
  width: 100%;
  background-color: #000710; /* 画像を元にした深いネイビー */
  color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  padding: 155px 0 207px 0 !important; /* 上下の余白を確保 */
}

/* 右側の幾何学要素（疑似要素で配置） */
.conceptHeroSection::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/top/geometric_image.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* インナーコンテナ */
.conceptHeroContainer {
  width: 100%;
  position: relative;
  z-index: 2; /* 疑似要素の画像より前面に配置 */
}

/* コンテンツエリア（テキストを左側に寄せる） */
.conceptHeroContent {
  /* max-width: 640px; */
}

/* メインキャッチコピー */
.conceptHeroTitle {
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  margin: 0 0 30px 0;
}

/* 本文テキストエリア */
.conceptHeroBody {
}

/* 各段落の余白 */
.conceptHeroParagraph {
  margin: 0 0 30px 0;
}

.conceptHeroParagraph:last-child {
  margin-bottom: 0;
}

/* ユーティリティ: PC時のみ改行 */
.uDesktopOnly {
  display: inline;
}

/* ==========================================================================
   Responsive (Responsive for Mobile/Tablet)
   ========================================================================== */

@media screen and (max-width: 960px) {
  .conceptHeroSection {
    min-height: auto;
    padding: 56px 0 !important; /* 上下の余白を調整 */
  }

  /* スマホ・タブレット時は画像を背景に薄く回り込ませるか、位置を調整 */
  .conceptHeroSection::after {
    width: 100%;
    opacity: 0.8; /* テキストの視認性を確保するため透過度を調整 */
    background-size: cover;
    background-position: center left; /* 画像の位置を調整 */
  }

  .conceptHeroContainer {
  }

  .conceptHeroContent {
    max-width: 100%; /* 横幅の制限を解除 */
  }

  .conceptHeroTitle {
    margin-bottom: 30px;
  }

  /* スマホ時は不要な改行を解除 */
  .uDesktopOnly {
    display: none;
  }
}

/* ==========================================================================
   Corporate Info Section
   ========================================================================== */
.corporateInfo {
  width: 100%;
  padding: 0 0 !important;
  border-top: 5px solid #fff; /* 上の白い線 */
}

/* コンテナ設定 */
.corporateInfoContainer {
  width: 100%;
  margin: 0 auto;
  display: flex; /* PC時は横並び */
  flex-wrap: wrap; /* スマホ時は折り返し */
}

/* カード共通スタイル */
.corporateInfoCard {
  position: relative;
  width: 100%; /* スマホ時のデフォルト */
  overflow: hidden;
  display: block;
  border-right: 5px solid #fff; /* カード間の白い細い線 */
  background-color: #000; /* ベースの黒 */
  text-decoration: none; /* 下線を防ぐ */

  /* ------------------------------------------------------------
     グローバル（全体の a:hover / a ）の干渉を強力にブロックする記述
  ------------------------------------------------------------ */
  color: #fff !important; /* グローバルの青色化を完全ブロック */
  opacity: 1 !important; /* グローバルの hover opacity: 0.7 を完全ブロック */
  transition: transform 0.3s ease !important; /* 全体の transition のバッティングを防止 */
}

/* 最後のカードには右線を引かない */
.corporateInfoCard:last-child {
  border-right: none;
}

/* 
   画像表示用の擬似要素 
   ※優雅で極めて滑らかな動きを再現する transition
-------------------------------------------------------------------------- */
.corporateInfoCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
  background-position: center;

  /* ↓ カクつき防止用の記述 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* 
     グローバルの transition: 0.3s を上書きし、0.6s のベジェ曲線を最優先にする 
     ※複数指定時の !important は一番最後（セミコロンの前）にのみ記述します
  */
  transition:
    transform 0.6s cubic-bezier(0.15, 0.85, 0.45, 1),
    opacity 0.6s cubic-bezier(0.15, 0.85, 0.45, 1) !important;
}

/* 各カードの固有画像パス */
.companyInfoCard::before {
  background-image: url("../images/top/office_interior.webp");
}
.serviceCard::before {
  background-image: url("../images/top/hvac_units.webp");
}
.caseStudyCard::before {
  background-image: url("../images/top/building_exterior.webp");
}

/* カード背景 (グラデーションオーバーレイ用)
   ※下部が浮かないように常に bottom: 0; 固定。高さと色の位置で調整。
-------------------------------------------------------------------------- */
.corporateInfoCardBg {
  position: absolute;
  bottom: 0; /* 絶対に底面に固定 */
  left: 0;
  width: 100%;
  height: 60%; /* スマホ時は全体のバランスに合わせて可変 */
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  transition: opacity 0.3s ease !important; /* グローバル transition のバッティングを防止 */
}

/* カードコンテンツ (テキストエリア) */
.corporateInfoCardContent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px; /* テキストエリアの内側余白 */
  z-index: 2; /* 背景・グラデーションより前面に */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%; /* コンテンツを下に寄せるために必要 */
  box-sizing: border-box;
}

/* タイトル */
.corporateInfoCardTitle {
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 27px;
  color: #fff !important; /* 青文字化の影響を完全に防ぐ */
}

/* 説明文 */
.corporateInfoCardText {
  margin-bottom: 35px;
  color: #fff !important; /* 青文字化の影響を完全に防ぐ */
  max-width: 397px;
}

/* リンクエリア (下部) */
.corporateInfoCardLink {
  border-top: 1px solid #fff; /* 上の白い線 */
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  line-height: 1;
  color: #fff !important; /* 青文字化の影響を完全に防ぐ */
}

/* 
   詳しくはこちら：テキストと疑似要素の共通設定
-------------------------------------------------------------------------- */
.corporateInfoCardLinkText {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px; /* テキストとCSS矢印の間の余白 */
}

/* 
   CSSで矢印画像を表示
-------------------------------------------------------------------------- */
.corporateInfoCardLinkText::after {
  content: "";
  display: inline-block;
  width: 11px; /* 矢印画像の横幅 */
  height: 8px; /* 矢印画像の縦幅 */
  background-image: url("../images/common/arrow_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 4px;
  /* 矢印の動きも「ハッピィの森」風イージングを !important で最優先にする */
  transition: transform 0.6s cubic-bezier(0.15, 0.85, 0.45, 1) !important;
}

/* ==========================================================================
   Hover Effects 
   ========================================================================== */
@media print, screen and (min-width: 768px) {
  @media (hover: hover) {
    /* グローバルに当たる a:hover 内の color を打ち消す */
    .corporateInfoCard:hover,
    .corporateInfoCard:hover * {
      color: #fff !important; /* テキストをすべて絶対に白のまま維持 */
      opacity: 1 !important; /* 全体が半透明になるのを完全に防ぐ */
    }

    /* 「ハッピィの森」風の滑らかな拡大 ＆ カクつきを徹底排除した変形 */
    .corporateInfoCard:hover::before {
      transform: scale(1.05); /* 5%拡大 */
      opacity: 0.95 !important; /* 背景写真だけをほんの少し透過して馴染ませる */
    }

    /* 矢印画像のスライド */
    .corporateInfoCard:hover .corporateInfoCardLinkText::after {
      transform: translateX(6px) !important;
    }
  }
}

/* ==========================================================================
   Responsive (Responsive for Mobile/Tablet)
   ========================================================================== */

/* タブレット以上のサイズ (PC含む) */
@media screen and (min-width: 768px) {
  /* PC時は3列横並び・高さ620px固定 */
  .corporateInfoCard {
    width: 33.333%;
    height: auto;
    min-height: 620px; /* Figma指定のカード全体の高さ */
  }

  /* PC時：画像の表示エリアを縦幅509pxに固定し、上寄せにする */
  .corporateInfoCard::before {
    height: 509px; /* Figmaの画像マスクの高さ */
    background-size: cover;
    background-position: center top;
  }

  /* 
     PC時：底面に張り付けたまま、Figmaの256pxグラデーション位置を完全再現
     高さ367px（グラデーション256px + 下部黒111px）のレイヤーにし、
     上から256px（全体の約69.7%）の地点で完全に不透明な黒（#000）になるよう制御。
  -------------------------------------------------------------------------- */
  .corporateInfoCardBg {
    height: 367px;
    bottom: 0; /* 0固定（浮かせない） */
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      #000000 69.75%,
      #000000 100%
    );
  }

  /* PC時のコンテンツ位置調整 */
  .corporateInfoCardContent {
    position: absolute;
    padding: 60px 40px 30px 40px;
  }
}

/* スマートフォンサイズ */
@media screen and (max-width: 767px) {
  .corporateInfo {
    border-top: 2px solid #fff;
  }

  /* スマホ時は縦並び、幅100% */
  .corporateInfoCard {
    border-right: none;
    border-bottom: 2.5px solid #fff;
    padding-bottom: 100%;
  }

  .corporateInfoCardBg {
    height: 80%; /* スマホ時は全体のバランスに合わせて可変 */
  }

  .corporateInfoCard:last-child {
    border-bottom: none;
  }

  .corporateInfoCardTitle {
    margin-bottom: 15px;
  }

  .corporateInfoCardText {
    margin-bottom: 25px;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.025em;
  }

  .corporateInfoCardContent {
    padding: 30px 5.33%;
  }

  /* 
     CSSで矢印画像を表示（スマホ時の微調整）
  -------------------------------------------------------------------------- */
  .corporateInfoCardLinkText::after {
    margin-top: 3px;
  }
}

/* ==========================================================================
   News Section Base Styles
   ========================================================================== */

.newsSection {
  width: 100%;
  background-color: #ffffff;
  padding: 118px 0 128px 0 !important;
}

.newsContainer {
  display: flex; /* PC時は左右2カラムレイアウト */
  justify-content: space-between;
  align-items: flex-start;
}

/* ==========================================================================
   Left Column: Header
   ========================================================================== */

.newsHeader {
  width: auto; /* 幅指定を自動にしてコンテンツに合わせる */
  flex-shrink: 0; /* 画面が縮んでも、見出しエリアが絶対に潰されないように固定 */
  white-space: nowrap; /* 「お知らせ」の文字が途中で改行するのを防ぐ */
}

.newsSectionTitle {
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
}

/* ==========================================================================
   Right Column: News List & Items
   ========================================================================== */

.newsList {
  width: 100%;
  max-width: 900px; /* PC時はFigma通り最大幅900pxで基本表示 */
  flex-grow: 1; /* 余白がある場合はmax-widthまで柔軟に伸ばす */
  margin-left: 40px; /* 見出しとお知らせリストの間の余白 */
}

.newsItem {
  border-top: 1px solid rgba(37, 37, 37, 0.2); /* 記事上部の区切り線 */
  padding: 30px 0 30px 0;
}

/* リストの最後にも区切り線を追加 */
.newsItem:first-child {
  border-top: none; /* 最初のアイテムには上線を引かない */
  padding-top: 0; /* 最初のアイテムの上余白を削除 */
}

.newsItem:last-child {
  border-bottom: 1px solid rgba(37, 37, 37, 0.2);
}

/* 日付とタイトルの横並びエリア */
.newsItemMeta {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.newsItemDate {
  line-height: 1;
  margin-right: 32px;
  flex-shrink: 0; /* 日付の横幅を固定 */
}

.newsItemTitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

/* 本文テキスト */
.newsItemDescription {
}

/* 詳しくはこちら リンク */
.newsItemLink {
  display: inline-block;
  color: #00479d;
  text-decoration: underline;
  margin-top: 6px;
  margin-bottom: 25px;
  transition: color 0.2s ease;
}

@media print, screen and (min-width: 768px) {
  .newsItemLink:hover {
    opacity: 0.7;
  }
}

/* ギャラリー画像コンテナ */
.newsItemGallery {
  display: flex;
  gap: 15px; /* 画像同士の余白 */
  width: 100%;
}

/* 各画像ブロック（グレーのプレースホルダー） */
.newsGalleryImage {
  flex: 1;
  background-color: #d9d9d9;
  aspect-ratio: 4 / 3; /* 4:3のアスペクト比を維持 */
}

/* ==========================================================================
   Responsive (Responsive for Mobile/Tablet)
   ========================================================================== */

@media screen and (max-width: 960px) {
  .newsSection {
    padding: 56px 0 !important; /* 上下の余白を調整 */
  }

  .newsContainer {
    flex-direction: column; /* スマホ時は縦並びに変更 */
    padding: 0 24px;
  }

  /* 見出しを上部に配置 */
  .newsHeader {
    width: 100%;
    position: static;
    margin-bottom: 40px;
    white-space: normal; /* モバイル環境では必要に応じて改行を許可 */
  }

  /* リストを幅いっぱいに */
  .newsList {
    width: 100%;
    max-width: 100%; /* 最大幅制限を解除して横幅いっぱいに */
    margin-left: 0; /* 左側の余白をリセット */
  }

  /* 日付とタイトルを縦並びに（狭い画面での崩れ防止） */
  .newsItemMeta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
  }

  .newsItemDate {
    margin-right: 0;
  }

  /* スマホ時の画像レイアウト：縦並びに変更 */
  .newsItemGallery {
    flex-direction: column; /* 子要素を上から下へ縦に並べる */
    gap: 15px; /* 縦並び時の画像同士の隙間 */
  }
}

@media screen and (max-width: 560px) {
  .newsItemDescription {
    text-align: justify; /* スマホ時は本文を両端揃えにして読みやすく */
  }
}

/* 02_会社案内 */
/* ==========================================================================
   Message & Philosophy Section Styles
   ========================================================================== */

/* 全体の基本設定 */
.messageSection {
  background-color: #fff;
  padding: 126px 0 0 0 !important;
}

/* -----------------------------------------
   1. 代表挨拶エリア
   ----------------------------------------- */
.companyMessageContainer {
  display: flex;
  flex-direction: column;
  gap: 3.3rem;
  margin-bottom: 60px;
}

/* PC時は左右2カラム（左ヘッダー：右本文）に分散配置 */
@media print, screen and (min-width: 768px) {
  .companyMessageContainer {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 142px;
  }
}

.companyMessageHeader {
  flex-shrink: 0;
}

.companyMessageTitle {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 68px;
  color: #252525;
  line-height: 1.3;
  margin-bottom: 5px;
}

.companyMessageSubTitle {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00479d;
}

.companyMessageBody {
  flex: 1;
  max-width: 750px; /* 本文の幅を広げすぎず読みやすく調整 */
}

.companyMessageParagraph {
  margin: 0 0 30px 0;
}
.companyMessageSignature {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  text-align: right; /* 右寄せ */
  margin-top: 28px; /* 本文との間に少し広めの余白を作る */
}

/* -----------------------------------------
   2. 企業理念エリア（薄グレーの背景ボックス）
   ----------------------------------------- */
.corporatePhilosophyContainer {
  background-color: #f6f6f6;
  padding: 50px 20px;
  text-align: center;
  border-radius: 4px;
}

@media print, screen and (min-width: 768px) {
  .corporatePhilosophyContainer {
    padding: 118px 40px 102px 40px;
  }
}

/* ロゴ周辺の仮配置用スタイル */
.corporatePhilosophyLogoWrapper {
  margin-bottom: 68px;
  display: flex;
  justify-content: center;
}

.corporatePhilosophyLogo {
  max-width: 277px;
}

.logoMarkPlaceholder {
  font-size: 40px;
  font-weight: bold;
  color: #00459b;
  line-height: 1;
}

.logoTextPlaceholder {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #252525;
  margin-top: 5px;
}

.logoSubTextPlaceholder {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #666;
  margin-top: 5px;
}

/* 中央の区切り線 */
.corporatePhilosophyDivider {
  border: none;
  border-top: 1px solid rgba(37, 37, 37, 0.2);
  width: 100%;
  max-width: 1104px;
  margin: 0 auto 68px;
}

/* 「企業理念」大見出し */
.corporatePhilosophyMainHeading {
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 35px;
  /* margin-bottom: 48px; */
  letter-spacing: 0.05em;
}

.corporatePhilosophyMainText {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.05em;

  margin-bottom: 48px;
}

/* -----------------------------------------
   3. 企業理念 3枚の白いカード
   ----------------------------------------- */
.corporatePhilosophyCardGroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
}

/* PC時は横に3列並べる */
@media print, screen and (min-width: 768px) {
  .corporatePhilosophyCardGroup {
    flex-direction: row;
    justify-content: space-between;
  }
}

.corporatePhilosophyCard {
  background-color: #ffffff;
  padding: 35px 25px;
  flex: 1;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* カード内見出し（青文字） */
.corporatePhilosophyCardHeading {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  color: #00479d;
  margin-bottom: 30px;
}

.corporatePhilosophyCardSubHeading {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* カード内説明文 */
.corporatePhilosophyCardText {
}

/* -----------------------------------------
   スマートフォン向けの細かな微調整
   ----------------------------------------- */
@media screen and (max-width: 767px) {
  .messageSection {
    padding: 36px 0 0 0 !important;
  }
  .companyMessageTitle {
    font-size: 42px;
  }
  .companyMessageParagraph {
    text-align: justify;
  }
  .corporatePhilosophyLogoWrapper {
    margin-bottom: 40px;
  }
  .corporatePhilosophyLogo {
    max-width: 180px;
  }

  .corporatePhilosophyDivider {
    margin: 0 auto 40px;
  }

  .corporatePhilosophyMainHeading {
    font-size: 22px;
    margin-bottom: 30px;
  }

  .corporatePhilosophyMainText {
    margin-bottom: 40px;
  }

  .corporatePhilosophyCard {
    padding: 30px 20px;
  }
  .corporatePhilosophyCardHeading {
    margin-bottom: 15px;
    text-align: center;
  }
  .corporatePhilosophyCardText {
    text-align: justify;
  }
}

/* ==========================================================================
   Company Section Styles
   ========================================================================== */

/* 全体の基本設定 */
.companySection {
  background-color: #fff;
  padding: 116px 0 140px 0 !important;
}

/* レイアウトコンテナ */
.companyContainer {
  display: flex;
  flex-direction: column;
  gap: 3.3rem;
}

/* PC時は左タイトル・右情報の2カラムに分散配置 */
@media print, screen and (min-width: 768px) {
  .companyContainer {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* -----------------------------------------
   左側：ヘッダータイトル
   ----------------------------------------- */
.companyHeader {
  flex-shrink: 0;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .companyHeader {
    width: auto;
  }
}

.companyTitle {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 68px;
  color: #252525;
  line-height: 1.3;
  margin-bottom: 5px;
}

.companySubTitle {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00479d;
}

/* -----------------------------------------
   右側：会社概要詳細（テーブル構造の再現）
   ----------------------------------------- */
.companyDetailsList {
  flex: 1;
  max-width: 750px;
}

/* 各行のスタイル（境界線を引くための設定） */
.companyDetailRow {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-bottom: 1px solid rgba(37, 37, 37, 0.2);
  margin: 0;
}

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

@media print, screen and (min-width: 600px) {
  .companyDetailRow {
    flex-direction: row;
    align-items: flex-start;
    padding: 30px 0;
  }
}

/* 項目名（左側項目） */
.companyDetailTerm {
  font-weight: 700;
  width: 100%;
  margin-bottom: 8px;
  flex-shrink: 0;
}

@media print, screen and (min-width: 600px) {
  .companyDetailTerm {
    width: 25.6%;
    margin-bottom: 0;
  }
}

/* 内容（右側項目） */
.companyDetailDescription {
  margin: 0;
  flex: 1;
}

/* -----------------------------------------
   地図とZEBロゴの各種配置調整
   ----------------------------------------- */

/* 地図エリア */
.companyAddressText {
  display: block;
  margin-bottom: 15px;
}

.companyMapWrapper {
  width: 100%;
  max-width: 558px; /* 画像の地図サイズに合わせた上限 */
  margin-top: 10px;
}

/* 
  【初期状態：SP向け】
  SP時は従来の 16:9（padding-top: 56.25%）を維持
*/
.map {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 のアスペクト比 */
  height: 0;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 
  【PC向け（ブレイクポイント: 768px以上）】
  558×215pxの比率（約38.53%）
*/
@media screen and (min-width: 768px) {
  .map {
    padding-top: 38.53%; /* 558×215px のアスペクト比 */
  }
}

/* ZEBロゴエリア */
.companyRegistrationText {
  display: block;
  margin-bottom: 15px;
}

.companyZebLogoWrapper {
  width: 120px;
  margin-top: 10px;
}

.companyZebLogoPlaceholder {
  width: 100%;
  height: 80px;
  border: 1px dashed #b5c7de; /* 開発用ダミー枠 */
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.zebMark {
  font-weight: 700;
  font-size: 24px;
}

/* -----------------------------------------
   スマートフォン向けの微調整
   ----------------------------------------- */
@media screen and (max-width: 767px) {
  .companySection {
    padding: 56px 0 !important;
  }
  .companyTitle {
    font-size: 42px;
  }
  .companyDetailRow {
    padding: 16px 0;
  }
  .companyDetailTerm {
    font-size: 14px;
  }
  .companyDetailDescription {
    font-size: 14px;
  }
  .companyMapPlaceholder {
    height: 160px;
  }
}

/* 03_業務内容 */
.businessLeadSection {
  padding: 126px 0 85px 0 !important;
}

.facilityNavigation {
  background: #f6f6f6;
}

.facilityNavigationList {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facilityNavigationItem {
  flex: 1;
  border-right: 1px solid rgba(37, 37, 37, 0.2);
}

.facilityNavigationItem:first-child {
  border-left: 1px solid rgba(37, 37, 37, 0.2);
}

.facilityNavigationLink {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  padding: 16px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.3s,
    color 0.3s;
}

@media print, screen and (min-width: 768px) {
  /* ホバー時のスタイル設定 */
  .facilityNavigationLink:hover {
    background: #00479d;
    color: #fff;
  }
}

.facilityNavigationText {
  line-height: 1.5;
}

/* ★ 矢印アイコンの設定（CSS側で制御） */
.arrow_down {
  display: inline-block;
  width: 8px;
  height: 11px;
  flex-shrink: 0;

  /* 通常時の画像を設定 */
  background-image: url("../images/common/arrow_down.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2px;
}

@media print, screen and (min-width: 768px) {
  /* ★ リンクホバー時に、矢印の画像を切り替える */
  .facilityNavigationLink:hover .arrow_down {
    background-image: url("../images/common/arrow_down_hover.svg");
  }
}

@media (max-width: 768px) {
  .businessLeadSection {
    padding: 36px 0 56px 0 !important;
  }

  .businessLeadText {
    text-align: justify;
  }

  .businessHeroImageContainer img {
    aspect-ratio: 6 / 4;
    object-fit: cover;
  }

  .facilityNavigationList {
    flex-wrap: wrap;
  }

  .facilityNavigationItem {
    flex: 0 0 50%;
    border-left: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
  }

  .facilityNavigationItem:nth-child(even) {
    border-left: none;
  }

  .facilityNavigationLink {
    min-height: 60px;
    padding: 14px 8px;
    gap: 8px;
  }
}

/* ==========================================
   対応設備・業務概要（完全再現・レスポンシブ最適化版）
   ========================================== */

/* ------------------------------------------
   1. SP向け（デフォルト：全幅青背景 & 1列配置）
   ------------------------------------------ */
.serviceOverviewSection {
  width: 100%;
  background-color: #00479d; /* EE設計標準ブルー */
  padding: 60px 0 !important;
  margin-bottom: 60px;
  box-sizing: border-box;
}

/* SPの大見出し */
.serviceOverviewHeading {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  margin-bottom: 32px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* SPのカードグリッド（1列配置） */
.serviceOverviewGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/* 白枠カード本体（SP） */
.serviceOverviewCard {
  border: 1px solid #ffffff;
  width: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 15px;
  box-sizing: border-box;
  text-align: center;
}

/* アイコン領域（SP） */
.serviceOverviewIcon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.serviceOverviewIcon img {
  width: 95%;
  height: auto;
  display: block;
}

/* 白文字ラベル（SP） */
.serviceOverviewLabel {
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* ------------------------------------------
   2. PC・タブレット向け（768px以上）
   ------------------------------------------ */
@media print, screen and (min-width: 768px) {
  /* 青背景エリアを1240pxで中央寄せ */
  .serviceOverviewSection {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding: 93px 0 105px 0 !important;
    margin-bottom: 172px;
  }

  /* 見出しの下位置（カードとの余白）を20pxに設定 */
  .serviceOverviewHeading {
    font-size: clamp(2rem, 2.4vw, 2.4rem);
    margin-bottom: 40px;
  }

  /* グリッド全体幅844px / 隙間上下左右8px / 3列配置 */
  .serviceOverviewGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 844px;
    margin: 0 auto;
  }

  /* カード本体（PC） */
  .serviceOverviewCard {
    aspect-ratio: 277 / 263;
    padding: 40px 15px 30px;
    justify-content: flex-end; /* ★上基準に揃えて配置 */
    align-items: center;
  }

  /* アイコン領域の高さを固定して画像の上下位置を揃える */
  .serviceOverviewIcon {
    margin-bottom: 33px;
    height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .serviceOverviewIcon img {
    width: 100%;
    height: auto;
  }

  /* 白文字ラベル（テキスト1行目の上部位置を全カードで揃える） */
  .serviceOverviewLabel {
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.7;
    min-height: 3.2em; /* ★2行分の領域をあらかじめ確保し、上部を揃える */
    display: block;
  }
}

/* ------------------------------------------
   3. タブレット（768px〜896px）崩れ防止用
   ------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 896px) {
  .serviceOverviewGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .serviceOverviewCard {
    aspect-ratio: auto;
    padding: 30px 15px;
  }
}

/* ==========================================
   ビジネスセクション全体
   ========================================== */
.businessHeader {
  margin-bottom: 80px;
}

.businessHeader h2 {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 68px;
  color: #252525;
  line-height: 1.3;
  margin-bottom: 5px;
}

.businessHeader p {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00479d;
}

/* サービスセクション全体 */
.businessServiceSection {
  background-color: #f6f6f6;
  padding: 93px 0 0 0 !important;
  overflow: hidden; /* 右端にはみ出る画像による横スクロールを防止 */
}

/* サービス個別の枠線 */
.businessService {
  border-bottom: 1px solid #252525;
}

.businessService:first-of-type {
  border-top: 1px solid #252525;
}

/* ==========================================
   PC向けレイアウト (768px以上)
   ========================================== */
@media print, screen and (min-width: 768px) {
  .businessServiceInner {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* テキストと画像エリアの高さを一貫させる */
  }

  /* 左側：テキストコンテンツエリア */
  .businessServiceContent {
    flex: 1;
    padding: 90px 40px 100px 0;
    box-sizing: border-box;
  }

  /* 右側：画像エリア */
  .businessServiceImageWrapper {
    width: 43.5%;
    flex-shrink: 0;
    position: relative;
    margin-right: calc(50% - 50vw);
  }

  /* 画像自体のスタイル */
  .businessServiceImage {
    width: calc(100% + (50vw - 50%));
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ==========================================
   テキスト・見出し・タグ装飾
   ========================================== */
.businessServiceTitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* スマホ時の安全な折り返し */
  gap: 24px;
  /* gap: 12px; */
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 24px;
}

.businessServiceTitleText {
  color: #252525;
}

/* タグのグループ枠 */
.businessServiceTags {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}

/* 個々の青枠タグパーツ（計画・設計・監理） */
.businessServiceTag {
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 700;
  color: #00479d;
  border: 1px solid #00479d;
  /* background-color: #ffffff; */
  padding: 2px 8px;
  line-height: 1;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.businessServiceContent p {
  margin: 0 0 34px;
  max-width: 710px;
}

/* 対応箇所・設備の白いボックス */
.businessServiceDetails {
  background-color: #ffffff;
  padding: 30px 24px;
  box-sizing: border-box;
  max-width: 714px;
}

.businessServiceDetailsTitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 15px;
}

/* 箇条書きリスト */
.businessServiceList {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.businessServiceList li {
  position: relative;
  padding-left: 16px;
  line-height: 2;
}

.businessServiceList li:not(:last-child) {
  margin-bottom: 6px;
}

/* 箇条書きの青い丸ポインター（デフォルト：複数項目がある場合） */
.businessServiceList li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: #00479d;
  border-radius: 50%;
}

/* ★1項目（1文字・1行）のみの場合は、自動でドットを非表示にし左揃えにする */
.businessServiceList li:only-child {
  padding-left: 0;
}

.businessServiceList li:only-child:before {
  display: none;
}

/* ==========================================
   レスポンシブ対応 (767px以下・スマホ向け)
   ========================================== */
@media (max-width: 767px) {
  .businessServiceSection {
    padding: 56px 0 0 0 !important;
  }

  .businessHeader {
    margin-bottom: 40px;
  }

  .businessHeader h2 {
    font-size: 42px;
  }

  .businessServiceContent {
    width: 100%;
    padding: 40px 0;
  }

  .businessServiceTitle {
    gap: 8px;
    margin-bottom: 16px;
  }

  .businessServiceTags {
    margin-top: 2px;
  }

  .businessServiceTag {
    /* font-size: 1.2rem;
    padding: 2px 6px; */
  }

  .businessServiceContent p {
    text-align: justify;
  }

  .businessServiceDetails {
    padding: 20px 15px;
    max-width: 100%;
  }

  .businessServiceImageWrapper {
    width: 100vw;
    margin: 0 calc(5.33% * -1);
    height: 250px;
  }

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

  .businessServiceList li:before {
    left: 0;
    top: 9px;
  }
}

/* ==========================================================================
   Flow Section Styles
   ========================================================================== */

/* 全体の余白調整 */
.flowSection {
  padding: 110px 0 154px 0 !important;
  background-color: #fff;
}

/* ヘッダー周り */
.workFlowHeader {
  margin-bottom: 50px;
}

.workFlowTitle {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 68px;
  color: #252525;
  line-height: 1.3;
  margin-bottom: 5px;
}

.workFlowSubTitle {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00479d;
}

/* ステップ全体のコンテナ */
.workFlowStepsContainer {
  display: flex;
  width: 100%;
  background: transparent;
}

/* 各ステップのカードスタイル */
.workFlowStepCard {
  position: relative;
  flex: 1;
  padding: 40px 30px 40px 25px;
  color: #fff;
  box-sizing: border-box;
}

/* 各カードの背景色 */
.workFlowStepCard:nth-child(1) {
  background: #00479d;
  z-index: 5;
}
.workFlowStepCard:nth-child(2) {
  background: #165fb9;
  z-index: 4;
}
.workFlowStepCard:nth-child(3) {
  background: #2d70c1;
  z-index: 3;
}
.workFlowStepCard:nth-child(4) {
  background: #3c7ecd;
  z-index: 2;
}
.workFlowStepCard:nth-child(5) {
  background: #5b98e2;
  z-index: 1;
}

/* PC用の「右向き矢印」の再現 */
@media print, screen and (min-width: 768px) {
  .workFlowStepCard {
    margin-right: -20px;
    padding-left: 35px;
    padding-right: 35px;

    clip-path: polygon(
      0% 0%,
      calc(100% - 20px) 0%,
      100% 50%,
      calc(100% - 20px) 100%,
      0% 100%,
      20px 50%
    );
  }

  .workFlowStepCard:first-child {
    padding-left: 25px;
    clip-path: polygon(
      0% 0%,
      calc(100% - 20px) 0%,
      100% 50%,
      calc(100% - 20px) 100%,
      0% 100%
    );
  }

  .workFlowStepCard:last-child {
    margin-right: 0;
    padding-right: 25px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20px 50%);
  }
}

/* ステップのヘッダー */
.workFlowStepHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* 白抜きの四角数字 */
.workFlowStepNumber {
  background-color: #fff;
  color: #00479d;
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  width: 27.65px;
  height: 27.65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workFlowStepCard:nth-child(2) .workFlowStepNumber {
  color: #165fb9;
}
.workFlowStepCard:nth-child(3) .workFlowStepNumber {
  color: #2d70c1;
}
.workFlowStepCard:nth-child(4) .workFlowStepNumber {
  color: #3c7ecd;
}
.workFlowStepCard:nth-child(5) .workFlowStepNumber {
  color: #5b98e2;
}

.workFlowStepTitle {
  font-size: clamp(1.8rem, 1.8vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  white-space: nowrap;
}

/* 説明文 */
.workFlowStepDetails {
  text-align: justify;
}

/* ==========================================================================
   Responsive (スマートフォン対応)
   ========================================================================== */
@media screen and (max-width: 767px) {
  .flowSection {
    padding: 56px 0 !important;
  }

  .workFlowHeader {
    margin-bottom: 40px;
  }

  .workFlowTitle {
    font-size: 44px;
  }

  .workFlowStepsContainer {
    flex-direction: column;
  }

  .workFlowStepCard {
    width: 100%;
    /* 15pxの矢印分だけ次の要素を上に引っ張り上げる */
    margin-bottom: -15px;
    /* 上下の矢印の凹凸（15pxずつ）に文字が被らないよう、パディングを調整 */
    padding: 40px 25px 45px 25px;
    box-sizing: border-box;

    /* 
      【左右対称に完璧に凹凸がかみ合う下向き矢印】
      時計回りに一筆書きで正確に繋ぎ直す：
      1. 左上 (0% 0%) 
      2. 上中央の凹み (50% 15px) 
      3. 右上 (100% 0%) 
      4. 右下の付け根 (100% calc(100% - 15px)) 
      5. 下中央の尖り (50% 100%) 
      6. 左下の付け根 (0% calc(100% - 15px))
    */
    clip-path: polygon(
      0% 0%,
      50% 15px,
      100% 0%,
      100% calc(100% - 15px),
      50% 100%,
      0% calc(100% - 15px)
    );
  }

  /* スマホ1番上のカード（上は平ら、下だけ矢印にする） */
  .workFlowStepCard:first-child {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 15px),
      50% 100%,
      0% calc(100% - 15px)
    );
  }

  /* スマホ1番下のカード（上は凹ませて矢印を受け入れ、下は平らにする） */
  .workFlowStepCard:last-child {
    margin-bottom: 0;
    padding-bottom: 30px;
    clip-path: polygon(0% 0%, 50% 15px, 100% 0%, 100% 100%, 0% 100%);
  }
}

@media print, screen and (min-width: 768px) {
  .workFlowStepTitle {
    font-feature-settings: "palt" 1;
    letter-spacing: 0.05em;
  }

  /* 説明文 */
  .workFlowStepDetails {
    font-feature-settings: "palt" 1;
    letter-spacing: -0.025em;
  }
}

/* ==========================================================================
   Software Section Styles
   ========================================================================== */

/* セクション全体の背景（薄いグレー）と余白 */
.softwareSection {
  background-color: #f7f9fb;
  padding: 127px 0 229px 0 !important;
}

/* ヘッダーのレイアウト（PCでは左右に分散配置、下揃え） */
.softwareHeader {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 40px;
}

@media print, screen and (min-width: 768px) {
  .softwareHeader {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 140px;
  }
}

/* タイトル部分 */
.softwareTitle {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 68px;
  color: #252525;
  line-height: 1.3;
  margin-bottom: 5px;
}

.softwareSubTitle {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00479d;
}

/* リード文 */
.softwareLeadText {
}

/* PC専用の改行制御 */
.pcOnly {
  display: none;
}
@media print, screen and (min-width: 768px) {
  .pcOnly {
    display: inline;
  }
}

/* 白色のコンテンツボックス */
.softwareContentContainer {
  background-color: #ffffff;
  padding: 40px 5.33%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media print, screen and (min-width: 960px) {
  .softwareContentContainer {
    flex-direction: row;
    /* 
       space-between から flex-start（左寄せ）に変更し、
       ブロック間の隙間を gap で設定して右側の要素を左に寄せる。
    */
    justify-content: flex-start;
    gap: 80px;
    padding: 36px 33px 32px 33px;
  }
}

/* 各カテゴリブロック */
.softwareCategoryBlock {
  /* 
     Figmaのように要素を左寄せにするため、flex: 1（均等幅）を解除する。
  */
  flex: none;
}

/* カテゴリの見出し（黒い太字） */
.softwareCategoryTitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 15px;
}

/* リストを2列に並べるためのラッパー */
.softwareListWrapper {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 480px) {
  .softwareListWrapper {
    flex-direction: row;
    /* 
       左寄せにした際、1列目と2列目の間隔を保つために gap を指定する。
    */
    gap: 40px;
  }
}

.softwareList {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.softwareCategoryImage {
  width: 100%;
  max-width: 250px;
  height: auto;
  margin-bottom: 20px;
}

@media screen and (min-width: 480px) {
  .softwareList {
    /* 
       1つの列が極端に縮まないよう、最小幅を確保して綺麗に2列に整列させる。
    */
    min-width: 160px;
  }
}

/* リストアイテムと青いドットの再現 */
.softwareListItem {
  position: relative;
  padding-left: 16px;
  white-space: nowrap;
}

.softwareListItem:last-child {
  margin-bottom: 0;
}

/* 綺麗な正円の青いドットを擬似要素で配置 */
.softwareListItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #00479d;
  border-radius: 50%;

  margin-top: 1px;
}

/* ==========================================================================
   Responsive Minor Tweaks (スマホ・タブレット向け微調整)
   ========================================================================== */
@media screen and (max-width: 767px) {
  .softwareSection {
    padding: 56px 0 !important;
  }
  .softwareTitle {
    font-size: 48px;
  }
  .softwareLeadText {
    text-align: justify;
    /* font-size: 14px; */
  }
}

/* ==========================================================================
   ZEB Section Styles
   ========================================================================== */

/* 全体の背景と文字の基本設定 */
.zebSection {
  background-color: #00479d;
  padding: 124px 0 132px 0 !important;
}

.zebSectionWrapper {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 74px 86px 80px 86px;
}

/* メインタイトル */
.zebHeader {
  margin-bottom: 42px;
}

.zebMainTitle {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 68px;
  color: #252525;
  line-height: 1.3;
  margin-bottom: 5px;
}

.zebSubTitle {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00479d;
}

/* 灰色のコンテンツエリア */
.zebResultsContainer {
  background-color: #f6f6f6;
  padding: 40px 45px;
  box-sizing: border-box;
}

.zebSectionSubHeading {
  font-size: clamp(1.8rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}

/* ------------------------------------------
   2列（テーブル ＋ ロゴ）レイアウト
   ------------------------------------------ */
.zebContentFlex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
}

.zebLogoSide {
  flex-shrink: 0;
  width: 167px;
  margin: 0 auto;
  text-align: center;
}

.zebLogoWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.zebLogoMark {
  width: 100%;
  max-width: 167px;
  height: auto;
  display: block;
}

/* ------------------------------------------
   ZEB実績表（テーブル）のスタイル
   ------------------------------------------ */

/* テーブル親コンテナ（最大幅 620px） */
.zebTableOuter {
  width: 100%;
  max-width: 620px;
  flex: 1; /* 残りの横幅をしっかり受け持つ */
}

.zebResultsTable {
  width: 100%;
  line-height: 1.4;
  background-color: #fff;
  table-layout: fixed; /* colgroupの指定を厳密に固定 */
  border-collapse: separate;
  border-spacing: 0;
  border-right: 1px solid #00479d;
  border-bottom: 1px solid #00479d;
}

/* ★4列それぞれの幅を厳密に定義 */
.zebResultsTable .col-category {
  width: 64px;
} /* 新築 / 既存 */
.zebResultsTable .col-task {
  width: auto;
} /* 規模・業務内容 */
.zebResultsTable .col-count {
  width: 124px; /* 620pxの時の124px (20%) の比率に固定 */
} /* 実績件数 */
.zebResultsTable .col-ratio {
  width: 124px; /* 620pxの時の124px (20%) の比率に固定 */
} /* 実績割合 */

.zebResultsTable th,
.zebResultsTable td {
  padding: 3px 6px;
  border-top: 1px solid #00479d;
  border-left: 1px solid #00479d;
  box-sizing: border-box;
}

/* ヘッダー（th）の設定 */
.zebResultsTable th {
  background-color: #00479d;
  color: #fff;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  position: relative;
  border-left: 1px solid #00479d;
}

/* thの間の白線補正（1px下に伸ばして青線の被りを解消） */
.zebResultsTable th:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: -1px;
  width: 1px;
  background-color: #ffffff;
  z-index: 2;
}

.zebResultsTable td {
  color: #252525;
  vertical-align: middle;
}

/* 新築・既存のカテゴリセル */
.zebResultsTable td.td-category {
  text-align: center;
  padding: 8px 4px;
}

.zebResultsTable td.td-number {
  text-align: center;
}

/* ------------------------------------------
   表下部の注記テキストエリア（Flexの外）
   ------------------------------------------ */
.zebNotesArea {
  margin-top: 24px;
}

.zebNotesArea p {
  margin-bottom: 4px;
}

.zebNotesArea p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------
   レスポンシブ対応
   ------------------------------------------ */
@media screen and (max-width: 960px) {
  .zebContentFlex {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .zebLogoSide {
    width: 100%;
  }

  .zebLogoMark {
    max-width: 140px;
  }
}

@media screen and (max-width: 767px) {
  .zebSection {
    padding: 56px 0 !important;
  }

  .zebHeader {
    margin-bottom: 40px;
  }

  .zebMainTitle {
    font-size: 42px;
  }

  .zebSectionWrapper {
    padding: 32px 4%;
  }

  .zebResultsContainer {
    padding: 20px 12px;
  }

  .zebTableOuter {
    max-width: 100%;
  }

  /* SP時のテーブル文字サイズとパディングを調整して縦長化を防止 */
  .zebResultsTable th,
  .zebResultsTable td {
    padding: 6px 2px;
    font-size: 10px; /* 文字サイズを小さくして折り返しを防止 */
    line-height: 1.3;
  }

  /* SP時は固定pxではなくパーセンテージに切り替えて横幅を適切に分配 */
  .zebResultsTable .col-category {
    width: 14%;
  } /* 新築/既存 */
  .zebResultsTable .col-task {
    width: 54%;
  } /* 業務内容（幅を広めに確保） */
  .zebResultsTable .col-count {
    width: 16%;
  } /* 実績件数 */
  .zebResultsTable .col-ratio {
    width: 16%;
  } /* 実績割合 */

  .zebResultsTable td.td-category {
    padding: 4px 2px;
  }

  .zebNotesArea {
    font-size: 12px;
    margin-top: 14px;
  }

  .zebNotesArea p {
    text-align: justify;
  }
}

/* ==========================================================================
   Newsletter Section Styles
   ========================================================================== */

/* 全体の基本設定 */
.newsletterSection {
  background-color: #fff;
  padding: 110px 0 0 150px 0 !important;
}

/* タイトル部分 */
.newsletterTitle {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 42px;
  letter-spacing: 0.05em;
}

/* リード文 */
.newsletterLeadTextGroup {
  margin-bottom: 30px;
}

.newsletterLeadText {
}

.newsletterLeadText:last-child {
  margin-bottom: 0;
}

/* バックナンバー一覧のコンテナ（Flexboxで整列） */
.newsletterLinksContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* PC時は上下左右すべて 8px に統一 */
}

/* 各カプセル型ボタンのスタイル（PC時は1行に7個並ぶ計算） */
.newsletterLinkButton {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* 【修正】7列で綺麗に均等配置する計算式 (隙間8pxが6つ分) */
  width: calc((100% - (8px * 6)) / 7);
  height: 56px; /* 【修正】高さを56pxに固定 */

  background-color: #00479d; /* 鮮やかで深みのある青 */
  color: #ffffff;
  text-decoration: none;
  padding: 0 40px; /* 【修正】上下のpaddingを0にし、左右だけ20pxに */
  border-radius: 50px; /* 完全なカプセル型にする丸み */
  font-size: 15px;
  font-weight: 500;
  box-sizing: border-box;

  /* ホバー時にサイズが変わってガタつかないよう、最初から枠線を引いておく */
  border: 1px solid #00479d;

  /* スムーズなアニメーションの設定 */
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* 矢印（画像）の調整 */
.newsletterArrow {
  display: inline-block;
  width: 11px;
  height: 8px;
  background-image: url("../images/common/arrow_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.2s ease;
}

@media print, screen and (min-width: 768px) {
  /* ホバー時のエフェクト */
  .newsletterLinkButton:hover {
    background-color: #ffffff; /* 背景を白に */
    color: #00479d; /* 文字色を青に */
    border-color: #00479d; /* 枠線を青に */
  }

  /* ホバー時に中の矢印画像を変更 */
  .newsletterLinkButton:hover .newsletterArrow {
    background-image: url("../images/common/arrow_blue.svg");
  }
}

/* ==========================================================================
   Responsive (画面幅に応じた列数の最適化)
   ========================================================================== */

/* タブレット〜小型PC（1行に4列並べる） */
@media screen and (max-width: 1199px) {
  .newsletterLinksContainer {
    gap: 12px; /* 上下左右の隙間を 12px に変更 */
  }
  .newsletterLinkButton {
    /* 4列で均等配置 (隙間12pxが3つ分) */
    width: calc((100% - (12px * 3)) / 4);
    height: 52px; /* 画面幅に合わせて少し高さをスマートに */
    padding: 0 18px;
    font-size: 14px;
  }
}

/* スマートフォン（1行に3列並べる） */
@media screen and (max-width: 767px) {
  .newsletterSection {
    background-color: #fff;
    padding: 56px 0 !important;
  }
  .newsletterTitle {
    font-size: 32px;
    margin-bottom: 3.3rem;
  }
  .newsletterLeadText {
    text-align: justify;
  }
  .newsletterLinksContainer {
    gap: 10px; /* 上下左右の隙間を 10px に変更 */
  }
  .newsletterLinkButton {
    /* 3列で均等配置 (隙間10pxが2つ分) */
    width: calc((100% - (10px * 2)) / 3);
    height: 48px; /* スマホで見やすい高さに調整 */
    font-size: 13px;
  }
}

/* 極小のスマートフォン（1行に2列並べる） */
@media screen and (max-width: 400px) {
  .newsletterLinksContainer {
    gap: 8px; /* 上下左右の隙間を 8px に変更 */
  }
  .newsletterLinkButton {
    /* 2列で均等配置 (隙間8pxが1つ分) */
    width: calc((100% - 8px) / 2);
    height: 46px;
  }
}

/* 04_実績紹介 */
.worksLeadSection {
  padding: 136px 0 70px 0 !important;
}
.StickySidebarSection .contWrap .note > *:not(:last-child):not(h2) {
  margin-bottom: 32px;
}
/* Side Bar sticky */
.StickySidebarSection {
  padding: 0 0 150px 0 !important;
}
.StickySidebarSection .contWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 56px 0;
}
.StickySidebarSection .contWrap .note .en {
}
.StickySidebarSection .contWrap .note .title1::before {
}

@media screen and (max-width: 767px) {
  .worksLeadSection {
    padding: 36px 0 56px 0 !important;
  }
  .StickySidebarSection {
    padding: 0 0 56px 0 !important;
    overflow: hidden;
  }
  .StickySidebarSection .contWrap .note h3 {
    margin-bottom: 0 !important;
  }
}

@media print, screen and (min-width: 768px) {
  .StickySidebarSection .contWrap .note {
    flex: 1;
  }
  .StickySidebarSection .contWrap .note > *:not(:last-child):not(h2) {
    margin-bottom: 48px;
  }
  .StickySidebarSection .contWrap .note .btn {
  }
  .StickySidebarSection .contWrap > * {
    width: 74.2%;
  }

  .StickySidebarSection .contWrap {
    align-items: flex-start;
  }
  .StickySidebarSection .contWrap > .note {
    padding-right: 40px;
    position: sticky;
    left: 0;
    top: 126px;
  }
  .StickySidebarSection .contWrap > .sub .ul1 > li {
    padding-left: 40px;
  }
  .StickySidebarSection .contWrap > .sub .ul1 > li:not(:last-child)::after {
    width: 50vw;
  }
}

/* ==========================================================================
   サイドバーメニュー装飾・レスポンシブCSS
   ========================================================================== */

/* リスト全体の基本構造（PC時は縦並び） */
.sidebarNavList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12.5px;
}

/* 各メニュー項目（ドット配置用のベース） */
.sidebarNavList li {
  position: relative;
  padding-left: 16px; /* ドットが収まる左余白 */
}

/* 【修正】最初からドットの色を「#00479d」に変更 */
.sidebarNavList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #00479d; /* ★通常時も青に変更 */
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

/* 通常時のテキスト（Noto Sans JP, 16px, Bold） */
.sidebarNavList li a {
  display: inline-block;
  color: #333333; /* 通常時の文字色は黒 */
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  transition: color 0.3s ease;
}

/* -----------------------------------------
   アクティブ時（表示中の該当セクション連動）
   ----------------------------------------- */
/* JSでliに「active」クラスが付与された際、文字を青に変更（ドットは最初から青なのでそのまま） */
.sidebarNavList li.active a {
  color: #00479d; /* 表示中の文字色を青に変更 */
}

/* ==========================================================================
   【SP特化版】レスポンシブ対応（タブレット・スマホサイズ：767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
  .sidebarNavList {
    display: flex;
    flex-direction: column;
    gap: 0;

    /* ご調整いただいた親要素のpadding（左右5.33%）に最適化した全幅設定 */
    width: 89.34vw;
    box-sizing: border-box;
    border-top: 1px solid #e0e0e0; /* 上部の区切り線 */
  }

  .sidebarNavList li {
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #e0e0e0; /* 項目ごとの区切り線 */
  }

  /* ドットは非表示 */
  .sidebarNavList li::before {
    display: none;
  }

  /* ★通常時・ホバー時・JSでactiveクラスがついた時も含め、すべて同じ見た目に統一 */
  .sidebarNavList li a,
  .sidebarNavList li a:hover,
  .sidebarNavList li a:active,
  .sidebarNavList li.active a,
  .sidebarNavList li.active a:hover {
    display: flex;
    justify-content: space-between; /* テキストは左、矢印は右端に配置 */
    align-items: center; /* 上下中央揃え */
    padding: 16px 20px; /* タップしやすい縦幅と左右の余白 */
    font-size: 15px;
    line-height: 1.4;
    color: #333333; /* 常に黒 */
    background-color: #fafafa; /* 常にうっすらグレーの背景 */
    text-decoration: none;
    font-weight: 700;
  }

  /* 右端の下向き矢印アイコン（こちらも色は常に#999999で固定） */
  /* ★右端の下向き矢印アイコン（他ページ共通の画像を指定） */
  .sidebarNavList li a::after,
  .sidebarNavList li.active a::after {
    content: "";
    display: inline-block;
    /* 共通矢印画像のパスを指定 */
    background: url("../images/common/arrow_down.svg") no-repeat center center /
      contain;

    /* -------------------------------------------------------------
       【サイズ調整】
       画像の縦横比に合わせて width と height を調整。
       ------------------------------------------------------------- */
    width: 12px;
    height: 12px;

    /* テキストとの微調整用 */
    transform: none;
    border: none;
  }
}

.worksContainer {
  max-width: 1000px;
  margin: 0 auto;
}

/* 各実績ブロックの間隔 */
.worksSectionBlock {
  margin-bottom: 80px;
}
.worksSectionBlock:last-of-type {
  margin-bottom: 0;
}

.worksSectionTitle {
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 45px;
  letter-spacing: 0.05em;
}

/* ==========================================
        スライダーエリア
        ========================================== */
.worksSliderContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1840 / 938;
  background-color: #c4c4c4;
  margin-bottom: 46px;
}

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

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

/* インジケーター（ドット） */
.worksIndicatorContainer {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 10;
}

.worksIndicatorDot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #00479d;
  background-color: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* アクティブ時のドット */
.worksIndicatorDot.isIndicatorActive {
  background-color: #00479d;
}

/* ==========================================
        アコーディオンエリア
        ========================================== */
.worksAccordionItem {
  overflow: hidden;
}

/* ヘッダー部分 */
.worksAccordionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  color: #ffffff;
  background-color: #00479d;
  cursor: pointer;
  user-select: none;
}

.worksAccordionTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

/* アイコンのスタイル */
.worksAccordionIcon {
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}

/* 横棒 (常に表示) */
.worksAccordionIcon::after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  height: 2px;
  width: 16px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

/* 縦棒 (開閉用) */
.worksAccordionIcon::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  height: 16px;
  width: 2px;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* 開いている状態（縦棒を消してマイナスにする） */
.worksAccordionItem.isOpen .worksAccordionIcon::before {
  transform: translateX(-50%) rotate(-90deg);
  opacity: 0;
}

/* コンテンツ部分 */
.worksAccordionContent {
  max-height: 0;
  background-color: #ffffff;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

/* ------------------ コンテンツ内部 ------------------ */
.worksListInner {
  padding: 30px 0 16px 0;
}

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

.worksListItem {
  position: relative;
  padding-left: 18px;
}

/* リストの青い丸バレット */
.worksListItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  background-color: #00479d;
  border-radius: 50%;
}

/* 「他〇件」の配置 */
.worksListTotalCount {
  text-align: right;
  margin-bottom: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .worksSectionTitle {
    margin-bottom: 24px;
  }
  .worksSliderContainer {
    aspect-ratio: 6 / 4;
    object-fit: cover;
    margin-bottom: 24px;
  }
  .worksIndicatorContainer {
    gap: 12px;
  }
  .worksSectionBlock {
    margin-bottom: 50px;
  }
  .worksAccordionHeader {
    padding: 14px 16px;
  }
  .worksListItem {
    padding-left: 16px;
  }
  .worksListItem::before {
    left: 0;
    top: 0.8em;
  }
  .worksListTotalCount {
  }
}

/* モーダル用など他の画像に影響しないよう、スライダー内のimgだけを指定 */
.worksSlide img {
  /* ① 元の src 画像を隠す（IE以外の全モダンブラウザで対応） */
  visibility: hidden !important;

  /* ② 背景としてComing Soon画像を表示する */
  background-image: url("../images/works/coming_soon.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* img 自体は hidden にするので、親要素（.worksSlide）の背景として見せるアプローチ */
.worksSlide {
  background-image: url("../images/works/coming_soon.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================
   【公開前一時対応】スライダー停止＆1枚固定表示
   ========================================== */

/* 1. インジケーター（ドット「・」）を非表示 */
.worksIndicatorContainer {
  display: none !important;
}

/* 2. 1枚目のスライド画像だけを常に100%表示に固定 */
.worksSlide:first-child {
  opacity: 1 !important;
  z-index: 1 !important;
}

/* 3. 2枚目以降のスライド画像を完全に透明化＆非表示 */
.worksSlide:not(:first-child) {
  opacity: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 05_お問合せ */
.ContactLeadSection {
  padding: 126px 0 0 0 !important;
}

.Contact {
  padding: 125px 0 150px 0 !important;
}

@media (max-width: 768px) {
  .ContactLeadSection {
    padding: 36px 0 0 0 !important;
  }
  .Contact {
    padding: 56px 0 56px 0 !important;
  }
}


/* 260729修正 */
.zebTargetOuter {
  max-width: 100%;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {

  .table-scroll-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }

  .table-scroll-wrapper .zebTargetTable {
    min-width: 800px;
    width: 100%;
  }
}