@charset "UTF-8";

:root {
  interpolate-size: allow-keywords;
  --bl: #000;
  --gray-02: #ccc;
  --grad-01: linear-gradient(90deg, var(--MAIN) 0%, var(--LMAIN) 100%);
  --grad-01-rev: linear-gradient(0deg, var(--MAIN) 0%, var(--LMAIN) 100%);
  --grad-02: linear-gradient(90deg, var(--ACC) 0%, var(--LACC) 100%);
  --grad-02-rev: linear-gradient(0deg, var(--ACC) 0%, var(--LACC) 100%);
  --grad-03: linear-gradient(90deg, var(--OTH) 0%, var(--LOTH) 100%);
  --grad-03-rev: linear-gradient(0deg, var(--OTH) 0%, var(--LOTH) 100%);
  --transition: all 0.3s ease-in-out;
  --oversize: calc((100% - 100vw) / 2);
}

/* ==================================
リセット・調整・ファンデーション
===================================== */
/* 高さを画像自体の高さにする */
:where(img) {
  vertical-align: bottom;
}
:where(.thumb),
:where([class*="__thumb"]) {
  /* vertical-align: bottom; */
  background-color: unset;
}

/*---------- アクセシビリティ ----------*/
/* アイコンをスクリーンリーダーに読み上げられないようにする */
i,
[class*="material-icons"],
[class*="material-symbols"] {
  speak: none;
}

/*---------- BMパーツの調整 ----------*/
/* 疑似要素の削除 */
.no-before::before,
.no-after::after {
  content: unset !important;
}

/* スクロールした後のヘッダーのボタンの高さが変わるときにイージング */
.lib-induce__outer li:has(.lib-induce__btn) {
  transition: all 0.2s;
}

/* ボタンのアイコンを「→」に変更 */
/* :where(.lib-link__btn):not([class*="ico-after-"]):not([class*="ico-before-"]) > .txt::after {
  content: "\ea03";
  font-size: 1em;
} */

/* ボタンのアイコンに●の背景色を入れる */
/* :where(.lib-link__btn):not([class*="ico-after-"]):not([class*="ico-before-"]) {
   > .txt::after {
    color: var(--MAIN);
    background-color: var(--WHT);
    padding: 0.5em;
    border-radius: 50%;
    margin-top: -0.875em;
    line-height: 1;
    font-size: 0.675em;
    transition: var(--transition);
  }
  &:hover > .txt::after {
    color: var(--WHT);
    background-color: var(--MAIN);
  }
  &.bg-wht > .txt::after {
    color: var(--WHT);
    background-color: var(--MAIN);
  }
  &.bg-wht:hover > .txt::after {
    color: var(--MAIN);
    background-color: var(--WHT);
  }
  &.border-accent > .txt::after {
    color: var(--ACC);
  }
  &.border-accent:hover > .txt::after {
    color: var(--WHT);
    background-color: var(--ACC);
  }
  &.border-accent.bg-wht > .txt::after {
    color: var(--WHT);
    background-color: var(--ACC);
  }
  &.border-accent.bg-wht:hover > .txt::after {
    color: var(--ACC);
    background-color: var(--WHT);
  }
  &.border-def > .txt::after {
    color: var(--DEF);
  }
  &.border-def:hover > .txt::after {
    color: var(--WHT);
    background-color: var(--DEF);
  }
} */

/*---------- BMパーツのパターン増設 ----------*/
/* ①②③...のリストマーカー */
:where(.lib-indent__list).--circle > li::before {
  content: counter(ol-bullet);
  text-align: center;
  border: 1px solid var(--DEF);
  border-radius: 50%;
  font-size: 0.75em;
  line-height: 1;
  width: 1.5em;
  height: 1.5em;
  aspect-ratio: 1/1;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.4%;
  /* margin-top: 2px; */
}

/* ※のリストマーカー */
:where(.lib-indent__list).--asterisk {
  > li {
    padding-left: 1.8em;
    position: relative;
  }
  > li::before {
    /* counter-increment: ol-bullet; */
    content: "※";
    display: block;
    width: 2em;
    text-align: center;
    text-align: right;
    position: absolute;
    left: 0;
    top: 0;
    padding-right: 0.5em;
  }
}

/* 「―」（横線）のリストマーカー */
:where(.lib-indent__list).--line {
  > li {
    position: relative;
    padding-left: 2em;
  }
  > li::before {
    content: "―";
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* table 罫線パターン */
:where(table).--border {
  > thead,
  th {
    background-color: unset;
  }
  > thead th:first-child {
    border-left-color: var(--GRY);
  }
  > thead th:last-child {
    border-right-color: var(--GRY);
  }
  th,
  td {
    border: unset;
    border: 1px solid var(--GRY);
  }
  th {
    color: var(--DEF);
  }
  tbody > tr > th:first-child {
    border-left-color: var(--GRY);
  }
}

/* table 下線パターン */
:where(table).--border-bottom {
  border: unset;
  th,
  > thead {
    background-color: unset;
  }
  th,
  td {
    border: unset;
    border-bottom: 1px solid var(--GRY);
  }
  th {
    color: var(--DEF);
    @media print, screen and (max-width: 767px) {
      border-top: 1px solid var(--DGRY);
      margin-top: -1px;
    }
  }
  &.--even tbody > tr:nth-child(even) > th {
    background-color: var(--LGRY);
  }
}

/* table 下線パターン2 見出しセルの下線はメインカラー */
:where(table).--border-bottom-main {
  border: unset;
  th,
  > thead {
    background-color: unset;
  }
  th,
  td {
    border: unset;
    border-bottom: 1px solid var(--GRY);
  }
  th {
    color: var(--DEF);
    border-bottom: 1px solid var(--MAIN);
    @media print, screen and (max-width: 767px) {
      border-top: 1px solid var(--MAIN);
      border-bottom: 1px solid var(--GRY);
      margin-top: -1px;
    }
  }
  &.--even tbody > tr:nth-child(even) > th {
    background-color: var(--LGRY);
  }
}

/* 見出し"列"だけグレー */
:where(table.--gry) tbody > tr > th {
  background-color: var(--GRY);
  color: var(--DEF);
}
:where(table.--gry) tbody > tr > th:first-child {
  border-left-color: var(--GRY);
}

/* table .lib-table__03に少し余白を入れる */
:where(.lib-table__03).--padding {
  --cell-padding: 0.5em;
  td,
  th {
    padding: var(--cell-padding);
  }
}

/* メディアのスライダーをリストにする */
/* swiper用のclassを削除or無効にした上で利用 */
.lib-blog-001.--list {
  .swiper-wrapper {
    flex-direction: column;
    .swiper-slide {
      width: 100%;
    }
  }
  .lib-media__thumb,
  .lib-media__tag,
  .lib-swiper__control,
  .lib-media__txt {
    display: none;
  }
  .lib-media__txtarea {
    display: flex;
    flex-direction: column;
    gap: 0.25em 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--GRY);
    @media print, screen and (min-width: 992px) {
      flex-direction: row;
      align-items: center;
    }
    .lib-media__category {
      order: 2;
    }
    .lib-media__title {
      order: 3;
    }
    .lib-media__txt {
      order: 4;
    }
    .lib-media__time {
      order: 1;
      align-items: flex-start;
      margin-top: 0;
      padding-top: 0;
      border-top: unset;
      min-height: unset;
      @media print, screen and (min-width: 992px) {
        text-wrap: nowrap;
      }
    }
  }
}
/* 「記事公開日」のみ表示させる
   （「記事更新日」を非表示） */
.lib-blog-001.--list {
  .lib-media__time:has(p + p) p:nth-of-type(2),
  .lib-media__time:has(p + p) p span {
    display: none;
  }
}

/*---------- Swiper ----------*/
/* 滑らかに */
.u-swiper-liner .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

/* メディアの一覧ページを3カラムにする
   （15em=240px以下にしないようにする） */
/* .media-post__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 1em;
  .media-post__item {
    margin-top: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  .media-post__thumb {
    height: auto;
    grid-row: 1/2;
    @media print, screen and (min-width: 768px) {
      width: 100%;
    }
    img {
      object-fit: cover;
      aspect-ratio: 16/9;
    }
  }
  .media-post__inside {
    grid-row: 2/3;
    @media print, screen and (min-width: 768px) {
      padding-left: 0;
    }
    .media-post__chip {
      @media print, screen and (min-width: 768px) {
        margin-top: 0;
      }
    }
  }
} */

/* ==================================
タイポ
===================================== */
/*---------- font（日本語フォントが打ち消される場合に使用） ----------*/
/* @font-face{
	font-family: "Avenir"; ←任意の文字で書く
	src: url('../../dcms_media/fonts/webFonts/Avenir35Light/font.woff2') format('woff2');
	src: url('../../dcms_media/fonts/webFonts/Avenir35Light/font.woff') format('woff');
	font-weight: 300; ←読み込むフォントのデータに合わせてweight設定する（woffデータの中にweightがすべてそろっていれば記載不要）
	unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+0021, U+003F, U+0026, U+0025, U+002C, U+002E; ←英数字 + ! ? & % , . を含める
} */
 /*↑↑↑必要に応じて記載変更↑↑↑↑*/


/* ゴシックとか */
.ff-notosans {
  font-family: "Noto Sans JP", serif;
}
.ff-lato {
  font-family: "Lato", sans-serif;
  /* letter-spacing: 0.05rem; */
}
.ff-oswald {
  font-family: "Oswald", sans-serif;
}
.ff-poppins {
  font-family: "Poppins", sans-serif;
}
.ff-zenmarugo {
  font-family: "Zen Maru Gothic", sans-serif;
}
.ff-zenkakugo {
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.ff-montserrat {
  font-family: "Montserrat", sans-serif;
}
.ff-staatliches {
  font-family: "Staatliches", sans-serif;
}
.ff-m-plus-rounded-1c {
  font-family: "M PLUS Rounded 1c", sans-serif;
  transform: rotate(0.07deg);
}
.ff-inter {
  font-family: "Inter", sans-serif;
}
/* 明朝とか */
.ff-notoserif {
  font-family: "Noto Serif JP", serif;
}
.ff-yumincho {
  font-family: "Yu Mincho", "YuMincho", serif;
}
.ff-shippori {
  font-family: "Shippori Mincho", serif;
}
.ff-shippori-b1 {
  font-family: "Shippori Mincho B1", serif;
}

/* font-weight */
.fw-600 {
  font-weight: 600 !important;
}
.fw-800 {
  font-weight: 800 !important;
}
.fw-900 {
  font-weight: 900 !important;
}

/* font-size */
@media print, screen and (min-width: 992px) {
  .fs-lg-50 {
    font-size: 3.125rem;
  }
}
@media print, screen and (min-width: 992px) {
  .fs-lg-60 {
    font-size: 3.75rem;
  }
}

/* 縦書き */
.vertical-rl {
  writing-mode: vertical-rl;
}

/* 袋文字 */
.text-hukuro {
  /* -webkit-text-stroke: 2px var(--bl);
     text-stroke: 2px var(--bl); */
  text-shadow: 2px 2px 1px var(--bl), -2px 2px 1px var(--bl), 2px -2px 1px var(--bl), -2px -2px 1px var(--bl), 2px 0px 1px var(--bl), 0px 2px 1px var(--bl), -2px 0px 1px var(--bl),
    0px -2px 1px var(--bl);
}
.text-hukuro-wht {
  /* -webkit-text-stroke: 2px var(--WHT);
     text-stroke: 2px var(--WHT); */
  text-shadow: 2px 2px 1px var(--WHT), -2px 2px 1px var(--WHT), 2px -2px 1px var(--WHT), -2px -2px 1px var(--WHT), 2px 0px 1px var(--WHT), 0px 2px 1px var(--WHT), -2px 0px 1px var(--WHT),
    0px -2px 1px var(--WHT);
}

/* ==================================
テキストシャドウ
===================================== */
.text-shadow {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}


/* box-decoration-break */
.decoration-break {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* マーカーのあしらい */
mark {
  background: linear-gradient(transparent 60%, yellow 60%);
}

/* テキストをグラデーションにするベース */
.text-grad {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* ==================================
ユーティリティー
===================================== */
/*---------- 画像の比率 ----------*/
.u-aspect {
  /* 縦横比はstyleでCSS変数を書き換える
     ex) style="--aspect: 2.51 / 1;" */
  --aspect: auto;
  @media print, screen and (min-width: 576px) {
    --aspect-sm: var(--aspect);
  }
  @media print, screen and (min-width: 768px) {
    --aspect-md: var(--aspect-sm);
  }
  @media print, screen and (min-width: 992px) {
    --aspect-lg: var(--aspect-md);
  }
  @media print, screen and (min-width: 1200px) {
    --aspect-xl: var(--aspect-lg);
  }
  @media print, screen and (min-width: 1400px) {
    --aspect-xxl: var(--aspect-xl);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--aspect);
    @media print, screen and (min-width: 576px) {
      aspect-ratio: var(--aspect-sm);
    }
    @media print, screen and (min-width: 768px) {
      aspect-ratio: var(--aspect-md);
    }
    @media print, screen and (min-width: 992px) {
      aspect-ratio: var(--aspect-lg);
    }
    @media print, screen and (min-width: 1200px) {
      aspect-ratio: var(--aspect-xl);
    }
    @media print, screen and (min-width: 1400px) {
      aspect-ratio: var(--aspect-xxl);
    }
  }

  &.--4x3 img {
    aspect-ratio: 4 / 3;
  }
  &.--3x2 img {
    aspect-ratio: 3 / 2;
  }
  &.--16x9 img {
    aspect-ratio: 16 / 9;
  }
  &.--21x9 img {
    aspect-ratio: 21 / 9;
  }
  &.--1x1 img {
    aspect-ratio: 1 / 1;
  }
  &.--2x1 img {
    aspect-ratio: 2 / 1;
  }
  &.--3x1 img {
    aspect-ratio: 3 / 1;
  }
  &.--4x1 img {
    aspect-ratio: 4 / 1;
  }
  &.--7x8 img {
    aspect-ratio: 7 / 8;
  }
  &.--9x16 img {
    aspect-ratio: 9 / 16;
  }
  &.--2x3 img {
    aspect-ratio: 2 / 3;
  }
  &.--3x4 img {
    aspect-ratio: 3 / 4;
  }

  /* 画像全体を枠内に入れたいとき */
  &.--contain img,
  .--contain img {
    object-fit: contain;
  }
}

/*---------- 角丸 ----------*/
[class*="u-rounded"] {
  overflow: clip;
}
.u-rounded {
  --round: 0.625em;
  border-radius: var(--round);
  @media print, screen and (min-width: 576px) {
    --round-sm: var(--round);
    border-radius: var(--round-sm);
  }
  @media print, screen and (min-width: 768px) {
    --round-md: var(--round-sm);
    border-radius: var(--round-md);
  }
  @media print, screen and (min-width: 992px) {
    --round-lg: var(--round-md);
    border-radius: var(--round-lg);
  }
  @media print, screen and (min-width: 1200px) {
    --round-xl: var(--round-lg);
    border-radius: var(--round-xl);
  }
  @media print, screen and (min-width: 1400px) {
    --round-xxl: var(--round-xl);
    border-radius: var(--round-xxl);
  }
}

.u-rounded-_25 {
  border-radius: 0.25rem !important;
}
.u-rounded-_5 {
  border-radius: 0.5rem !important;
}
.u-rounded-_75 {
  border-radius: 0.75rem !important;
}
.u-rounded-1 {
  border-radius: 1rem !important;
}
.u-rounded-1_5 {
  border-radius: 1.5rem !important;
}
.u-rounded-1_25 {
  border-radius: 1.25rem !important;
}
.u-rounded-2 {
  border-radius: 2rem !important;
}
.u-rounded-3 {
  border-radius: 3rem !important;
}

.--round-top {
  border-bottom-right-radius: unset !important;
  border-bottom-left-radius: unset !important;
}
.--round-bottom {
  border-top-right-radius: unset !important;
  border-top-left-radius: unset !important;
}
.--round-right {
  border-top-left-radius: unset !important;
  border-bottom-left-radius: unset !important;
}
.--round-left {
  border-top-right-radius: unset !important;
  border-bottom-right-radius: unset !important;
}
.--round-trans-up {
  border-top-left-radius: unset !important;
  border-bottom-right-radius: unset !important;
}
.--round-trans-down {
  border-top-right-radius: unset !important;
  border-bottom-left-radius: unset !important;
}

/*---------- はみ出させる ----------*/
.u-over {
  margin-inline: var(--oversize);
}
/* 右に */
.u-r-over {
  margin-right: var(--oversize);
}
@media print, screen and (min-width: 768px) {
  .u-r-md-over {
    margin-right: var(--oversize);
  }
}
@media print, screen and (min-width: 992px) {
  .u-r-lg-over {
    margin-right: var(--oversize);
  }
}
/* 左に */
.u-l-over {
  margin-left: var(--oversize);
}
@media print, screen and (min-width: 768px) {
  .u-l-md-over {
    margin-left: var(--oversize);
  }
}
@media print, screen and (min-width: 992px) {
  .u-l-lg-over {
    margin-left: var(--oversize);
  }
}

.u-l-over-50vw {
  width: 50vw;
  margin-left: calc((50vw - 50%) * -1);
}
.u-r-over-50vw {
  width: 50vw;
  margin-right: -50vw;
}
@media print, screen and (min-width: 768px) {
  .u-l-over-50vw-md {
    width: 50vw;
    margin-left: calc((50vw - 50%) * -1);
  }
  .u-r-over-50vw-md {
    width: 50vw;
    margin-right: -50vw;
  }
}
@media print, screen and (min-width: 992px) {
  .u-l-over-50vw-lg {
    width: 50vw;
    margin-left: calc((50vw - 50%) * -1);
  }
  .u-r-over-50vw-lg {
    width: 50vw;
    margin-right: -50vw;
  }
}
@media print, screen and (min-width: 1200px) {
  .u-l-over-50vw-xl {
    width: 50vw;
    margin-left: calc((50vw - 50%) * -1);
  }
  .u-r-over-50vw-xl {
    width: 50vw;
    margin-right: -50vw;
  }
}
@media print, screen and (min-width: 1400px) {
  .u-l-over-50vw-xxl {
    width: 50vw;
    margin-left: calc((50vw - 50%) * -1);
  }
  .u-r-over-50vw-xxl {
    width: 50vw;
    margin-right: -50vw;
  }
}

/* ========================================
パーツ
======================================== */
/*---------- アイコン（アイコンフォント想定。大きさはp-*やfs-*、個別にwidth・height指定して調整。） ----------*/
.c-icon {
  aspect-ratio: 1 / 1;
  speak: none;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;

  --icon-size: 1.5em;
  width: var(--icon-size);
  height: var(--icon-size);
  @media print, screen and (min-width: 576px) {
    --icon-size-sm: var(--icon-size);
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
  @media print, screen and (min-width: 768px) {
    --icon-size-md: var(--icon-size-sm);
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }
  @media print, screen and (min-width: 992px) {
    --icon-size-lg: var(--icon-size-md);
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }
  @media print, screen and (min-width: 1200px) {
    --icon-size-xl: var(--icon-size-lg);
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
  }
  @media print, screen and (min-width: 1400px) {
    --icon-size-xxl: var(--icon-size-xl);
    width: var(--icon-size-xxl);
    height: var(--icon-size-xxl);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    speak: none;
  }

  &.--cover img {
    object-fit: cover;
  }
}

/*---------- アイコンとテキスト（ボタンによく使う） ----------*/
/* 余白の微調整は「gap-*」 */
.c-icon-text {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 0.75em;
  justify-content: center;
  align-items: center;

  /* アイコンだけ右寄せ */
  &.--r {
    grid-template-columns: 1fr auto;
  }
  /* アイコンだけ左寄せ */
  &.--l {
    grid-template-columns: auto 1fr;
  }
}

/*---------- レイアウト ----------*/
/* display: grid;で重ねる */
.l-overlap {
  display: grid;
  > * {
    grid-area: 1 / -1;
  }
}
#tinymce,
.editor_block {
  .l-overlap {
    > * {
      grid-area: unset !important;
      z-index: 1 !important;
      opacity: 1 !important;
    }
  }
}

/* 子要素を中央配置 */
/* 縦 */
.l-v-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 縦横中央 */
.l-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*---------- 背景のベース ----------*/
/* 背景画像を敷く場合、
   背景画像に各色のフィルターをかける場合
   疑似要素を配置したいときのベース */
.p-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  /* opacity（濃さ）はstyleでCSS変数を書き換える
     ex) style="--bg-opacity: 0.5;" */
  --bg-opacity: 0.3;

  /* 疑似要素のファンデーション */
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
    pointer-events: none;
    speak: none;
    opacity: var(--bg-opacity);
  }
  /* 画像の時 */
  &.--img::before,
  &.--img::after {
    z-index: 1;
  }
  /* グレースケール透明フィルター */
  &.--bl::before {
    background-color: var(--bl);
  }
  &.--def::before {
    background-color: var(--DEF);
  }
  &.--dgry::before {
    background-color: var(--DGRY);
  }
  &.--gry::before {
    background-color: var(--GRY);
  }
  &.--lgry::before {
    background-color: var(--LGRY);
  }
  &.--wh::before {
    background-color: var(--WHT);
  }
  /* メインカラーフィルター */
  &.--main::before {
    background-color: var(--MAIN);
  }
  &.--lmain::before {
    background-color: var(--LMAIN);
  }
  /* アクセントカラーフィルター */
  &.--accent::before {
    background-color: var(--ACC);
  }
  &.--laccent::before {
    background-color: var(--LACC);
  }
  /* 補助色カラーフィルター */
  &.--other::before {
    background-color: var(--OTH);
  }
  &.--lother::before {
    background-color: var(--LOTH);
  }
  /* グラデーションカラーフィルター */
  &.--grad-01::before {
    background: var(--grad-01);
  }
  &.--grad-01-rev::before {
    background: var(--grad-01-rev);
  }
  &.--grad-02::before {
    background: var(--grad-02);
  }
  &.--grad-02-rev::before {
    background: var(--grad-02-rev);
  }
  &.--grad-03::before {
    background: var(--grad-03);
  }
  &.--grad-03-rev::before {
    background: var(--grad-03-rev);
  }

  /* ぼかしフィルター
     強さはstyleでCSS変数を書き換える
     ex) style="--blur: 1em;" */
  &.--blur {
    --blur: 0.5rem;
  }
  &.--blur::after {
    backdrop-filter: blur(var(--blur));
    opacity: 1;
  }

  /* 乗算 */
  &.--multiply::after {
    mix-blend-mode: multiply;
  }
}

/*---------- ホバーアクション ----------*/
.c-hover {
  transition: var(--transition);
  text-decoration: none;
  &:hover {
    text-decoration: none;
  }
  /* 背景色 */
  &.--bg-bl:hover {
    background-color: var(--bl);
  }
  &.--bg-def:hover {
    background-color: var(--DEF);
  }
  &.--bg-dgry:hover {
    background-color: var(--DGRY);
  }
  &.--bg-gry:hover {
    background-color: var(--GRY);
  }
  &.--bg-lgry:hover {
    background-color: var(--LGRY);
  }
  &.--bg-wh:hover {
    background-color: var(--WHT);
  }
  &.--bg-main:hover {
    background-color: var(--MAIN);
  }
  &.--bg-lmain:hover {
    background-color: var(--LMAIN);
  }
  &.--bg-accent:hover {
    background-color: var(--ACC);
  }
  &.--bg-laccent:hover {
    background-color: var(--LACC);
  }
  &.--bg-other:hover {
    background-color: var(--OTH);
  }
  &.--bg-lother:hover {
    background-color: var(--LOTH);
  }
  /* 動き */
  &.--up,
  .--up {
    --translate-up: -0.125rem;
    transition: var(--transition);
  }
  &.--up:hover,
  &:hover .--up {
    transform: translateY(var(--translate-up));
  }
  &.--down,
  .--down {
    --translate-down: 0.125rem;
    transition: var(--transition);
  }
  &.--down:hover,
  &:hover .--down {
    transform: translateY(var(--translate-down));
  }
  &.--right,
  .--right {
    --translate-right: 0.125rem;
    transition: var(--transition);
  }
  &.--right:hover,
  &:hover .--right {
    transform: translateX(var(--translate-right));
  }
  &.--left,
  .--left {
    --translate-left: -0.125rem;
    transition: var(--transition);
  }
  &.--left:hover,
  &:hover .--left {
    transform: translateX(var(--translate-left));
  }
  &.--scale-up,
  .--scale-up {
    --scale: scale(1.1);
    img {
      transition: var(--transition);
    }
    &:hover img {
      transform: var(--scale);
    }
  }
  /* あしらい */
  &.--underline:hover,
  &:hover .--underline {
    text-decoration: underline;
  }
  &.--opacity,
  .--opacity {
    --opacity: 0.8;
    &:hover {
      opacity: var(--opacity);
      img {
        opacity: var(--opacity);
      }
    }
  }
  /* l-overlapで重ねた要素のうち、ホバーしたら--afterが表示される */
  &.--overlap {
    .--after {
      opacity: 0;
      transition: var(--transition);
    }
    &:hover .--after {
      opacity: 1;
    }
  }
  /* 下線が伸びる */
  &.--bottom-line {
    position: relative;
    padding-bottom: min(0.5em, 5%);
    &::after {
      content: "";
      width: 0%;
      height: 2px;
      background-color: currentColor;
      position: absolute;
      bottom: -1px;
      left: 0;
      transition: 0.3s cubic-bezier(0.42, 0, 0.13, 0.99);
    }
    &:hover::after {
      @media (hover: hover) and (pointer: fine) {
        width: 100%;
      }
    }
  }
  /* 下線が伸びる（子要素の場合） */
  .--bottom-line {
    position: relative;
    padding-bottom: min(0.5em, 5%);
    &::after {
      content: "";
      width: 0%;
      height: 2px;
      background-color: currentColor;
      position: absolute;
      bottom: -1px;
      left: 0;
      transition: 0.3s cubic-bezier(0.42, 0, 0.13, 0.99);
    }
  }
  &:hover .--bottom-line::after {
    @media (hover: hover) and (pointer: fine) {
      width: 100%;
    }
  }
  /* shadowを入れる */
  &.--shadow:hover {
    @media (hover: hover) and (pointer: fine) {
      /* box-shadow: 0 .5em 1em currentColor; */
      box-shadow: 0 0.5em 1em rgb(0 0 0 / 30%);
    }
  }
}

/* ホバーしたら下線が左から順に伸びる
   （display: inline;にする必要があるので注意） */
.c-hover-underline-anime {
  display: inline;
  overflow: hidden;
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: bottom 0 left 0;
  background-size: 0 1px;
  transition-duration: 0.3s;
  transition-property: background-size;
}
@media (any-hover: hover) {
  .c-hover-underline-anime:hover,
  a:has(.c-hover-underline-anime):hover .c-hover-underline-anime,
  button:has(.c-hover-underline-anime):hover .c-hover-underline-anime {
    background-size: 100% 1px;
  }
}

/* ==================================
ヘッダー
===================================== */
@media print, screen and (max-width: 991px) {
  .lib-header__outer.typeS .lib-child__panel {
      margin-left: 0;
  }
}

/* ========================================
フッター
======================================== */
.lib-footer__guidance > li ~ li::before {
  background-color: currentColor;
}
.lib-footer__title>a {
  background-color: transparent;
  border: none;
}
.lib-footer__list {
  display: block;
}
@media print, screen and (max-width: 767px) {
  .lib-footer__list {
    padding-left: 20px;
  }
}

/* ========================================
CTA
======================================== */

/* ========================================
TOP
======================================== */
body:has(.p-mv) #contents {
  padding-top: 0;
  padding-bottom: 0;
}

/* ========================================
下層
======================================== */
/*---------- 下層MV ----------*/
/* .lib-hero__outer {
  background-color: unset;

  .lib-hero__title {
    font-size: clamp(1.25rem, calc(0.975609756097561rem + 1.170731707317073vw), 2rem);
  }
  .lib-hero__title-en {
    font-size: clamp(2rem, calc(1.2682926829268293rem + 3.1219512195121952vw), 4rem);
    color: var(--MAIN);
    font-weight: bold;
    opacity: 0.2;
    line-height: 1.2;
    margin-bottom: -0.4em;
  }
  .lib-hero__title-en::first-letter {
    text-transform: uppercase;
  }
} */

/* ===================================================================
   TOP additions 2026-07-31 (nakahara-kensetsu) — MV
   =================================================================== */
.p-mv{position:relative;background:var(--DEF);padding-bottom:clamp(48px,7vw,96px);overflow:hidden;
  width:100vw;margin-inline:calc(50% - 50vw);}
.p-mv__hero{position:relative;}
.p-mv__bg{position:absolute;inset:0;z-index:0;}
.p-mv__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.p-mv__overlay{position:absolute;inset:0;z-index:1;background: urL(/dcms_media/image/mv-overray.png), rgba(28,32,76,.72);}
.p-mv__inner{
  position:relative;
  z-index:4;
  width:min(1144px,88vw);
  margin-inline:auto;
  display:flex;
  align-items: flex-start;
  justify-content:space-between;
  padding-top:clamp(84px,10vw,150px);
  gap:20px;
  /* padding-bottom: clamp(84px,10vw,150px); */
  }
.p-mv__copy{color:#fff;padding-top:10px;flex:1 1 auto;}
.p-mv__title{
  font-family:var(--fntEN);
  font-weight:600;
  color:#fff;
  font-size: clamp(46px,7vw,100px);
  line-height: 1.4;
  letter-spacing:.01em;
  margin:0;
  }
.p-mv__sub{font-weight:700;margin:clamp(16px,2vw,30px) 0 0;font-size:clamp(18px,1.95vw,28px);}
.p-mv__group{position:relative;z-index:4;flex: 600px;}
.p-mv__group img{width:100%;height:auto;display:block;}
.p-mv__strip{
  position:relative;
  z-index:3;
  margin-top: clamp(-31px,-13vw,-80px);
  margin-left:calc((100vw - min(1144px,88vw)) / 2);
  margin-right:0;
  }
.p-mv__strip img{width:100%;height:clamp(150px,20vw,300px);object-fit:cover;object-position:center 62%;
  display:block;box-shadow:0 20px 45px rgba(0,0,0,.28);}
@media(max-width: 992px){
.p-mv__group{position:relative;z-index:4;flex: 400px;}
}
@media(max-width: 500px){
  .p-mv__inner{flex-direction:column;align-items:stretch;gap:10px;}
  .p-mv__group{flex-basis:auto;max-width:460px;margin-left:auto;}
  .p-mv__strip{margin-top:clamp(-60px,-8vw,-30px);}
}
@media(max-width:520px){
  .p-mv__title{font-size:44px;}
  .p-mv__group{max-width:88%;}
}

/* ===================================================================
   TOP additions 2026-07-31 (nakahara-kensetsu) — ABOUT
   =================================================================== */
.p-about{
  /* background:var(--DEF); */
  /* width:100vw; */
  /* margin-inline:calc(50% - 50vw); */
  /* padding:clamp(60px,7vw,110px) 0 clamp(70px,9vw,120px); */
  }
.p-about .lib-title__outer{/* margin-bottom:clamp(30px,4vw,54px); */}
.p-about .title{color:#fff;font-size:clamp(32px,4.4vw,58px);line-height:1.1;}
.p-about .title .ttl-en{display:block;font-family:var(--fntEN);font-weight:700;
  font-size:clamp(26px,3vw,40px);color:rgba(255,255,255,.4);letter-spacing:.03em;margin-bottom:6px;}
.p-about__lead .lib-card__txt{color:#fff;font-size:16px;line-height:2.15;margin-bottom:34px;}
/* white pill button (shared look) */
.p-about .lib-link__btn{
  /* background:#fff; */
  /* color:var(--DEF); */
  /* border-radius:43px; */
  /* font-weight:700; */
  /* min-width:273px; */
  /* display:inline-flex; */
  /* align-items:center; */
  /* justify-content:space-between; */
  /* gap:22px; */
  /* padding:19px 26px; */
  /* border:none; */
  }
.p-about .lib-link__btn .txt{/* color:var(--DEF); *//* font-weight:700; */}
.p-about .lib-link__btn::after,.p-about .lib-link__btn::before{content:none !important;}
.p-about .lib-link__btn .txt::after{
  /* content:""; */
  /* display:inline-block; */
  /* width:8px; */
  /* height:8px; */
  /* border-top:2px solid var(--DEF); */
  /* border-right:2px solid var(--DEF); */
  /* transform:rotate(45deg); */
  /* margin-left:22px; */
  /* vertical-align:middle; */
  }
.p-about .lib-card__btn{/* margin-top:auto; */}
.p-about .lib-card__btn .lib-link__btn{/* min-width:0; *//* width:100%; */}
/* cards: image top → text → button */
.p-about .lib-card__item{display:flex;flex-direction:column;background:transparent;padding:0;}
.p-about .lib-card__thumb{/* order:-1; *//* margin-bottom:22px; *//* border-radius:2px; *//* overflow:hidden; *//* display:block; */}
.p-about .lib-card__thumb img{/* width:100%; *//* height:clamp(180px,17vw,250px); *//* object-fit:cover; *//* object-position:center bottom; */}
.p-about .lib-card__txtarea{display:flex;flex-direction:column;flex:1 1 auto;}
.p-about .lib-card__txt{color:#fff;font-size:16px;line-height:1.9;margin:0 0 20px;}
/* overlapping photos (top area) */
.p-about__ph--a{width: 42%;aspect-ratio:243/295;top:0;left: 22%;z-index:1;}
.p-about__ph--b{width: 56%;aspect-ratio: 243/295;top: 32%;right:0;z-index:2;}
.p-about__photos{position:relative;min-height:clamp(420px,42vw,600px);}
.p-about__ph{position:absolute;display:block;overflow:hidden;box-shadow:0 16px 34px rgba(0,0,0,.32);}
.p-about__ph img{width:100%;height:100%;object-fit:cover;display:block;}

.p-about__cols{margin-top:clamp(50px,6vw,90px);}
@media(max-width:820px){
  .p-about__photos{min-height:78vw;max-width:520px;margin-inline:auto;}
  .p-about__cols{/* margin-top:40px; */}
	.p-about__ph--a{width: 32%;aspect-ratio:243/295;top:0;left: 32%;z-index:1;}
.p-about__ph--b{width: 46%;aspect-ratio: 243/295;top: 32%;right:0;z-index:2;}
}

/* ===================================================================
   TOP additions 2026-07-31 (nakahara-kensetsu) — SERVICE / WORKS
   =================================================================== */
/* shared section title (dark) */
.p-sec .lib-title__outer{margin-bottom:clamp(30px,4vw,54px);}
.p-sec .title{color:#fff;font-size: clamp( 2.625rem, calc( 2.2195945945945947rem + 1.7297297297297298vw ), 3.625rem );line-height:1.1;}
.p-sec .title .ttl-en{
  display:block;
  font-family:var(--fntEN);
  font-weight:700;
  font-size: clamp( 1.875rem, calc( 1.6216216216216215rem + 1.0810810810810811vw ), 2.5rem );
  color:rgba(255,255,255,.4);
  /* letter-spacing:.03em; */
  margin-bottom:6px;
  }
/* shared white pill (centered) */
.c-pill-wrap{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px);}
.lib-link__btn.c-pill{background:#fff;color:var(--DEF);border-radius:43px;font-weight:700;min-width:273px;
  display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:19px 30px;border:none;}
.lib-link__btn.c-pill .txt{color:var(--DEF);font-weight:700;}
.lib-link__btn.c-pill::after,.lib-link__btn.c-pill::before{content:none!important;}
.lib-link__btn.c-pill .txt::after{content:"";display:inline-block;width:8px;height:8px;
  border-top:2px solid var(--DEF);border-right:2px solid var(--DEF);transform:rotate(45deg);margin-left:22px;vertical-align:middle;}

/* ===== SERVICE ===== */
.p-service{background:var(--DEF);width:100vw;margin-inline:calc(50% - 50vw);padding:clamp(60px,7vw,110px) 0;}
.p-service__panel{/* background:rgba(255,255,255,.05); *//* border-radius:16px; *//* padding:clamp(30px,4vw,60px) clamp(24px,3vw,48px); */}
.p-service .lib-card__item{display:flex;flex-direction:column;background:transparent;padding:0;text-decoration:none;width:100%;}
.p-service .lib-card__thumb{display:block;overflow:hidden;border-radius:2px;}
.p-service .lib-card__thumb img{width:100%;height:clamp(200px,20vw,300px);object-fit:cover;display:block;transition:.4s;}
.p-service .lib-card__item:hover .lib-card__thumb img{transform:scale(1.04);}
.p-service__body{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:18px;padding:22px 4px 6px;}
.p-service__info{flex:1 1 auto;}
.p-service__ttl{color:#fff;font-weight:700;font-size:24px;line-height:1.2;margin:0 0 6px;}
.p-service__ttl .lg{font-size:30px;}
.p-service .lib-card__txt{color:#fff;font-size:16px;line-height:1.6;margin:0;}
.p-service__arw{width:56px;height:56px;border-radius:50%;border:1.5px solid #fff;position:relative;flex:0 0 auto;transition:.3s;}
.p-service__arw::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-top:2px solid #fff;border-right:2px solid #fff;transform:translate(-65%,-50%) rotate(45deg);}
.p-service .lib-card__item:hover .p-service__arw{background:#fff;}
.p-service .lib-card__item:hover .p-service__arw::after{border-color:var(--DEF);}

/* ===== WORKS ===== */
.p-works{background:var(--DEF);width:100vw;margin-inline:calc(50% - 50vw);padding:clamp(50px,6vw,90px) 0 clamp(70px,9vw,120px);}
.p-works .lib-card__item{display:flex;flex-direction:column;background:#fefefe;padding:0;text-decoration:none;width:100%;overflow:hidden;border-radius:2px;}
.p-works .lib-card__thumb{display:block;overflow:hidden;}
.p-works .lib-card__thumb img{/* width:100%; *//* height:clamp(200px,18vw,240px); */object-fit:contain;/* display:block; *//* transition:.4s; */}
.p-works .lib-card__item:hover .lib-card__thumb img{transform:scale(1.05);}
.p-works__body{padding:25px 30px 40px;}
.p-works .lib-card__badge{margin:0 0 13px;}
.p-works .lib-card__badge .badge{background:var(--DEF)!important;color:#fff!important;border-radius:16px;
  font-weight:400;font-size:14px;padding:6px 20px;}
.p-works__ttl{color:var(--DEF);font-weight:500;font-size:18px;line-height:1.5;margin:0;}

/* ===================================================================
   TOP additions 2026-07-31 (nakahara-kensetsu) — WORKS blog part
   （lib-blog-001 / lib-media を静的WORKSカードの見た目に合わせる）
   =================================================================== */
.p-works .lib-blog-001{padding-left:0;padding-right:0;}
.p-works .lib-media__item{background:#fefefe!important;border-radius:2px;overflow:hidden;
  display:flex!important;flex-direction:column;height:auto;}
.p-works .lib-media__thumb{order:-1;display:block;overflow:hidden;}
.p-works .lib-media__thumb .thumb{display:block;height: 321px;max-height: 321px;}
.p-works .lib-media__thumb img{/* width:100%; *//* height:clamp(200px,18vw,240px); *//* object-fit:cover; *//* display:block; *//* transition:.4s; */}
.p-works .lib-media__item:hover .lib-media__thumb img{transform:scale(1.05);}
.p-works .lib-media__txtarea{order:1;padding:25px 30px 40px;}
.p-works .lib-media__category{margin:0 0 13px;}
.p-works .lib-media__category .badge,.p-works .lib-media__category .lib-badge__category{
  background:var(--DEF)!important;color:#fff!important;border-radius:16px;
  font-weight:400;font-size:14px;padding:6px 20px;border:none;}
.p-works .lib-media__title{margin:0!important;}
.p-works .lib-media__title a{color:var(--DEF)!important;font-weight:500;font-size:18px;line-height:1.5;text-decoration:none;}
/* hide tag / body text / date to match minimal WORKS card */
.p-works .lib-media__tag,.p-works .lib-media__txt,.p-works .lib-media__time{display:none!important;}
/* swiper: hide play/stop chrome (keep it clean like the static grid) */
.p-works .lib-swiper__player{display:none!important;}
.p-works .lib-swiper__control{margin-top:24px;}

/* ===================================================================
   TOP additions 2026-07-31 (nakahara-kensetsu) — Header transparent (HOME only)
   HOME(=MVを持つページ)のみヘッダーをMV上に透過オーバーレイ
   =================================================================== */
body:has(.p-mv) #wrapper{padding-top:0!important;}
body:has(.p-mv) .lib-header__outer{background:transparent!important;box-shadow:none!important;border:none!important;}
.is-scroll:not(.is-gnav__open) .lib-header__outer {
    height: 60px;
    background: #fff!important;
}body:has(.p-mv) .lib-header__bar{background:transparent!important;}
@media(max-width:992px){
	body:has(.p-mv) .lib-header__bar{background:#fff!important;}
}
/* 白文字化（色付きボタンは除外） */
body:has(.p-mv) .lib-header__outer .lib-nav__btn, body:has(.p-mv) .lib-header__outer .lib-utility__item .txt, body:has(.p-mv) .lib-header__outer .lib-lang__outer a{color: #fff;}
body:has(.p-mv) .lib-header__outer .lib-menu__btn .line{/* background:#fff!important; */}

.lib-nav__btn>.txt:before {
    background-color: var(--WHT);
}
/* ===================================================================
   TOP additions 2026-07-31 (nakahara-kensetsu) — CTA (design CONTACT / CTABS01)
   =================================================================== */
.p-cta{position:relative;overflow:hidden;padding:clamp(50px,6vw,92px) 0;background:#eef1f5;
  width:100vw;margin-inline:calc(50% - 50vw);}
.p-cta__bg{position:absolute;inset:0;z-index:0;}
.p-cta__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.p-cta__overlay{position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.5);}
.p-cta__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.p-cta__left{/* flex:1 1 360px; */}
.p-cta__ttl{color:var(--MAIN);font-weight:700;font-size: clamp( 2.625rem, calc( 2.2195945945945947rem + 1.7297297297297298vw ), 3.625rem );line-height:1.2;margin:0;}
.p-cta__en{display:block;font-family:var(--fntEN);font-weight:700;font-size: clamp( 1.875rem, calc( 1.6216216216216215rem + 1.0810810810810811vw ), 2.5rem );/* letter-spacing:.12em; */color:#9aa0b5;margin-bottom:8px;}
.p-cta__lead{margin:18px 0 0;color:var(--DEF);font-size:15px;line-height:1.95;}
.p-cta__right{/* flex:0 1 460px; *//* text-align:center; */}
.p-cta__phlabel{font-weight:700;color:var(--DEF);font-size:16px;margin:0;}
.p-cta__phone{margin:4px 0 2px;}
.p-cta__phone a{font-family:var(--fntEN);font-weight:700;font-size:clamp(40px,4.8vw,58px);color:var(--MAIN);text-decoration:none;letter-spacing:.02em;}
.p-cta__time{color:var(--DEF);font-size:14px;margin:0 0 22px;}
.p-cta__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;width:min(430px,100%);
  background:var(--MAIN);color:#fff;border-radius:44px;padding:19px 22px 19px 34px;text-decoration:none;font-weight:700;font-size:17px;transition:.25s;}
.p-cta__btn:hover{opacity:.9;color:#fff;}
.p-cta__btn .p-cta__arw{width:36px;height:36px;border-radius:50%;background:#fff;position:relative;flex:0 0 auto;}
.p-cta__btn .p-cta__arw::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-top:2px solid var(--MAIN);border-right:2px solid var(--MAIN);transform:translate(-65%,-50%) rotate(45deg);}
@media(max-width:820px){.p-cta__inner{flex-direction:column;text-align:center;}.p-cta__left,.p-cta__right{/* flex-basis:auto; *//* width:100%; */}}

.border-wht[class*=__btn].bg-wht {
    border: var(--WHT) 2px solid;
    background-color: var(--WHT);
    color: var(--MAIN);
    -webkit-transition: .3s;
    transition: .3s;
}

.border-wht[class*=__btn].bg-wht:hover {
    border: var(--WHT) 2px solid;
    background-color: var(--DEF);
    color: var(--WHT);
    -webkit-transition: .3s;
    transition: .3s;
}
/* ===================================================================
   TOP additions 2026-08-03 (nakahara-kensetsu) — SERVICE partial bg (#121535 / --MAIN)
   design 150-117: 左約78%を #121535(--MAIN)、右約22%を #1C204C(--DEF) の縦分割
   =================================================================== */
.p-service{background:linear-gradient(90deg, var(--MAIN) 0 78%, var(--DEF) 78% 100%);}
@media(max-width:820px){ .p-service{background:var(--MAIN);} }

/* ===================================================================
   TOP additions 2026-08-03 (nakahara-kensetsu) — Header 見た目調整
   is-scroll(白背景) / ≤992px(白背景) の際にロゴ・文字・お問い合わせボタンを反転
   =================================================================== */

/* ① スクロール時（html.is-scroll → ヘッダー白背景）: 文字→DEF / ロゴ→通常 / お問い合わせ→DEF背景 */
.is-scroll:not(.is-gnav__open) .lib-header__outer .lib-nav__btn, .is-scroll:not(.is-gnav__open) .lib-header__outer .lib-nav__list > .lib-nav__item > a .txt, .is-scroll:not(.is-gnav__open) .lib-header__outer .lib-utility__item .txt, .is-scroll:not(.is-gnav__open) .lib-header__outer .lib-lang__outer a{ color: var(--DEF)!important; }
.is-scroll:not(.is-gnav__open) .lib-header__outer .lib-nav__btn>.txt:before{ background-color: var(--DEF)!important; }
.is-scroll:not(.is-gnav__open) .lib-header__outer .lib-header__logo img{ content: url(/dcms_media/image/logo.png); }
.is-scroll:not(.is-gnav__open) .lib-header__outer .lib-induce__btn.bg-wht{ background: var(--DEF)!important; border-color: var(--DEF)!important; color:#fff!important; }
.is-scroll:not(.is-gnav__open) .lib-header__outer .lib-induce__btn.bg-wht .txt{ color:#fff!important; }

/* ② ウィンドウ幅 992px 以下（ヘッダー白背景）: ロゴ→通常 / ドロワー nav__btn .txt→DEF / お問い合わせ→DEF背景 */
@media(max-width:992px){
  body:has(.p-mv) .lib-header__outer .lib-header__logo img{ content: url(/dcms_media/image/logo.png); }
  body:has(.p-mv) .lib-header__outer .lib-nav__btn{color: var(--DEF)!important;}
  body:has(.p-mv) .lib-header__outer .lib-menu__btn .line{/* background: var(--WHT)!important; */}
  body:has(.p-mv) .lib-header__outer .lib-induce__btn.bg-wht{ background: var(--DEF)!important; border-color: var(--DEF)!important; color:#fff!important; }
  body:has(.p-mv) .lib-header__outer .lib-induce__btn.bg-wht .txt{/* color:#fff!important; */}

	  body:has(.p-mv) .lib-header__outer .lib-induce__btn.bg-wht:hover{ background: var(--WHT)!important; border-color: var(--DEF)!important; color:#fff!important; }
	  body:has(.p-mv) .lib-header__outer .lib-induce__btn.bg-wht:hover{color:var(--DEF)!important;}


}

/* ===================================================================
   TOP additions 2026-08-03 (nakahara-kensetsu) — Header 追加調整(2)
   ・ドロワー(≤992px)内の残り白文字（実績紹介など）を DEF に
   ・お問い合わせボタンのホバー（is-scroll / ≤992px）を白ボタンの反転に合わせて追加
   =================================================================== */

/* ドロワー内テキストを DEF（お問い合わせボタンは除外して白文字維持） */
@media(max-width:992px){
  body:has(.p-mv) .lib-header__outer.typeS .lib-nav__panel .txt,
  body:has(.p-mv) .lib-header__outer.typeS .lib-nav__panel a:not(.lib-induce__btn){/* color: var(--DEF)!important; */}
  body:has(.p-mv) .lib-header__outer.typeS .lib-nav__panel .lib-nav__btn>.txt:before{ background-color: var(--DEF)!important; }
  /* お問い合わせボタンは DEF背景＋白文字を維持 */
  body:has(.p-mv) .lib-header__outer.typeS .lib-nav__panel .lib-induce__btn.bg-wht{ color:#fff!important; }
	  body:has(.p-mv) .lib-header__outer.typeS .lib-nav__panel .lib-induce__btn.bg-wht:hover{color:var(--DEF)!important;border: 2px solid var(--DEF) !important;}

}

/* お問い合わせボタン ホバー：DEF背景 → 白背景・DEF文字（白ボタンの反転に対応） */
.is-scroll:not(.is-gnav__open) .lib-header__outer .lib-induce__btn.bg-wht:hover{background:#fff!important;border-color: var(--DEF)!important;color:var(--DEF)!important;}
.is-scroll:not(.is-gnav__open) .lib-header__outer .lib-induce__btn.bg-wht:hover .txt{ color:var(--DEF)!important; }
@media(max-width:992px){
  body:has(.p-mv) .lib-header__outer .lib-induce__btn.bg-wht:hover{ background:#fff!important; border-color:#fff!important; color:var(--DEF)!important; }
  body:has(.p-mv) .lib-header__outer .lib-induce__btn.bg-wht:hover{ color:var(--DEF)!important; }
}

/* ============================================================
   仲原建設 下層ページ additions 2026-08-17 (bm-library)
   ============================================================ */
/* u-aspect modifiers（比率指定） */
.u-aspect--16x9{--aspect:16/9;}
.u-aspect--4x3{--aspect:4/3;}
.u-aspect--3x2{--aspect:3/2;}
.u-aspect--2x1{--aspect:2/1;}
.u-aspect--1x1{--aspect:1/1;}

/* 下層MV 英語サブ（COMPANY / STRONG など） */
.lib-hero__sub{
  font-family:var(--fntEN);
  font-weight:700;
  font-size:clamp(22px,3vw,40px);
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin:0 0 4px;
}

/* ご相談の流れ フロー（横チェブロン / SPは縦積み） */
.p-flow{display:flex;gap:6px;flex-wrap:nowrap;}
.p-flow__item{
  flex:1 1 0;min-width:0;position:relative;
  background:var(--MAIN);color:#fff;text-align:center;
  padding:18px 12px 18px 26px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%);
}
.p-flow__item:first-child{padding-left:14px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);}
.p-flow__item:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%);}
.p-flow__step{display:block;font-family:var(--fntEN);font-weight:700;font-size:13px;letter-spacing:.08em;opacity:.7;margin-bottom:4px;}
.p-flow__ttl{display:block;font-size:15px;font-weight:700;line-height:1.4;}
@media (max-width:767px){
  .p-flow{flex-direction:column;gap:10px;}
  .p-flow__item,.p-flow__item:first-child,.p-flow__item:last-child{clip-path:none;border-radius:6px;padding:14px;}
}

/* 導入バナー（背景写真＋白オーバーレイ＋テキスト） */
.p-intro{position:relative;background-size:cover;background-position:center;/* border-radius:8px; */overflow:hidden;}
.p-intro::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.72);}
.p-intro__inner{position:relative;z-index:1;padding:clamp(28px,5vw,56px) 24px;}

/* 見積無料バナー（グレー帯の内側余白） */
.p-banner{padding:clamp(28px,5vw,48px) 16px;border-radius:8px;}

/* 下層MV を Figma 準拠の紺背景・白文字に（js-page-main = 下層ヒーローのみ対象） */
.lib-hero__outer.js-page-main{background: var(--DEF);}
.lib-hero__outer.js-page-main .lib-hero__title,
.lib-hero__outer.js-page-main .lib-hero__inner{color:#fff;}

/* ============================================================
   下層ページ 紺背景（デザイン案準拠）2026-08-17
   スコープ: 下層MVブロックに付与した .u-under-navy を持つページのみ
   ============================================================ */
body:has(.u-under-navy) #contents{/* background:var(--MAIN); */}
/* 見出し・本文（紺の上）は白抜き */
body:has(.u-under-navy) #contents .lib-title__outer .title{color:#fff;}
body:has(.u-under-navy) #contents .lib-txt__outer{color:#fff;}
body:has(.u-under-navy) #contents .lib-map__add,
body:has(.u-under-navy) #contents .lib-map__add .tel{color:#fff;}
body:has(.u-under-navy) #contents .p-works .title{color:#fff;}
/* 画像＋文の交互（強みの理由・代表紹介）＝カード背景透明・白文字 */
body:has(.u-under-navy) #contents .lib-horizon__col .lib-card__item{background:transparent;}
body:has(.u-under-navy) #contents .lib-horizon__col .lib-card__txt{color:#fff;}
body:has(.u-under-navy) #contents .lib-horizon__col .lib-card__title{color:#fff !important;}
/* 施工内容・対応工事・スタッフ（flex-columnカード）＝白カード・濃文字 */
body:has(.u-under-navy) #contents .lib-card__item.flex-column{background:#fff;}
body:has(.u-under-navy) #contents .lib-card__item.flex-column .lib-card__title{color:var(--DEF);}
body:has(.u-under-navy) #contents .lib-card__item.flex-column .lib-card__txt{color:var(--DEF);}
/* POINTカード（lib-cnt-015）＝白抜き＋白ボーダー */
body:has(.u-under-navy) #contents .lib-cnt-015__inside{border:1px solid rgba(255,255,255,.28);}
body:has(.u-under-navy) #contents .lib-cnt-015__title .title,
body:has(.u-under-navy) #contents .lib-cnt-015__txtarea{/* color:#fff; */}
body:has(.u-under-navy) #contents .lib-cnt-015 .text-main{color:#fff;}
/* FAQ（lib-toggle）＝白抜き＋白系ボーダー */
body:has(.u-under-navy) #contents .lib-toggle__btn{color:#fff;}
body:has(.u-under-navy) #contents .lib-cnt-021__panel .lib-txt__outer,
body:has(.u-under-navy) #contents .lib-cnt-021__panel p{color:#fff;}
body:has(.u-under-navy) #contents .lib-cnt-021__outer{border-color:rgba(255,255,255,.22) !important;}
/* 明色ボックス（bg-lgry：お悩み/見積/最寄り駅）は濃文字を維持 */
body:has(.u-under-navy) #contents .bg-lgry,
body:has(.u-under-navy) #contents .bg-lgry .lib-card__txt,
body:has(.u-under-navy) #contents .bg-lgry .lib-txt__outer,
body:has(.u-under-navy) #contents .bg-lgry .title,
body:has(.u-under-navy) #contents .bg-lgry p{color:var(--DEF);}
/* 導入バナー（白オーバーレイ）は濃文字を維持 */
body:has(.u-under-navy) #contents .p-intro .text-def{color:var(--DEF) !important;}
/* STEPフロー：紺ページ上で沈むためチェブロンを一段明るい紺に */
body:has(.u-under-navy) .p-flow__item{background:var(--MAIN);}

/* --- 紺背景ページ 追加調整 2026-08-17 --- */
/* text-main が紺の上に来る箇所は白抜き（明色ボックス内は除外） */
body:has(.u-under-navy) #contents .text-main{color:#fff;}
body:has(.u-under-navy) #contents .lib-wrr-001 .title{color:#fff;}
body:has(.u-under-navy) #contents .bg-lgry .text-main,
body:has(.u-under-navy) #contents .bg-lgry .text-def{color:var(--DEF);}
body:has(.u-under-navy) #contents .p-intro .text-main{color:var(--DEF);}
/* 会社概要・沿革テーブル：th白抜き／td白地・濃文字（デザイン案準拠） */
body:has(.u-under-navy) #contents .lib-table__01 th{color:#fff;}
body:has(.u-under-navy) #contents .lib-table__01 td{background:#fff;color:var(--DEF);}

/* --- 紺背景ページ：theme の !important に勝つための最終上書き 2026-08-17 --- */
body:has(.u-under-navy) #contents .text-main{color:#fff !important;}
body:has(.u-under-navy) #contents .text-def{color:#fff !important;}
body:has(.u-under-navy) #contents .lib-cnt-015 .text-main{color:#fff !important;}
body:has(.u-under-navy) #contents .lib-horizon__col .lib-card__title{color:#fff !important;}
/* 明色ボックス（bg-lgry）・導入バナー（p-intro）・テーブルtd 内は濃色を維持 */
body:has(.u-under-navy) #contents .bg-lgry .text-main,
body:has(.u-under-navy) #contents .bg-lgry .text-def,
body:has(.u-under-navy) #contents .bg-lgry .title,
body:has(.u-under-navy) #contents .bg-lgry p,
body:has(.u-under-navy) #contents .p-intro .text-main,
body:has(.u-under-navy) #contents .p-intro .text-def,
body:has(.u-under-navy) #contents .lib-table__01 td{color:var(--DEF) !important;}

/* --- 下層5ページ：body全体を紺に（パンくず帯・余白の白を解消）2026-08-17 --- */
body:has(.u-under-navy){background: var(--DEF);}
/* パンくずを紺地で読めるよう白系に */
body:has(.u-under-navy), body:has(.u-under-navy) .lib-breadcrumb__outer a, body:has(.u-under-navy) .lib-breadcrumb__inside, body:has(.u-under-navy) .lib-breadcrumb__list{/* color:rgba(255,255,255,.85) !important; */}

/* --- 2026-08-17 追加調整（company / strength） --- */
/* ① 見出し --typeA の縦バーを白に */
body:has(.u-under-navy) #contents .lib-title__outer.--typeA :where(.title):before{background-color:var(--WHT) !important;}
/* ① テーブル：th 左寄せ・幅25%・紺(白文字)／td 白地(濃文字)／グリッド線は白系 */
body:has(.u-under-navy) #contents .lib-table__01 th{background-color:var(--MAIN);color:#fff !important;text-align:left;width:25%;}
body:has(.u-under-navy) #contents .lib-table__01 td{background-color:#fff;color:var(--DEF) !important;}
body:has(.u-under-navy) #contents .lib-table__01 th,
body:has(.u-under-navy) #contents .lib-table__01 td{border-color: rgb(193 193 193 / 35%) !important;}
/* ② lib-wrr-001__band を反転（紺ページ上で白帯＋濃文字にして際立たせる） */
body:has(.u-under-navy) #contents .lib-wrr-001__band{background-color:var(--WHT) !important;}
body:has(.u-under-navy) #contents .lib-wrr-001__band,
body:has(.u-under-navy) #contents .lib-wrr-001__band *{color:var(--MAIN) !important;}
/* ② 下層MVタイトルにレスポンシブ font-size */
.js-page-main .lib-hero__title{font-size:clamp( 2.625rem, calc( 2.2195945945945947rem + 1.7297297297297298vw ), 3.625rem );}

/* ============================================================
   実績（/media/）一覧・詳細 紺基調 2026-08-18
   ============================================================ */
/* 一覧ページ本体を紺に（記事一覧コンテナ media-post__outer をフックに） */
body:has(.media-post__outer){/* background:var(--MAIN); */}
body:has(.media-post__outer) .lib-breadcrumb__outer, body:has(.media-post__outer) .lib-breadcrumb__inside, body:has(.media-post__outer) .lib-breadcrumb__list, body:has(.media-post__outer){color:rgba(255,255,255,.85) !important;}
/* 一覧の記事カードは白カード・濃文字（画像＋カテゴリ＋タイトル＋日付） */
body:has(.media-post__outer) #contents .media-post__item{background:#fff;border-color:#fff;}
/* サイドバー：見出し・リンク・日付などを白抜き（フォーム入力は除外） */
body:has(.u-under-navy) #contents .media-side__box :where(h2,h3,h4,p,a,span,time,li,dt,dd,div):not(.badge), body:has(.media-post__outer) #contents .media-side__box :where(h2,h3,h4,p,time,li,dt,dd,div):not(.badge){color:#fff !important;}
body:has(.u-under-navy) #contents .media-side__title,
body:has(.media-post__outer) #contents .media-side__title{border-color:rgba(255,255,255,.4) !important;}
/* 記事本文の箇条書き（要望課題・工事ポイント）を白抜き */
body:has(.u-under-navy) #contents .lib-indent__list,
body:has(.u-under-navy) #contents .lib-indent__list > li{color:#fff !important;}
/* 関連事例カードのタイトルを白抜き */
body:has(.u-under-navy) #contents .media-related__title,
body:has(.u-under-navy) #contents .media-related__item :where(h3,a,span,p){color:#fff !important;}

/* --- 記事詳細ページ全て紺基調に（media-column__main をフック）2026-08-18 --- */
body:has(.media-column__main){background: var(--DEF);}
body:has(.media-column__main) .lib-breadcrumb__outer, body:has(.media-column__main) .lib-breadcrumb__inside{color:rgba(255,255,255,.85) !important;}
/* 記事本文の基本テキストを白抜き（白カード/テーブルは各!important規則で濃色維持） */
body:has(.media-column__main) #contents .media-post__article{/* color:#fff; */}
body:has(.media-column__main) #contents .media-post__article :where(p,li,h2,h3,h4,span,strong,em){/* color:#fff; */}
/* サイドバー白抜き（フォーム入力・バッジは除外） */
body:has(.media-column__main) #contents .media-side__box :where(h2,h3,h4,p,time,li,dt,dd,div):not(.badge){color:#fff !important;}
body:has(.media-column__main) #contents .media-side__title{border-color:rgba(255,255,255,.4) !important;}
/* 記事内テーブル/見出しバー（新築物件詳細）も紺基調で維持 */
body:has(.media-column__main) #contents .lib-title__outer .title{color:#fff !important;}
body:has(.media-column__main) #contents .lib-title__outer.--typeA :where(.title):before{background-color:var(--WHT) !important;}
body:has(.media-column__main) #contents .lib-table__01 th{background-color:var(--MAIN);color:#fff !important;text-align:left;width:25%;}
body:has(.media-column__main) #contents .lib-table__01 td{background-color:#fff;color:var(--DEF) !important;}
body:has(.media-column__main) #contents .lib-indent__list,
body:has(.media-column__main) #contents .lib-indent__list li{/* color:#fff !important; */}

.lib-wrr-001__band:before {
    border-top-color: var(--DEF);
}

.lib-cnt-021__btn:before, .lib-cnt-021__panel:before {
    color: var(--DEF)!important;
    background-color: var(--WHT) !important;
}

.lib-cnt-021__panel:before {
    content: "A";
    background-color: var(--MAIN) !important;
    top: 0;
    color: var(--WHT)!important;
}

.lib-toggle__btn[aria-expanded]>.txt:after, .lib-toggle__btn[aria-expanded]>.txt:before {
    background-color: var(--WHT);
}

:where(table) tbody>tr>th:first-child {
    border-left-color: var(--WHT);
}

:where(.lib-indent__list).--dots:not([class*=before-])>li:before {
    background-color: var(--WHT);
}

.lib-recommend__thumb {
	background-color: var(--WHT);
}

.media-search__btn {
    border: var(--WHT) 1px solid;
}

.media-side__view a {
	background-color: var(--WHT);
	color: var(--DEF) !important;
}

.media-side__view a:hover {
	background-color: var(--MAIN);
	color: var(--WHT) !important;
}

.media-side__archive>li>a {
    color: var(--WHT);
}

.media-side__archive>li>a:before {
    color: var(--WHT);
}

#wrapper:has(.lib-header-BS02) .lib-hero__outer {
  padding-top: 60px;
  min-height: 200px;
}

#wrapper {
  padding-top: 0;
}

@media print, screen and (min-width: 992px) {
#wrapper:has(.lib-header-BS02) {
padding-top: 0;
}
#wrapper:has(.lib-header-BS02) .lib-hero__outer {
  padding-top: 120px;
  min-height: 300px;
}
}

.lib-header__bar {
  background-color: transparent;
  box-shadow: none;
}

.lib-nav__btn {
  color: var(--WHT);
}

.lib-header__outer{
  background-color: transparent;
}

.lib-header__outer.lib-header-BS02 {
  box-shadow: none;
}

.lib-breadcrumb__outer {
	background-color: var(--WHT);
	color: var(--DEF) !important;
}

.lib-breadcrumb__list li:after {
    color: var(--MAIN);
}

.lib-nav__btn.is-current, .lib-nav__btn:hover:not(.js-global__anchor) {
    color: var(--WHT);
    opacity: 0.8;
}

.lib-form__main {
	color: var(--WHT);
}

:where(.lib-link__arr) a:before, :where(a.lib-link__arr):before {
    color: var(--WHT);
}