* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #ffffff;
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    background: transparent;
}

/* =====================
   Base
   ===================== */
img { display: block; max-width: 100%; }

/* =====================
   Show/Hide ヘルパー（元テーマの .md（PC）/ .sm（SP）表記を踏襲）
   ===================== */
.md { }
.sm { }
@media print, (min-width: 768px) {
    .sm { display: none !important; }
}
@media only screen and (max-width: 767.98px) {
    .md { display: none !important; }
}

/* Header Spacer（固定ヘッダー高さ分の余白を確保） */
.header-spacer {
    height: 60px;
    background: #fff;
}
@media (min-width: 768px) {
    .header-spacer { height: 68px; }
}

/* ============================================================
   WORKS ページ（https://ic-lab.net/works/ の完全移植）
   元テーマ works.css（fcvanilla）の該当ルールを、サイト側の
   html{font-size:625% / 13.333vw}（1rem=100px相当）の仕組みに依存せず
   px・vwへ換算して移植。ブレークポイントは元サイトに合わせ768px。
   ============================================================ */

.works-page .wrapper {
    margin-right: auto;
    margin-left: auto;
}
@media print, (min-width: 768px) {
    .works-page .wrapper { width: 800px; }
}
@media only screen and (max-width: 767.98px) {
    .works-page .wrapper { padding-right: 9.867vw; padding-left: 9.867vw; }
}

/* ---- 共通見出し（各カテゴリブロックの見出しに使用） ---- */
.title-common-tertiary { font-weight: 600; text-align: center; }
.title-common-tertiary .text-english {
    display: inline-block;
    position: relative;
    color: #231815;
    font-family: 'M PLUS 1', sans-serif;
    line-height: 1.2;
}
.title-common-tertiary .text-english::after,
.title-common-tertiary .text-english::before {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    background: #231815;
}
.title-common-tertiary .text-english::after { left: 0; }
.title-common-tertiary .text-english::before { right: 0; }
.title-common-tertiary .text-japanese {
    display: block;
    font-feature-settings: 'palt';
}
@media print, (min-width: 768px) {
    .title-common-tertiary .text-english { margin-bottom: 1px; padding: 0 87px; font-size: 32px; }
    .title-common-tertiary .text-english::after,
    .title-common-tertiary .text-english::before { width: 60px; margin-top: 1px; }
    .title-common-tertiary .text-japanese { font-size: 10px; }
}
@media only screen and (max-width: 767.98px) {
    .title-common-tertiary .text-english { margin-bottom: 0.4vw; padding: 0 14.933vw; font-size: 6.533vw; }
    .title-common-tertiary .text-english::after,
    .title-common-tertiary .text-english::before { width: 11.867vw; margin-top: 1px; }
    .title-common-tertiary .text-japanese { font-size: 2.8vw; }
}

/* ---- キービジュアル（制作実績 Works） ---- */
.works-keyvisual { position: relative; }
.works-keyvisual-title {
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    color: #231815;
    text-align: center;
    letter-spacing: 0.1em;
}
.works-keyvisual-title .text-japanese {
    display: inline-block;
    border-bottom: 1px solid #231815;
    line-height: 1.2;
}
.works-keyvisual-title .text-english {
    display: block;
    font-family: 'M PLUS 1', sans-serif;
    font-feature-settings: 'palt';
}
.works-keyvisual-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: inherit;
}
.works-keyvisual-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media print, (min-width: 768px) {
    .works-keyvisual { height: 772px; padding: 98px 0; }
    .works-keyvisual-title .text-japanese { margin-bottom: 7px; padding-bottom: 10px; font-size: 35px; }
    .works-keyvisual-title .text-english { font-size: 13px; }
}
@media only screen and (max-width: 767.98px) {
    .works-keyvisual { height: 93.33vw; padding: 2.8vw 0; }
    .works-keyvisual-title .text-japanese { margin-bottom: 2vw; padding-bottom: 2.4vw; font-size: 4.667vw; }
    .works-keyvisual-title .text-english { font-size: 2.4vw; letter-spacing: 0.1em; }
}

/* ---- カテゴリ別実績一覧 ---- */
.works-general .works-anchor {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 500;
    list-style: none;
}
.works-general .anchor-item {
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: 0.26s ease-out;
    background-size: 210% !important;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
.works-general .anchor-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid;
}
.works-general .anchor-item:hover { background-position: left !important; }

/* アンカーリンク着地時に固定グローバルヘッダーと見出しが被らないよう余白を確保 */
.works-general .works-block {
    scroll-margin-top: 80px;
}
@media print, (min-width: 768px) {
    .works-general .works-block {
        scroll-margin-top: 90px;
    }
}

/* カテゴリ別カラー */
.works-general .anchor-item.is-cat-105::after { border-color: #42b138; }
.works-general .anchor-item.is-cat-105:hover { color: #42b138; }
.works-general .anchor-item.is-cat-106::after { border-color: #3857d1; }
.works-general .anchor-item.is-cat-106:hover { color: #3857d1; }
.works-general .anchor-item.is-cat-107::after { border-color: #985ecc; }
.works-general .anchor-item.is-cat-107:hover { color: #985ecc; }
.works-general .anchor-item.is-cat-108::after { border-color: #d0c11e; }
.works-general .anchor-item.is-cat-108:hover { color: #d0c11e; }
.works-general .anchor-item.is-cat-109::after { border-color: #d7760f; }
.works-general .anchor-item.is-cat-109:hover { color: #d7760f; }
.works-general .anchor-item.is-cat-110::after { border-color: #c54747; }
.works-general .anchor-item.is-cat-110:hover { color: #c54747; }

@media print, (min-width: 768px) {
    .works-general { padding: 135px 0 108px; }
    .works-general .anchor-item { min-width: 81px; padding: 3px 18px 3px; border-radius: 50px; font-size: 18px; }
    .works-general .anchor-item::after { border-radius: 50px; }
    .works-general .works-block { padding: 51px 0; }
    .works-general .title-common-tertiary { margin-bottom: 60px; }
}
@media (min-width: 768px) and (max-width: 899.98px) {
    /* 840px（6項目が1行に収まる幅）未満では折り返しを許可し、横スクロールの発生を防ぐ */
    .works-general .works-anchor { flex-wrap: wrap; justify-content: center; width: 100%; max-width: 840px; gap: 13px; margin: 0 auto 51px; }
}
@media (min-width: 900px) {
    .works-general .works-anchor { flex-wrap: nowrap; width: 840px; gap: 13px; margin: 0 auto 51px; }
}
@media only screen and (max-width: 767.98px) {
    .works-general { padding: 9.2vw 0 7.733vw; }
    .works-general .wrapper { width: 74.665vw; margin: 0 auto 12.266vw; padding: 0; }
    .works-general .works-anchor { justify-content: center; width: 96.264vw; gap: 2.8vw 2.133vw; margin: 0 auto; }
    .works-general .anchor-item { min-width: 14.533vw; padding: 0.4vw 3.333vw 0.4vw; border-radius: 6.667vw; font-size: 3.333vw; }
    .works-general .anchor-item::after { border-radius: 6.667vw; }
    .works-general .works-block { padding: 12.266vw 0; }
    .works-general .title-common-tertiary { margin: 0 -10.666vw 8vw; }
}

/* ---- 実績一覧（画像＋キャプション） ---- */
.works-block .works-list {
    color: #666666;
    font-weight: 500;
    overflow-wrap: break-word;
    margin: 0;
    padding: 0;
    list-style: none;
    font-feature-settings: 'palt';
}
.works-block .works-list p { margin: 0; }
.works-block .works-list a { color: inherit; text-decoration: underline; }
.works-block .works-list a:hover { text-decoration: none; }
.works-block .works-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 0;
}

@media print, (min-width: 768px) {
    .works-block .works-list { display: flex; flex-wrap: wrap; margin-left: 1px; font-size: 15px; line-height: 1.46; }
    .works-block .works-list > li { width: calc((100% - 51px) / 2); margin: 0 51px 91px 0; }
    .works-block .works-list > li:nth-child(even) { margin-right: 0; }
    .works-block .works-image { display: block; height: 250px; margin-bottom: 3px; }
}
@media only screen and (max-width: 767.98px) {
    .works-block .works-list { font-size: 12px; line-height: 1.7586666667; }
    .works-block .works-list > li:not(:last-child) { margin-bottom: 8.266vw; }
    .works-block .works-image { display: block; height: 49.865vw; margin-bottom: 0.667vw; }
}