/* reset */

*, *::before, *::after {
  box-sizing: border-box
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0
}
ul[role='list'], ol[role='list'] {
  list-style: none
}
body {
  min-height: 100vh;
  line-height: 1.5
}
h1, h2, h3, h4, button, input, label {
  line-height: 1.1
}
/*h1,h2,h3,h4{text-wrap:balance}*/
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor
}
img, picture {
  max-width: 100%;
  display: block
}
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit
}
textarea:not([rows]) {
  min-height: 10em
}
:target {
  scroll-margin-block: 5ex
}

/* grand common */

:root {
  --color-primary: 0, 28, 87;
  --color-secondary: 2, 2, 162;
  --color-bg-pale: 242, 247, 250;
  --color-bg-main: 237, 242, 247;
  --color-bg-dark: 230, 237, 244;
  --font-sans: "Noto Sans JP", sans;
  --font-serif: "Noto Serif JP", serif;
  --font-size-2s: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-r: 1rem;
  --font-size-m: 1.125rem;
  --font-size-l: 1.25rem;
  --font-size-2l: 1.5rem;
}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: rgb(var(--color-primary));
  background: rgb(var(--color-bg-main)) url("/img/bg-common.svg") 0 0 / contain no-repeat;
  position: relative;
  padding-top: calc(75px + 2%);
}

strong, .is-bold {
  font-weight: 700;
}

.is-sans {
  font-family: var(--font-sans);
}

.is-2s {
  font-size: var(--font-size-2s);
}

.is-s {
  font-size: var(--font-size-s);
}

.is-r {
  font-size: var(--font-size-r);
}

.is-m {
  font-size: var(--font-size-m);
}

.is-l {
  font-size: var(--font-size-l);
}

.is-2l {
  font-size: var(--font-size-2l);
}

@media screen and (max-width: 1219px) {
  .pc-only {
    display: none;
  }

}


/* nav */
.header-container {
  z-index: 99900;
  font-family: var(--font-sans);
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #fff;
  border-radius: 4px;
  position: fixed;
  width: 98%;
  top: 1%;
  left: 1%;
  box-shadow: 0px 0px 4px 4px rgb(var(--color-bg-main));
}

.header-container .logo, .header-container ul, .header-container li {
  margin: 0;
  padding: 0;
}

.header-container a {
  text-decoration: none;
}

.menu-trigger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 99999;
}

.menu-trigger span {
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: all 0.3s;
}

.nav {
  position: fixed;
  top: 0;
  right: -100%;
  /* 初期状態は画面外 */
  width: 80%;
  height: 100vh;
  background: rgba(var(--color-primary), 0.8);
  transition: right 0.4s;
  display: block;
  padding: 100px 2rem 2rem;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.nav-list li:not(:last-child) {
  border-bottom: 1px solid #FFF;
}

.nav-list li a {
  display: block;
  padding: 1.2rem 0;
  color: #FFF;
}
.is-active .nav {
  right: 0;
}

body.is-active {
  overflow: hidden;
}

.is-active .menu-trigger span {
  background-color: #FFF;
}

.is-active .menu-trigger span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.is-active .menu-trigger span:nth-child(2) {
  opacity: 0;
}
.is-active .menu-trigger span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (min-width: 900px) {
  .menu-trigger {
    display: none;
    /* ボタンを隠す */
  }

  .nav {
    position: static;
    width: auto;
    height: auto;
    background: none;
    transition: none;
    padding: 0;
  }

  .nav-list {
    flex-direction: row;
    gap: 2rem;
  }
  .nav-list li {
    padding: 16px 0;
  }

  .nav-list li:not(:last-child) {
    border-bottom: none;
  }
  .nav-list li a {
    padding: 0;
    color: inherit;
  }
  .nav-list li:last-child {
    padding: 16px 1.5rem;
    color: #FFF;
    background-color: rgb(var(--color-secondary));
    border-radius: 6px;
  }

  .nav-list li:last-child a {
    color: #FFF;
  }

}

/* footer */
.footer {
  width: 100%;
  padding: 100px 0;
  font-size: var(--font-size-2s);
  font-weight: 700;
  color: #FFF;
  background-color: rgb(var(--color-secondary));
}

.footer p {
  margin: 0 0 1em;
}

.footer a {
  text-decoration: none;
}

/* --- 上段 --- */
.footer-top {
  display: flex;
  margin-bottom: 40px;
  /* 上段と下段の間の余白 */
}

/* 1コラム目：ロゴ（幅250px / 右ガター90px / 左揃え） */
.footer-top .col-logo {
  width: calc(250 / 1180 * 100%);
  margin-right: calc(90 / 1180 * 100%);
  text-align: left;
}

/* 2コラム目：ナビゲーション（幅700px / 左揃え） */
.footer-top .col-nav {
  width: calc(700 / 1180 * 100%);
  text-align: left;
}

/* ナビゲーションの5項目横並び（ガター2em） */
.footer-top .col-nav ul {
  display: flex;
  gap: 2em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-r);
}


/* --- 下段 --- */
.footer-bottom {
  display: flex;
  align-items: flex-end;
  /* 下端で揃える */
}

/* 1コラム目：住所など（上段1コラムと同じ：幅250px / 右ガター90px / 左揃え） */
.footer-bottom .col-address {
  width: calc(250 / 1180 * 100%);
  margin-right: calc(90 / 1180 * 100%);
  text-align: left;
}

/* 2コラム目：メールなど（上段1コラムと同じ：幅250px / 右ガター90px / 左揃え） */
.footer-bottom .col-contact {
  width: calc(250 / 1180 * 100%);
  margin-right: calc(90 / 1180 * 100%);
  text-align: left;
}

/* 3コラム目：クレジット（幅は残りのすべて / 右揃え） */
.footer-bottom .col-credit {
  flex: 1;
  /* 残りの幅をすべて埋める */
  text-align: right;
}


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

  .footer {
    width: 100%;
    padding: 60px 0;
  }

  /* 上段の縦並び化 */
  .footer-top {
    flex-direction: column;
    margin-bottom: 30px;
  }
  .footer-top .col-logo,
  .footer-top .col-nav {
    width: 100%;
    margin-right: 0;
  }
  .footer-top .col-logo {
    margin-bottom: 20px;
  }

  /* スマホ時のナビゲーション（縦並び、または折り返し横並び） */
  .footer-top .col-nav ul {
    flex-wrap: wrap;
    /* 画面幅が狭い場合は折り返す */
    gap: 1em 1.5em;
    /* 上下1em, 左右1.5em など調整 */
  }

  /* 下段の縦並び化 */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    /* 左揃えに戻す */
  }
  .footer-bottom .col-address,
  .footer-bottom .col-contact,
  .footer-bottom .col-credit {
    width: 100%;
    margin-right: 0;
    text-align: left;
    /* スマホ時はすべて左揃えの方が見やすいことが多いです */
  }
  .footer-bottom .col-address {
    margin-bottom: 20px;
  }
  .footer-bottom .col-contact {
    margin-bottom: 30px;
  }
}


/* home - MV */

:root {
  --font-main: clamp(32px, calc(82 / 1180 * 100vw), 82px);
  --font-sub: clamp(12px, calc(28 / 1180 * 100vw), 28px);
  --font-sub2: clamp(16px, calc(28 / 1180 * 100vw), 28px);
}

.animation-wrapper {
  width: 100%;
  background-color: transparent;
}

.animation-container {
  position: relative;
  width: 100%;
  max-width: 1180px;
  aspect-ratio: 1180 / 664;
  margin: 0 auto;
  background-color: rgb(var(--color-bg-dark));
  overflow: hidden;
}

.background-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.main-text {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-main);
  font-style: oblique;
  opacity: 0;
  white-space: nowrap;
  z-index: 10;
  color: rgb(var(--color-primary));
}

.scroll-item {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 5%;
  font-size: var(--font-sub);
  box-sizing: border-box;
  opacity: 0;
  color: rgb(var(--color-primary));
}

.odd {
  text-align: left;
}
.even {
  text-align: right;
}

.final-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
  width: auto;
  text-align: center;
  z-index: 20;
}

.final-text {
  font-size: var(--font-sub2);
  color: #fff;
  margin: 0 0 5.93% 0;
  margin: 0 0 12% 0;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
}

.logo-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  opacity: 0;
}

.logo-mark img {
  display: block;
  width: clamp(105px, 17.8vw, 210px);
  height: auto;
}


/* home */

section.home {
  width: 100%;
  max-width: 100% !important;
  padding: 100px 0;
}

section.bg-dark {
  background-color: rgb(var(--color-bg-dark));
}

@media screen and (max-width: 768px) {
  section.home {
    padding: 60px 0;
  }
}

.inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

.home-h2 {
  font-size: clamp(47px, calc(94 / 1220 * 100vw), 94px);
  letter-spacing: -6.4%;
  font-weight: 500;
  margin: 0 0 0.53em;
}

.home-h3 {
  font-size: clamp(25px, calc(50 / 1220 * 100vw), 50px);
  letter-spacing: -6.4%;
  color: rgb(var(--color-secondary));
  font-weight: 500;
  margin: 0 0 0.53em;
}

.home-h-txt {
  font-size: 28px;
  line-height: 1.5;
  margin: 0 0 1.29em;
}

.home-txt {
  line-height: 2.0;
  margin: 0 0 1em;
}

.strengths-num {
  font-size: 0.875rem;
  text-align: center;
  margin: 0 0 1em;
  padding-bottom: 0.5em;
  border-bottom: rgb(var(--color-primary)) 1px solid;
}

.strengths-num span {
  font-size: 1.5rem;
  width: auto;
}

.signature img {
  display: inline;
  vertical-align: -1em;
  height: 48px;
}

/* 1コラム */

.ly-1col {
  width: 100%;
}

/* --- 2コラム（570px / 510px） --- */
.ly-2col-a {
  display: flex;
  justify-content: space-between;
}
/* 指定のpxを 1180 で割って % を算出する */
.ly-2col-a .col-1 {
  width: calc(510 / 1180 * 100%);
}
.ly-2col-a .col-2 {
  width: calc(570 / 1180 * 100%);
}

@media screen and (max-width: 768px) {
  .ly-2col-a {
    flex-direction: column;
  }
  .ly-2col-a .col-1,
  .ly-2col-a .col-2 {
    width: 100%;
  }
  .ly-2col-a .col-2 {
    margin-bottom: 30px;
  }
}

/* --- 3コラム（110px / 500px / 480px） --- */
.ly-3col {
  display: flex;
}

section .ly-3col:not(:last-child) {
  margin: 0 0 calc(100% / 1180 * 56);
}

.ly-3col .col-1 {
  width: calc(110 / 1180 * 100%);
  margin-right: calc(30 / 1180 * 100%);
  /* ガターも比率で縮小させる */
}
.ly-3col .col-2 {
  width: calc(500 / 1180 * 100%);
  margin-right: calc(60 / 1180 * 100%);
}
.ly-3col .col-3 {
  width: calc(480 / 1180 * 100%);
}

@media screen and (max-width: 768px) {
  .ly-3col {
    flex-wrap: wrap;
  }
  .ly-3col .col-1 {
    width: 80px;
    /* スマホ用に固定縮小 */
    margin-right: 20px;
  }
  .ly-3col .col-2 {
    width: calc(100% - 100px);
    /* 1番目の幅(80px) + 余白(20px) を引いた残り */
    margin-right: 0;
  }
  .ly-3col .col-3 {
    width: 100%;
    margin-top: 30px;
  }
}

/* --- 2コラム（330px / 850px） --- */
.ly-2col-b {
  display: flex;
}
.ly-2col-b .col-1 {
  width: calc(330 / 1180 * 100%);
}
.ly-2col-b .col-2 {
  width: calc(850 / 1180 * 100%);
}

@media screen and (max-width: 768px) {
  .ly-2col-b {
    flex-direction: column;
  }
  .ly-2col-b .col-1,
  .ly-2col-b .col-2 {
    width: 100%;
  }
  .ly-2col-b .col-1 {
    margin-bottom: 30px;
  }
}


/* 更新情報 */
.news-list,
.news-list dt,
.news-list dd {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans;
}

.news-item {
  display: flex;
  padding: bottom: 15px;
  margin-bottom: 15px;
}

.news-item:not(:last-child) {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px solid rgba(var(--color-primary), 0.25);
}

.news-list dt {
  width: 120px;
  flex-shrink: 0;
  /* 画面が縮んでも120pxを維持する */
}

.news-list dd {
  flex: 1;
  /* 残りの幅をすべて使う */
}

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

  .news-list dt {
    margin-bottom: 0.5em;
  }
}

/* common layout */

article {
  width: 95%;
  background-color: #FFF;
}

article:nth-of-type(odd) {
  margin: 0 5% 8% 0;
  padding-left: 5%;
  border-radius: 0 6px 6px 0;
}

article:nth-of-type(even) {
  margin: 0 0 8% 5%;
  padding-right: 5%;
  border-radius: 6px 0 0 6px;
}

section {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding: 40px 20px;
}

@media screen and (max-width: 768px) {
  section {
    padding: 30px 20px;
  }
}

/* コラム */

/* PC用（768px以上など）のブレイクポイントでカラムを分ける場合 */

[class*="-row-"] {
  display: grid;
  gap: 4.3% 8.5%;
}

@media (min-width: 768px) {
  .l-row-02 {
    grid-template-columns: repeat(2, 1fr);
  }
  .l-row-03 {
    grid-template-columns: repeat(3, 1fr);
  }
  .l-row-04 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* common */

.page-head {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 5.4% 20px 20px;
}

.h1-shoulder {
  font-size: clamp(61px, calc(94 / 1220 * 100vw), 94px);
  letter-spacing: -6.4%;
  line-height: 1.0;
  margin: 0 0 0.4em;
}

main h1 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.0;
  margin: 0 0 1.3em;
}

.h2-shoulder {
  font-size: 28px;
  letter-spacing: -6.4%;
  line-height: 1.0;
  margin: 0 0 1.2em;
}

h2 {
  font-size: clamp(38px, calc(48 / 1220 * 100vw), 48px);
  font-weight: 500;
  line-height: 1.0;
  margin: 0 0 0.88em;
}

h3 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.0;
  margin: 0 0 0.88em;
}

p, ul, ol, dl {
  line-height: 1.5;
  margin: 0 0 1em;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.75em;
  max-width: 46em;
  margin: 0 0 1em;
}

.foot-print {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

.foot-print li:not(:last-child)::after {
  content: "　／　"
}


.link-list-01 {
  display: flex;
  gap: 2em;
  list-style-type: none;
  padding: 0;
}

.link-list-01 li {
  white-space: nowrap;
  width: auto;
  margin: 0 0 1em 0;
  position: relative;
}

.link-list-01 a {
  text-decoration: none;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgb(var(--color-primary));
}

.link-list-01 li a::after {
  content: "　→";
  display: inline-block;
}

.link-list-01 li a:hover::after {
  animation: jump-back 0.3s ease-out forwards;
}

@keyframes jump-back {
  20% {
    transform: translateX(-1em);
  }
  100% {
    transform: translateX(0);
  }
}


/* service */

@media (min-width: 768px) {
  .block-section {
    display: flex;
  }

  .block-section:nth-of-type(even) {
    flex-direction: row-reverse;
  }

  .block-section > div {
    width: 50%;
  }

  .block-section > div {
    margin: 0;
  }
}

/* ▼ テキスト領域 */
.block-section > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ▼ 画像領域 */
.block-section > div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4%;
}

.bg-area {
  background-color: rgb(var(--color-bg-pale));
  width: 80%;
  aspect-ratio: 460 / 300;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-area img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.border-area {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(var(--color-bg-dark));
  border-radius: 8px;
  aspect-ratio: 460 / 300;
  margin-bottom: 2em;
}

.border-area img {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
}

/* タグ */


:root {
  /* 統合報告書（黄色系） */
  --color-integrated-base: #FFD700;
  --color-integrated-hover: #B8860B;

  /* Annual Report（赤色系） */
  --color-annual-base: #FFADAD;
  --color-annual-hover: #B22222;

  /* サステナ（水色系） */
  --color-sustainability-base: #A2DFF7;
  --color-sustainability-hover: #007094;

  /* 事業報告（ピンク系） */
  --color-business-base: #FFC0CB;
  --color-business-hover: #C71585;

  /* 会社案内（オレンジ系） */
  --color-profile-base: #FFCC80;
  --color-profile-hover: #E65100;

  /* 社内報（紫色系） */
  --color-internal-base: #E1BEE7;
  --color-internal-hover: #6A1B9A;

  /* PR誌（茶色系） */
  --color-pr-base: #D7CCC8;
  --color-pr-hover: #5D4037;

  /* SPツール */
  --color-sp-base: #9FA8DA;
  --color-sp-hover: #1A237E;

  /* ウェブ */
  --color-web-base: #E0E0E0;
  --color-web-hover: #424242;

  /* 映像（緑色系） */
  --color-movie-base: #C8E6C9;
  --color-movie-hover: #2E7D32;

  /* 共通テキスト色 */
  --tag-default: #000000;
  --tag-hover: #FFFFFF;
}

/* タグスタイル */
.tag-link {
  list-style: none;
  display: flex;
  margin: 0 0 1em;
  padding: 0;
  flex-wrap: wrap;
  gap: 1em;
}

.tag-link li a {
  display: inline-block;
  padding: 0.3em 0.5em;
  font-family: "Noto Sans JP", sans;
  text-decoration: none;
  font-size: 0.875rem;
  text-wrap: nowrap;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: var(--tag-default);
}

.tag-integrated {
  background-color: var(--color-integrated-base);
}
:where(:not(.work-item__categories)) > .tag-integrated:hover {
  background-color: var(--color-integrated-hover);
  color: var(--tag-hover);
}

.tag-annual {
  background-color: var(--color-annual-base);
}
:where(:not(.work-item__categories)) > .tag-annual:hover {
  background-color: var(--color-annual-hover);
  color: var(--tag-hover);
}

.tag-sustainability {
  background-color: var(--color-sustainability-base);
}
:where(:not(.work-item__categories)) > .tag-sustainability:hover {
  background-color: var(--color-sustainability-hover);
  color: var(--tag-hover);
}

.tag-business {
  background-color: var(--color-business-base);
}
:where(:not(.work-item__categories)) > .tag-business:hover {
  background-color: var(--color-business-hover);
  color: var(--tag-hover);
}

.tag-profile {
  background-color: var(--color-profile-base);
}
:where(:not(.work-item__categories)) > .tag-profile:hover {
  background-color: var(--color-profile-hover);
  color: var(--tag-hover);
}

.tag-internal {
  background-color: var(--color-internal-base);
}
:where(:not(.work-item__categories)) > .tag-internal:hover {
  background-color: var(--color-internal-hover);
  color: var(--tag-hover);
}

.tag-pr {
  background-color: var(--color-pr-base);
}
:where(:not(.work-item__categories)) > .tag-pr:hover {
  background-color: var(--color-pr-hover);
  color: var(--tag-hover);
}

.tag-sp {
  background-color: var(--color-sp-base);
}
:where(:not(.work-item__categories)) > .tag-sp:hover {
  background-color: var(--color-sp-hover);
  color: var(--tag-hover);
}

.tag-web {
  background-color: var(--color-web-base);
}
:where(:not(.work-item__categories)) > .tag-web:hover {
  background-color: var(--color-web-hover);
  color: var(--tag-hover);
}

.tag-movie {
  background-color: var(--color-movie-base);
}
:where(:not(.work-item__categories)) > .tag-movie:hover {
  background-color: var(--color-movie-hover);
  color: var(--tag-hover);
}


/* works */

.works-checkbox {
  border: 1px solid rgb(var(--color-secondary));
}

.works-checkbox legend {
  font-family: var(--font-sans);
}

.is-hidden {
  display: none !important;
}

/* フィルターエリア */

.filter-controls {
  font-family: var(--font-sans);
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
}

.btn {
  padding: 0.4rem 1rem;
  background: rgb(var(--color-bg-pale));
  cursor: pointer;
  font-size: var(--font-size-s);
  border: none;
  border-radius: 4px;
}

.btn:hover {
  background: rgb(var(--color-bg-dark));
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-s);
  line-height: 1.3;
}

/* 「・」を末尾に含む各単語を途中で改行させない */
.filter-label-txt span {
  display: inline-block;
  white-space: nowrap;
  /* 塊の中（サステナビリティレポート・）での改行を禁止 */
  vertical-align: top;
  /* 複数行になった際の揃えを調整 */
}

/* 実績グリッド */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.work-item {
  background: rgb(var(--color-bg-pale));
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.work-item__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 1. サムネイルの親容器 */
.work-item__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgb(var(--color-bg-dark)) url("/img/bg-common.svg") 0 0 / contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.work-item__thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 1px solid #FFF;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.work-item:hover .work-item__thumb img {
  transform: scale(1.05) translateY(-2px);
  filter: drop-shadow(0 2px 4px rgba(var(--color-primary), 0.2));
}

.work-item__content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.work-item__categories {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.work-item__categories li {
  font-size: var(--font-size-2s);
  font-family: var(--font-sans);
  padding: 0.2rem 0.5rem;
}

.work-item__client {
  font-size: var(--font-size-r);
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.work-item__date {
  font-size: var(--font-size-s);
  font-family: var(--font-sans);
  color: #666;
  margin-top: auto;
}

/* 結果無し */
.no-results {
  grid-column: 1 / -1;
  /* グリッドの全列をまたぐようにする */
  text-align: center;
  padding: 3rem 1rem;
}


/* works detail */


.h2-work {
  font-size: var(--font-size-2l);
}

.work-detail-img {
  background-image: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(var(--color-bg-main)) 100%);
  padding: 2rem;
}

.work-detail-img img {
  border: 2px solid #FFF;
  object-fit: contain;
}

.work-detail-img-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 2rem;
}

.work-detail-img-main:last-child {
  margin-bottom: 0;
}

.work-detail-img-main img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(240px, calc(480 / 1180 * 100cqw), 480px);
}

.work-detail-img-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.work-detail-img-pages img {
  width: auto;
  height: clamp(80px, calc(160 / 1180 * 100cqw), 160px);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.work-detail-img-pages img.is-active {
  border-color: rgb(var(--color-secondary));
}

/* contact */


.contact-section .wpcf7 {
  margin-top: 2rem;
  background-color: rgb(var(--color-bg-pale));
  padding: 1rem;
}

.contact-section form {
  font-family: var(--font-sans);
  font-size: var(--font-size-r);
}