@charset "UTF-8";
/* リキッドレイアウト対応 */
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #000;
}

main.l-main{
  overflow:hidden;
}

.u-desktop {
  display: block;
}
@media screen and (max-width: 767px) {
  .u-desktop {
    display: none;
  }
}


.u-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .u-mobile {
    display: block;
  }
}


html {
  font-size: 0.8839779006vw;
}
@media screen and (max-width: 767px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}

@media (min-width: 1810px) {
  html {
    font-size: 16px;
  }
}


.sp_only{
  display: none !important;
}

@media screen and (max-width: 767px) {
.pc_only{
  display: none !important;
}
.sp_only{
  display: block !important;  
}
}

/* pcの電話番号発信対応 */
a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}


/* ホバー */
a {
  text-decoration: none;
  color: inherit;
  /*-webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;*/
}
a:hover {
    /* opacity: 0.8; */
}


*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  /* scroll-behavior: smooth;*/
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

.c-btn {
    display: flex;
    border: 3px solid #00a63c;
    font-weight: 700;
    line-height: 1;
    -webkit-transition: unset;
    transition: unset;
    font-size: 16px;
    width: 130px;
    height: 42px;
    justify-content: center;
    align-items: center;
    padding-bottom: 3px;
}
.c-btn:hover {
    background-color: #00a63c;
    -webkit-transition: unset;
    transition: unset;
    color: #fff;
}

.c-section-head__title {
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  line-height: 1;
  font-size: 48px;
}
@media screen and (max-width: 767px) {
  .c-section-head__title {
    font-size: 42px;
  }
}


.c-section-head__subtitle {
  font-weight: 700;
  line-height: 1.7;
  margin-top: 5px;
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  .c-section-head__subtitle {
    font-size: 18px;
  }
}
.l-footer {
    background-color: #fff;
    border-top: 1px solid #00a63c;
    padding: 72px 0 72px;
}
@media screen and (max-width: 767px) {
  .l-footer {
    padding: 32px 0 48px;
  }
}


.l-footer__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 53px;
}

.l-footer__logo a {
  display: inline-block;
  height: auto;
  width: 248px;
}
@media screen and (max-width: 767px) {
  .l-footer__logo a {
    width: 168px;
  }
}

.l-footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 40px;
}
.l-footer__nav-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

@media screen and (max-width: 1300px) {
.l-footer__nav-col.l-footer__linklist {
    display: block;
    margin-top: 50px;
}
.l-footer__nav {
    gap: 20px;
    justify-content: space-between;
}
.l-footer__nav-wrap {
    display: block;
}
.l-footer__nav-heading.l-footer__nav-col--icon {
    justify-content: center;
}
.l-footer__sns {
    justify-content: center;
}
.l-footer__logo {
    text-align: center;
}
.l-footer__copyright {
    text-align: center;
}
}

@media screen and (max-width: 767px) {
  .l-footer__nav-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
.l-footer__nav {
        gap: 24px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        justify-content: space-between;
    }
.l-footer__nav .l-footer__nav-col {
    flex: 28%;
    max-width: 28%;
}
.l-footer__nav-col.l-footer__linklist {
    margin-top: 20;
}
}


.l-footer__nav-col {
  min-width: 100px;
}

.l-footer__nav-heading.l-footer__nav-col--icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    font-family: inherit;
    font-size: 16px;
}
@media screen and (max-width: 767px) {
.l-footer__nav-col {
    min-width: unset;
    margin-bottom: 10px;
}

  .l-footer__nav-heading.l-footer__nav-col--icon {
    gap: 12px;
  }

}


.l-footer__nav-heading.l-footer__nav-col--icon span {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 767px) {
  .l-footer__nav-heading.l-footer__nav-col--icon span {
    width: 16px;
    height: 16px;
  }
}


.l-footer__nav-heading {
    display: block;
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: #000;
    /*-webkit-transition: all 0.3s;
    transition: all 0.3s;*/
    margin-bottom: 12px;
}
@media screen and (max-width: 767px) {
  .l-footer__nav-heading {
    margin-bottom: 6px;    
    font-size: 16px;
  }
}


.l-footer__nav-heading:hover {
  color: #00a63c;
  /*-webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}

.l-footer__nav-list {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.l-footer__nav-link {
    color: #000;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    /*-webkit-transition: all 0.3s;
    transition: all 0.3s;*/
    font-size: 16px;
    margin-bottom: 4px;
}
@media screen and (max-width: 767px) {
.l-footer__nav-link {
        font-size: 14px;
        /* padding: 0 0 8px 4px; */
    }
}


.l-footer__nav-link:hover {
  color: #00a63c;
  /*-webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}

.l-footer__nav-link--external {
  font-weight: 700;
}

.l-footer__sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.l-footer__sns-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #1e1e1e;
}

.l-footer__sns-link svg {
  width: auto;
  height: 24px;
}
.l-footer__sns-link img {
    width: auto;
    height: 24px;
}
@media screen and (max-width: 767px) {
  .l-footer__sns-link svg {
    width: 30px;
  height: 24px;
  }
}


.l-footer__copyright {
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

html.is-fixed {
  overflow: hidden;
}

.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 80px;
}
@media screen and (max-width: 767px) {
  .l-header {
    height: auto;
  }
}


.l-header.is-change {
  background-color: rgba(0, 0, 0, .5);
}

/* ===========================
   TOP Header - スクロール時フェードインヘッダー
   =========================== */

/* TOPページ：初期状態は透明 */
.l-header.top-header {
  background-color: transparent;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* TOPページ：スクロール後のフェードイン状態 */
.l-header.top-header.is-change {
    /* background-color: rgba(0, 0, 0, 0.5); */
}

/* スクロール後：ナビリンク文字色を白に */
.l-header.top-header.is-change .l-header__nav-link {
  color: #fff;
}

/* スクロール後：ナビリンクホバー色 */
.l-header.top-header.is-change .l-header__nav-link:hover {
  color: #00a63c;
}

/* スクロール後：ロゴ画像を白に（※ロゴがSVGまたはfilter対応の場合） */
.l-header.top-header.is-change .l-header__logo img {
    /* filter: brightness(0) invert(1); */
    /* transition: filter 0.4s ease; */
}

/* スクロール後：ハンバーガーメニューのバーを白に（SP） */
.l-header.top-header.is-change .l-header__hamburger span {
  background-color: #fff;
}

/* スクロール後：ハンバーガーテキストを白に（SP） */
.l-header.top-header.is-change .l-header__hamburger-text {
    color: #000;
}

/* 下層ページヘッダー */
.l-header.row-header {
    /* background-color: rgb(255 255 255 / 83%); */
}
.l-header.row-header .l-header__nav-link {
color: #000;
}
.l-header.row-header .l-header__nav-link:hover {
color: #00a63c;
}

.l-header.row-header .l-header__hamburger span {
    background-color: #000000;
}

.l-header.row-header .l-header__hamburger-text {
    color: #000000;
}


.l-header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: inherit;
  padding: 16px 45px;
}
@media screen and (max-width: 767px) {
  .l-header__inner {
    padding: 16px 16px;
  }
}


.l-header__logo {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 130px;
  position: fixed;
  top: 32px;
}
@media screen and (max-width: 767px) {
  .l-header__logo {
    width: 100px;
    position: static;
    top: auto;
  }
}


.l-header__logo img {
  width: 100%;
  height: auto;
}

.l-header__hamburger {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    background: none;
    position: relative;
    z-index: 110;
    /* width: 30px; */
    /* height: inherit; */
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    display: none;
}
@media screen and (max-width: 1080px) {
  .l-header__hamburger {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
  }
}


.l-header__hamburger span {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  height: 1px;
  background-color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.l-header__hamburger span:nth-of-type(1) {
  top: -7px;
  width: 13px;
  right: 0;
}
.l-header__hamburger span:nth-of-type(2) {
  top: 2px;
  width: 22px;
  right: 0;
}
.l-header__hamburger span:nth-of-type(3) {
  top: 11px;
  width: 29px;
  right: 0;
}
.l-header__hamburger.is-open span:nth-of-type(1) {
  top: 6px;
  width: 29px;
  right: 0;
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
}
.l-header__hamburger.is-open span:nth-of-type(2) {
  opacity: 0;
}
.l-header__hamburger.is-open span:nth-of-type(3) {
  top: 5px;
  left: 42%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}
.l-header__hamburger.is-open .l-header__hamburger-text {
  opacity: 1;
}

.l-header__hamburger-text {
    font-size: 20px;
    top: 3px;
    position: relative;
    right: 16px;
    /* color: #fff; */
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-weight: 700;
    line-height: 1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.l-header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: inherit;
}
@media screen and (max-width: 1200px) {
  .l-header__nav {
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
  }
}
@media screen and (max-width: 1080px) {
  .l-header__nav {
    display: none;
  }
    .l-header__logo {
        width: 100px;
        position: static;
        top: auto;
    }
}


.l-header__nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 31px;
  list-style: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: inherit;
}

.l-header__nav-item {
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.l-header__nav-link {
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.144;
  white-space: nowrap;
  /*-webkit-transition: all 0.3s;
  transition: all 0.3s;*/
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.l-header__nav-link:hover {
  color: #00a63c;
  /*-webkit-transition: all 0.3s;
  transition: all 0.3s;*/
}

/* カレント（現在ページ）表示：ヘッダーの状態（top-header/row-header/is-change）に関わらず常に緑を優先表示 */
.l-header__nav-link.is-current {
    /* color: #00a63c !important; */
}

.l-header__nav-link--medium {
    /* font-weight: 500; */
}
.l-header__drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 105;
  -webkit-transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  display: none;
}
@media screen and (max-width: 1080px) {
  .l-header__drawer {
    display: block;
  }
}

.l-header__drawer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: opacity 0.35s ease, visibility 0s linear 0s;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}


.l-header__drawer-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  -webkit-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
}
.l-header__drawer.is-open .l-header__drawer-backdrop {
  opacity: 1;
}

.l-header__drawer-nav {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background-color: #000;
  padding: 80px 24px 40px;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
  transition: transform 0.35s ease, -webkit-transform 0.35s ease;
  overflow-y: auto;
}
.l-header__drawer.is-open .l-header__drawer-nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.l-header__drawer-logo {
  position: absolute;
  top: 16px;
  left: 16px;
}
.l-header__drawer-logo img {
  width: 100px;
  height: auto;
}

.l-header__drawer-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 28px;
  list-style: none;
}

.l-header__drawer-link {
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.144;
  white-space: nowrap;
  display: inline-block;
}

/* カレント（現在ページ）表示 */
.l-header__drawer-link.is-current {
  color: #00a63c;
}

.inner {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    /* max-width: 1920px; */
    padding-right: 45px;
    padding-left: 45px;
}


@media screen and (max-width: 1024px) {
.l-header__drawer-logo {
    position: absolute;
    top: 27px;
    left: 45px;
}
}

@media screen and (max-width: 767px) {
.l-header__inner {
        padding: 16px 16px;
    }
.l-header__drawer-logo {
    position: absolute;
    top: 16px;
    left: 16px;
}
  .inner {
    padding-right: 16px;
    padding-left: 16px;
  }
}


.loading {
  position: fixed;
  inset: 0;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 9999;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loading__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.loading__bars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5px;
  width: 16vw;
}
@media screen and (max-width: 767px) {
  .loading__bars {
    width: 50vw;
  }
}


.loading__bars span {
  display: block;
  width: 100%;
  background-color: #00a63c;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
  height: 10px;
}
@media screen and (max-width: 767px) {
  .loading__bars span {
    height: 5px;
  }
}

.loading__bars span:nth-child(odd) {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.loading__bars span:nth-child(even) {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.loading__bars span.is-visible {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}


.loading__img {
  opacity: 0;
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
  width: 16vw;
}
@media screen and (max-width: 767px) {
  .loading__img {
    width: 50vw;
  }
}

.loading__img.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

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

.p-top-projects__slider-nav {
    position: absolute;
    height: 150px;
    bottom: -196px;
    width: 160px;
}
@media screen and (max-width: 767px) {
  .p-top-projects__slider-nav {
    bottom: -116px;
    width: 100%;
  }
}


.p-top-projects__slider-nav .swiper-button-prev,
.p-top-projects__slider-nav .swiper-button-next {
  width: 60px;
}

.p-top-projects__slider-nav .swiper-button-prev svg,
.p-top-projects__slider-nav .swiper-button-next svg {
  fill: none;
}
.p-top-projects__slider-nav .swiper-button-prev.swiper-button-disabled,
.p-top-projects__slider-nav .swiper-button-next.swiper-button-disabled {
  opacity: 1;
}
.p-top-projects__slider-nav .swiper-button-prev.swiper-button-disabled svg path,
.p-top-projects__slider-nav .swiper-button-next.swiper-button-disabled svg path {
  stroke: #000;
  opacity: 1;
}

.p-top-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

.p-top-hero__text-img {
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 220px;
  left: 45px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .p-top-hero__text-img {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 336px;
  }
.p-top-projects__slider-nav .swiper-button-prev,
.p-top-projects__slider-nav .swiper-button-next {
  width: 40px;
}
}


.p-top-hero__text {
  position: absolute;
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 700;
  color: #fff;
  z-index: 10;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: 20px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .p-top-hero__text {
    font-size: 16px;
    top: 40%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}


.p-top-hero__images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
@media screen and (max-width: 767px) {
  .p-top-hero__images {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}


.p-top-hero__col {
  position: relative;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: auto;
  height: 100%;
}
.p-top-hero__col--left {
  width: 50%;
}


.p-top-hero__col--right {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .p-top-hero__col {
    width: 100%;
    height: 50%;
  }
}





.p-top-hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  -webkit-transition: -webkit-clip-path 3.6s cubic-bezier(0.77, 0, 0.2, 1);
  transition: -webkit-clip-path 3.6s cubic-bezier(0.77, 0, 0.2, 1);
  transition: clip-path 3.6s cubic-bezier(0.77, 0, 0.2, 1);
  transition: clip-path 3.6s cubic-bezier(0.77, 0, 0.2, 1), -webkit-clip-path 3.6s cubic-bezier(0.77, 0, 0.2, 1);
  will-change: clip-path;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 0;
}

.p-top-hero__slide.show {
  z-index: 3;
}

.p-top-hero__slide.next {
  z-index: 2;
}

.p-top-hero__col--left .p-top-hero__slide.leave {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}
@media screen and (max-width: 767px) {
  .p-top-hero__col--left .p-top-hero__slide.leave {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
}


.p-top-hero__col--right .p-top-hero__slide.leave {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
}
@media screen and (max-width: 767px) {
  .p-top-hero__col--right .p-top-hero__slide.leave {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
}


.p-top-hero__slide.reset {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  z-index: 1;
  -webkit-transition: none;
  transition: none;
}

.p-top-hero__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.p-top-hero__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-hero__content {
  position: absolute;
  bottom: 60px;
  right: 60px;
}

.p-top-hero__tagline {
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.198;
}

.p-top-hero__scroll {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  z-index: 10;
  -webkit-animation: scroll-indicator-fade-in 0.8s ease-out 2.5s both;
  animation: scroll-indicator-fade-in 0.8s ease-out 2.5s both;
  bottom: 48px;
}
@media screen and (max-width: 767px) {
  .p-top-hero__scroll {
    bottom: 24px;
  }
}


.p-top-hero__scroll-bar {
  display: block;
  width: 1px;
  background-color: #fff;
  -webkit-animation: scroll-bar-flow 2s ease-in-out 2.5s infinite;
  animation: scroll-bar-flow 2s ease-in-out 2.5s infinite;
  height: 63px;
}
@media screen and (max-width: 767px) {
  .p-top-hero__scroll-bar {
    height: 48px;
  }
}


.p-top-hero__scroll-label {
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1.128;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .p-top-hero__scroll-label {
    font-size: 12px;
  }
}


@-webkit-keyframes scroll-indicator-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scroll-indicator-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes scroll-bar-flow {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  50% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
}
@keyframes scroll-bar-flow {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  50% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
}
.p-top-about {
    border-bottom: 1px solid #00a63c;
    padding-block: 183px;
}
@media screen and (max-width: 767px) {
  .p-top-about {
    padding-block: 84px 90px;
  }
}


.p-top-about__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 148px;
}
@media screen and (max-width: 1024px) {
.p-top-about__inner {
  gap: 80px;
}
}

@media screen and (max-width: 767px) {
  .p-top-about__inner {
    gap: 32px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}


.p-top-about__left {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 32px;
  width: 45%;
}


.p-top-about__heading {
  font-weight: 700;
  line-height: 1;
  font-size: 32px;
}

@media screen and (max-width: 1024px) {
.p-top-about__heading {
  line-height: 1.2;
}
}

@media screen and (max-width: 767px) {
.p-top-about__left {
  width: 100%;
}
  .p-top-about__heading {
    font-size: 22px;
  }
}

.p-top-about__right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: justify;
}
.p-top-about__text {
    font-weight: 600;
    line-height: 1.75;
    font-size: 16px;
}
@media screen and (max-width: 767px) {
  .p-top-about__text {
    font-size: 15px;
  }
}


.p-top-about__viewmore {
  margin-top: 65px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .p-top-about__viewmore {
    margin-top: 40px;
    text-align: center;
  }
}


.p-top-projects {
    background-color: #fff;
    padding: 183px 0 70px;
}
@media screen and (max-width: 767px) {
  .p-top-projects {
    padding: 84px 0;
  }
}


.p-top-projects__title {
  font-family: "Neue-haas-grotesk-display", sans-serif;
}

.p-top-projects__slider {
  position: relative;
}

.p-top-projects__empty {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  color: #7d7d7d;
  text-align: center;
  margin-top: 63px;
}
@media screen and (max-width: 767px) {
  .p-top-projects__empty {
    margin-top: 60px;
  }
}


.p-top-projects__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-top: 63px;
}
@media screen and (max-width: 767px) {
  .p-top-projects__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 60px;
  }
}


.p-top-projects__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.p-top-projects__link {
  display: block;
  position: relative;
}
.p-top-projects__link span.p-top-projects_bg {
    display: none;
}
.p-top-projects__link:hover span.p-top-projects_bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #00a63c; */
    mix-blend-mode: multiply;
    background-color: rgb(0 166 60 / 80%);
}
.p-top-projects__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  margin-bottom: 23px;
}
@media screen and (max-width: 767px) {
  .p-top-projects__img-wrap {
    margin-bottom: 16px;
  }
}


.p-top-projects__img-wrap::after {
  /*content: "View more";*/
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #00a63c;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@media (any-hover: hover) {
  .p-top-projects__link:hover .p-top-projects__img-wrap::after {
    opacity: 1;
  }
}
.p-top-projects__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-projects__img.no-image {
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.p-top-projects__caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* padding-left: 6px; */
    /* gap: 14px; */
}
.p-top-projects__caption .cat_area span:hover {
    color: inherit;
}

.p-top-projects__name {
  font-weight: 700;
  line-height: 1.7;
  color: #000;
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  .p-top-projects__name {
    font-size: 20px;
  }
}


.p-top-projects__type {
  font-weight: 700;
  line-height: 1.7;
  color: #7d7d7d;
  font-size: 17px;
}
@media screen and (max-width: 767px) {
  .p-top-projects__type {
    font-size: 16px;
  }
}


.p-top-projects__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 103px;
}



/* TOP Projects 矢印：通常時は黒、使用可能な矢印のホバー時だけ緑。両端の無効時は変化なし */
.p-top-projects__slider-nav .swiper-button-prev svg path,
.p-top-projects__slider-nav .swiper-button-next svg path {
  stroke: #000;
  /*-webkit-transition: stroke 0.3s ease;
  transition: stroke 0.3s ease;*/
  stroke-width: 3px;
}
.p-top-projects__slider-nav .swiper-button-prev:not(.swiper-button-disabled):hover svg path,
.p-top-projects__slider-nav .swiper-button-next:not(.swiper-button-disabled):hover svg path {
  stroke: #00a63c;
}





.p-top-technology {
    background-color: #fff;
    padding: 70px 0 183px;
}
@media screen and (max-width: 767px) {
  .p-top-technology {
    padding: 68px 0;
  }
}


.p-top-technology__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}

.p-top-technology__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 60px calc(50% - 50vw) 0;
  gap: 0;
}
@media screen and (max-width: 767px) {
  .p-top-technology__list {
    margin: 40px calc(50% - 50vw) 0;
  }
}


.p-top-technology__item {
  position: relative;
  overflow: hidden;
  width: 25%;
}
@media screen and (max-width: 767px) {
  .p-top-technology__item {
    width: 100%;
  }
}


.p-top-technology__link {
  display: block;
  position: relative;
}

.p-top-technology__link span.p-top-technology__bg{
  display: none;
}
.p-top-technology__link:hover span.p-top-technology__bg {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    /* background-color: #00a63c; */
    background-color: rgb(0 166 60 / 80%);
    mix-blend-mode: multiply;
}

.p-top-technology__link::after {
  /*content: "View more";*/
  position: absolute;
  color: #00a63c;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  z-index: 30;
  pointer-events: none;
}

.p-top-technology__link:hover::after {
  opacity: 1;
}

.p-top-technology__img-wrap {
  overflow: hidden;
  position: relative;
}

.p-top-technology__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-fit: cover;
  object-fit: cover;
  aspect-ratio: 378/592;
}
@media screen and (max-width: 767px) {
.p-top-technology__img {
        aspect-ratio: 16 / 10;
    }
}

.p-top-technology__body {
    position: absolute;
    bottom: 25px;
    left: 0%;
    padding: 24px;
    width: 100%;
    z-index: 110;
}
.p-top-technology__name {
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
  font-size: 26px;
  margin-bottom: 22px;
}
@media screen and (max-width: 767px) {
  .p-top-technology__name {
    font-size: 24px;
    margin-bottom: 16px;
  }


}

.p-top-technology__desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    color: #fff;
}

.p-top-technology__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 64px;
}
@media screen and (max-width: 767px) {
  .p-top-technology__more {
    margin-top: 40px;
  }
}

.p-top-recruit {
  position: relative;
  overflow: hidden;
  height: 740px;
}
.p-top-recruit__bg {
    inset: 0;
    width: 100%;
    margin-inline: auto;
    position: absolute;
    max-width: 1920px;
    height: auto;
    padding: 0 45px;
}
@media screen and (max-width: 767px) {
  .p-top-recruit {
      height: auto;
  }
    .p-top-recruit__bg {
        height: auto;
        position: static;
        padding: 0 16px;
    }
}


.p-top-recruit__bg-link {
  display: block;
  width: 100%;
  height: 100%;
}

.p-top-recruit__bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-recruit__body {
    position: absolute;
    top: 44%;
    z-index: 1;
    left: 100px;
    /* -webkit-transform: translate(-50%, -50%); */
    /* transform: translate(-50%, -50%); */
    /* text-align: left; */
    /* width: -webkit-max-content; */
    /* width: -moz-max-content; */
    /* width: max-content; */
}

.p-top-recruit__body::after {
  /*content: "View more";*/
  display: block;
  margin-top: 20px;
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #00a63c;
  letter-spacing: 0.08em;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  font-size: 30px;
}
@media screen and (max-width: 767px) {
  .p-top-recruit__body::after {
    font-size: 24px;
  }
.p-top-recruit__bg-link {
    height: auto;
}
.p-top-recruit__body {
    position: absolute;
    top: 41%;
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
    width: -webkit-max-content;
    width: max-content;
}
}


@media (any-hover: hover) {
  .p-top-recruit:hover .p-top-recruit__body::after {
    opacity: 1;
  }
}
.p-top-recruit__heading {
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-size: 64px;
}
@media screen and (max-width: 767px) {
  .p-top-recruit__heading {
    font-size: 36px;
  }
}
.p-top-recruit__text {
    font-weight: 700;
    line-height: 2;
    color: #fff;
    /* text-align: center; */
    margin-top: 200px;
    font-size: 24px;
}
@media screen and (max-width: 767px) {
.p-top-recruit__text {
        display: none;
    }
}


.under_page.p-projects-detail .p-top-contact {
    border-top: 1px solid #00a63c;
}
.p-top-contact {
  padding-block: 160px;
  border-top: 1px solid #00a63c;
    margin-top: min(16vw, 180px);
}
@media screen and (max-width: 767px) {
  .p-top-contact {
    padding-block: 56px 56px;
  }
}


.p-top-contact__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 32px;
}
@media screen and (max-width: 767px) {
  .p-top-contact__inner {
    gap: 18px;
  }
}


.p-top-contact__heading {
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    text-align: center;
    /* -webkit-transition: all 0.3s; */
    /* transition: all 0.3s; */
    font-size: 48px;
    padding: 24px 60px;
    width: 100%;
    max-width: 815px;
    border: 5px solid #00a63c;
}
@media screen and (max-width: 767px) {
  .p-top-contact__heading {
    font-size: 26px;
    padding: 16px 32px;
    border: 3px solid #00a63c;
  }
}


.p-top-contact__heading:hover {
    background-color: #00a63c;
    color: #fff;
    /* -webkit-transition: all 0.3s; */
    /* transition: all 0.3s; */
}

.p-top-contact__cta-text {
  font-weight: 700;
  margin-top: 8px;
  line-height: 1.7;
  color: #000;
  text-align: center;
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  .p-top-contact__cta-text {
    font-size: 20px;
  }
}



/* ========================================================================================
   Projects Detail Page プロジェクト詳細ページ
   ======================================================================================== */
.single .l-header__nav-link {
    color: #000
}
.p-detail-hero {
  aspect-ratio: 16/9;
}
.p-detail-hero img {
    aspect-ratio: 949 / 631;
    object-fit: contain;
    margin-bottom: 24px;
    object-position: left;
}
@media screen and (max-width: 767px) {
    .p-detail-hero {
        margin-top: 80px;
        height: auto;
    }

}

.p-content__desc {
    margin-top: 72px;
    line-height: 1.7;
    font-size: 14px;
    text-align: justify;
    font-weight: 500;
}
@media screen and (max-width: 767px) {
  .p-content__desc {
    font-size: 16px;
  }
.p-detail-hero img {
    height: auto;
    max-width: 100%;
}
}


/* ----- Hero ----- */
.p-project-detail-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}


.p-project-detail-hero__img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ----- Content ----- */
.p-detail-content {
    padding-block: 83px 100px;
}
@media screen and (max-width: 767px) {
  .p-detail-content {
    padding-block: 56px 64px;
  }
}


.p-detail-content__inner {
    margin: 0 auto;
    /* max-width: 1860px; */
    padding-right: 45px;
    padding-left: 45px;
    display: flex;
    margin-top: 150px;
    height: 80dvh;
}
.p-detail-content__left {
    flex: 35%;
    max-width: 35%;
    padding-right: 3%;
    height: 100%;
    overflow-y: scroll;
}
.p-detail-content__right {
    flex: 65%;
    max-width: 65%;
    height: 100%;
    overflow-y: scroll;
}
.p-detail-content__title {
    display: block;
    line-height: 1;
}
span.p-detail-content__title-jp{
    font-weight: 600;
    line-height: 1.4;
    color: #000;
    font-size: 32px;
    display: block;
}
span.p-detail-content__title-en {
    font-size: 15px;
    color: #00A63C;
    font-weight: 600;
    font-family: "Neue-haas-grotesk-display", sans-serif;
}
.p-detail-content__cat {
    font-size: 16px;
    margin-top: 40px;
    font-weight: 700;
    color: #7D7D7D;
    display: flex;
    flex-wrap: wrap;
}
.p-detail-content__cat span:after {
    content: '/';
    display: inline-block;
    margin: 0 4px;
}
.p-detail-content__cat span:last-child:after {
  display: none;
}







@media screen and (max-width: 767px) {
  .p-detail-content__title {
    font-size: 20px;
  }
.p-detail-content__inner {
    padding-right: 16px;
    padding-left: 16px;
}
span.p-detail-content__title-jp {
    font-size: 20px;
}
span.p-detail-content__title-en {
    font-size: 12px;
}
.p-detail-content__cat {
    font-size: 14px;
}
}


.p-detail-content__desc {
  font-weight: 400;
  line-height: 1.8;
  color: #000;
  margin-top: 40px;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .p-detail-content__desc {
    margin-top: 32px;
    font-size: 14px;
  }
}


.p-detail-content__desc p + p {
  margin-top: 0;
}

/* ----- Spec Table ----- */
.p-detail-content__table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.7;
  margin-top: 72px;
    font-size: 14px;
}
@media screen and (max-width: 767px) {
.p-detail-content__table {
        margin-top: 0;
    }
}



.p-detail-content__table-row {
    /* border-bottom: 1px solid #e0e0e0; */
    /* background-color: #E7E6E6; */
}

.p-detail-content__table-row:nth-child(even) {
    /* background-color: #FAFAFA; */
}

.p-detail-content__table-label {
    white-space: nowrap;
    text-align: left;
    vertical-align: top;
    padding: 5px 0;
    width: 18%;
    font-weight: bold;
    font-size: 12px;
}
@media screen and (max-width: 767px) {
.p-detail-content__table-label {
        padding: 0 0 10px 0;
        width: 20%;
    }
}
.p-detail-content__table-value {
    vertical-align: middle;
    padding: 6px;
    font-size: 12px;
}
@media screen and (max-width: 767px) {
.p-detail-content__table-value {        
        padding: 0 0 10px 0;
    }
    .p-detail-content__table th, .p-detail-content__table td {
        border-bottom: 0;
    }
    .p-detail-content__table-label {
        padding-left: 0;
        padding-bottom: 0;
    }
    .p-detail-content__left .p-content__desc {
        font-size: 16px;
        margin-top: 40px;
    }
}


/* ----- Gallery ----- */
.p-project-detail-gallery {
  padding-block: 0 120px;
}
@media screen and (max-width: 767px) {
  .p-project-detail-gallery {
    padding-block: 0 64px;
  }
}


.p-project-detail-gallery__slider {
  overflow: hidden;
}

.p-project-detail-gallery__item {
    overflow: hidden;
    aspect-ratio: 67 / 44;
    position: relative;
}

.p-project-detail-gallery__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ----- Gallery Navigation ----- */
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  width: auto !important;
  display: block;
}
@media screen and (max-width: 767px) {
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    display: none;
  }
}


.p-project-detail-gallery__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 32px;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .p-project-detail-gallery__nav {
    gap: 24px;
    margin-top: 32px;
  }
}


.p-project-detail-gallery__prev,
.p-project-detail-gallery__next {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-project-detail-gallery__prev,
  .p-project-detail-gallery__next {
  width: 48px;
  height: 48px;
}
.p-project-detail-gallery__prev svg,
  .p-project-detail-gallery__next svg {
  width: 48px;
  height: 48px;
}


.p-project-detail-gallery__prev:hover,
.p-project-detail-gallery__next:hover {
  opacity: 0.6;
}

/* ----- Gallery Pagination (Dots) ----- */
.p-project-detail-gallery__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 767px) {
  .p-project-detail-gallery__pagination {
    gap: 8px;
  }
}


.p-project-detail-gallery__pagination .swiper-pagination-bullet {
  background-color: #ccc;
  border-radius: 50%;
  opacity: 1;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  cursor: pointer;
  width: 10px;
  height: 10px;
}
@media screen and (max-width: 767px) {
  .p-project-detail-gallery__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}


.p-project-detail-gallery__pagination .swiper-pagination-bullet-active {
  background-color: #333;
}



/* ========================================================================================
   Projects archive page
   ======================================================================================== */
section.p-page-hero {
    margin-top: 220px;
}

/* =========================
   Filter（iPhone完全対応版）
   ========================= */

.p-filter {
  margin-top: 60px;
}

/* ボタン */
.p-filter__toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: #000;
  -webkit-text-fill-color: #000;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.p-filter__box {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-wrap: wrap;      /* 列が入りきらない時は折り返す */
    gap: 20px 4%;         /* 行間20px / 列間4% */
}
.p-filter__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* 開いた状態 */
.p-filter__box.is-open {
  max-height: 1000px; /* iPhone対策で大きめ */
  opacity: 1;
  visibility: visible;
  margin-top: 20px;

}

/* ラベル */
.p-filter__box label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    cursor: pointer;
    color: #000;
    margin-right: 10px;
    font-weight: 700;
}

/* チェックボックス 
.p-filter__box input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}*/

/* ===== Projects フィルター チェックボックス ===== */
.p-filter__box input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  display: inline-block;
  vertical-align: -2px;   /* ラベル文字との高さ調整 */
  margin: 0 6px 0 0;
  cursor: pointer;
  flex-shrink: 0;
}

.p-filter__box input[type="checkbox"]:checked {
  background-color: #00a63c;
  border-color: #00a63c;
}




/* =========================
   フィルター結果（フェード）
   ========================= */

.js-projectItem {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.js-projectItem.is-show {
  opacity: 1;
  transform: translateY(0);
}













section.p-archive-content {
    margin-top: 180px;
}
ul.p-archive-content__list {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 3%;
}
li.p-archive__list-detail {
    flex: 31.3%;
    max-width: 31.3%;
}
img.p-archive__list-detail_img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
h2.p-archive__list-detail_title {
    font-size: 20px;
    margin-top: 20px;
}
.cat_area {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1;
    color: #7D7D7D;
    font-weight: bold;
}
li.p-archive__list-detail a .project-card__figure{
  position: relative;
}
li.p-archive__list-detail a:hover .project-card__figure span.project_bg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    /* background-color: #00a63c; */
    mix-blend-mode: multiply;
    background-color: rgb(0 166 60 / 80%);
}

.cat_area span:after{
  content: '/';
  display: inline-block;
  margin: 0 4px;
  color: #7D7D7D;
}
.cat_area span:last-child:after{
  display: none;
}
.wp-pagenavi {
    margin-top: 114px;
    text-align: center;
}
.wp-pagenavi a, .wp-pagenavi span {
    border: none !important;
    font-size: 24px !important;
    margin: 0 8px !important;
    color: #B9B9B9 !important;
}
.wp-pagenavi span.current {
    color: #000 !important;
}

@media screen and (max-width: 767px) {
li.p-archive__list-detail {
    flex: 48%;
    max-width: 48%;
}
section.p-page-hero {
    margin-top: 100px;
}
section.p-archive-content {
    margin-top: 70px;
}
.p-filter__box {
    flex-direction: column;
    gap: 4px;
}
.p-filter__col {
    width: 100%;
}
}

@media screen and (max-width: 480px) {
li.p-archive__list-detail {
    flex: 100%;
    max-width: 100%;
}
}


/* 共通 */
.lower .heading h2 {
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-size: 48px;
    font-weight: 600;
}

.lower .heading p {
    font-weight: 700;
    margin-top: 0px;
    font-size: 15px;
}

@media(max-width:767px){
.lower .heading h2 {
    font-size: 36px;
}
}

/* intro */

.about-intro,.recruit-intro{
    padding:120px 0;
}
.recruit-intro {
    padding-bottom: 0;
}
.page.page-id-256 section.p-page-hero {
    margin-top: 220px;
    margin-bottom: -207px;
}
.intro-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.intro-text {
    flex: 50%;
    max-width: 50%;
    margin-top: 7vw;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.intro-text h1 {
    font-size: 32px;
    margin: 12vw 0 6vw 0;
}

.intro-text p{
    line-height: 1.8;
  font-size:16px;
}
.intro-image {
    max-width: 40%;
    flex: 40%;
}
.intro-image img {
    height: 90dvh;
    width: 100%;
    object-fit: cover;
}
.intro-logo{
}
.intro-logo img{
  width:17vw;
  max-width: 100%;
    display: unset;
}








/* strength */
.strength{
    padding:150px 0;
}

.strength-item{
    display:flex;
    align-items:center;
    gap:1.5vw;
    margin-top:75px;
}

.strength-item.reverse{
    flex-direction:row-reverse;
}

.strength-image{
    width:54%;
}

.strength-content{
    width:45%;
}

.strength-content h3 {
    font-size: 40px;
    margin-bottom: 0px;
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
}

.strength-content h4{
  font-size:24px;
    margin-bottom: min(4vw, 60px);
}

.strength-content p{
    line-height:1.7;
  font-size:16px;
  text-align: justify;
}

/* business */

@media(max-width:767px){
.page.page-id-256 section.p-page-hero {
    margin-bottom: unset;
}

    .intro-wrap,
    .strength-item,
    .business{
        flex-direction:column;
    }
  
    .intro-wrap{
    gap: 45px;
    } 

    .strength-item.reverse{
        flex-direction:column;
    }

    .intro-text,
    .intro-image,
    .strength-image,
    .strength-content,
    .business-left,
    .business-right{
        width:100%;
    }
  
    .intro-text {
        margin-top: 0;
        flex: 100%;
        max-width: 100%;
    }
  
    .intro-text h2{
        font-size:22px;
        margin-bottom:40px;
    }

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

    .strength-content h3{
        font-size:26px;
    }
  
  .strength-content h4 {
        font-size: 20px;
        margin-bottom: 20px;
  }
  
    .intro-logo{
    }
  
  .intro-logo img {
        width: 39vw;
    }

    .strength-item{
        margin-top:45px;
    gap: 20px;
    }
  
  .strength {
        padding: 0;
    }
    .intro-image.sp_only {
        margin-bottom: 40px;
        margin-right: 0;
        max-width: 100%;
        flex: 100%;
    }
.intro-image img {
    height: auto;
}
}


.business {
    padding-top:150px;
  border-top:1px solid #00A63C;
}

.business__inner {
    display: flex;
}

.business__nav {
    width: 40%;
    padding: 0 45px 0 0;
    /*display: flex;*/
    flex-direction: column;
  position:relative;
}

.business__image {
    width: 60%;
}

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

.business__menu {
    list-style: none;
    padding: 0;
    margin-top: 3.5vw;
}

.business__menu li + li {
    margin-top: 4px;
}

.business__tab {
    margin-bottom:0;
    font-size: 20px;
  color: #B9B9B9;
  font-weight:bold;
    /*transition: .3s;*/
  padding: 0
}

.business__tab:hover {
    color: #000;
}

.business__tab.is-active {
    color:#000;
    font-weight:bold;
  border-bottom:2px solid #00A63C;
  display: inline-block;
}

.business__text {
    margin-top: 14vw;
    font-size: 16px;
    line-height: 1.7;
  position: absolute;
    bottom: 0;
    padding-right: 40px;
}

/* ---------- SP ---------- */

@media (max-width: 1200px) {

    .business__inner {
        flex-direction: column;
    }

    .business__nav,
    .business__image {
        width: 100%;
    }

    .business__nav {
        padding: 0 0 30px 0;
    }

    .business__menu {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30px 0 30px 0;
    }

    .business__menu li {
        margin: 0;
    }
  
  .business__menu li + li {
        margin-top: 0px;
  }

    .business__text {
        margin-top: 0;
    position: static;
    padding-right: 0px;
    }
  
  .business__tab {
      font-size: 14px;
  }
}
@media (max-width: 767px) {
  .business {
    padding-top: 50px;
    border-top: 1px solid #00A63C;
      margin-top: 50px;
  }
}






/* products */
.products{
    padding:80px 0 0;
}
.products-item {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    margin-top: 75px;
}
.products-item:first-child {
    margin-top: 0;
}
.products-item.reverse{
    flex-direction:row-reverse;
}

.products-image{
    width:54%;
}

.products-content{
    width:44%;
}

.products-content h3 {
    font-size: 40px;
    margin-bottom: 0px;
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
}
.products-content h4 {
    font-size: 24px;
    margin-bottom: min(4vw, 60px);
    font-weight: 700;
}

.products-content p{
    line-height: 1.7;
    font-size: 16px;
    text-align: justify;
}
section.products:last-child {
    padding-bottom: 0;
}
@media(max-width:767px){

    .products-item{
        flex-direction:column;
    }

    .products-item.reverse{
        flex-direction:column;
    }

    .products-image,
    .products-content{
        width:100%;
    }

    .products-content h3{
        font-size:26px;
    }
  
  .products-content h4 {
        font-size: 20px;
        margin-bottom: 20px;
  }
    .products-item{
        margin-top:45px;
    gap: 20px;
    }
  }




/* ========================================================================================
   Technology page 工法・技術  ※追加CSSはここだけ
   ======================================================================================== */

/* ---- アンカーナビ ---- */
.tech-anchor { list-style: none; padding: 0; margin-top: 60px; }
.tech-anchor li + li {
    margin-top: 1px;
}
.tech-anchor a {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    color: #000;
    /*transition: color 0.3s;*/
}
.tech-anchor a:hover { color: #00a63c; }
.tech-anchor__label { display: inline-block; min-width: 8em; }
.tech-anchor__arrow { flex-shrink: 0; }
span.tech-anchor__label + img {
    width: 40px;
    height: auto;
}
/* ---- セクション ---- */
.tech-section {
    padding-top: 180px;
}
.tech-section + .tech-section {
    padding-top: 160px;
    border-top: 1px solid #00a63c;
    margin-top: min(16vw, 160px);
}
.tech-section__title { font-size: 32px; font-weight: 700; margin-bottom: 50px; }

/* ---- 工法カードグリッド ---- */
.tech-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 3%; }
.tech-card {
    cursor: pointer;
    transition: opacity 0.3s;
}
.tech-card .tech-card__figure span.tech_bg{
  display: none;
}
.tech-card .tech-card__figure{
  position: relative;
}
.tech-card:hover .tech-card__figure span.tech_bg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: rgb(0 166 60 / 100%);
    mix-blend-mode: multiply;
}
.tech-card__figure { position: relative; margin: 0; }
.tech-card__figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 443 / 355;
    object-fit: cover;
}
.tech-card__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 10px;
    text-align: center;
    color: #00a63c;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    font-family: "Neue-haas-grotesk-display", sans-serif;
    mix-blend-mode: multiply;
}
.tech-card:hover .tech-card__label {
    color: #fff;
    z-index: 110;
    mix-blend-mode: hard-light;
}

.tech-card__title { font-size: 20px; font-weight: 700; margin-top: 20px; }
.tech-card__text {
    font-size: 14px;
    line-height: 1.8;
    margin-top: 12px;
    font-weight: 500;
}

/* ---- レスポンシブ ---- */
@media screen and (max-width: 1200px) {
  .tech-list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .tech-anchor { margin-top: 40px; }
  .tech-section { padding-top: 50px; }
  .tech-section + .tech-section {
        padding-block: 56px 0;
    }
  .tech-section__title { font-size: 24px; margin-bottom: 30px; }
  .tech-card__label { font-size: 16px; }
}

@media screen and (max-width: 480px) {
  .tech-list { grid-template-columns: 1fr; gap: 40px; }
}

/* ========================================================================================
   Technology Modal Styles - styles.css に追記
   ======================================================================================== */

/* ---- モーダルオーバーレイ ---- */
.tech-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tech-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
/* ---- モーダルボックス本体 ---- */
.tech-modal {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 1400px;
    max-height: 95vh;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    padding: 100px;
}

/* ---- 閉じるボタン ---- */
.tech-modal__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: #00a63c;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  /*transition: opacity 0.3s;*/
}

.tech-modal__close:hover {
  opacity: 0.7;
}

.tech-modal__close svg {
  width: 100%;
  height: 100%;
}

/* ---- モーダルコンテンツ（左右レイアウト） ---- */
.tech-modal__content {
  display: flex;
  height: 100%;
  align-items: stretch;
}

.tech-modal__image {
    width: 50%;
    aspect-ratio: 1 / 1;
    /* background: #f5f5f5; */
    /* display: flex; */
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tech-modal__image img {
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.tech-modal__body {
    width: 50%;
    padding: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow-y: auto;
    position: relative;
}

/* ---- モーダル内テキスト要素 ---- */
.tech-modal__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.tech-modal__subtitle {
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #00a63c;
    margin: 0 0 80px 0;
    letter-spacing: 0.5px;
}
.tech-modal__text {
    font-size: 14px;
    line-height: 1.7;
    color: #000;
    font-weight: 500;
}
.tech-modal__text p {
  margin: 0;
}

.tech-modal__text p + p {
  margin-top: 1em;
}
.tech-modal__pdfs {
    margin-top: 40px;
}
/* PDF ボタン（既存 .c-btn 活用） */
#techModalPdf {
  align-self: flex-start;
}

/* ---- レスポンシブ: タブレット以下 ---- */
@media screen and (max-width: 1024px) {
  .tech-modal {
    width: 95%;
    max-height: 90vh;
  }

  .tech-modal__close {
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
  }

  .tech-modal__body {
    padding: 50px 40px;
  }

  .tech-modal__title {
    font-size: 28px;
  }

  .tech-modal__text {
    font-size: 14px;
  }

}
/* ---- レスポンシブ: スマートフォン ---- */
@media screen and (max-width: 767px) {
  .tech-modal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .tech-modal__close {
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
  }

  .tech-modal__content {
    flex-direction: column;
  }

    .tech-modal__image {
        width: 100%;
        height: auto;
        aspect-ratio: unset;
    }

.tech-modal__body {
        width: 100%;
        padding: 20px 0;
        justify-content: flex-start;
    }

  .tech-modal__title {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .tech-modal__subtitle {
    font-size: 13px;
    margin-bottom: 20px;
  }


    .tech-modal__text {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 20px;
        height: 90px;
        overflow-y: scroll;
    }

  #techModalPdf {
    width: 100%;
    text-align: center;
  }
.tech-modal {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 1400px;
    max-height: 95vh;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    padding: 20px;
}
.tech-modal__pdfs {
    margin-top: 0;
}
}

/* ---- Accessibility: フォーカス状態 ---- */
.tech-card:focus {
  outline: 2px solid #00a63c;
  outline-offset: 2px;
}

.tech-modal__close:focus {
  outline: 2px solid #00a63c;
  outline-offset: -2px;
}

/* ========================================================================================
   PC Header - 背景なし ＋ ブレンドモードによる文字色自動反転
   ※必ず styles.css の最終行に配置すること（中間挿入は後続ルールに負けるため不可）
   ======================================================================================== */

html {
  background-color: #fff;
}

body {
  background-color: #fff;
}

@media screen and (min-width: 1081px) {

  /* 1. ヘッダー背景を全ページ・全状態で撤去 */
  .l-header,
  .l-header.is-change,
  .l-header.top-header,
  .l-header.top-header.is-change,
  .l-header.row-header {
    background-color: transparent;
  }

  /* 2. .l-header のスタッキングコンテキストを解除（ロゴを合成対象から外すため） */
  .l-header {
    position: absolute;
    z-index: auto;
  }

  /* 3. ロゴ：合成対象外＝現状の色のまま */
  .l-header__logo {
    z-index: 1000;
  }

  /* 4. ナビゲーションのみを固定＋difference 合成
        ※ mix-blend-mode は必ず .l-header__nav（fixedでスタッキングコンテキストを作る要素自身）に
           かけること。子のリンク単位にかけると、そのスタッキングコンテキストの中に閉じ込められてしまい、
           実際の背景（写真）まで合成が届かなくなる（＝見た目に変化がなくなる）。 */
  .l-header__nav {
    position: fixed;
    top: -3px;
    left: 45px;
    right: 45px;
    width: auto;
    z-index: 100;
    mix-blend-mode: difference;
  }

  /* 5. 文字色 #fff を確実に適用（詳細度を上げて後続の #000 指定に勝たせる）
        ※ difference では黒文字＝完全透明になるため、ここが最重要 */
  .l-header.top-header.is-change .l-header__nav .l-header__nav-link,
  .l-header.top-header .l-header__nav .l-header__nav-link,
  .l-header.row-header .l-header__nav .l-header__nav-link,
  .l-header .l-header__nav .l-header__nav-link {
    color: #fff;
  }

  /* 6. ホバー：difference 通過後に #00a63c になる反転色 */
  .l-header.top-header.is-change .l-header__nav .l-header__nav-link:hover,
  .l-header.top-header .l-header__nav .l-header__nav-link:hover,
  .l-header.row-header .l-header__nav .l-header__nav-link:hover,
  .l-header .l-header__nav .l-header__nav-link:hover {
    color: #ccc;
  }

  /* 7. カレント：.l-header__nav は丸ごとdifference合成されるため、リンクの文字色だけを
        個別に「本来の緑」で表示することはできない（合成後の色は背景色に依存してしまう）。
        そのため、カレント項目は太字で区別しつつ、実際の緑インジケーターは
        .l-header__nav-current-marker（nav の外側＝difference合成の対象外）で表示する。 */
.l-header__nav-link.is-current {
        /* font-weight: 700; */
    }

  /* 7-1. カレントインジケーター（nav の外側に置くのでdifferenceの影響を受けない） */
  .l-header__nav-current-marker {
    position: fixed;
    height: 2px;
    top:47px;
    background-color: #00a63c;
    z-index: 101;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, left 0.3s ease, width 0.3s ease, top 0.3s ease;
  }
  .l-header__nav-current-marker.is-visible {
    opacity: 1;
  }
}

@media screen and (max-width: 1080px) {
  .l-header__nav-current-marker {
    display: none;
  }
}



  /* ============================================================
   about ページ（page-about.php 専用）
   ============================================================ */
 
.tech-modal__pdfs .c-btn {
    display: block;
    margin-bottom: 4px;
    width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.4;
}

  /* --- strength: 画像枠をスライダー化（枠のサイズ・レイアウトは既存のまま） --- */
  .strength-image .strength-slider {
    width: 100%;
    overflow: hidden;
  }
  /* 元画像は約3:2。ソース画像のサイズが混在しても高さを揃える */
  .strength-image .strength-slider .swiper-slide {
    aspect-ratio: 3 / 2;
  }
  .strength-image .strength-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* --- 操作エリア（矢印＋ドット）: 画像の下に配置 --- */
  .strength-slider__control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
  }
  /* Swiper 既定の絶対配置・アイコンを打ち消してフロー配置にする */
  .strength-slider__prev,
  .strength-slider__next {
    position: static;
    width: 40px;
    height: 40px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .3s;
  }
  .strength-slider__prev::after,
  .strength-slider__next::after {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    font-size: 0; /* swiper 既定アイコンを無効化 */
  }
  .strength-slider__prev::after { transform: rotate(-135deg); margin-left: 4px; }
  .strength-slider__next::after { transform: rotate(45deg);  margin-right: 4px; }
  .strength-slider__prev:hover,
  .strength-slider__next:hover { opacity: .5; }

  .strength-slider__pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
  }
  .strength-slider__pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #ccc;
    opacity: 1;
    transition: background-color .3s;
  }
  .strength-slider__pagination .swiper-pagination-bullet-active {
    background: #00a63c; /* ブランドグリーン */
  }

  @media (max-width: 767px) {
  .tech-modal__pdfs .c-btn {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    border: 1px solid #00a63c;
    padding: 5px;
}
    .strength-slider__control { margin-top: 16px; gap: 20px; }
  }

  /* --- business: タブ切替の画像をクロスフェード --- */
  /* 既存の .business__image / img のサイズ指定はそのまま。重ねるレイヤーのみ追加 */
  .business__image { position: relative; }
  .business__image-fade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0s ease;
    pointer-events: none;
  }
  .business__image-fade.is-visible { opacity: 1; }




  /* ============================================================
   Recruit ページ（page-recruit.php 専用）
   ※ styles.css の「本当の末尾」に追記してください
   ============================================================ */

/* ----- Hero ----- */
.p-recruit-hero {
  margin-top: 180px;              /* .p-page-hero と同じヘッダークリアランス */
}
.p-recruit-hero__inner {
  position: relative;
}
.p-recruit-hero__photo {
    width: 70%;
    margin: 0 auto;
}
.p-recruit-hero__photo .p-recruit-hero__main {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-recruit-hero__tagline {
    position: absolute;
    right: 7%;
    bottom: 28%;
    width: 34%;
    height: auto;
}
.p-recruit-hero__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 24px;
    margin-top: -5.5vw;
    position: relative;
    z-index: 1;
    mix-blend-mode: multiply;
}
.p-recruit-hero__title {
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-weight: 700;
    line-height: 1;
    color: rgb(0 166 60 / 80%);
    font-size: clamp(90px, 15vw, 232px);
    margin-left: -0.75%;
}
.p-recruit-hero__subtitle {
  font-weight: 700;
  color: #000;
  font-size: 15px;
}

/* ----- Lead（本文 ＋ Detail） ----- */
.p-recruit-lead {
  margin-top: 96px;
}
.p-recruit-lead__body {
  width: 50%;
  margin-left: auto;             /* 右カラム */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;   /* Detail ボタンを左寄せ */
  gap: 32px;
}
.p-recruit-lead__text {
  font-weight: 500;
  line-height: 1.7;
  color: #000;
  font-size: 16px;
  text-align: justify;
}
.p-recruit-lead__btn {
  margin-top: 16px;              /* .c-btn を流用、位置のみ調整 */
}

@media screen and (max-width: 1400px) {
  .p-recruit-hero__title {
    margin-left: -0.78%;
  }  
}
/* ----- SP（767px 以下：既存ブレイクポイントに合わせる） ----- */
@media screen and (max-width: 767px) {
  .p-recruit-hero {
    margin-top: 100px;          /* .p-page-hero の SP と同じ */
  }
  .p-recruit-hero__photo {
    width: 100%;
  }
  .p-recruit-hero__head {
    margin-top: -6vw;
    gap: 12px;
  }
  .p-recruit-hero__title {
    font-size: 64px;
    margin-left: -0.45%;
  }
  .p-recruit-lead {
    margin-top: 56px;
  }
  .p-recruit-lead__body {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .p-recruit-hero__title {
    margin-left: -0.85%;
  }
}


/* ============================================================
   Company ページ（page-company.php 専用）
   ============================================================ */

.company-page {
  margin-right: 22%; 
  margin-top: 120px;
  font-size: 16px;
}
section.company-policy {
    width: 80%;
}
@media screen and (max-width: 1520px) {
  .company-page {
    margin-right: 0;
  }
}

section.comc {
    margin-bottom: 120px;
    margin-top: -120px;
    padding-top: 120px;
}
.sec-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}
.sec-title::after {
    content: "";
    display: block;
    width: auto;
    height: 2px;
    background: #00a63c;
    margin-top: 2px;
}

/* ----- 会社方針 ----- */
section.company-policy .policy-box {
  margin-bottom: 60px;
}
section.company-policy .policy-box h3 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
}
section.company-policy .policy-box p {
  line-height: 1.7;
}

/* ----- ご挨拶 ----- */
.greeting-wrap {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
.greeting-image {
    width: 60%;
    flex-shrink: 0;
}
.greeting-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 82 / 55;
    object-fit: cover;
}
.greeting-text {
  flex: 1;
  min-width: 0;
}
.greeting-text p {
  line-height: 1.7;
}
.signature {
    text-align: right;
    margin-top: 40px;
    font-weight: bold;
    font-size: 15px;
}

/* ----- 会社概要 ----- */
.company-info table {
  width: 100%;
  border-collapse: collapse;
}
.company-info th, .company-info td {
    padding: 20px 20px 20px 0;
    border-bottom: 1px solid #00a63c;
    vertical-align: top;
}
.company-info th {
  width: 300px;
  text-align: left;
  font-weight: 700;
}
.company-info tr:first-child {
  border-top: 1px solid #00a63c;
}

/* ----- アクセス ----- */
.access-photo {
  margin-bottom: 60px;
}
.access-photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 7;
}
.access-body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.access-map {
  width: 38%;
  flex-shrink: 0;
}
.access-map__link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #00a63c;
  text-decoration: underline;
}
.map-wrap iframe {
  width: 100%;
  height: 360px;
  border: none;
  filter: grayscale(100%) brightness(105%) contrast(85%);
}
.access-info {
  flex: 1;
  display: flex;
  gap: 40px;
}
.office h3 {
  margin-bottom: 5px;
  font-size: 16px;
}
.office p {
  line-height: 1.7;
  margin-bottom: 20px;
}
.office p:last-child {
  margin-bottom: 0;
}

/* ----- SP（767px 以下：サイト共通ブレイクポイントに統一） ----- */
@media screen and (max-width: 767px) {
section.company-policy {
    width: 100%;
}
  .company-page {
    margin-right: 0;
    margin-top: 70px;
  }
  section.comc {
    margin-bottom: 70px;
    margin-top: -70px;
    padding-top: 70px;
  }
  .sec-title {
    font-size: 26px;
  }
  .policy-box h3 {
    font-size: 22px;
  }
  .greeting-wrap {
    flex-direction: column;
    gap: 40px;
  }
  .greeting-image {
    width: 100%;
    max-width: 350px;
  }
  .company-info table,
  .company-info tbody,
  .company-info tr,
  .company-info th,
  .company-info td {
    display: block;
    width: 100%;
  }
    .company-info th {
        border-bottom: none;
        padding-bottom: 0;
        padding-left: 0;
    }
  .company-info td {
    padding-top: 10px;
        padding-left: 0;
  }
  .access-photo {
    margin-bottom: 40px;
  }
  .access-body {
    flex-direction: column;
    gap: 40px;
  }
  .access-map {
    width: 100%;
  }
  .map-wrap iframe {
    height: 300px;
  }
  .access-info {
    flex-direction: column;
    gap: 40px;
  }

}


/* ============================================================
   Recruit ヒーロー フェードスライダー 追加分
   ※ styles.css の「本当の末尾」に追記してください
   ※ 画像サイズは既存の .p-recruit-hero__photo .p-recruit-hero__main が
     そのまま効くため、ここでは重なり順の保険のみ
   ============================================================ */
.p-recruit-hero__tagline {
  z-index: 2;   /* スライダーより手書きキャッチを前面に */
}




/* ========================================================================================
   Projects Detail Page — 追加調整（single-projects.php 専用）
   ※ 必ず「ライブ styles.css の末尾」に追記してください。
     途中に入れると後続ルールに上書きされます（セレクタは .p-projects-detail 起点で
     位置に依存しにくくしていますが、末尾追記が安全です）。
   ======================================================================================== */

/* ----- 2カラム：レスポンシブ（SPで縦積み） ----- */
@media screen and (max-width: 767px) {
.p-detail-content__inner {
        flex-direction: column-reverse;
        margin-top: 100px;
        gap: 40px;
        height: auto;
    }
    .p-detail-content__left, .p-detail-content__right {
        flex: auto;
        max-width: 100%;
        padding-right: 0;
        overflow: unset;
        height: auto;
    }
.p-projects-detail .p-detail-hero {
        margin-top: 40px;
    }
}

/* ----- 右カラム画像：フル幅＋実寸比率で表示（contain / 16:9 を上書き） ----- */
.p-projects-detail .p-detail-hero {
  aspect-ratio: auto;
}
.p-projects-detail .p-detail-hero img:last-child{
  margin-bottom: 0;
}
.p-projects-detail .p-detail-hero > img:not(.p-detail-hero__img) {
  display: none;
}

/* ----- 右カラム画像：縦横比で object-fit を自動分岐（JSで is-landscape / is-portrait を付与） ----- */
.p-projects-detail .p-detail-hero img.is-landscape {
  aspect-ratio: 949 / 631;
  object-fit: cover;
  object-position: center;
  margin-bottom: 24px;
}
.p-projects-detail .p-detail-hero img.is-portrait {
  aspect-ratio: 949 / 631;
  object-fit: contain;
  object-position: left;
  margin-bottom: 24px;
}

/* ----- Next（次のプロジェクト） ----- */
.p-detail-content__p_n {
    display: flex;
    justify-content: center;
    margin-top: min(16vw, 180px);
    border-top: 1px solid #00a63c;
}
.p-detail-next {
    /* border-top: 1px solid #00a63c; */
    padding: 180px 40px 0;
    /* margin-top: min(16vw, 180px); */
    flex: 50%;
    max-width: 50%;
}
.p-detail-next__link {
    display: flex;
    align-items: center;
    gap: 5%;
    /* max-width: 1860px; */
    margin: 0 auto;
    /* padding-inline: 45px; */
    flex-flow: column;
    position: relative;
}
.p-detail-next__text {
    margin-bottom: 40px;
    width: 100%;
}
.p-detail-next__label {
  display: block;
  font-family: "Neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  color: #000;
}
.p-detail-next__title {
  display: block;
  margin-top: 16px;
  line-height: 1.4;
}
.p-detail-next__title-jp {
  display: block;
  font-weight: 600;
  font-size: 24px;
  color: #000;
}
.p-detail-next__title-en {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: #00a63c;
    font-family: "Neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
}
.p-detail-next__img-wrap {
    flex: 100%;
    max-width: 100%;
    aspect-ratio: 67 / 44;
    overflow: hidden;
}
.p-detail-next__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
@media (any-hover: hover) {
  .p-detail-next__link .p-detail-next__img-wrap {
    position: relative;
  }
  .p-detail-next__link:hover .p-detail-next__img-wrap:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    mix-blend-mode: multiply;
    background-color: rgba(0, 166, 60, 0.8);
  }
}
@media screen and (max-width: 767px) {
.p-projects-detail .p-detail-hero img.is-portrait {
    aspect-ratio: auto;
}
.p-detail-content__p_n {
    display: block;
}
.p-detail-next {
        margin-top: 56px;
        padding: 56px 0 0;
        max-width: 100%;
    }
  .p-detail-next__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-inline: 16px;
  }
    .p-detail-next__text, .p-detail-next__img-wrap {
        flex: auto;
        max-width: 100%;
        width: 100%;
        padding-right: 0;
        margin-bottom: 0;
    }
  .p-detail-next__label { font-size: 32px; }
  .p-detail-next__title-jp { font-size: 22px; }
}







/* ============================================================
        page-contact 専用スタイル（self-contained）
        ・shared の styles.css / script.js は変更しない方針
        ・CF7 が出力する .wpcf7-* も含めて最小限で調整
============================================================ */

/* ----- 本体 ----- */
.p-contact {
  margin-top: 96px;
  padding-bottom: 160px;
  font-size: 16px;
}
.p-contact__block + .p-contact__block {
  margin-top: 100px;
}

/* ----- 見出し（緑の短いアンダーライン：他ページと同トーン） ----- */
.p-contact__heading {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 80px;
    width: auto;
    display: inline-block;
}
.p-contact__heading::after {
    content: "";
    display: block;
    width: auto;
    height: 2px;
    margin-top: 14px;
    background: #00a63c;
}

/* ----- お電話 ----- */

.p-contact__lead {
    line-height: 1.4;
    font-size: 16px;
    margin-bottom: 8px;
}
.p-contact__tel {
    line-height: 1.4;
    font-size: 24px;
}
.p-contact__tel a { color: #000; }
.p-contact__req { color: #00a63c; }

/* ----- フォーム注意書き ----- */
.p-contact__note {
  line-height: 1.8;
  margin-bottom: 40px;
}

/* ----- 行（左ラベル / 右入力の2カラム） ----- */
.p-contact__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #00a63c;
}
.p-contact__row:first-of-type { border-top: 1px solid #00a63c; }

.p-contact__label {
  width: 280px;
  flex-shrink: 0;
  padding-top: 10px;
  font-weight: 700;
}
.p-contact__field { flex: 1; min-width: 0; }

/* ----- 入力欄（グレー地はデザインに合わせて上書き） ----- */
.p-contact__field input[type="text"],
.p-contact__field input[type="email"],
.p-contact__field input[type="tel"],
.p-contact__field textarea {
  width: 100%;
  padding: 12px 16px;
  background: #f2f2f2;
  border: none;
  font-size: 16px;
  line-height: 1.6;
}
.p-contact__field textarea { min-height: 160px; }
.p-contact__row--textarea .p-contact__label { padding-top: 12px; }

/* ----- 電話番号（3ボックス＋ハイフン） ----- */
.p-contact__field--tel {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-contact__field--tel .wpcf7-form-control-wrap { flex: 0 1 160px; }
.p-contact__field--tel input[type="tel"] { width: 100%; }
.p-contact__hyphen { color: #000; }

/* ----- お問い合わせ種別（チェックボックス） ----- */
.p-contact__field--check .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 8px;
}
.p-contact__field--check .wpcf7-list-item { margin: 0; }
.p-contact__field--check .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  line-height: 1.4;
}

/* ----- お問い合わせ種別＊チェック 塗りつぶし----- */
/* 共通リセットで appearance:none にされているため、ここで復活 
.p-contact__field--check input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}*/
/* チェックボックス：チェック時に緑塗りつぶしのみ（チェックマークなし） */
.p-contact__field--check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #b9b9b9;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.p-contact__field--check input[type="checkbox"]:checked {
  background: #00a63c;
  border-color: #00a63c;
}








/* ----- 送信ボタン（デザインの緑枠ボタン） ----- */
.p-contact__submit {
  margin-top: 64px;
  text-align: center;
}
.p-contact__submit input[type="submit"] {
  display: inline-block;
  min-width: 280px;
  padding: 20px 40px;
  background: #fff;
  border: 2px solid #00a63c;
  color: #000;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  /*transition: all 0.3s;*/
}
.p-contact__submit input[type="submit"]:hover {
  background: #00a63c;
  color: #fff;
}
.p-contact__submit .wpcf7-spinner { display: block; margin: 16px auto 0; }

/* ----- CF7 バリデーション表示 ----- */
.p-contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #00a63c;
}
.p-contact .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 14px 16px;
  font-size: 14px;
}

.p-contact__field.p-contact__fieldw70 input {
    width: 70%;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #00a63c !important;
}

.wpcf7 form .wpcf7-response-output {
    border: 2px solid #00a63c !important;
}


/* ----- SP（767px 以下：サイト共通ブレイクポイント） ----- */
@media screen and (max-width: 767px) {
  .p-contact {
    margin-top: 56px;
    padding-bottom: 80px;
  }
  .p-contact__block + .p-contact__block { margin-top: 64px; }
    .p-contact__heading {
        font-size: 24px;
        margin-bottom: 40px;
    }
    .p-contact__tel {
        font-size: 16px;
        line-height: 1.7;
    }

  .p-contact__row {
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
  }
  .p-contact__label { width: 100%; padding-top: 0; }

  .p-contact__field--tel { gap: 8px; }
  .p-contact__field--tel .wpcf7-form-control-wrap { flex: 1 1 0; }

    .p-contact__submit input[type="submit"] {
        font-size: 18px;
    }
.p-contact__field {
    width: 100%;
}
.p-contact__field.p-contact__fieldw70 input {
    width: 100%;
}
.p-contact__lead {
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 8px;
}
}



/* 施工実績一覧 カテゴリタグ（タップで絞り込み） */
.cat_area span {
    cursor: pointer;
    /*transition: color 0.2s ease;*/
    line-height: 1.4;
}
.cat_area span:hover {
  color: #00a63c;
}

/* =============================================================
   TOP HERO 左右独立スライダー（エフェクトなし・瞬時切替）
   front-page.php のマークアップ差し替えに対応する専用スタイル。
   ※ 既存の .p-top-hero__images / __col / __slide 系とは
     クラスを分離しているため競合しません。
   ※ 挿入順の都合で、必ず styles.css の物理末尾に置くこと。
   ============================================================= */
.p-hero-rnd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
@media screen and (max-width: 767px) {
  .p-hero-rnd {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.p-hero-rnd__lane {
  position: relative;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  height: 100%;
}
.p-hero-rnd__lane--left,
.p-hero-rnd__lane--right {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .p-hero-rnd__lane {
    width: 100%;
    height: 50%;
  }
}

/* エフェクトなし：表示中の1枚だけを見せ、瞬時に切り替える */
.p-hero-rnd__cell {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
}
.p-hero-rnd__cell.is-current {
  opacity: 1;
  z-index: 1;
}

.p-hero-rnd__cell picture {
  display: block;
  width: 100%;
  height: 100%;
}
.p-hero-rnd__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ============================================================
   SP ハンバーガーを difference で背景透かし（PCナビと同手法）
   max-width:1080px＝ハンバーガー表示域（PCの difference は 1081px 以上なので非干渉）
   ============================================================ */
@media screen and (max-width: 1080px) {

  /* 1. ヘッダー背景を撤去（is-change のスクロール後 rgba(0,0,0,.5) 含む） */
  .l-header,
  .l-header.is-change,
  .l-header.top-header,
  .l-header.top-header.is-change,
  .l-header.row-header {
    background-color: transparent;
  }

  /* 2. .l-header / __inner のスタッキングコンテキストを解除
        → これが無いと difference がヘッダー内部止まりで本文まで透けない */
  .l-header {
    position: absolute;
    z-index: auto;
  }
  .l-header__inner {
    position: static;
    z-index: auto;
  }

  /* 3. ロゴは合成対象外＝高い z-index で現状の色のまま。個別に fixed で残す */
  .l-header__logo {
    position: fixed;
    top: 16px;
    z-index: 1000;
  }

  /* 4. ハンバーガー本体に fixed＋difference
        （固定と合成を “同一要素” で担うのが要。子だけに掛けても本文まで透けない） */
  .l-header__hamburger {
    position: fixed;
    top: 19px;
    right: 45px;
    z-index: 110;
    mix-blend-mode: difference;
  }

  /* 5.【最重要】バー・テキストを共に #fff に強制。
        ※ #000 のままだと difference で「背景と同色＝透明」になり文字・バーが消える。
        既存の row-header / is-change の #000 指定に勝つよう詳細度を上げている */
  .l-header .l-header__hamburger span,
  .l-header.row-header .l-header__hamburger span,
  .l-header.top-header .l-header__hamburger span,
  .l-header.top-header.is-change .l-header__hamburger span {
    background-color: #fff;
  }
  .l-header .l-header__hamburger .l-header__hamburger-text,
  .l-header.row-header .l-header__hamburger .l-header__hamburger-text,
  .l-header.top-header .l-header__hamburger .l-header__hamburger-text,
  .l-header.top-header.is-change .l-header__hamburger .l-header__hamburger-text {
    color: #fff;
  }

  /* テキスト位置の微調整 */
  .l-header__hamburger-text {
    top: 0;
    right: 0;
  }
}

/* SP（767px以下）：右位置のみ詰める。difference・fixed 等は上のブロックが継続 */
@media screen and (max-width: 767px) {
  .l-header__hamburger {
    right: 16px;
  }
}

article > * + * {
    margin-top: 0 !important;
}

/* =============================================================
   TOP HERO 左右同時クロスフェード（仕様変更）
   ・切替時は opacity をトランジションさせてクロスフェード。
   ・新カットは is-entering で最前面に重ね、フェードイン中も
     下地（旧カット＝不透明）が見えるので背景が透けない。
   ・FADE 値は front-page.php の JS 内 FADE と必ず一致させること。
   ・白フラッシュ対策の保険として、レーンに暗色下地を敷く。
   ※ 必ず styles.css の物理末尾に置くこと。
   ============================================================= */
.p-hero-rnd__lane {
  background-color: #1a1a1a;
}
.p-hero-rnd__cell {
  -webkit-transition: opacity 1200ms ease;
  transition: opacity 1200ms ease;
}
.p-hero-rnd__cell.is-entering {
  z-index: 2;
}



/* =============================================================
   Projects Filter アコーディオン（仕様変更）
   ・親タームごとに開閉するアコーディオン
   ・チェックボックスは「チェックマークなし・#00a63c 塗り」を踏襲
   ※ 必ず styles.css の物理末尾に置くこと
   ============================================================= */

/* パネル外枠 */
.p-filter__panel {
    /* border: 1px solid #e5e5e5; */
    /* border-radius: 10px; */
    /* padding: 6px 28px 26px; */
}
.p-filter__inner.inner {
    max-width: 80%;
    margin: 0;
}
/* 各カテゴリ（アコーディオン1グループ） */
.p-filter__group {
    /* border-bottom: 1px solid #e5e5e5; */
}

/* 見出し（クリックで開閉） */
.p-filter__acc-head {
    appearance: none;
    -webkit-appearance: none;
    width: 170px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    font-size: 17px;
    font-weight: 700;
    color: #222;
    -webkit-text-fill-color: #222;
    text-align: left;
}

.p-filter__acc-title {
  line-height: 1;
}

/* 開閉アイコン（▼／開くと反転） */
.p-filter__acc-icon {
    position: relative;
    width: 16px;
    height: 16px;
    border: none;
    cursor: pointer;
    margin-top: 1px;
}

.p-filter__acc-icon::before,
.p-filter__acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px; /* 線の太さ */
  background: #000;
  transform: translate(-50%, -50%);
}
.p-filter__acc-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.p-filter__acc-icon.active::after {
  transform: translate(-50%, -50%) rotate(0deg);
}


.p-filter__group.is-open .p-filter__acc-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 中身（閉じている状態） */
.p-filter__acc-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 2px;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
/* 開いた状態 */
.p-filter__group.is-open .p-filter__acc-body {
  max-height: 600px; /* 子タームが多い場合の保険で大きめ */
  opacity: 1;
  padding: 4px 2px 22px;
}

/* チェックボックス付きラベル */
.p-filter__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
}

/* チェックボックス本体（チェックマークなし・緑塗り） */
.p-filter__check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  vertical-align: -2px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.p-filter__check input[type="checkbox"]:checked {
  background-color: #00a63c;
  border-color: #00a63c;
}

/* フッター（条件をクリア） */
.p-filter__foot {
    display: flex;
    padding-top: 12px;
}
.p-filter__clear {
    display: flex;
    border: 2px solid #00a63c;
    font-weight: 700;
    line-height: 1;
    -webkit-transition: unset;
    transition: unset;
    font-size: 14px;
    width: 150px;
    height: 42px;
    justify-content: center;
    align-items: center;
    padding-bottom: 3px;
    color: #000;
}
.p-filter__clear:hover {
    background-color: #00a63c;
    -webkit-transition: unset;
    transition: unset;
    color: #fff;
}

@media screen and (max-width: 1400px) {
  .p-filter__acc-head {
  }
}

@media screen and (max-width: 1366px) {
  .p-filter__acc-head {
  }
}

/* SP調整 */
@media screen and (max-width: 767px) {
.p-filter__inner.inner {
    max-width: 100%;
}

  .p-filter__acc-head {
    font-size: 16px;
  }
  .p-filter__acc-body {
    gap: 10px 18px;
  }
}


/* ========================================================================
   Technology Modal — ブラウザ拡大時の見切れ対応（styles.css 末尾に追記）
   ======================================================================== */

.tech-modal-overlay {
  padding: 20px;
  overflow: hidden;
}

.tech-modal {
  --mp: clamp(20px, 4vw, 100px);   /* 拡大時に余白が自動で詰まる */
  width: 100%;
  max-width: min(1400px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  padding: var(--mp);
  display: flex;
  flex-direction: column;
  overflow-y: auto;                /* はみ出したらモーダル内でスクロール */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 閉じるボタン: absolute → sticky。スクロールしても常に右上30pxに残る */
.tech-modal__close {
  position: sticky;
  top: calc(30px - var(--mp));
  right: auto;
  left: auto;
  bottom: auto;
  align-self: flex-end;
  margin-top: calc(30px - var(--mp));
  margin-right: calc(30px - var(--mp));
  margin-bottom: calc(var(--mp) - 70px);  /* ボタン40px分を相殺し元の余白を維持 */
}

/* 高さを固定しない（画像が潰れてスクロールしなくなるのを防ぐ） */
.tech-modal__content {
  height: auto;
  flex: 0 0 auto;
}
.tech-modal__body {
  overflow: visible;
}

@media screen and (max-width: 1024px) {
  .tech-modal { width: 95%; }
  .tech-modal__close {
    top: calc(20px - var(--mp));
    margin-top: calc(20px - var(--mp));
    margin-right: calc(20px - var(--mp));
    margin-bottom: calc(var(--mp) - 55px);   /* 20 + 35px */
  }
}

@media screen and (max-width: 767px) {
  .tech-modal-overlay { padding: 10px; }
  .tech-modal {
    --mp: 20px;
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .tech-modal__close {
    top: calc(16px - var(--mp));
    margin-top: calc(16px - var(--mp));
    margin-right: calc(16px - var(--mp));
    margin-bottom: calc(var(--mp) - 48px);   /* 16 + 32px */
  }
  /* 高さ決め打ちを解除。モーダル全体のスクロールに任せる */
  .tech-modal__text {
    height: auto;
    overflow-y: visible;
    margin-bottom: 20px;
  }
}