/*
Theme Name: Yutoyuto Portfolio 2026
Author: Yuto
Version: 1.0
*/

/* =========================
  Layout Base
========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: min(1060px, calc(100% - 40px));
    max-width: 1060px;
    margin-inline: auto;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    font-family: "Inter", sans-serif;
    color: #333333;
}

.wrapper {
    max-width: 1440px;
    margin-inline: auto;
}

/* =========================
  Header 共通
========================= */

/* 追従ヘッダー（常に上に固定） */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 112px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
}

/* Home(FV上)だけ透過にしたい場合 */
.home .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 中身の並び：右のインナーラインまで右寄せ */
.header-inner {
    height: 112px;
    display: flex;
    align-items: center; /* 上下中央 */
    justify-content: space-between;
    padding: 0; /* 余計な 31px などは無し */
}
/* ロゴがある時 */
.header-logo {
    font-size: 35px;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    line-height: 1;
    letter-spacing: 0.4em;
}

/* ナビを右端へ */
.header-nav {
    margin-left: auto; /* ←これでインナー右端まで寄る */
}

/* ナビの並び */
.header-nav__list {
    display: flex;
    gap: 32px; /* 各セットの横マージン32px */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 最後だけ右余白0は、gap方式なら自然に0になります */
.header-nav__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333333;
}

.header-nav__link:hover {
    color: #155dfc;
}

.header-nav__link .en {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.header-nav__link .jp {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    margin-top: 5px; /* 英字と日本語の間 5px */
}

/* headerのインナー（1032pxのライン内） */
.container.header-inner {
    height: 112px; /* ここも112に固定 */
    display: flex;
    align-items: center; /* 上下中央 */
    justify-content: flex-end; /* 右寄せ（ナビを右端へ） */

    padding: 0;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
}

.section,
.front-works,
.front-service,
.front-about,
.front-contact {
    background: rgba(255, 255, 255, 0.85);
}

.menu-btn {
    display: none;
}

/* =========================
  Contact（共通）
========================= */
#contact {
    scroll-margin-top: 80px;
}

.front-contact {
    padding: 0; /* sectionでpadding入れない運用（内側で調整） */
}

.contactSection {
    padding: 80px 0 120px;
    position: relative;
    color: #fff;
    background:
        radial-gradient(
            60% 60% at 50% 15%,
            rgba(21, 93, 252, 0.25) 0%,
            rgba(0, 0, 0, 0) 60%
        ),
        radial-gradient(
            70% 70% at 50% 70%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.35) 100%
        ),
        #0b1220;
}

.sectionHead--contact .sectionHead__sub,
.sectionHead--contact .sectionHead__lead {
    color: rgba(255, 255, 255, 0.72);
}
.sectionHead--contact .sectionHead__lead {
    margin: 12px 0 0;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.contactGrid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* left */
.contactLeft__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
}
.contactLeft__text {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.9;
}

.contactHours {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}
.contactHours__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.18);
    display: grid;
    place-items: center;
}
.contactHours__icon img {
    width: 100%;
    height: 100%;
    display: block;
}
.contactHours__label {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
}
.contactHours__time {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.contactX {
    margin-top: 28px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.contactX img {
    width: 100%;
    height: 100%;
}

.contactX span {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.02em;
}

/* right card */
.contactFormCard {
    border-radius: 16px;
    padding: 26px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.formRow {
    margin-bottom: 18px;
}
.formLabel {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}
.req {
    color: #ff4d4f;
    margin-left: 4px;
}

.formControl {
    width: 438px;
    max-width: 100%;
    height: 48px;
    border-radius: 10px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    outline: none;
}
.formControl::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.formControl:focus {
    border-color: rgba(21, 93, 252, 0.9);
    box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.25);
}

.formControl--textarea {
    height: 160px;
    padding: 14px 16px;
    resize: vertical;
}

/* native selectは見えなくする（値保持用） */
.formSelectNative {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* custom select */
.formSelect {
    position: relative;
}
.formSelect__btn {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.formSelect__caret {
    opacity: 0.8;
    font-size: 12px;
}

.formSelect__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 12px;
    background: rgba(240, 242, 246, 0.95);
    color: #0a0a0a;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    display: none;
    z-index: 20;
}
.formSelect.is-open .formSelect__list {
    display: block;
}

.formSelect__item {
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}
.formSelect__item:hover {
    background: rgba(21, 93, 252, 0.12);
}
.formSelect__item.is-selected::before {
    content: "✓ ";
    font-weight: 900;
}

/* submit */
.formSubmit {
    width: 100%;
    height: 64px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: linear-gradient(90deg, #ff7a00 0%, #ff2d2d 100%);

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.formSubmit:hover {
    background: linear-gradient(90deg, #fec69e 0%, #ffb4b8 100%);
}

.formSubmit__arrow {
    margin-left: 10px;
}

/* =========================
  Contact タイトル（グラデーション）
========================= */
.sectionHead--contact .sectionHead__title {
    /* 既存セクションと同じサイズ・太さをそのまま使う前提 */
    background: linear-gradient(90deg, #51a2ff 0%, #c27aff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* footer */
.site-footer {
    background: #1f3f9a; /* 画像の青に近い */
    padding: 48px 0 56px;
    color: #fff;
}

.site-footer__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.site-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 80px;
}

.site-footer__link {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

.site-footer__en {
    font-weight: 600;
    font-size: 16px;
}

.site-footer__jp {
    font-size: 12px;
    opacity: 0.85;
}

.site-footer__line {
    margin: 28px auto 22px;
    max-width: 960px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer__copy {
    margin: 0 0 18px;
    font-size: 14px;
    letter-spacing: 0.08em;
}

.site-footer__sns {
    display: flex;
    justify-content: center;
}

.site-footer__x {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.site-footer__x img {
    width: 100%;
    height: 100%;
}

.site-footer__x:hover {
    opacity: 0.9;
}

/* SP */
@media (max-width: 768px) {
    .site-footer__menu {
        gap: 28px;
        flex-wrap: wrap;
    }
}

/* =========================
  FV
========================= */
.fv {
    padding: 108px 0 80px;
    background: radial-gradient(
        circle at 20% 20%,
        #ffffff 0%,
        #f6fbff 45%,
        #f3f7ff 100%
    );
    /* 画面の対角線っぽいグラデ */
    background: linear-gradient(-62deg, #eff6ff 0%, #ffffff 50%, #faf5ff 100%);
    position: relative;
}

.fv__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.fv__left {
    flex: 1 1 52%;
    max-width: 484px;
    width: 100%;
}

.fv__right {
    margin-left: auto;
    margin-top: 59px;
    flex: 0 0 448px; /* ★右カラム自体を写真幅に固定 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.fv__title {
    font-family: "Shippori Mincho", serif;
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 18px;
    line-height: 1.2;
    margin-top: 0;
}

.fv__sub,
.fv__left p {
    font-size: 17px;
    color: #4a5565;
    letter-spacing: -0.31px;
    line-height: 1.5;
}

.fv__chips {
    list-style: none;
    padding: 0;
    margin: 30px 0 56px;

    display: grid;
    grid-template-columns: repeat(3, 153.33px);
    gap: 12px 12px;
}

.fv__chip {
    width: 153.33px;
    height: 88px;

    border-radius: 16px;
    display: flex;
    flex-direction: column; /* ← アイコンの下にテキスト */
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-align: center;
}

.fv__chipIcon img {
    width: 32px; /* アイコンの見た目で調整 */
    height: 32px;
    display: block;
}

.fv__chipText {
    font-size: 12px; /* デザインに合わせて調整 */
    line-height: 1;
    letter-spacing: 1px;
}

.fv__chipIcon img {
    width: 34px;
    height: 34px;
    display: block;
}

.fv__chipText {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* チップの色（Figmaに合わせて微調整してOK） */
.fv__chip--blue {
    background: #eff6ff;
}
.fv__chip--purple {
    background: #faf5ff;
}
.fv__chip--green {
    background: #f0fdf4;
}
.fv__chip--pink {
    background: #fdf2f8;
}
.fv__chip--red {
    background: #fef2f2;
}

/* Webデザイン（ブルー） */
.fv__chip--blue .fv__chipText {
    color: #2563eb;
}

/* コーディング（パープル） */
.fv__chip--purple .fv__chipText {
    color: #7c3aed;
}

/* WordPress（グリーン） */
.fv__chip--green .fv__chipText {
    color: #16a34a;
}

/* 医療ライティング（ピンク） */
.fv__chip--pink .fv__chipText {
    color: #db2777;
}

/* 薬剤師（レッド系） */
.fv__chip--red .fv__chipText {
    color: #dc2626;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.btn--primary {
    background: #1f6fff;
    color: #fff;
    box-shadow: 0 14px 30px rgba(31, 111, 255, 0.25);
}

.fv__photo {
    width: 448px;
    height: 344px;

    background: #fff;
    padding: 16px; /* 白枠の太さ（要調整） */
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    margin-left: auto;
}

.fv__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.fv__scroll {
    position: absolute; /* ★FV基準で配置 */
    left: 50%;
    bottom: 32px; /* 好みで調整（例：32px） */
    transform: translateX(-50%);
    margin: 0; /* 余計なmarginを殺す */
    text-align: center;
    opacity: 0.7;
    z-index: 2;
}

/* ============ SP ============ */
@media (max-width: 900px) {
    .fv__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .fv__title {
        font-size: 40px;
    }
    .fv__chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
  Works (Front)
========================= */
.front-works {
    padding-top: 80px;
    background-color: #f9f9f9;
}

/* ---- Section Title ---- */
.sectionHead {
    text-align: center;
    margin: 0 0 56px;
}

.sectionHead__title {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 9.95px;

    /* 0% #155DFC → 100% #193CB8 */
    background: linear-gradient(90deg, #155dfc 0%, #193cb8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    position: relative;
    display: inline-block;
    padding: 0 24px; /* 左右の線の余白 */
}

.sectionHead__title::before,
.sectionHead__title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 56px; /* 線の長さ（必要なら調整） */
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #155dfc 0%, #193cb8 100%);
    opacity: 0.35;
}

.sectionHead__title::before {
    left: -56px;
}
.sectionHead__title::after {
    right: -56px;
}

.sectionHead__sub {
    margin: 12px 0 0;
    font-size: 14px;
    letter-spacing: 2px;
    color: #4a5565;
}

/* ---- Card ---- */

.workCard__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.workCard__thumb {
    height: 260px; /* サムネエリア高さ（デザインに合わせて調整OK） */
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: grid;
    place-items: center;

    /* 薄い背景 */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.06) 100%
    );
}

.workCard__img {
    width: 92%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* タグ */
.workCard__tags {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 14px 24px 0;
    margin: 0;
}

.tag {
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #155dfc;
    letter-spacing: 0.04em;
}

/* タイトル/本文/カテゴリ */
.workCard__title {
    margin: 12px 24px 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
}

.workCard__text {
    margin: 12px 24px 0;
    font-size: 14px;
    line-height: 1.8;
    color: #4a5565;

    display: -webkit-box;
    -webkit-line-clamp: 3; /* 文章が長い時の省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workCard__category {
    margin: 18px 24px 0;
    font-size: 12px;
    color: #9ca3af;
    letter-spacing: 0.08em;
}

/* もっと見るボタン */
.worksMore {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}

.btn--more {
    background: linear-gradient(90deg, #155dfc 0%, #193cb8 100%);
    color: #fff;
    padding: 16px 34px;
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(21, 93, 252, 0.25);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.btn--more .btn__arrow {
    display: inline-block;
    margin-left: 10px;
    transform: translateY(-1px);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .worksGrid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .workCard {
        width: min(500px, 100%);
    }
}

/* =========================
  Service
========================= */
.front-service {
    padding: 80px 0; /* 上下80px */
}

/* 2カラム・間隔 */
.serviceGrid {
    display: grid;
    grid-template-columns: repeat(2, 500px);
    gap: 32px;
    justify-content: space-between; /* 両端をインナー線に合わせる */
    margin-top: 48px;
}

/* カード */
.serviceCard {
    width: 500px;
    height: 422px;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: 24px;
    padding: 40px 40px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 上のアイコンは中央 */
.serviceCard__icon {
    width: 72px; /* 見た目調整用（必要なら変更） */
    height: 72px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
}

.serviceCard__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* タイトルは中央 */
.serviceCard__title {
    margin: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #101828;
    line-height: 1.2;
}

/* 青字の英字（Web Design 等） */
.serviceCard__lead {
    margin: 6px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #155dfc;
    line-height: 1.2;
}

/* 説明文：左揃え */
.serviceCard__text {
    margin: 28px 0 0;
    font-size: 16px;
    color: #4a5565;
    line-height: 1.9;
}

/* チェックリスト */
.serviceCard__list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #4a5565;
    line-height: 2.1;
}

/* チェックマーク（擬似要素で対応） */
.serviceCard__list li {
    position: relative;
    padding-left: 22px;
}

.serviceCard__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #155dfc;
    font-weight: 700;
}

.serviceCard,
.workCard {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

/* =========================
  Service Note（下の補足カード）
========================= */
.serviceNote {
    width: 818.6px;
    height: 142px;
    margin: 48px auto 0; /* 中央寄せ */
    background: linear-gradient(90deg, #eff6ff 0%, #eef2ff 100%);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 0 48px;
    box-sizing: border-box;
}

.serviceNote__icon {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    margin-right: 30px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.serviceNote__icon img {
    width: 80px; /* 見た目調整用 */
    height: 80px;
    display: block;
}

.serviceNote__text {
    margin: 0;
    font-size: 16px;
    color: #4a5565;
    line-height: 1.9;
}

/* SP（必要なら） */
@media (max-width: 1100px) {
    .serviceGrid {
        grid-template-columns: 1fr;
        justify-content: center;
    }
    .serviceCard {
        width: 100%;
        max-width: 500px;
    }
    .serviceNote {
        width: 100%;
        max-width: 818.6px;
        height: auto;
        padding: 20px 24px;
    }
}

/* =========================
  About（Front）
========================= */
.front-about {
    background: #f9f9f9;
    padding-top: 80px;
}

.front-about .container {
    /* 既に max-width:1032px / padding:0 で運用している前提 */
}

/* 写真＋本文の2カラム */
.aboutBox {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    margin-top: 40px; /* タイトル下の余白（必要なら微調整） */
}

/* 左：写真ラッパー（発光用） */
.aboutBox__photoWrap {
    position: relative;
    width: 344px;
    height: 344px;
    flex: 0 0 344px;
}

/* 発光（レイヤーブラー：横方向グラデ + blur80） */
.aboutBox__photoWrap::before {
    content: "";
    position: absolute;
    inset: -60px; /* 発光の広がり（必要なら調整） */
    background: linear-gradient(90deg, #51a2ff 0%, #c27aff 100%);
    filter: blur(80px);
    opacity: 0.2; /* 強すぎるなら 0.25〜0.45 で調整 */
    z-index: 0;
    border-radius: 999px;
}

/* 白枠込みの丸 */
.aboutBox__photo {
    position: relative;
    z-index: 1;
    width: 344px;
    height: 344px;
    border-radius: 999px;
    background: #fff;
    padding: 12px; /* 白枠の太さ（必要なら微調整） */
    box-sizing: border-box;

    /* ドロップシャドウ：X0 / Y25 / blur50 / spread-12 / #000 25% */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.aboutBox__photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 999px;
}

/* 右：本文（右寄せ + 幅制限） */
.aboutBox__body {
    max-width: 492px;
    width: 100%;
    margin-left: auto; /* インナー右へ寄せる */
}

/* 名前 */
.aboutBox__name {
    font-size: 30px;
    font-weight: 600;
    color: #0a0a0a;
    letter-spacing: 10px;
    margin: 0;
}

/* Role */
.aboutBox__role {
    font-size: 16px;
    font-weight: 500;
    color: #155dfc;
    margin: 8px 0 0;
}

/* 本文 */
.aboutBox__text {
    margin: 25px 0 0;
    font-size: 15px;
    font-weight: 400;
    color: #364153;
    line-height: 1.9;
}

/* brで段落を切っている場合、行間はそのままでOK */
.aboutBox__text br {
    content: "";
}

/* 本文 → chips の余白 */
.aboutBox__chips {
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 450px; /* 2枚で折り返すための目安 */
}

/* About チップ 共通 */
.about__chip {
    width: 200px;
    height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start; /* ← 左寄せ */

    gap: 10px;
    padding-left: 16px; /* ← 左余白（Figma見た目に合わせて） */

    border-radius: 999px;
    border: 1px solid transparent;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    box-sizing: border-box;
}

.about__chipIcon img {
    width: 35px;
    height: 35px;
    display: block;
}

.about__chipText {
    white-space: nowrap;
}

.about__chip--blue {
    background: #eff6ff;
    border-color: #bedbff;
    color: #1447e6;
}

.about__chip--green {
    background: #f0fdf4;
    border-color: #b9f8cf;
    color: #108236; /* ※指定どおり */
}

.about__chip--purple {
    background: #faf5ff;
    border-color: #e9d4ff;
    color: #8200db;
}

/* =========================
  About / Skills
========================= */

/* 外枠（白い丸角長方形） */
.skills {
    margin-top: 70px;
    width: 1032px;
    height: 341px;
    background: #ffffff;
    border-radius: 24px; /* 角丸は見た目に合わせて調整OK */
    margin-inline: auto;
    /* ドロップシャドウ（1枚目） */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);

    text-align: center;
}

/* タイトル */
.skills__title {
    padding-top: 48px;
    margin-bottom: 70px;
    text-align: center;
    color: #0a0a0a;
    font-size: 24px;
    font-weight: 600;
}

/* 丸の並び */
.skills__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 12px; /* 円と円の間隔 */
}

/* 共通の丸 */
.skillCircle {
    width: 122px;
    height: 122px;
    border-radius: 999px;
    border: 3px solid currentColor; /* 線色 = 文字色（各色を currentColor に） */
    display: grid;
    place-items: center;
    text-align: center;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    background: #fff;
    /* 円のドロップシャドウ（2枚目） */
    box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.25);
}

/* 色指定（線色と文字色を同じにする） */
.skillCircle--blue {
    color: #155dfc;
} /* 薬剤師（※指定どおり文字色を採用） */
.skillCircle--purple {
    color: #9810fa;
} /* HTML/CSS */
.skillCircle--green {
    color: #00a63e;
} /* JavaScript */
.skillCircle--pink {
    color: #e60076;
} /* WordPress */
.skillCircle--blue2 {
    color: #4f39f6;
} /* Illustrator */
.skillCircle--orange {
    color: #f54900;
} /* Photoshop */
.skillCircle--red {
    color: #e7000b;
} /* 医療ライティング */

.aboutMore {
    margin: 0;
    text-align: center;
}

.btn--more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(90deg, #155dfc 0%, #193cb8 100%);
    color: #fff;

    padding: 16px 34px;
    border-radius: 999px;

    box-shadow: 0 14px 30px rgba(21, 93, 252, 0.25);

    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;

    margin: 80px 0; /* ← 上下80px */
}

/* =========================
  About / Info cards（学習経験・対応可能な業務）
========================= */
.aboutInfo {
    margin-top: 64px; /* スキル枠の下の余白（必要なら調整） */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* 2つのカード共通 */
.aboutInfoCard {
    border-radius: 16px;
    padding: 28px 28px 26px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 左（青） */
.aboutInfoCard--learn {
    background: #eff6ff;
}

/* 右（うっすい紫） */
.aboutInfoCard--work {
    background: #faf5ff;
}

/* 見出し行（アイコン＋タイトル） */
.aboutInfoCard__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.aboutInfoCard__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0a0a0a;
}

/* 左上の丸アイコン */
.aboutInfoCard__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
}

.aboutInfoCard__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* アイコンの色（背景） */
.aboutInfoCard__icon--blue {
    background: #155dfc;
}
.aboutInfoCard__icon--pink {
    background: #c026d3; /* 右カードの紫っぽい見た目 */
}

/* リスト */
.aboutInfoCard__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    color: #364153;
    font-size: 14px;
    font-weight: 500;
}

/* 行頭の丸チェック（疑似要素） */
.aboutInfoCard__list li {
    position: relative;
    padding-left: 28px;
}

.aboutInfoCard__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid currentColor;
}

/* 左カードのチェック色 */
.aboutInfoCard__list--blue {
    color: #155dfc;
}

/* 右カードのチェック色 */
.aboutInfoCard__list--purple {
    color: #9810fa;
}

/* テキスト本体はグレーに戻す（丸だけ色を残す） */
.aboutInfoCard__list--blue li,
.aboutInfoCard__list--purple li {
    color: #364153;
}
.aboutInfoCard__list--blue li::before {
    border-color: #155dfc;
}
.aboutInfoCard__list--purple li::before {
    border-color: #9810fa;
}

/* SP */
@media (max-width: 900px) {
    .aboutInfo {
        grid-template-columns: 1fr;
    }
}

/*  Works */
.worksArchive {
    margin-top: 112px;
}
/* Works一覧ページの余白（固定ヘッダーぶん） */
.worksArchive {
    margin-top: 112px;
}

/* グリッド（480 + 480 + gap 32 = 992 なので、1060内に余裕あり） */
.worksGrid {
    display: grid;
    grid-template-columns: repeat(2, 480px);
    gap: 32px;
    justify-content: space-between;
}

/* カード */
.workCard {
    width: 480px;
    height: 440px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.workCard__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* 画像エリア */
.workCard__thumb {
    height: 320px;
    overflow: hidden;
    background: #f3f4f6;
}

.workCard__img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* PCの見栄え優先 */
    display: block;
}

/* タグ */
.workCard__tags {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 12px 16px 0;
    margin: 0;
}

.tag {
    background: #eff6ff;
    color: #155dfc;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* タイトル */
.workCard__title {
    margin: 12px 16px 0;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    line-height: 1.4;
}

@media (max-width: 980px) {
    .worksGrid {
        grid-template-columns: 1fr;
        justify-content: center;
    }
    .workCard {
        width: 100%;
        max-width: 480px;
    }
}

/* =========================
  Works Pager
========================= */
.pager {
    margin: 80px 0;
    display: flex;
    justify-content: center;
}

.pager .page-numbers {
    /* 数字の基本 */
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    text-decoration: none;

    /* 40x40の当たり判定（hover時の四角のために常に確保） */
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 数字間 50px */
    margin: 0 25px; /* 左右25 + 25 = 50 */
    border-radius: 0; /* 通常時は四角の形を見せない */
    background: transparent;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-radius 0.2s ease;
}

/* 「…」も同じ見た目（クリック不可なので色だけ） */
.pager .page-numbers.dots {
    pointer-events: none;
}

/* 「＜」「＞」も数字から50px空ける → 数字と同じmarginでOK */
.pager .page-numbers.prev,
.pager .page-numbers.next {
    margin: 0 25px;
}

/* hover（指定：40x40の角丸正方形 + 縦グラデ + 文字色） */
.pager a.page-numbers:hover {
    border-radius: 12px; /* 角丸正方形：好みで 10〜14 で調整 */
    background: linear-gradient(180deg, #2f8fed 0%, #155dfc 100%);
    color: #f9f9f9;
}

/* 現在ページ（画像の青い四角） */
.pager .page-numbers.current {
    border-radius: 12px;
    background: linear-gradient(180deg, #2f8fed 0%, #155dfc 100%);
    color: #f9f9f9;
    box-shadow: 0 10px 20px rgba(21, 93, 252, 0.25);
}

.pager ul,
.pager li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.pager li::marker {
    content: "" !important;
}

/* =========================
  Work Single / Head
========================= */
.workSingle {
    margin-top: 112px; /* 固定ヘッダー分 */
}

.workSingleHead {
    padding: 48px 0 100px;
    background: #f9f9f9;
}

.workSingleHead__left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* まずは2カラムの土台（右は次回作る） */
.workSingleHead__grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 40px;
    align-items: start;
}

/* 左上 長方形カード */
.workIntroCard {
    width: 430px;
    height: 397px;
    background: #fff;
    border-radius: 20px; /* 角丸は見た目で調整OK */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    padding: 28px 28px 24px;
    box-sizing: border-box;
}

/* カテゴリ */
.workIntroCard__cats {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* 折り返し */
    gap: 12px;
    padding: 0;
    margin: 0 0 18px;

    max-height: 52px; /* 1〜2行分くらいに固定（必要なら調整） */
}

.workIntroCard__cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap; /* 1タグは改行させない */
    height: 34px; /* チップの高さ固定 */
    padding: 0 22px; /* 上下paddingは高さで担保する */
    border-radius: 999px;

    background: #eff6ff;
    color: #155dfc;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* タイトル */
.workIntroCard__title {
    margin-top: 54px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: #333333;
    line-height: 1.35;
}

/* テキスト */
.workIntroCard__text {
    margin-top: 54px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #666666;
    line-height: 1.9;

    display: -webkit-box;
    -webkit-line-clamp: 5; /* 高さに収めるため（必要なら調整） */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================
  Work Single / Keypoint
========================= */
/* KEY POINTカード */
.workKeypointCard {
    width: 420px;
    height: 268px;
    background: #eff6ff;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    padding: 33px;
    box-sizing: border-box;
}

.workKeypointCard__label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #155dfc;
    line-height: 1;
}

/* 上段：アイコン + 見出し群 */
.workKeypointCard__head {
    display: flex;
    align-items: flex-start;
}

.workKeypointCard__icon {
    width: 56px;
    height: 56px;
    display: block;
    margin-right: 16px;
}

.workKeypointCard__icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.workKeypointCard__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #333333;
    text-align: left;
}

.workKeypointCard__text {
    margin: 24px 0 0;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: #666666;
    line-height: 1.9;
    text-align: left;

    display: -webkit-box;
    -webkit-line-clamp: 4; /* 高さに収める（必要なら調整） */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workIntroCard__cat--more {
    opacity: 0.7;
}

/* 右カード本体 */
.workThumbCard {
    position: relative;
    width: 600px;
    height: 600px;
    background: #fff;
    border-radius: 24px; /* 角丸は好みで。カンプが別なら合わせてOK */
    overflow: hidden;

    /* ドロップシャドウ（Figmaの値に近い：X0 / Y25 / blur50 / spread-12 / #000 25%） */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ブラー背景（グラデ＋ぼかし） */
.workThumbCard::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(90deg, #155dfc 0%, #2f8fed 100%); */
    filter: blur(80px);
    opacity: 1;
    transform: translateZ(0);
    pointer-events: none;
}

/* 中身はブラーより上に */
.workThumbCard > * {
    position: relative;
    z-index: 1;
}

/* 画像エリア 600×390 */
.workThumbCard__thumb {
    width: 600px;
    height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workThumbCard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* サムネを綺麗に */
    display: block;
}

/* 下部のメタカード */
.workThumbCard__meta {
    width: 500px;
    height: 96px;
    background: rgba(21, 93, 252, 0.1);
    border-radius: 18px;

    /* アイコン＋テキストを上下中央揃え */
    display: flex;
    align-items: center;
    gap: 24px;

    /* 上下左右24pxのパディング */
    padding: 24px;

    /* 位置：画像の下に置く（カンプの見た目に合わせて調整） */
    margin: 24px auto 0;

    box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* アイコン固定 48×48 */
.workThumbCard__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
}

.workThumbCard__icon img {
    width: 48px;
    height: 48px;
    display: block;
}

/* テキストエリア 416×48 / 左右両端寄せ */
.workThumbCard__metaText {
    width: 416px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* 左右のブロック */
.workThumbCard__metaItem {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.workThumbCard__metaItem--right {
    text-align: right;
}

.workThumbCard__metaLabel {
    font-size: 12px;
    opacity: 0.75;
    margin: 0;
}

.workThumbCard__metaValue {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* レスポンシブ：小さくなったら縮む（崩れ防止） */
@media (max-width: 680px) {
    .workThumbCard {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1; /* 600×600の正方形維持 */
    }

    .workThumbCard__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 600 / 390;
    }

    .workThumbCard__meta {
        width: calc(100% - 32px);
    }

    .workThumbCard__metaText {
        width: 100%;
    }
}

.workMockup {
    width: 100%;
}

.workMockup__img {
    width: 100%;
    height: 639px;
    object-fit: cover; /* 全部見せたいなら contain */
    display: block;
}

/* =========================
   Work Overview
========================= */
.workOverview {
    margin: 128px 0 112px;
}

.workOverview .container {
    max-width: 1060px; /* 念のため（既にあるなら不要） */
}

/* 3枚カードの横並び */
.workOverviewTop {
    display: flex;
    gap: 58px; /* カード間 */
}

/* カード本体 */
.overviewCard {
    width: 314.33px;
    height: auto;
    min-height: 286px;
    padding: 33px;
    background: #fff;

    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.06);

    border-radius: 24px;

    box-sizing: border-box;
}

/* 上から アイコン→タイトル→本文 の流れ */
.overviewCard__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 18px; /* 間隔は見た目調整用（必要なら微調整） */
}

.overviewCard__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* カードタイトル */
.overviewCard__title {
    font-size: 20px;
    font-weight: 700;
    color: #2f8fed;
    margin: 0 0 14px;
}

/* カードテキスト（箇条書き / 約3週間 / デザインプロセス説明） */
.overviewCard__main,
.overviewCard__text,
.overviewCard li {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 1.8;
}

/* 「制作期間の一番下のテキストのみ」を14px/666 にしたいので、
   periodカードの本文は overviewCard__text に寄せる運用が一番ラクです */
.overviewCard__text {
    font-size: 14px;
    color: #666666;
    margin: 10px 0 0;
}

/* 箇条書き（使用ツール） */
.overviewCard ul {
    margin: 0;
    padding-left: 20px;
}

.overviewCard li {
    margin: 6px 0;
}

/* =====================================================
  Overview 下段（目的 / 課題 / ターゲット）
===================================================== */

/* 下段のカード全体 */
.workOverviewBottom {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px; /* 丸角長方形の間隔 */
}

/* 横長カード */
.overviewWide {
    width: 100%;
    max-width: 1060px;
    border-radius: 24px; /* 既存に合わせて適宜調整OK */
    padding: 41px; /* アイコン含めた上下パディング */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(47, 143, 237, 0.05) 100%
    );
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
}

/* アイコン */
.overviewWide__icon {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    margin-top: 0; /* 上41pxはoverviewWideのpaddingで担保 */
    margin-left: 0; /* 左41pxはoverviewWideのpaddingで担保 */
}

.overviewWide__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 本文エリア（アイコンとの間隔32px） */
.overviewWide__body {
    margin-left: 32px;
    flex: 1;
}

/* 項目タイトル（目的/課題/ターゲット共通） */
.overviewWide__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #2f8fed;
    margin: 0;
}

/* 目的：タイトル下16px + テキスト幅810px */
.overviewWide__text {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #333333;
    margin: 0;
    line-height: 1.8;
}

.overviewWide:first-child .overviewWide__text {
    margin-top: 16px;
    max-width: 810px;
}

/* 課題：番号付きリスト */
.overviewIssues {
    list-style: none;
    padding: 0;
    margin: 16px 0 0; /* タイトル下の余白はデザインに合わせて */
}

/* li の左に「丸数字」をCSSで作る（1,2,3…） */
.overviewIssues__item {
    position: relative;
    padding-left: 36px; /* 丸(24px) + 余白12px */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #333333;
    line-height: 1.8;
}

/* 各item間 + noteとの余白 12px */
.overviewIssues__item + .overviewIssues__item {
    margin-top: 12px;
}

.overviewIssues__item::before {
    content: counter(issue);
}

.overviewIssues {
    counter-reset: issue;
}

.overviewIssues__item {
    counter-increment: issue;
}

.overviewIssues__item::before {
    content: counter(issue);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #2f8fed;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* 課題の補足文（note） */
.overviewWide__note {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #666666;
    line-height: 1.8;
}

/* ターゲット：title/sub/text */
.overviewTarget__title {
    margin: 16px 0 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.45px;
    color: #333333;
    line-height: 1.6;
}

.overviewTarget__sub {
    margin: 0 0 0; /* titleとの間はtitle側で8px */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: #666666;
    line-height: 1.6;
}

/* ターゲット本文（subの後に余白入れたいならここで調整） */
.overviewWide__body .overviewWide__text {
    margin-top: 16px;
    max-width: 810px; /* 必要なら共通で同じ幅に */
}

/* ターゲットのsub直後は余白を作る（デザインに合わせて） */
.overviewTarget__sub + .overviewWide__text {
    margin-top: 16px;
}

/* =========================
  Work Other（他のつくったもの）
========================= */
.workOther {
    padding: 120px 0 140px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(47, 143, 237, 0.05) 100%
    );
    overflow: hidden; /* 画面外にカードがはみ出してOK */
}

/* スライダー（画面幅いっぱいで見せる） */
.workOther__slider {
    margin-top: 64px;
    width: 100%;
}

/* swiperの見える範囲もはみ出しOK */
.workOther__slider.swiper {
    overflow: visible;
}

/* スライド間 */
.workOther .swiper-wrapper {
    align-items: stretch;
}

/* 3枚表示にしても左右が途切れてOK → JS側で slidesPerView を 2.2〜3.2 にしてる想定 */
.workOtherCard.swiper-slide {
    height: auto;
}

/* =========================
  カード
========================= */
.workOtherCard {
    display: block;
    text-decoration: none;
    color: inherit;

    background: #fff;
    border-radius: 18px;
    overflow: hidden;

    /* ドロップシャドウ（Figma：x0 y8 blur30 spread0 color #000 8%） */
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.workOtherCard:hover {
    transform: translateY(-2px);
    box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.1);
}

.workOtherCard__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f5f5f5;
}

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

/* NEWバッジ */
.workOtherCard__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 12px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #fff;
    background: #2f8fed;
}

/* タグ */
.workOtherCard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 16px 18px 0;
    margin: 0;
}

.workOtherCard__tag {
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2f8fed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* タイトル */
.workOtherCard__title {
    padding: 14px 18px 22px;
    margin: 0;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #111;
}

/* =========================
  ナビ（prev / pager / next）
========================= */
.workOther__nav {
    margin-top: 56px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;

    /* インナー幅（container）の左右端に配置する */
}

.workOther__prev,
.workOther__next {
    justify-self: start;

    height: 58px;
    border: none;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;

    /* 余白：上下16px、左右32px */
    padding: 16px 32px;

    /* 文字 */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2.7px;
    color: #111;

    /* ボタンも軽く影（任意：カードより弱め） */
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);

    display: inline-flex;
    align-items: center;
    gap: 13px; /* ＜ と文字の余白 13px */
}

.workOther__next {
    justify-self: end;
}

.workOther__prev:hover,
.workOther__next:hover {
    transform: translateY(-1px);
}

.workOther__pagination {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Swiperページャー（ドット） */
.workOther__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    opacity: 1;
    background: rgba(33, 85, 223, 0.25);
}

.workOther__pagination .swiper-pagination-bullet-active {
    background: #2f8fed;
}

/* =========================
  「すべて見る」ボタン
========================= */
.workOther__all {
    margin-top: 80px; /* ナビボタンと「すべて見る」の余白 80px */
    display: flex;
    justify-content: center;
}

.workOther__allBtn {
    width: 332.74px;
    height: 76px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(90deg, #2f8fed 0%, #2155df 100%);
    color: #fff;
    text-decoration: none;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3.56px;

    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08);
}

.workOther__allBtn:hover {
    transform: translateY(-1px);
}

/* =========================
  レスポンシブ（必要最低限）
========================= */
@media (max-width: 768px) {
    .workOther {
        padding: 90px 0 110px;
    }

    .workOther__nav {
        grid-template-columns: 1fr;
        gap: 18px;
        justify-items: center;
    }

    .workOther__prev,
    .workOther__next {
        justify-self: center;
    }

    .workOther__allBtn {
        width: min(332.74px, 90%);
    }
}

/* =========================
  Aboutページ
========================= */

.page-about {
    background: #f9f9f9;
    padding: 68px 0 0;
}

.aboutInfo {
    padding-bottom: 91px;
}

/* =========================
  Strength
========================= */
.aboutStrength {
    padding: 81px 0 128px;
    background: #fff;
    margin: 0;
}

.aboutStrength .sectionHead {
    margin-bottom: 72px;
}

/* カード3枚の並び */
.strengthCards {
    display: flex;
    justify-content: center;
    gap: 32px; /* ←カード間 32px */
    flex-wrap: wrap; /* SPでも崩れにくい */
}

/* 1枚のカード */
.strengthCard {
    width: 332px; /* ←指定 */
    height: 389px; /* ←指定 */
    background: #fff;
    border-radius: 24px;
    padding: 40px 32px 32px;
    position: relative;
    box-sizing: border-box;

    /* ふわっとした影（必要なら値は調整してOK） */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* 左上のアイコン（svg/imgどっちでもOK） */
.strengthCard__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
}

.strengthCard__icon img,
.strengthCard__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 右上の番号（01/02/03） */
.strengthCard__no,
.strengthCard__no01 {
    position: absolute;
    top: 28px;
    right: 28px;
    margin: 0;

    font-size: 80px; /* ←指定 */
    font-weight: 300; /* ←ライト */
    line-height: 1;
    letter-spacing: 0.02em;
    user-select: none;
    color: #e8e3ff;
}

.strengthCard__no01 {
    color: #dce9ff;
}

/* タイトル */
.strengthCard__title {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #333333;
}

/* 本文 */
.strengthCard__text {
    margin-top: 45px;
    font-size: 14px;
    line-height: 2;
    color: #666;
}

/* レスポンシブ微調整（任意） */
@media (max-width: 768px) {
    .strength {
        padding-block: 80px;
    }
    .strength .sectionHead {
        margin-bottom: 48px;
    }
    .strengthCard {
        width: min(332px, 100%);
    }
}

/* =========================
  Strength 背景のぼかし（レイヤーブラー）
========================= */
.aboutStrength {
    position: relative; /* 擬似要素の基準 */
    overflow: hidden; /* はみ出しを隠す（必要なら visible に） */
    background: #fff; /* 既に入ってるけど念のため */
}

/* 左下：315×315 / CEF7FC / blur 48 */
.aboutStrength::before {
    content: "";
    position: absolute;
    left: 56px; /* 大体でOK：外に少し逃がす */
    bottom: 7px;
    width: 314px;
    height: 314px;
    background: #cef7fc;
    filter: blur(48px);
    -webkit-filter: blur(48px);
    border-radius: 999px;
    opacity: 0.6; /* 強すぎたら 0.6〜0.8 に */
    pointer-events: none;
    z-index: 0;
}

/* 右上：287×287 / CEDDFF / blur 48 */
.aboutStrength::after {
    content: "";
    position: absolute;
    right: 409px;
    top: 7px;
    width: 200px;
    height: 200px;
    background: #ceddff;
    filter: blur(48px);
    -webkit-filter: blur(48px);
    border-radius: 999px;
    opacity: 0.6; /* 強すぎたら 0.6〜0.8 に */
    pointer-events: none;
    z-index: 0;
}

/* 中身をぼかしより前面に */
.aboutStrength > .container {
    position: relative;
    z-index: 1;
}
.pageAbout {
    background: #f9f9f9;
    margin-top: 112px;
    padding-top: 0;
}

/* =========================
  About / Skills（4カード）
========================= */
.aboutSkills {
    padding: 156px 0 128px;
}

.skillsGrid {
    display: grid;
    grid-template-columns: repeat(2, 500px);
    gap: 32px;
    justify-content: space-between;
    margin-top: 80px;
}

/* カード本体 */
.skillsCard {
    width: 503px;
    min-height: 400px;
    border-radius: 24px;
    padding: 41px;
    box-sizing: border-box;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* 背景グラデ */
.skillsCard--blue {
    background: linear-gradient(to bottom, #f0f9ff 0%, #e0f2fe 100%);
}
.skillsCard--purple {
    background: linear-gradient(to bottom, #faf5ff 0%, #f3e8ff 100%);
}
.skillsCard--yellow {
    background: linear-gradient(to bottom, #fef3c7 0%, #fde68a 100%);
}
.skillsCard--green {
    background: linear-gradient(to bottom, #dcfce7 0%, #bbf7d0 100%);
}

/* 上段：タイトル類 + 右上アイコン */
.skillsCard__head {
    position: relative;
    padding-right: 84px;
}

.skillsCard__title {
    margin: 0;
    font-size: 32px;
    font-weight: bold;
    color: #333333;
}

.skillsCard__lead {
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: medium;
    color: #155dfc;
}

.skillsCard__icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
}

.skillsCard__icon img {
    width: 40%;
    height: 40%;
    display: block;
}

.skillsCard:nth-child(3) .skillsCard__icon img {
    width: 70%;
    height: 70%;
}

/* 本文 */
.skillsCard__text {
    margin: 60px 0 0;
    font-size: 14px;
    font-weight: regular;
    line-height: 1.9;
    color: #555555;
}

/* タグ */
.skillsCard__tags {
    margin-top: auto;

    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.skillsTag {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(21, 93, 252, 0.18);
    color: #155dfc;
    font-size: 13px;
    font-weight: 500;
}

/* =========================
  Thanks Page
========================= */
.pageThanks {
    background: radial-gradient(
        circle at top,
        #1a2233 0%,
        #0b1220 60%,
        #050912 100%
    );

    padding: 120px 0;
    color: #fff;
}

/* セクション */
.thanks {
    text-align: center;
}

/* 見出し（Contactと統一） */
.pageThanks .sectionHead__title {
    font-size: 48px;
    letter-spacing: 0.15em;
    color: #8fb1ff;
}

.pageThanks .sectionHead__sub {
    margin-top: 12px;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #b7c6ff;
}

/* メインボックス */
.thanksBox {
    margin: 72px auto 0;
    max-width: 560px;
    padding: 48px 40px;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* タイトル */
.thanksBox__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* テキスト */
.thanksBox__text {
    margin-top: 20px;
    font-size: 15px;
    line-height: 2;
    color: #d6dcff;
}

/* =========================
   Thanks / 404 共通ボタン
========================= */

.thanksBox__actions,
.notFoundBox__actions {
    margin-top: 40px;
}

.thanksBox .btn,
.notFoundBox .btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;

    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;

    background: linear-gradient(135deg, #4f7cff, #6aa6ff);
    color: #fff;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.thanksBox .btn:hover,
.notFoundBox .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(79, 124, 255, 0.4);
}

/* ふわっと出現（初期状態） */
.js-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
    will-change: opacity, transform;
}

/* 表示状態 */
.js-reveal.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* ユーザーが「アニメーション減らす」設定の場合は無効化 */
@media (prefers-reduced-motion: reduce) {
    .js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================
  Buttons Hover (Global)
========================= */

/* ① 共通：.btn 全般（primary / more / contact / など） */
.btn {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
}

/* クリック時も気持ちよく（任意） */
.btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* ② グラデ系ボタン（btn--more / workOther__allBtn / formSubmit など） */
.btn--more:hover,
.workOther__allBtn:hover,
.formSubmit:hover {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

/* ③ Primary（青） */
.btn--primary:hover {
    box-shadow: 0 18px 42px rgba(31, 111, 255, 0.35);
}

/* ⑤ WorkOther の prev/next ボタン（すでにhoverあるけど強化） */
.workOther__prev,
.workOther__next {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.workOther__prev:hover,
.workOther__next:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.12);
}

/* ⑥ 「リンクだけどボタンっぽい」やつ（必要なら追加）
   例: .contactX / .site-footer__x など */
.contactX,
.site-footer__x {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.contactX:hover,
.site-footer__x:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* ⑦ hover無効にしたい環境（スマホの擬似hover対策） */
@media (hover: none) {
    .btn:hover,
    .workOther__prev:hover,
    .workOther__next:hover,
    .workOther__allBtn:hover,
    .formSubmit:hover,
    .contactX:hover,
    .site-footer__x:hover {
        transform: none;
        filter: none;
        box-shadow: inherit;
    }
}

/* =========================
  Hover color change (Blue → Light Blue)
========================= */

.btn--more:hover,
.workOther__allBtn:hover {
    background: linear-gradient(90deg, #4da3ff 0%, #2f8fed 100%);
}

.pager a.page-numbers:hover,
.pager .page-numbers.current {
    background: linear-gradient(180deg, #4da3ff 0%, #2f8fed 100%);
}

/* =========================
  SP Layout Foundation
========================= */
@media (max-width: 768px) {
    .container {
        width: min(calc(100% - 40px), 1060px);
    }

    /* 横幅計算時に子要素が親を押し広げないようにする */
    .fv__left,
    .fv__right,
    .aboutBox__body,
    .contactGrid > *,
    .serviceGrid > *,
    .worksGrid > * {
        min-width: 0;
    }

    /* 固定幅を解除 */
    .fv__right,
    .fv__photo,
    .workCard,
    .serviceCard,
    .serviceNote,
    .aboutBox__photoWrap,
    .aboutBox__photo,
    .skills {
        width: 100%;
        max-width: 100%;
    }

    /* PC用の固定高さも一旦解除 */
    .serviceCard,
    .serviceNote,
    .skills {
        height: auto;
    }

    /* 2カラムを1カラムへ */
    .worksGrid,
    .serviceGrid,
    .contactGrid,
    .aboutInfo {
        grid-template-columns: 1fr;
    }

    .aboutBox {
        flex-direction: column;
    }

    .skills__list {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .sectionHead {
        width: 100%;
        overflow: hidden;
    }

    .sectionHead__title {
        max-width: calc(100% - 48px);
        padding: 0 12px;

        font-size: 36px;
        letter-spacing: 6px;
        box-sizing: border-box;
    }

    .sectionHead__title::before,
    .sectionHead__title::after {
        width: 32px;
    }

    .sectionHead__title::before {
        left: -32px;
    }

    .sectionHead__title::after {
        right: -32px;
    }
}

@media (max-width: 768px) {
    .site-header,
    .site-header.is-scrolled {
        height: 80px;
        background: rgba(255, 255, 255, 0.95);

        /* fixedメニューの基準がヘッダーになるのを防ぐ */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .container.header-inner {
        width: 100%;
        max-width: none;
        height: 80px;
        margin: 0;
        padding: 0 20px;
    }

    .home .container.header-inner {
        justify-content: flex-end;
    }

    .header-logo {
        position: relative;
        z-index: 2000;
        font-size: 24px;
    }

    .menu-btn {
        position: relative;
        z-index: 2000;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        width: 32px;
        height: 24px;
        margin-left: auto;
        padding: 0;

        background: none;
        border: none;
        cursor: pointer;
    }

    .menu-btn span {
        width: 100%;
        height: 3px;
        background: #333;
        border-radius: 999px;
        transition: 0.3s;
    }

    .header-nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1500;

        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: 100px 20px 40px;

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

        background: #ffffff;
        overflow-y: auto;

        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);

        transition:
            transform 0.4s,
            opacity 0.3s,
            visibility 0.3s;
    }

    .header-nav.active {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .header-nav__list {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .header-nav__link .en {
        font-size: 32px;
    }

    .header-nav__link .jp {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .aboutBox {
        width: 100%;
        align-items: center;
        overflow: visible;
    }

    .aboutBox__photoWrap {
        width: min(100%, 320px);
        height: auto;
        aspect-ratio: 1 / 1;

        flex: none;
        margin-inline: auto;
    }

    .aboutBox__photo {
        width: 100%;
        height: 100%;
    }

    .aboutBox__photoWrap::before {
        inset: -16px;
        filter: blur(32px);
        -webkit-filter: blur(32px);
    }

    .aboutBox__body {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
}

/* =========================
  FV SP
========================= */
@media (max-width: 768px) {
    .fv {
        min-height: auto;
        padding: 112px 0 72px;
        overflow: hidden;

        background: linear-gradient(
            160deg,
            #ffffff 0%,
            #faf7ff 45%,
            #f2fbff 100%
        );
    }

    .fv__inner {
        display: grid;
        grid-template-columns: 1fr;
        align-items: initial;
        justify-content: initial;
    }

    /*
      .fv__leftの子要素を
      .fv__inner直下のグリッド要素として扱う
    */
    .fv__left {
        display: contents;
    }

    .fv__right {
        width: 100%;
        max-width: none;
        margin: 32px 0 0;
        display: block;
    }

    /* ロゴ */
    .fv__title {
        grid-row: 1;
        margin: 0;
        text-align: center;

        font-size: 42px;
        line-height: 1.2;
        letter-spacing: 12px;
    }

    /* 肩書き */
    .fv__sub {
        grid-row: 2;
        margin: 18px 0 0;
        text-align: center;

        font-size: 16px;
        line-height: 1.6;
        letter-spacing: 0;
    }

    /* 紹介文 */
    .fv__text {
        grid-row: 3;
        margin: 34px 0 0;

        font-size: 16px;
        line-height: 1.8;
        letter-spacing: 0;
    }

    /* PC用の強制改行をSPでは解除 */
    .fv__text br {
        display: none;
    }

    /* 写真 */
    .fv__right {
        grid-row: 4;
    }

    .fv__photo {
        width: 100%;
        height: auto;

        margin: 0;
        padding: 14px;

        border-radius: 28px;
        background: #ffffff;
        box-shadow: 0 18px 40px rgba(25, 45, 80, 0.18);

        box-sizing: border-box;
    }

    .fv__photo img {
        display: block;

        width: 100%;
        height: auto;
        aspect-ratio: 322 / 250;

        border-radius: 20px;

        object-fit: cover;
    }

    /* スキルチップ */
    .fv__chips {
        grid-row: 5;

        width: 100%;
        margin: 32px 0 0;
        padding: 0;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 12px;
    }

    .fv__chip {
        width: 100%;
        height: 110px;
        min-width: 0;

        padding: 10px 4px;
        border-radius: 18px;
        gap: 10px;
    }

    .fv__chipIcon img {
        width: 38px;
        height: 38px;
    }

    .fv__chipText {
        font-size: 13px;
        line-height: 1.35;
        letter-spacing: 0;
        white-space: nowrap;
    }

    /*
      カンプの並び：
      1段目 Webデザイン / コーディング / 薬剤師
      2段目 医療ライティング / WordPress
    */
    .fv__chip:nth-child(1) {
        order: 1;
    }

    .fv__chip:nth-child(2) {
        order: 2;
    }

    .fv__chip:nth-child(5) {
        order: 3;
    }

    .fv__chip:nth-child(4) {
        order: 4;
    }

    .fv__chip:nth-child(3) {
        order: 5;
    }

    /* お問い合わせ */
    .fv .btn--primary {
        grid-row: 6;

        width: min(300px, 100%);
        min-height: 72px;
        margin: 32px auto 0;
        padding: 16px 24px;

        font-size: 24px;
        letter-spacing: 0.08em;
        border-radius: 999px;
    }

    /* スクロール表示 */
    .fv__scroll {
        grid-row: 7;

        position: static;
        transform: none;

        margin: 72px auto 0;
        text-align: center;
    }

    .fv__scroll img {
        width: 54px;
        height: auto;
    }
}

/* =========================
  Works（Front）SP
========================= */
@media (max-width: 768px) {
    .front-works {
        padding: 72px 0 80px;
    }

    .front-works .sectionHead {
        margin-bottom: 48px;
    }

    .front-works .worksGrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        width: 100%;
    }

    /* カード */
    .front-works .workCard {
        width: 100%;
        max-width: none;
        height: auto;
        border-radius: 20px;
        overflow: hidden;
    }

    .front-works .workCard__link {
        display: block;
        height: auto;
    }

    /* サムネイルを少し低くする */
    .front-works .workCard__thumb {
        width: 100%;
        height: 230px;
        border-radius: 20px 20px 0 0;
    }

    .front-works .workCard__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* タグ */
    .front-works .workCard__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 14px 16px 0;
    }

    .front-works .tag {
        padding: 5px 9px;
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0;
    }

    /* タイトル */
    .front-works .workCard__title {
        margin: 12px 16px 0;
        font-size: 16px;
        line-height: 1.5;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* TOPでは説明文を省略してコンパクトに */
    .front-works .workCard__text {
        display: none;
    }

    /* Website */
    .front-works .workCard__category {
        margin: 12px 16px 18px;
        font-size: 12px;
        line-height: 1;
    }

    /* もっと見る */
    .front-works .worksMore {
        margin-top: 48px;
    }

    .front-works .btn--more {
        width: min(300px, 100%);
        min-height: 72px;
        margin: 0;
        padding: 16px 24px;

        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0.08em;

        background: linear-gradient(90deg, #2f8fed 0%, #155dfc 100%);

        border-radius: 999px;
        box-shadow: 0 14px 30px rgba(21, 93, 252, 0.25);
    }

    .front-works .btn--more .btn__arrow {
        margin-left: 12px;
    }
}

/* =========================
  Service SP
========================= */
@media (max-width: 768px) {
    .front-service {
        padding: 72px 0 80px;
    }

    .front-service .sectionHead {
        margin-bottom: 48px;
    }

    .front-service .serviceGrid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 0;
    }

    /* カード */

    .front-service .serviceCard {
        width: 100%;
        max-width: none;

        min-height: 390px; /* ←追加 */
        height: 390px; /* ←autoから変更 */

        padding: 28px 24px 26px;
        border-radius: 20px;
    }

    /* アイコン */
    .front-service .serviceCard__icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 14px;
    }

    /* タイトル */
    .front-service .serviceCard__title {
        font-size: 22px;
        line-height: 1.3;
    }

    .front-service .serviceCard__lead {
        margin-top: 5px;
        font-size: 13px;
    }

    /* 説明 */
    .front-service .serviceCard__text {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.8;
    }

    /* リスト */
    .front-service .serviceCard__list {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.8;
    }

    .front-service .serviceCard__list li {
        padding-left: 20px;
    }

    .front-service .serviceCard__list li + li {
        margin-top: 4px;
    }

    /* 補足カード */
    .front-service .serviceNote {
        width: 100%;
        max-width: none;
        height: auto;

        margin-top: 32px;
        padding: 24px;

        display: flex;
        flex-direction: column;
        gap: 18px;

        border-radius: 20px;
        text-align: left;
    }

    .front-service .serviceNote__icon {
        width: 64px;
        height: 64px;

        margin: 0 auto;
    }

    .front-service .serviceNote__icon img {
        width: 64px;
        height: 64px;
    }

    .front-service .serviceNote__text {
        font-size: 15px;
        line-height: 1.8;
    }

    /* PC用brをSPでは解除して自然に折り返す */
    .front-service .serviceNote__text br {
        display: none;
    }
}

/* ==================================================
   About section：SP最終版
================================================== */
@media (max-width: 768px) {
    /* ------------------------------
       セクション全体
    ------------------------------ */
    .front-about {
        padding-top: 80px;
        padding-bottom: 80px;
        overflow: hidden;
    }

    .front-about .container {
        width: min(calc(100% - 40px), 1060px);
    }

    /* ------------------------------
       プロフィール全体
    ------------------------------ */
    .front-about .aboutBox {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .front-about .aboutBox__body {
        width: 100%;
        min-width: 0;
    }

    /* ------------------------------
       プロフィール画像
    ------------------------------ */
    .front-about .aboutBox__photoWrap {
        width: 250px;
        height: 250px;
        margin: 0 auto 48px;
    }

    .front-about .aboutBox__photo,
    .front-about .aboutBox__photoWrap img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .front-about .aboutBox__photoWrap::before {
        width: 290px;
        height: 290px;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
    }

    /* ------------------------------
       名前・肩書き・紹介文
    ------------------------------ */
    .front-about .aboutBox__name {
        width: 100%;
        margin: 0 0 8px;
        font-size: 30px;
        line-height: 1.4;
        letter-spacing: 0.18em;
        text-align: center;
    }

    .front-about .aboutBox__role {
        margin: 0 0 28px;
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
    }

    .front-about .aboutBox__text {
        margin: 0;
        font-size: 15px;
        line-height: 1.9;
        letter-spacing: 0.02em;
    }

    /* ------------------------------
       肩書きチップ3個
    ------------------------------ */
    .front-about .aboutBox__chips {
        display: grid !important;
        grid-template-columns: 0.75fr 1.35fr 1.2fr;
        align-items: stretch;
        gap: 6px;

        width: 100%;
        margin: 32px 0 0;
        padding: 0;

        list-style: none;
    }

    .front-about .about__chip {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 5px 6px !important;

        border-radius: 999px;
        box-sizing: border-box;

        font-size: 11px !important;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    .front-about .about__chipIcon {
        display: flex;
        flex: 0 0 24px;
        align-items: center;
        justify-content: center;

        width: 24px !important;
        height: 24px !important;
        margin-right: 4px;
    }

    .front-about .about__chipIcon img {
        display: block;
        width: 16px !important;
        height: 16px !important;
        object-fit: contain;
    }

    .front-about .about__chipText {
        display: block;
        min-width: 0;
        margin: 0;

        font-size: inherit !important;
        line-height: inherit;
        text-align: center;
        white-space: nowrap;
    }

    /* ------------------------------
       スキル白カード
    ------------------------------ */
    .front-about .skills {
        width: 100%;
        margin-top: 64px;
        padding: 40px 14px;

        border-radius: 24px;
        box-sizing: border-box;
    }

    .front-about .skills__title {
        margin: 0 0 32px;
        padding-top: 0;

        font-size: 26px;
        line-height: 1.4;
        text-align: center;
    }

    /* ------------------------------
       スキル丸
       上段4個・下段3個
    ------------------------------ */
    .front-about .skills__list {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: center !important;

        width: 312px !important;
        max-width: 100%;
        margin: 0 auto !important;
        padding: 0 !important;

        gap: 12px 8px !important;
        list-style: none;
    }

    .front-about .skillCircle {
        display: flex !important;
        flex: 0 0 72px !important;
        align-items: center !important;
        justify-content: center !important;

        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;

        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;

        margin: 0 !important;
        padding: 4px !important;

        border-width: 2px !important;
        border-radius: 50% !important;
        box-sizing: border-box;

        font-size: 10px !important;
        font-weight: 700;
        line-height: 1.15 !important;
        letter-spacing: -0.03em;
        text-align: center !important;
        white-space: normal;
        word-break: keep-all;
    }

    /* ------------------------------
       学習経験・対応可能な業務
    ------------------------------ */
    .front-about .aboutInfo {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;

        width: 100%;
        margin-top: 40px;
    }

    .front-about .aboutInfoCard {
        width: 100%;
        padding: 28px 24px 26px;

        border-radius: 18px;
        box-sizing: border-box;
    }

    .front-about .aboutInfoCard__head {
        display: flex;
        align-items: center;
    }

    .front-about .aboutInfoCard__title {
        margin: 0;
        font-size: 20px;
        line-height: 1.4;
    }

    .front-about .aboutInfoCard__list {
        display: grid;
        gap: 14px;

        margin: 20px 0 0;
        padding: 0;

        list-style: none;
    }

    .front-about .aboutInfoCard__list li {
        font-size: 13px;
        line-height: 1.55;
    }

    /* 学習経験の各項目を1行表示 */
    .front-about .aboutInfoCard--learn .aboutInfoCard__list li {
        font-size: 11.5px;
        letter-spacing: -0.04em;
        white-space: nowrap;
    }

    /* ------------------------------
       詳しく見るボタン
    ------------------------------ */
    .front-about .aboutMore {
        margin-top: 40px;
        text-align: center;
    }

    .front-about .aboutMore .btn--more {
        width: min(280px, 100%);
        min-height: 68px;
        margin: 0 auto;
    }
}

/* ==================================================
   390px以下の微調整
================================================== */
@media (max-width: 390px) {
    /* チップ */
    .front-about .aboutBox__chips {
        gap: 4px;
    }

    .front-about .about__chip {
        height: 46px !important;
        min-height: 46px !important;
        padding-inline: 3px !important;

        font-size: 9.5px !important;
        letter-spacing: -0.04em;
    }

    .front-about .about__chipIcon {
        flex-basis: 20px;
        width: 20px !important;
        height: 20px !important;
        margin-right: 2px;
    }

    .front-about .about__chipIcon img {
        width: 14px !important;
        height: 14px !important;
    }

    /* スキル */
    .front-about .skills__list {
        width: 300px !important;
        gap: 10px 4px !important;
    }

    .front-about .skillCircle {
        flex-basis: 72px !important;

        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;

        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;

        font-size: 9.5px !important;
    }
}

/* ==================================================
   Contact section：SP最終版
================================================== */
@media (max-width: 768px) {
    /* ------------------------------
       セクション全体
    ------------------------------ */
    .contactSection {
        padding: 80px 0;
        overflow: hidden;
    }

    .contactSection .container {
        width: min(calc(100% - 40px), 1060px);
    }

    /* ------------------------------
       Contact見出し
    ------------------------------ */
    .contactSection .sectionHead--contact {
        margin-bottom: 48px;
        text-align: center;
    }

    .contactSection .sectionHead__title {
        font-size: 44px;
        line-height: 1.2;
        letter-spacing: 0.12em;
    }

    .contactSection .sectionHead__sub {
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.5;
    }

    /* 1行表示 */
    .contactSection .sectionHead__lead {
        max-width: none;
        margin: 20px auto 0;

        font-size: 13px;
        line-height: 1.8;
        letter-spacing: -0.02em;
        text-align: center;
        white-space: nowrap;
    }

    /* ------------------------------
       PCの2カラムを縦並び
    ------------------------------ */
    .contactSection .contactGrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;

        width: 100%;
    }

    /* ------------------------------
       左側案内
    ------------------------------ */
    .contactSection .contactLeft {
        width: 100%;
        text-align: center;
    }

    .contactSection .contactLeft__title {
        margin: 0;

        font-size: 26px;
        line-height: 1.45;
        letter-spacing: 0.02em;
        text-align: center;
    }

    .contactSection .contactLeft__text {
        margin: 20px auto 0;

        font-size: 15px;
        line-height: 1.9;
        letter-spacing: 0.01em;
        text-align: center;
    }

    /* ------------------------------
       対応時間とXアイコンを横並び
    ------------------------------ */
    .contactSection .contactLeftBottom {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
    }

    /* ------------------------------
       対応時間カード
    ------------------------------ */
    .contactSection .contactHours {
        display: flex;
        align-items: center;
        gap: 12px;
        /* 修正 */
        flex: 0 0 auto;
        width: fit-content;
        max-width: 100%;
        margin: 0;
        padding: 13px 12px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .contactSection .contactHours__icon {
        display: flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        border-radius: 50%;
    }

    .contactSection .contactHours__icon img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .contactSection .contactHours__body {
        min-width: 0;
        text-align: left;
    }

    .contactSection .contactHours__label {
        margin: 0 0 2px;

        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
    }

    .contactSection .contactHours__time {
        margin: 0;

        font-size: 14px;
        line-height: 1.5;
        white-space: nowrap;
    }

    /* ------------------------------
       Xアイコン
    ------------------------------ */
    .contactSection .contactX {
        display: flex;
        flex: 0 0 48px;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;
        margin: 0;

        border-radius: 50%;
    }

    .contactSection .contactX span {
        display: block;
        width: 100%;
        height: 100%;
    }

    .contactSection .contactX img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* ------------------------------
       フォームカード
    ------------------------------ */
    .contactSection .contactFormCard {
        width: 100%;
        padding: 28px 20px;

        border-radius: 20px;
        box-sizing: border-box;
    }

    .contactSection .contactForm {
        width: 100%;
    }

    /* ------------------------------
       各フォーム行
    ------------------------------ */
    .contactSection .formRow {
        margin-bottom: 24px;
    }

    .contactSection .formRow:last-of-type {
        margin-bottom: 28px;
    }

    .contactSection .formLabel {
        display: block;
        margin-bottom: 10px;

        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
    }

    .contactSection .req {
        margin-left: 4px;
    }

    /* ------------------------------
       input・select
    ------------------------------ */
    .contactSection .formControl,
    .contactSection .formSelect__btn {
        width: 100%;
        height: 56px;
        padding: 0 16px;

        border-radius: 12px;
        box-sizing: border-box;

        font-size: 15px;
        line-height: 1.5;
    }

    .contactSection .formControl::placeholder {
        font-size: 14px;
    }

    .contactSection .formSelect {
        width: 100%;
    }

    .contactSection .formSelect__btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .contactSection .formSelect__caret {
        margin-left: 12px;
        font-size: 13px;
    }

    /* ------------------------------
       textarea
    ------------------------------ */
    .contactSection .formControl--textarea {
        height: 180px;
        min-height: 180px;
        padding: 16px;

        line-height: 1.7;
        resize: vertical;
    }

    /* ------------------------------
       送信ボタン
    ------------------------------ */
    .contactSection .formSubmit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;

        width: 100%;
        height: 64px;
        margin: 0;

        border-radius: 14px;

        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }

    .contactSection .formSubmit__arrow {
        font-size: 20px;
    }
}

/* ==================================================
   390px以下の微調整
================================================== */
@media (max-width: 390px) {
    .contactSection {
        padding: 72px 0;
    }

    .contactSection .sectionHead__title {
        font-size: 40px;
    }

    /* 390pxでも1行を維持 */
    .contactSection .sectionHead__lead {
        max-width: none;
        font-size: 11.5px;
        letter-spacing: -0.04em;
        white-space: nowrap;
    }

    .contactSection .contactLeft__title {
        font-size: 24px;
    }

    .contactSection .contactLeft__text {
        font-size: 14px;
    }

    .contactSection .contactLeftBottom {
        gap: 10px;
    }

    .contactSection .contactHours {
        gap: 10px;
        padding: 13px 12px;
    }

    .contactSection .contactHours__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .contactSection .contactHours__icon img {
        width: 20px;
        height: 20px;
    }

    .contactSection .contactHours__label {
        font-size: 14px;
    }

    .contactSection .contactHours__time {
        font-size: 12.5px;
    }

    .contactSection .contactX {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .contactSection .contactFormCard {
        padding: 24px 18px;
    }

    .contactSection .formControl,
    .contactSection .formSelect__btn {
        height: 54px;
        padding-inline: 14px;
        font-size: 14px;
    }

    .contactSection .formControl--textarea {
        height: 160px;
        min-height: 160px;
        padding: 14px;
    }

    .contactSection .formSubmit {
        height: 60px;
        font-size: 17px;
    }
}

/* ==================================================
   Footer SP
================================================== */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 44px;
    }

    .site-footer__inner {
        padding: 0 20px;
    }

    /* ---------- メニュー ---------- */

    .site-footer__menu {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 12px;

        margin: 0;
        padding: 0;
    }

    .site-footer__link {
        gap: 4px;
    }

    .site-footer__en {
        font-size: 15px;
        line-height: 1.2;
    }

    .site-footer__jp {
        font-size: 11px;
        line-height: 1.4;
    }

    /* ---------- 区切り線 ---------- */

    .site-footer__line {
        margin: 28px auto 20px;
    }

    /* ---------- コピーライト ---------- */

    .site-footer__copy {
        margin: 0 0 14px;
        font-size: 13px;
        letter-spacing: 0.05em;
    }

    /* ---------- SNS ---------- */

    .site-footer__sns {
        margin-top: 0;
    }

    .site-footer__x {
        width: 44px;
        height: 44px;
    }

    .site-footer__x img {
        width: 100%;
        height: 100%;
        display: block;
    }
}

/* ==================================================
   390px以下
================================================== */
@media (max-width: 390px) {
    .site-footer {
        padding: 36px 0 40px;
    }

    .site-footer__menu {
        gap: 16px 8px;
    }

    .site-footer__en {
        font-size: 14px;
    }

    .site-footer__jp {
        font-size: 10px;
    }

    .site-footer__copy {
        font-size: 12px;
    }

    .site-footer__x {
        width: 42px;
        height: 42px;
    }
}

/* ==================================================
   Works一覧ページ：SP最終版
================================================== */
@media (max-width: 768px) {
    /* ------------------------------
       ページ全体
    ------------------------------ */
    .worksArchive {
        margin-top: 64px;
    }

    .worksArchive .container {
        width: min(calc(100% - 32px), 1060px);
    }

    /* ------------------------------
       ページ見出し
    ------------------------------ */
    .worksArchive__head {
        padding: 64px 0 56px;
    }

    .worksArchive__head .sectionHead {
        margin: 0;
        text-align: center;
    }

    .worksArchive__head .sectionHead__title {
        font-size: 44px;
        line-height: 1.2;
        letter-spacing: 0.14em;
    }

    .worksArchive__head .sectionHead__sub {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* ------------------------------
       作品一覧
       SPでも2列表示
    ------------------------------ */
    .worksArchive .worksGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;

        width: 100%;
        margin: 0;
    }

    /* ------------------------------
       作品カード
    ------------------------------ */
    .worksArchive .workCard {
        width: 100%;
        height: auto;
        min-width: 0;

        border-radius: 14px;
        overflow: hidden;

        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    .worksArchive .workCard__link {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* ------------------------------
       サムネイル
    ------------------------------ */
    .worksArchive .workCard__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;

        overflow: hidden;
        background: #f3f4f6;
    }

    .worksArchive .workCard__img {
        display: block;
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    /* ------------------------------
       タグ
    ------------------------------ */
    .worksArchive .workCard__tags {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;

        width: 100%;
        margin: 0;
        padding: 10px 8px 0;

        overflow: hidden;
    }

    .worksArchive .tag {
        flex: 0 1 auto;
        min-width: 0;
        padding: 3px 7px;

        border-radius: 999px;

        font-size: 9px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* 3個目以降のタグはSPでは非表示 */
    .worksArchive .workCard__tags li:nth-child(n + 3) {
        display: none;
    }

    /* ------------------------------
       作品タイトル
    ------------------------------ */
    .worksArchive .workCard__title {
        display: -webkit-box;
        flex-grow: 1;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        margin: 8px 8px 0;
        padding-bottom: 14px;

        overflow: hidden;

        font-size: 12px;
        font-weight: 800;
        line-height: 1.5;
        letter-spacing: 0;
    }

    /* ------------------------------
       ページネーション
    ------------------------------ */
    .worksArchive .pager {
        margin: 56px 0 64px;
    }

    .worksArchive .pager .page-numbers {
        width: 36px;
        height: 36px;
        margin: 0 10px;

        font-size: 14px;
    }

    .worksArchive .pager .page-numbers.current,
    .worksArchive .pager a.page-numbers:hover {
        border-radius: 10px;
    }

    .worksArchive .pager .page-numbers.prev,
    .worksArchive .pager .page-numbers.next {
        margin: 0 10px;
    }
}

/* ==================================================
   390px以下の微調整
================================================== */
@media (max-width: 390px) {
    .worksArchive .container {
        width: calc(100% - 28px);
    }

    .worksArchive__head {
        padding: 56px 0 48px;
    }

    .worksArchive__head .sectionHead__title {
        font-size: 40px;
    }

    .worksArchive .worksGrid {
        gap: 18px 10px;
    }

    .worksArchive .workCard {
        border-radius: 12px;
    }

    .worksArchive .workCard__tags {
        gap: 3px;
        padding: 8px 6px 0;
    }

    .worksArchive .tag {
        padding: 3px 5px;
        font-size: 8px;
        letter-spacing: -0.03em;
    }

    .worksArchive .workCard__title {
        margin: 7px 6px 0;
        padding-bottom: 12px;

        font-size: 11px;
        line-height: 1.45;
    }

    .worksArchive .pager {
        margin: 48px 0 56px;
    }

    .worksArchive .pager .page-numbers {
        width: 34px;
        height: 34px;
        margin: 0 8px;
        font-size: 13px;
    }
}

/* ==================================================
   Work詳細ページ：SP最終調整
================================================== */
@media (max-width: 768px) {
    /* ------------------------------
       ページ全体
    ------------------------------ */
    .workSingle {
        margin-top: 64px;
        overflow: hidden;
    }

    .workSingle .container {
        width: min(calc(100% - 40px), 1060px);
    }

    /* ------------------------------
       共通見出し
    ------------------------------ */
    .workSingle .sectionHead {
        text-align: center;
    }

    .workSingle .sectionHead__title {
        font-size: 40px;
        line-height: 1.2;
        letter-spacing: 0.14em;
    }

    .workSingle .sectionHead__sub {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.5;
    }

    /* ==================================================
       ページ上部
    ================================================== */
    .workSingleHead {
        padding: 64px 0 72px;
    }

    .workSingleHead .sectionHead {
        margin-bottom: 48px;
    }

    /*
       SPでの表示順
       1. サムネイル
       2. 作品説明
       3. KEY POINT
    */
    .workSingleHead__grid {
        display: flex;
        flex-direction: column;
        gap: 24px;

        width: 100%;
    }

    .workSingleHead__right {
        order: 1;
        width: 100%;
        min-width: 0;
    }

    .workSingleHead__left {
        order: 2;

        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

        width: 100%;
        min-width: 0;
    }

    /* ------------------------------
       サムネイルカード
    ------------------------------ */
    .workSingle .workThumbCard {
        width: 100%;
        height: auto;
        aspect-ratio: auto;

        border-radius: 18px;
        box-sizing: border-box;
    }

    .workSingle .workThumbCard__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

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

    /* サムネイル下のメタ情報 */
    .workSingle .workThumbCard__meta {
        display: flex;
        align-items: center;
        gap: 12px;

        width: calc(100% - 24px);
        height: auto;
        min-height: 72px;

        margin: 12px auto;
        padding: 12px;

        border-radius: 14px;
        box-sizing: border-box;
    }

    .workSingle .workThumbCard__icon {
        display: grid;
        flex: 0 0 40px;
        place-items: center;

        width: 40px;
        height: 40px;
    }

    .workSingle .workThumbCard__icon img {
        width: 40px;
        height: 40px;
    }

    .workSingle .workThumbCard__metaText {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        width: 100%;
        height: auto;
        min-width: 0;
    }

    .workSingle .workThumbCard__metaItem {
        gap: 3px;
        min-width: 0;
    }

    .workSingle .workThumbCard__metaItem--right {
        text-align: right;
    }

    .workSingle .workThumbCard__metaLabel {
        font-size: 10px;
        line-height: 1.4;
    }

    .workSingle .workThumbCard__metaValue {
        font-size: 12px;
        line-height: 1.4;
    }

    /* ------------------------------
       作品紹介カード
    ------------------------------ */
    .workSingle .workIntroCard {
        width: 100%;
        height: auto;
        padding: 24px 20px;

        border-radius: 18px;
        box-sizing: border-box;
    }

    .workSingle .workIntroCard__cats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;

        margin: 0 0 18px;
        padding: 0;
    }

    .workSingle .workIntroCard__cat {
        padding: 4px 8px;
        font-size: 10px;
        line-height: 1.2;
    }

    .workSingle .workIntroCard__title {
        margin: 0;

        font-size: 21px;
        line-height: 1.5;
        letter-spacing: 0;
    }

    .workSingle .workIntroCard__text {
        margin: 20px 0 0;

        font-size: 14px;
        line-height: 1.9;
    }

    /* ------------------------------
       KEY POINT
    ------------------------------ */
    .workSingle .workKeypointCard {
        width: 100%;
        height: auto;
        padding: 24px 20px;

        border-radius: 18px;
        box-sizing: border-box;
    }

    .workSingle .workKeypointCard__head {
        align-items: center;
    }

    .workSingle .workKeypointCard__icon {
        flex: 0 0 44px;

        width: 44px;
        height: 44px;
        margin-right: 12px;
    }

    .workSingle .workKeypointCard__label {
        margin-bottom: 6px;
        font-size: 10px;
    }

    .workSingle .workKeypointCard__title {
        font-size: 17px;
        line-height: 1.5;
    }

    .workSingle .workKeypointCard__text {
        display: block;

        margin: 18px 0 0;

        overflow: visible;

        font-size: 14px;
        line-height: 1.9;

        -webkit-line-clamp: unset;
    }

    /* ==================================================
       モックアップ画像
    ================================================== */
    .workSingle .workMockup {
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .workSingle .workMockup__img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: top center;
    }

    /* ==================================================
       Overview
    ================================================== */
    .workSingle .workOverview {
        margin: 80px 0;
    }

    .workSingle .workOverview .sectionHead {
        margin-bottom: 48px;
    }

    /* ------------------------------
       Overview上段
    ------------------------------ */
    .workSingle .workOverviewTop {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

        width: 100%;
    }

    .workSingle .overviewCard {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 22px 20px;

        border-radius: 18px;
        box-sizing: border-box;
    }

    .workSingle .overviewCard__icon {
        grid-row: 1 / span 3;

        width: 48px;
        height: 48px;
        margin: 0;
    }

    .workSingle .overviewCard__title {
        margin: 0 0 10px;

        font-size: 17px;
        line-height: 1.5;
    }

    .workSingle .overviewCard__main,
    .workSingle .overviewCard__text,
    .workSingle .overviewCard li {
        font-size: 14px;
        line-height: 1.8;
    }

    .workSingle .overviewCard__main {
        margin: 0;
    }

    .workSingle .overviewCard__text {
        margin: 4px 0 0;
    }

    .workSingle .overviewCard ul {
        margin: 0;
        padding-left: 18px;
    }

    .workSingle .overviewCard li {
        margin: 2px 0;
    }

    /* ------------------------------
       Overview下段
    ------------------------------ */
    .workSingle .workOverviewBottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

        margin-top: 40px;
    }

    .workSingle .overviewWide {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
        gap: 16px;

        width: 100%;
        padding: 22px 20px;

        border-radius: 18px;
        box-sizing: border-box;
    }

    .workSingle .overviewWide__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .workSingle .overviewWide__body {
        min-width: 0;
        margin-left: 0;
    }

    .workSingle .overviewWide__title {
        margin: 0;

        font-size: 18px;
        line-height: 1.5;
        letter-spacing: 0.08em;
    }

    .workSingle .overviewWide__text,
    .workSingle .overviewWide__note,
    .workSingle .overviewIssues__item {
        font-size: 14px;
        line-height: 1.85;
        letter-spacing: 0;
    }

    .workSingle .overviewWide:first-child .overviewWide__text,
    .workSingle .overviewWide__body .overviewWide__text {
        max-width: none;
        margin-top: 12px;
    }

    .workSingle .overviewIssues {
        margin-top: 12px;
    }

    .workSingle .overviewIssues__item {
        padding-left: 28px;
    }

    .workSingle .overviewIssues__item + .overviewIssues__item {
        margin-top: 10px;
    }

    .workSingle .overviewIssues__item::before {
        top: 0.3em;

        width: 19px;
        height: 19px;

        font-size: 11px;
    }

    .workSingle .overviewWide__note {
        margin: 12px 0 0;
    }

    .workSingle .overviewTarget__title {
        margin: 12px 0 4px;

        font-size: 16px;
        line-height: 1.6;
    }

    .workSingle .overviewTarget__sub {
        font-size: 13px;
        line-height: 1.7;
    }
}
/* ==================================================
   Work詳細ページ下部：Other Works SP最終版
================================================== */
@media (max-width: 768px) {
    /* ------------------------------
       セクション全体
    ------------------------------ */
    .workSingle .workOther {
        padding: 72px 0 84px;
        overflow: hidden;
    }

    .workSingle .workOther .sectionHead {
        margin-bottom: 36px;
        text-align: center;
    }

    /* ------------------------------
       スライダー
       左右を少しインナー外へ見切れさせる
    ------------------------------ */
    .workSingle .workOther__slider {
        width: calc(100% + 24px);
        margin-top: 0;
        margin-left: -12px;
        overflow: visible;
    }

    .workSingle .workOther__slider.swiper {
        overflow: visible;
    }

    .workSingle .workOther .swiper-wrapper {
        align-items: flex-start;
    }

    /* ------------------------------
       カード
       Swiper側で2枚表示の幅を計算
    ------------------------------ */
    .workSingle .workOtherCard.swiper-slide {
        width: auto;
        max-width: none;
        height: auto !important;
        margin: 0;
        align-self: flex-start;
    }

    .workSingle .workOtherCard {
        display: block;
        height: auto !important;

        border-radius: 14px;
        overflow: hidden;
    }

    /* ------------------------------
       サムネイル
    ------------------------------ */
    .workSingle .workOtherCard__thumb {
        width: 100%;
        aspect-ratio: 16 / 10;

        overflow: hidden;
        background: #f5f5f5;
    }

    .workSingle .workOtherCard__thumb img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    /* ------------------------------
       NEWバッジ
    ------------------------------ */
    .workSingle .workOtherCard__badge {
        top: 8px;
        right: 8px;

        padding: 3px 7px;

        font-size: 8px;
        letter-spacing: 0.04em;
    }

    /* ------------------------------
       タグ
    ------------------------------ */
    .workSingle .workOtherCard__tags {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;

        width: 100%;
        margin: 0;
        padding: 9px 8px 0;

        overflow: hidden;
        list-style: none;
    }

    .workSingle .workOtherCard__tag {
        flex: 0 1 auto;
        min-width: 0;

        padding: 3px 5px;

        font-size: 8px;
        line-height: 1.2;
        letter-spacing: 0;
        white-space: nowrap;
    }

    /* SPではタグを最大2個表示 */
    .workSingle .workOtherCard__tags li:nth-child(n + 3) {
        display: none;
    }

    /* ------------------------------
       タイトル
    ------------------------------ */
    .workSingle .workOtherCard__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        min-height: 42px;
        margin: 0;
        padding: 8px 8px 12px;

        overflow: hidden;

        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* ------------------------------
       ナビ
       新しい制作・ドット・過去の制作
    ------------------------------ */
    .workSingle .workOther__nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;

        width: calc(100% - 8px);
        margin: 32px auto 0;
    }

    .workSingle .workOther__prev,
    .workSingle .workOther__next {
        grid-row: 1;

        width: 120px;
        height: 40px;
        padding: 0;

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

        border-radius: 999px;

        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .workSingle .workOther__prev {
        grid-column: 1;

        justify-self: start;
    }

    .workSingle .workOther__pagination {
        grid-column: 2;
        grid-row: 1;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .workSingle .workOther__next {
        grid-column: 3;

        justify-self: end;
    }

    .workSingle .workOther__pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 !important;
    }

    /* ------------------------------
       すべて見る
    ------------------------------ */
    .workSingle .workOther__all {
        display: flex;
        justify-content: center;

        margin-top: 40px;
    }

    .workSingle .workOther__allBtn {
        width: min(280px, 100%);
        height: 60px;

        font-size: 14px;
        letter-spacing: 0.08em;
    }
}

/* ==================================================
   390px以下
================================================== */
@media (max-width: 390px) {
    .workSingle .workOther {
        padding: 64px 0 76px;
    }

    .workSingle .workOther .sectionHead {
        margin-bottom: 32px;
    }

    .workSingle .workOther__slider {
        width: calc(100% + 20px);
        margin-left: -10px;
    }

    .workSingle .workOtherCard__title {
        min-height: 40px;
        font-size: 10px;
    }

    .workSingle .workOther__nav {
        gap: 8px;
        margin-top: 28px;
    }

    .workSingle .workOther__prev,
    .workSingle .workOther__next {
        height: 40px;
        padding-inline: 7px;

        font-size: 9px;
    }

    .workSingle .workOther__pagination {
        gap: 5px;
    }

    .workSingle .workOther__pagination .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
    }

    .workSingle .workOther__all {
        margin-top: 36px;
    }

    .workSingle .workOther__allBtn {
        width: min(260px, 100%);
        height: 58px;

        font-size: 13px;
    }
}

/* ==================================================
   Aboutページ：SP最終調整
================================================== */
@media (max-width: 768px) {
    /* ==================================================
       ページ全体
    ================================================== */
    .pageAbout {
        margin-top: 64px;
        padding-top: 0;
        overflow: hidden;
    }

    /*
       PC用の左右112pxを解除
       前半が細く潰れていた主な原因
    */
    .pageAbout .page-about,
    .page-about {
        width: 100%;
        padding: 72px 0 80px;
        box-sizing: border-box;
    }

    .pageAbout .container,
    .page-about .container,
    .aboutStrength .container,
    .aboutSkills .container {
        width: min(calc(100% - 40px), 1060px);
        margin-inline: auto;
    }

    /* ==================================================
       共通見出し
    ================================================== */
    .pageAbout .sectionHead {
        margin-bottom: 48px;
        text-align: center;
    }

    .pageAbout .sectionHead__title {
        font-size: 40px;
        line-height: 1.2;
        letter-spacing: 0.14em;
    }

    .pageAbout .sectionHead__sub {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* ==================================================
       About前半：プロフィール
    ================================================== */
    .pageAbout .aboutBox {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .pageAbout .aboutBox__photoWrap {
        width: 180px;
        height: 180px;
        margin: 0 auto 36px;
    }

    .pageAbout .aboutBox__photo {
        width: 100%;
        height: 100%;
    }

    .pageAbout .aboutBox__photo img,
    .pageAbout .aboutBox__photoWrap img {
        display: block;
        width: 100%;
        height: 100%;

        border-radius: 50%;
        object-fit: cover;
    }

    .pageAbout .aboutBox__photoWrap::before {
        width: 212px;
        height: 212px;

        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
    }

    .pageAbout .aboutBox__body {
        width: 100%;
        min-width: 0;
    }

    .pageAbout .aboutBox__name {
        width: 100%;
        margin: 0 0 8px;

        font-size: 28px;
        line-height: 1.4;
        letter-spacing: 0.18em;
        text-align: center;
    }

    .pageAbout .aboutBox__role {
        margin: 0 0 24px;

        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }

    .pageAbout .aboutBox__text {
        width: 100%;
        margin: 0;

        font-size: 14px;
        line-height: 1.9;
        letter-spacing: 0.01em;
    }

    /* ==================================================
       肩書きチップ
    ================================================== */
    .pageAbout .aboutBox__chips {
        display: grid;
        grid-template-columns: 0.75fr 1.35fr 1.2fr;
        align-items: stretch;
        gap: 5px;

        width: 100%;
        margin: 28px 0 0;
        padding: 0;
    }

    .pageAbout .about__chip {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;
        height: 46px;
        margin: 0;
        padding: 5px 4px;

        border-radius: 999px;
        box-sizing: border-box;

        font-size: 9.5px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .pageAbout .about__chipIcon {
        display: flex;
        flex: 0 0 18px;
        align-items: center;
        justify-content: center;

        width: 18px;
        height: 18px;
        margin-right: 2px;
    }

    .pageAbout .about__chipIcon img {
        display: block;
        width: 14px;
        height: 14px;
        object-fit: contain;
    }

    .pageAbout .about__chipText {
        min-width: 0;

        font-size: inherit;
        line-height: inherit;
        text-align: center;
        white-space: nowrap;
    }

    /* ==================================================
       スキル丸
       上段4個・下段3個
    ================================================== */
    .pageAbout .skills {
        width: 100%;
        margin-top: 56px;
        padding: 36px 14px;

        border-radius: 22px;
        box-sizing: border-box;
    }

    .pageAbout .skills__title {
        margin: 0 0 28px;
        padding-top: 0;
        font-size: 24px;
        line-height: 1.4;
        text-align: center;
    }

    .pageAbout .skills__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 6px;

        width: 300px;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;

        list-style: none;
    }

    .pageAbout .skillCircle {
        display: flex;
        flex: 0 0 70px;
        align-items: center;
        justify-content: center;

        width: 70px;
        min-width: 70px;
        max-width: 70px;

        height: 70px;
        min-height: 70px;
        max-height: 70px;

        margin: 0;
        padding: 4px;

        border-width: 2px;
        border-radius: 50%;
        box-sizing: border-box;

        font-size: 9px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.03em;
        text-align: center;
        word-break: keep-all;
    }

    /* ==================================================
       学習経験・対応可能な業務
    ================================================== */
    .pageAbout .aboutInfo {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

        width: 100%;
        margin-top: 40px;
        padding-bottom: 0;
    }

    .pageAbout .aboutInfoCard {
        width: 100%;
        padding: 24px 20px;

        border-radius: 18px;
        box-sizing: border-box;
    }

    .pageAbout .aboutInfoCard__head {
        display: flex;
        align-items: center;
        gap: 12px;

        margin-bottom: 18px;
    }

    .pageAbout .aboutInfoCard__icon {
        display: flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;
    }

    .pageAbout .aboutInfoCard__icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pageAbout .aboutInfoCard__title {
        margin: 0;

        font-size: 18px;
        line-height: 1.4;
        writing-mode: horizontal-tb;
    }

    .pageAbout .aboutInfoCard__list {
        display: grid;
        gap: 12px;

        margin: 0;
        padding: 0;
    }

    .pageAbout .aboutInfoCard__list li {
        font-size: 13px;
        line-height: 1.7;
        writing-mode: horizontal-tb;
        word-break: normal;
    }

    /* ==================================================
       Strength
    ================================================== */
    .aboutStrength {
        padding: 72px 0 80px;
    }

    .aboutStrength .sectionHead {
        margin-bottom: 44px;
    }

    .strengthCards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

        width: 100%;
    }

    .strengthCard {
        width: 100%;
        height: auto;
        min-height: 300px;

        padding: 28px 24px 26px;

        border-radius: 20px;
        box-sizing: border-box;
    }

    .strengthCard__icon {
        width: 52px;
        height: 52px;

        border-radius: 14px;
    }

    .strengthCard__no,
    .strengthCard__no01 {
        top: 22px;
        right: 22px;

        font-size: 64px;
        line-height: 1;
    }

    .strengthCard__title {
        margin: 18px 0 0;

        font-size: 19px;
        line-height: 1.5;
    }

    .strengthCard__text {
        margin: 32px 0 0;

        font-size: 14px;
        line-height: 1.9;
    }

    /* ------------------------------
       Strength背景ぼかし
    ------------------------------ */
    .aboutStrength::before {
        left: -80px;
        bottom: 20px;

        width: 220px;
        height: 220px;

        filter: blur(44px);
        -webkit-filter: blur(44px);
    }

    .aboutStrength::after {
        top: 40px;
        right: -80px;

        width: 180px;
        height: 180px;

        filter: blur(44px);
        -webkit-filter: blur(44px);
    }

    /* ==================================================
       Skills
    ================================================== */
    .aboutSkills {
        padding: 80px 0 88px;
    }

    .aboutSkills .sectionHead {
        margin-bottom: 44px;
    }

    .skillsGrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;

        width: 100%;
        margin-top: 0;
    }

    .skillsCard {
        width: 100%;
        max-width: none;
        min-height: 0;
        padding: 28px 24px 26px;

        border-radius: 20px;
        box-sizing: border-box;
    }

    .skillsCard__head {
        min-height: 56px;
        padding-right: 68px;
    }

    .skillsCard__title {
        font-size: 26px;
        line-height: 1.3;
    }

    .skillsCard__lead {
        margin-top: 6px;

        font-size: 13px;
        line-height: 1.5;
    }

    .skillsCard__icon {
        width: 52px;
        height: 52px;
    }

    .skillsCard__text {
        margin: 32px 0 0;

        font-size: 13px;
        line-height: 1.85;
    }

    .skillsCard__tags {
        gap: 7px;
        margin-top: 24px;
    }

    .skillsTag {
        padding: 6px 11px;

        font-size: 11px;
        line-height: 1.3;
    }
}

/* ==================================================
   390px以下の微調整
================================================== */
@media (max-width: 390px) {
    .pageAbout .container,
    .page-about .container,
    .aboutStrength .container,
    .aboutSkills .container {
        width: calc(100% - 32px);
    }

    .pageAbout .page-about,
    .page-about {
        padding: 64px 0 72px;
    }

    .pageAbout .sectionHead__title {
        font-size: 36px;
    }

    /* ------------------------------
       About前半
    ------------------------------ */
    .pageAbout .aboutBox__photoWrap {
        width: 164px;
        height: 164px;
    }

    .pageAbout .aboutBox__photoWrap::before {
        width: 194px;
        height: 194px;
    }

    .pageAbout .aboutBox__name {
        font-size: 26px;
    }

    .pageAbout .aboutBox__text {
        font-size: 13px;
    }

    .pageAbout .about__chip {
        height: 44px;
        padding-inline: 3px;

        font-size: 9px;
        letter-spacing: -0.04em;
    }

    /* ------------------------------
       スキル丸
    ------------------------------ */
    .pageAbout .skills__list {
        width: 292px;
        gap: 9px 4px;
    }

    .pageAbout .skillCircle {
        flex-basis: 70px;
        width: 70px;
        min-width: 70px;
        max-width: 70px;

        height: 70px;
        min-height: 70px;
        max-height: 70px;

        font-size: 8.5px;
    }

    /* ------------------------------
       Strength
    ------------------------------ */
    .strengthCard {
        min-height: 280px;
        padding: 26px 20px 24px;
    }

    .strengthCard__no,
    .strengthCard__no01 {
        font-size: 58px;
    }

    .strengthCard__text {
        margin-top: 28px;
        font-size: 13px;
    }

    /* ------------------------------
       Skills
    ------------------------------ */
    .skillsCard {
        padding: 26px 20px 24px;
    }

    .skillsCard__title {
        font-size: 24px;
    }

    .skillsCard__text {
        margin-top: 28px;
        font-size: 12.5px;
    }
}

/* ==========================================================
   Portfolio Responsive Final Fix
   style.cssの一番下にそのまま追加
========================================================== */

/* ==========================================================
   全画面共通：横幅崩れ・横スクロール防止
========================================================== */
html {
    width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    overflow-x: clip;
}

main,
section,
header,
footer,
div,
article,
figure,
nav,
ul,
ol {
    min-width: 0;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

/* ==========================================================
   1920px未満〜769px
   PCの構成を維持しながら可変化
========================================================== */
@media (min-width: 769px) and (max-width: 1919px) {
    /* --------------------------------------------------
       基本インナー
    -------------------------------------------------- */
    .container {
        width: min(1060px, calc(100% - 64px));
        max-width: 1060px;
        margin-inline: auto;
    }

    .wrapper {
        width: 100%;
        max-width: 1440px;
        margin-inline: auto;
    }

    /* --------------------------------------------------
       Header
    -------------------------------------------------- */
    .site-header {
        width: 100%;
    }

    .container.header-inner {
        width: min(1060px, calc(100% - 64px));
        max-width: 1060px;
        margin-inline: auto;
    }

    .header-nav__list {
        gap: clamp(18px, 2.2vw, 32px);
    }

    .header-nav__link .en {
        font-size: clamp(15px, 1.25vw, 18px);
    }

    .header-nav__link .jp {
        font-size: clamp(10px, 0.85vw, 12px);
    }

    /* --------------------------------------------------
       共通見出し
    -------------------------------------------------- */
    .sectionHead__title {
        font-size: clamp(40px, 3.35vw, 48px);
        letter-spacing: clamp(6px, 0.7vw, 9.95px);
    }

    /* --------------------------------------------------
       Home FV
    -------------------------------------------------- */
    .fv__inner {
        display: grid;
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(340px, 1fr);
        align-items: start;
        gap: clamp(36px, 4vw, 72px);
    }

    .fv__left {
        width: 100%;
        max-width: 484px;
    }

    .fv__right {
        width: 100%;
        max-width: 448px;
        margin-top: 59px;
        margin-left: auto;
        flex: none;
    }

    .fv__title {
        font-size: clamp(46px, 4.2vw, 60px);
        letter-spacing: clamp(10px, 1.25vw, 18px);
    }

    .fv__chips {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fv__chip {
        width: 100%;
    }

    .fv__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 448 / 344;
    }

    /* --------------------------------------------------
       Home Works / Works一覧
    -------------------------------------------------- */
    .worksGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 480px));
        justify-content: space-between;
        gap: 32px;
        width: 100%;
    }

    .workCard {
        width: 100%;
        max-width: 480px;
    }

    /* --------------------------------------------------
       Home Service
    -------------------------------------------------- */
    .serviceGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 500px));
        justify-content: space-between;
        gap: 32px;
        width: 100%;
    }

    .serviceCard {
        width: 100%;
        max-width: 500px;
    }

    .serviceNote {
        width: min(818.6px, 100%);
    }

    /* --------------------------------------------------
       Home About
    -------------------------------------------------- */
    .aboutBox {
        display: grid;
        grid-template-columns:
            minmax(280px, 344px)
            minmax(0, 492px);
        align-items: start;
        justify-content: space-between;
        gap: clamp(40px, 5vw, 96px);
    }

    .aboutBox__photoWrap {
        width: 100%;
        max-width: 344px;
        height: auto;
        aspect-ratio: 1 / 1;
        flex: none;
    }

    .aboutBox__photo {
        width: 100%;
        height: 100%;
    }

    .aboutBox__body {
        width: 100%;
        max-width: 492px;
    }

    .skills {
        width: 100%;
        max-width: 1032px;
    }

    .skills__list {
        width: 100%;
        gap: clamp(8px, 1vw, 12px);
    }

    .skillCircle {
        width: clamp(96px, 8.5vw, 122px);
        height: clamp(96px, 8.5vw, 122px);
        font-size: clamp(12px, 1vw, 14px);
        flex: 0 0 auto;
    }

    .aboutInfo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* --------------------------------------------------
       Contact
    -------------------------------------------------- */
    .contactGrid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(420px, 1fr);
        gap: clamp(32px, 4vw, 48px);
    }

    .contactFormCard {
        width: 100%;
    }

    .formControl,
    .formSelect__btn {
        width: 100%;
    }

    /* --------------------------------------------------
       Work詳細 上部
    -------------------------------------------------- */
    .workSingleHead__grid {
        display: grid;
        grid-template-columns:
            minmax(360px, 430px)
            minmax(0, 600px);
        justify-content: space-between;
        gap: clamp(28px, 3vw, 40px);
        width: 100%;
    }

    .workSingleHead__left,
    .workSingleHead__right {
        width: 100%;
        min-width: 0;
    }

    .workIntroCard {
        width: 100%;
        max-width: 430px;
    }

    .workKeypointCard {
        width: 100%;
        max-width: 420px;
    }

    .workThumbCard {
        width: 100%;
        max-width: 600px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .workThumbCard__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 600 / 390;
    }

    .workThumbCard__meta {
        width: calc(100% - 100px);
        max-width: 500px;
    }

    .workThumbCard__metaText {
        width: 100%;
        min-width: 0;
    }

    /* --------------------------------------------------
       Work詳細 Overview
    -------------------------------------------------- */
    .workOverviewTop {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 58px);
        width: 100%;
    }

    .overviewCard {
        width: 100%;
        max-width: none;
    }

    .overviewWide {
        width: 100%;
        max-width: 1060px;
    }

    /* --------------------------------------------------
       Work詳細 Other Works
    -------------------------------------------------- */
    .workOther__slider {
        width: 100%;
    }

    .workOtherCard {
        min-width: 0;
    }

    /* --------------------------------------------------
       Aboutページ Strength
    -------------------------------------------------- */
    .strengthCards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 332px));
        justify-content: center;
        gap: clamp(20px, 2.25vw, 32px);
        width: 100%;
    }

    .strengthCard {
        width: 100%;
        max-width: 332px;
    }

    /* --------------------------------------------------
       Aboutページ Skills
    -------------------------------------------------- */
    .skillsGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 503px));
        justify-content: space-between;
        gap: 32px;
        width: 100%;
    }

    .skillsCard {
        width: 100%;
        max-width: 503px;
    }
}

/* ==========================================================
   769px〜1199px
   PC構成を維持する中間幅専用
========================================================== */
@media (min-width: 769px) and (max-width: 1199px) {
    .container {
        width: calc(100% - 48px);
    }

    .container.header-inner {
        width: calc(100% - 48px);
    }

    /* --------------------------------------------------
       Header
    -------------------------------------------------- */
    .site-header,
    .container.header-inner {
        height: 96px;
    }

    .header-logo {
        font-size: 28px;
    }

    .header-nav__list {
        gap: 18px;
    }

    .header-nav__link .en {
        font-size: 15px;
    }

    .header-nav__link .jp {
        font-size: 10px;
    }

    /* --------------------------------------------------
       FV
    -------------------------------------------------- */
    .fv {
        padding-top: 104px;
    }

    .fv__inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.88fr);
        gap: 32px;
    }

    .fv__right {
        max-width: 400px;
    }

    .fv__chips {
        gap: 10px;
    }

    .fv__chip {
        height: 84px;
    }

    .fv__chipText {
        font-size: 11px;
    }

    /* --------------------------------------------------
       Home Works
    -------------------------------------------------- */
    .front-works .worksGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .front-works .workCard {
        max-width: none;
    }

    /* --------------------------------------------------
       Service
    -------------------------------------------------- */
    .serviceGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .serviceCard {
        max-width: none;
        padding-inline: 30px;
    }

    /* --------------------------------------------------
       About Home
    -------------------------------------------------- */
    .aboutBox {
        grid-template-columns:
            minmax(250px, 310px)
            minmax(0, 1fr);
        gap: 48px;
    }

    .aboutBox__photoWrap {
        max-width: 310px;
    }

    .aboutBox__chips {
        max-width: 100%;
    }

    .about__chip {
        width: calc(50% - 6px);
    }

    .skills {
        height: auto;
        padding: 44px 24px;
    }

    .skills__title {
        padding-top: 0;
        margin-bottom: 48px;
    }

    .skillCircle {
        width: clamp(82px, 9vw, 104px);
        height: clamp(82px, 9vw, 104px);
        font-size: 12px;
    }

    /* --------------------------------------------------
       Contact
    -------------------------------------------------- */
    .contactGrid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(380px, 1.1fr);
        gap: 32px;
    }

    /* --------------------------------------------------
       Works一覧
    -------------------------------------------------- */
    .worksArchive {
        margin-top: 96px;
    }

    .worksArchive .worksGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .worksArchive .workCard {
        width: 100%;
        max-width: none;
    }

    /* --------------------------------------------------
       Work詳細
    -------------------------------------------------- */
    .workSingle {
        margin-top: 96px;
    }

    .workSingleHead__grid {
        grid-template-columns:
            minmax(330px, 0.9fr)
            minmax(0, 1.1fr);
        gap: 28px;
    }

    .workIntroCard {
        height: auto;
        min-height: 397px;
    }

    .workKeypointCard {
        height: auto;
        min-height: 268px;
    }

    .workThumbCard__meta {
        width: calc(100% - 48px);
        gap: 16px;
        padding: 20px;
    }

    .workOverviewTop {
        gap: 24px;
    }

    .overviewCard {
        height: auto;
        min-height: 286px;
        padding: 28px;
    }

    .overviewWide {
        padding: 36px;
    }

    /* --------------------------------------------------
       Aboutページ
    -------------------------------------------------- */
    .pageAbout {
        margin-top: 96px;
    }

    .page-about {
        padding-inline: 0;
    }

    .strengthCards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .strengthCard {
        height: auto;
        min-height: 389px;
        padding: 34px 26px 28px;
    }

    .strengthCard__text {
        margin-top: 36px;
    }

    .skillsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .skillsCard {
        max-width: none;
        padding: 34px;
    }
}

/* ==========================================================
   769px〜900px
   最狭PC幅での破綻防止
   PC系の構成は維持
========================================================== */
@media (min-width: 769px) and (max-width: 900px) {
    .container {
        width: calc(100% - 40px);
    }

    .container.header-inner {
        width: calc(100% - 40px);
    }

    /* --------------------------------------------------
       Header
    -------------------------------------------------- */
    .header-nav__list {
        gap: 12px;
    }

    .header-nav__link .en {
        font-size: 14px;
    }

    .header-nav__link .jp {
        font-size: 9px;
    }

    /* --------------------------------------------------
       FV
    -------------------------------------------------- */
    .fv__inner {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(270px, 0.92fr);
        gap: 24px;
    }

    .fv__title {
        font-size: 42px;
        letter-spacing: 9px;
    }

    .fv__sub,
    .fv__left p {
        font-size: 14px;
    }

    .fv__right {
        max-width: 340px;
    }

    .fv__chips {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .fv__chip {
        height: 78px;
        padding-inline: 4px;
    }

    .fv__chipIcon img {
        width: 28px;
        height: 28px;
    }

    .fv__chipText {
        font-size: 9px;
    }

    /* --------------------------------------------------
       Service
    -------------------------------------------------- */
    .serviceCard {
        height: auto;
        min-height: 422px;
        padding: 32px 24px 28px;
    }

    /* --------------------------------------------------
       About Home
    -------------------------------------------------- */
    .aboutBox {
        grid-template-columns:
            minmax(220px, 270px)
            minmax(0, 1fr);
        gap: 36px;
    }

    .aboutBox__photoWrap {
        max-width: 270px;
    }

    .aboutBox__name {
        font-size: 26px;
    }

    .aboutBox__role {
        font-size: 14px;
    }

    .aboutBox__text {
        font-size: 13px;
    }

    .about__chip {
        width: calc(50% - 6px);
        padding-left: 10px;
        font-size: 11px;
    }

    .about__chipIcon img {
        width: 28px;
        height: 28px;
    }

    .skillCircle {
        width: 88px;
        height: 88px;
        font-size: 11px;
    }

    /* --------------------------------------------------
       Work詳細
    -------------------------------------------------- */
    .workSingleHead__grid {
        grid-template-columns:
            minmax(300px, 0.88fr)
            minmax(0, 1.12fr);
        gap: 24px;
    }

    .workIntroCard {
        padding: 24px;
    }

    .workIntroCard__title {
        font-size: 25px;
    }

    .workIntroCard__text {
        font-size: 14px;
    }

    .workKeypointCard {
        padding: 26px;
    }

    .workKeypointCard__text {
        font-size: 14px;
    }

    .workThumbCard__meta {
        width: calc(100% - 32px);
        padding: 16px;
    }

    .workThumbCard__metaValue {
        font-size: 13px;
    }

    .overviewCard {
        padding: 24px;
    }

    .overviewCard__icon {
        width: 54px;
        height: 54px;
    }

    .overviewCard__title {
        font-size: 17px;
    }

    .overviewCard__main,
    .overviewCard__text,
    .overviewCard li {
        font-size: 13px;
    }

    .overviewWide {
        padding: 30px;
    }

    .overviewWide__icon {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .overviewWide__body {
        margin-left: 24px;
    }

    .overviewWide__text,
    .overviewWide__note,
    .overviewIssues__item {
        font-size: 15px;
    }

    /* --------------------------------------------------
       Aboutページ
    -------------------------------------------------- */
    .strengthCard {
        padding: 28px 20px 24px;
    }

    .strengthCard__icon {
        width: 54px;
        height: 54px;
    }

    .strengthCard__no,
    .strengthCard__no01 {
        right: 18px;
        font-size: 62px;
    }

    .strengthCard__title {
        font-size: 17px;
    }

    .strengthCard__text {
        font-size: 12px;
    }

    .skillsCard {
        padding: 28px;
    }

    .skillsCard__title {
        font-size: 26px;
    }

    .skillsCard__text {
        font-size: 13px;
    }
}

/* ==========================================================
   768px以下
   完成済みSPデザインの崩れ防止
========================================================== */
@media (max-width: 768px) {
    /* --------------------------------------------------
       全体
    -------------------------------------------------- */
    body {
        min-width: 320px;
    }

    .container {
        width: min(calc(100% - 40px), 1060px);
        max-width: 1060px;
    }

    .site-header,
    .container.header-inner {
        max-width: none;
    }

    main,
    section,
    article,
    div,
    nav,
    ul,
    li {
        min-width: 0;
    }

    /* --------------------------------------------------
       画面外への意図しないはみ出しを防止
    -------------------------------------------------- */
    .fv,
    .front-works,
    .front-service,
    .front-about,
    .contactSection,
    .worksArchive,
    .workSingle,
    .pageAbout,
    .aboutStrength,
    .aboutSkills {
        max-width: 100%;
    }

    /* --------------------------------------------------
       Grid/Flexの子要素を縮小可能にする
    -------------------------------------------------- */
    .fv__inner > *,
    .worksGrid > *,
    .serviceGrid > *,
    .aboutBox > *,
    .aboutInfo > *,
    .contactGrid > *,
    .workSingleHead__grid > *,
    .workOverviewTop > *,
    .workOverviewBottom > *,
    .strengthCards > *,
    .skillsGrid > * {
        min-width: 0;
        max-width: 100%;
    }

    /* --------------------------------------------------
       フォーム
    -------------------------------------------------- */
    .contactForm,
    .formRow,
    .formControl,
    .formSelect,
    .formSelect__btn,
    .formControl--textarea,
    .formSubmit {
        max-width: 100%;
    }

    /* --------------------------------------------------
       ボタン文字のはみ出し防止
    -------------------------------------------------- */
    .btn,
    .formSubmit,
    .workOther__prev,
    .workOther__next,
    .workOther__allBtn {
        text-align: center;
    }

    /* --------------------------------------------------
       ページャー
    -------------------------------------------------- */
    .pager ul {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
    }

    /* --------------------------------------------------
       Swiper
    -------------------------------------------------- */
    .swiper,
    .swiper-wrapper {
        min-width: 0;
    }

    .swiper-slide {
        min-width: 0;
    }
}

/* ==========================================================
   430px以下
   大きめスマホ〜390px間の安定化
========================================================== */
@media (max-width: 430px) {
    .container {
        width: calc(100% - 32px);
    }

    /* --------------------------------------------------
       FV
    -------------------------------------------------- */
    .fv__title {
        font-size: clamp(36px, 10vw, 42px);
        letter-spacing: clamp(8px, 2.8vw, 12px);
    }

    .fv__text {
        font-size: 14px;
    }

    .fv__chips {
        gap: 10px 8px;
    }

    .fv__chip {
        height: 100px;
    }

    .fv__chipText {
        font-size: 11px;
    }

    /* --------------------------------------------------
       About Home
    -------------------------------------------------- */
    .front-about .aboutBox__photoWrap {
        width: min(230px, 70vw);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .front-about .aboutBox__chips {
        gap: 4px;
    }

    .front-about .about__chip {
        padding-inline: 4px !important;
        font-size: 10px !important;
    }

    /* --------------------------------------------------
       Contact
    -------------------------------------------------- */
    .contactSection .sectionHead__lead {
        font-size: clamp(11.5px, 3vw, 13px);
    }

    .contactSection .contactLeftBottom {
        max-width: 100%;
    }

    /* --------------------------------------------------
       Other Works
    -------------------------------------------------- */
    .workSingle .workOther__nav {
        width: 100%;
    }

    .workSingle .workOther__prev,
    .workSingle .workOther__next {
        width: min(120px, 31vw);
    }
}

/* ==========================================================
   390px以下
   完成済み390pxデザインの最終補強
========================================================== */
@media (max-width: 390px) {
    .container {
        width: calc(100% - 32px);
    }

    /* --------------------------------------------------
       横スクロール防止
    -------------------------------------------------- */
    .fv__chips,
    .aboutBox__chips,
    .skills__list,
    .worksGrid,
    .serviceGrid,
    .aboutInfo,
    .contactGrid,
    .workOverviewTop,
    .workOverviewBottom,
    .strengthCards,
    .skillsGrid {
        max-width: 100%;
    }

    /* --------------------------------------------------
       FV
    -------------------------------------------------- */
    .fv__chipText {
        font-size: 10px;
    }

    /* --------------------------------------------------
       Contact
    -------------------------------------------------- */
    .contactSection .contactLeftBottom {
        width: 100%;
    }

    .contactSection .contactHours {
        min-width: 0;
    }

    /* --------------------------------------------------
       Work詳細ナビ
    -------------------------------------------------- */
    .workSingle .workOther__nav {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);
    }

    .workSingle .workOther__prev,
    .workSingle .workOther__next {
        width: min(112px, 30vw);
        padding-inline: 4px;
    }
}

/* ==========================================================
   360px以下
   最小スマホ用の安全対策
========================================================== */
@media (max-width: 360px) {
    .container,
    .front-about .container,
    .contactSection .container,
    .worksArchive .container,
    .workSingle .container,
    .pageAbout .container,
    .page-about .container,
    .aboutStrength .container,
    .aboutSkills .container {
        width: calc(100% - 24px);
    }

    /* --------------------------------------------------
       見出し
    -------------------------------------------------- */
    .sectionHead__title,
    .workSingle .sectionHead__title,
    .pageAbout .sectionHead__title {
        font-size: 34px;
        letter-spacing: 4px;
    }

    /* --------------------------------------------------
       FV
    -------------------------------------------------- */
    .fv__title {
        font-size: 34px;
        letter-spacing: 7px;
    }

    .fv__sub {
        font-size: 14px;
    }

    .fv__text {
        font-size: 13px;
    }

    .fv__chips {
        gap: 8px 6px;
    }

    .fv__chip {
        height: 94px;
    }

    .fv__chipIcon img {
        width: 32px;
        height: 32px;
    }

    .fv__chipText {
        font-size: 9px;
    }

    /* --------------------------------------------------
       Aboutチップ
    -------------------------------------------------- */
    .front-about .about__chip,
    .pageAbout .about__chip {
        font-size: 8.5px !important;
        padding-inline: 2px !important;
    }

    /* --------------------------------------------------
       Contact
    -------------------------------------------------- */
    .contactSection .sectionHead__lead {
        font-size: 10.5px;
    }

    .contactSection .contactLeftBottom {
        gap: 7px;
    }

    .contactSection .contactHours {
        gap: 7px;
        padding: 11px 9px;
    }

    .contactSection .contactHours__time {
        font-size: 11.5px;
    }

    /* --------------------------------------------------
       Work一覧
    -------------------------------------------------- */
    .worksArchive .worksGrid {
        gap: 16px 8px;
    }

    /* --------------------------------------------------
       Work詳細 Other Works
    -------------------------------------------------- */
    .workSingle .workOther__prev,
    .workSingle .workOther__next {
        width: min(104px, 29vw);
        font-size: 8px;
    }

    .workSingle .workOther__pagination {
        gap: 3px;
    }
}

/* ==========================================================
   Portfolio Responsive Final Fix
   不具合箇所のみ最終上書き
========================================================== */

/* ==========================================================
   769px〜1919px
========================================================== */
@media (min-width: 769px) and (max-width: 1919px) {
    /* --------------------------------------------------
       Home Works
       画像の過度な拡大・トリミング防止
    -------------------------------------------------- */
    .front-works .workCard {
        width: 100%;
        max-width: 480px;
        height: auto;
    }

    .front-works .workCard__link {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .front-works .workCard__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;

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

        overflow: hidden;
        background: #f3f4f6;
    }

    .front-works .workCard__img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }

    /* --------------------------------------------------
       Home／Aboutページ
       スキル円の横幅を可変化
    -------------------------------------------------- */
    .front-about .skills,
    .pageAbout .skills {
        width: 100%;
        max-width: 1032px;
        height: auto;
        min-height: 341px;
    }

    .front-about .skills__list,
    .pageAbout .skills__list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 12px;

        gap: clamp(6px, 0.85vw, 12px);
    }

    .front-about .skillCircle,
    .pageAbout .skillCircle {
        flex: 0 1 122px;

        width: clamp(82px, 8.5vw, 122px);
        min-width: 0;

        height: clamp(82px, 8.5vw, 122px);
        min-height: 0;

        padding: 4px;

        font-size: clamp(9px, 0.85vw, 14px);
        line-height: 1.1;
        letter-spacing: -0.03em;
        white-space: nowrap;
    }

    /* 医療ライティングのみ、1行で円内に収める */
    .front-about .skillCircle:last-child,
    .pageAbout .skillCircle:last-child {
        padding-inline: 2px;

        font-size: clamp(6.5px, 0.58vw, 9px);
        line-height: 1;
        letter-spacing: -0.08em;
        white-space: nowrap;
    }

    /* --------------------------------------------------
       Works一覧ページ
       ページャーの潰れ防止
    -------------------------------------------------- */
    .worksArchive .pager {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        margin: 72px 0;
        overflow: visible;
    }

    .worksArchive .pager .nav-links,
    .worksArchive .pager > ul,
    .worksArchive .pager ul.page-numbers {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0;

        gap: clamp(8px, 1.5vw, 24px);
    }

    .worksArchive .pager li {
        display: flex;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;
    }

    .worksArchive .pager .page-numbers {
        display: inline-flex;
        flex: 0 0 40px;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;
        margin: 0;

        white-space: nowrap;
    }

    .worksArchive .pager .page-numbers.prev,
    .worksArchive .pager .page-numbers.next {
        margin: 0;
    }

    /* --------------------------------------------------
       Work詳細ページ
       カテゴリとタイトルの重なり防止
    -------------------------------------------------- */
    .workSingleHead__grid {
        display: grid;
        grid-template-columns:
            minmax(300px, 0.88fr)
            minmax(0, 1.12fr);

        width: 100%;
        gap: clamp(24px, 3vw, 40px);
    }

    .workSingleHead__left,
    .workSingleHead__right {
        width: 100%;
        min-width: 0;
    }

    .workIntroCard {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 397px;

        padding: 28px;
    }

    .workIntroCard__cats {
        display: flex;
        flex-wrap: wrap;

        width: 100%;
        max-height: none;

        margin: 0 0 24px;
        padding: 0;

        gap: 8px;
        overflow: visible;
    }

    .workIntroCard__cat {
        flex: 0 0 auto;

        height: 30px;
        padding-inline: clamp(10px, 1.3vw, 20px);

        font-size: clamp(10px, 0.9vw, 14px);
        white-space: nowrap;
    }

    .workIntroCard__title {
        margin: 0;

        font-size: clamp(22px, 2.1vw, 30px);
        line-height: 1.4;
        letter-spacing: clamp(0px, 0.2vw, 2.4px);
    }

    .workIntroCard__text {
        margin-top: clamp(30px, 4vw, 54px);

        font-size: clamp(14px, 1.15vw, 16px);
        line-height: 1.9;
    }

    .workKeypointCard {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 268px;
    }

    /* --------------------------------------------------
       Work詳細ページ
       右側サムネイルカードを適切に可変化
    -------------------------------------------------- */
    .workSingleHead__right {
        display: flex;
        justify-content: flex-end;
    }

    .workThumbCard {
        width: 100%;
        max-width: 600px;
        height: auto;
        min-height: 0;

        aspect-ratio: 1 / 1;
    }

    .workThumbCard__thumb {
        width: 100%;
        height: auto;

        aspect-ratio: 600 / 390;
    }

    .workThumbCard__thumb img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .workThumbCard__meta {
        width: calc(100% - 48px);
        max-width: 500px;
        height: auto;
        min-height: 84px;

        margin: clamp(14px, 2vw, 24px) auto 0;
        padding: clamp(14px, 2vw, 24px);

        gap: clamp(12px, 2vw, 24px);
    }

    .workThumbCard__metaText {
        width: 100%;
        height: auto;
        min-width: 0;
    }

    .workThumbCard__metaItem {
        min-width: 0;
    }

    .workThumbCard__metaValue {
        max-width: 100%;

        font-size: clamp(11px, 1.15vw, 16px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --------------------------------------------------
       Work詳細ページ
       モックアップ画像の比率維持
    -------------------------------------------------- */
    .workMockup {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .workMockup__img {
        display: block;

        width: 100%;
        height: auto;
        max-height: none;

        object-fit: contain;
        object-position: center top;
    }
}

/* ==========================================================
   769px〜1050px
   Work詳細ページの中間幅調整
========================================================== */
@media (min-width: 769px) and (max-width: 1050px) {
    .workSingleHead {
        padding: 72px 0 88px;
    }

    .workSingleHead__grid {
        grid-template-columns:
            minmax(270px, 0.84fr)
            minmax(0, 1.16fr);

        gap: 24px;
    }

    .workIntroCard {
        min-height: 360px;
        padding: 24px 22px;
    }

    .workIntroCard__cats {
        gap: 6px;
        margin-bottom: 20px;
    }

    .workIntroCard__cat {
        height: 27px;
        padding-inline: 9px;

        font-size: 9px;
    }

    .workIntroCard__title {
        margin: 0;

        font-size: 21px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    .workIntroCard__text {
        margin-top: 26px;

        font-size: 13px;
        line-height: 1.85;
    }

    .workKeypointCard {
        min-height: 230px;
        padding: 24px 22px;
    }

    .workKeypointCard__icon {
        width: 46px;
        height: 46px;
        margin-right: 12px;
    }

    .workKeypointCard__title {
        font-size: 16px;
    }

    .workKeypointCard__text {
        margin-top: 18px;

        font-size: 13px;
        line-height: 1.8;
    }

    .workThumbCard__meta {
        width: calc(100% - 28px);
        min-height: 72px;

        padding: 12px;
        gap: 10px;
    }

    .workThumbCard__icon {
        flex: 0 0 38px;

        width: 38px;
        height: 38px;
    }

    .workThumbCard__icon img {
        width: 38px;
        height: 38px;
    }

    .workThumbCard__metaText {
        gap: 8px;
    }

    .workThumbCard__metaLabel {
        font-size: 9px;
    }

    .workThumbCard__metaValue {
        font-size: 10px;
    }
}

/* ==========================================================
   768px以下
========================================================== */
@media (max-width: 768px) {
    /* --------------------------------------------------
       Home Works
       固定高さを解除
    -------------------------------------------------- */
    .front-works .workCard {
        width: 100%;
        height: auto;
    }

    .front-works .workCard__thumb {
        width: 100%;
        height: auto;

        aspect-ratio: 16 / 9;

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

        overflow: hidden;
        background: #f3f4f6;
    }

    .front-works .workCard__img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }

    /* --------------------------------------------------
       Home／Aboutページ
       医療ライティングを円内に収める
    -------------------------------------------------- */
    .front-about .skillCircle:last-child,
    .pageAbout .skillCircle:last-child {
        padding-inline: 1px !important;

        font-size: 6.5px !important;
        line-height: 1 !important;
        letter-spacing: -0.12em !important;
        white-space: nowrap !important;
    }

    /* --------------------------------------------------
       Works一覧ページャー
    -------------------------------------------------- */
    .worksArchive .pager {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        margin: 56px 0 64px;

        overflow: visible;
    }

    .worksArchive .pager .nav-links,
    .worksArchive .pager > ul,
    .worksArchive .pager ul.page-numbers {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        width: auto;
        max-width: 100%;

        margin: 0;
        padding: 0;

        gap: 8px;
    }

    .worksArchive .pager li {
        display: flex;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;
    }

    .worksArchive .pager .page-numbers {
        display: inline-flex;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;

        width: 34px;
        height: 34px;
        margin: 0;

        font-size: 13px;
        white-space: nowrap;
    }

    .worksArchive .pager .page-numbers.prev,
    .worksArchive .pager .page-numbers.next {
        margin: 0;
    }

    /* --------------------------------------------------
       Work詳細モックアップ
    -------------------------------------------------- */
    .workSingle .workMockup {
        width: 100%;
        height: auto;
    }

    .workSingle .workMockup__img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: center top;
    }
}

/* ==========================================================
   430px以下
========================================================== */
@media (max-width: 430px) {
    .worksArchive .pager .nav-links,
    .worksArchive .pager > ul,
    .worksArchive .pager ul.page-numbers {
        gap: 6px;
    }

    .worksArchive .pager .page-numbers {
        flex-basis: 32px;

        width: 32px;
        height: 32px;

        font-size: 12px;
    }
}

/* ==========================================================
   390px以下
========================================================== */
@media (max-width: 390px) {
    .front-about .skillCircle:last-child,
    .pageAbout .skillCircle:last-child {
        padding-inline: 0 !important;

        font-size: 6px !important;
        letter-spacing: -0.14em !important;
    }

    .worksArchive .pager .nav-links,
    .worksArchive .pager > ul,
    .worksArchive .pager ul.page-numbers {
        gap: 5px;
    }

    .worksArchive .pager .page-numbers {
        flex-basis: 30px;

        width: 30px;
        height: 30px;

        font-size: 11px;
    }
}

/* ==========================================================
   Portfolio Responsive：最終仕上げ修正
   style.cssの一番下に丸ごと追加
========================================================== */

/* ==========================================================
   769px〜1919px
========================================================== */
@media (min-width: 769px) and (max-width: 1919px) {
    /* ======================================================
       1. Home Works／Works一覧
       サムネイル左右の余白をなくす
    ====================================================== */
    .front-works .workCard__thumb,
    .worksArchive .workCard__thumb {
        display: block;

        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;

        padding: 0;
        overflow: hidden;
        background: #f3f4f6;
    }

    .front-works .workCard__img,
    .worksArchive .workCard__img {
        display: block;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        object-fit: cover;
        object-position: center;
    }

    /* ======================================================
       2. Work詳細ページ上部
       1920px時のカード比率を保ちながら縮小
    ====================================================== */
    .workSingleHead__grid {
        display: grid;
        grid-template-columns:
            minmax(300px, 430px)
            minmax(0, 600px);
        justify-content: space-between;
        align-items: start;

        width: 100%;
        gap: clamp(24px, 2.8vw, 40px);
    }

    .workSingleHead__left {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;

        gap: clamp(22px, 2.2vw, 32px);
    }

    .workSingleHead__right {
        display: flex;
        justify-content: flex-end;

        width: 100%;
        min-width: 0;
    }

    /* ------------------------------
       左上：作品紹介カード
    ------------------------------ */
    .workIntroCard {
        container-type: inline-size;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 430px;
        height: auto;
        min-height: 0;
        aspect-ratio: 430 / 397;

        padding: clamp(20px, 2.05vw, 28px) clamp(20px, 2.05vw, 28px)
            clamp(18px, 1.75vw, 24px);

        border-radius: clamp(16px, 1.45vw, 20px);
        box-sizing: border-box;
    }

    .workIntroCard__cats {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        width: 100%;
        max-height: none;

        margin: 0;
        padding: 0;

        gap: clamp(6px, 0.85vw, 12px);
        overflow: visible;
    }

    .workIntroCard__cat {
        flex: 0 0 auto;

        height: clamp(25px, 2.4vw, 34px);
        padding-inline: clamp(9px, 1.55vw, 22px);

        font-size: clamp(9px, 0.98vw, 14px);
        line-height: 1;
        white-space: nowrap;
    }

    .workIntroCard__title {
        margin: clamp(20px, 3.75vw, 54px) 0 0;

        font-size: clamp(20px, 2.1vw, 30px);
        line-height: 1.35;
        letter-spacing: clamp(0px, 0.17vw, 2.4px);
    }

    .workIntroCard__text {
        margin: clamp(20px, 3.75vw, 54px) 0 0;

        font-size: clamp(12px, 1.12vw, 16px);
        line-height: 1.9;
        letter-spacing: clamp(0px, 0.015vw, 0.2px);

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;

        overflow: hidden;
    }

    /* ------------------------------
       左下：KEY POINT
    ------------------------------ */
    .workKeypointCard {
        width: 100%;
        max-width: 420px;
        height: auto;
        min-height: 0;
        aspect-ratio: 420 / 268;

        padding: clamp(22px, 2.4vw, 33px);

        border-radius: clamp(16px, 1.45vw, 20px);
        box-sizing: border-box;
    }

    .workKeypointCard__icon {
        flex: 0 0 clamp(42px, 4vw, 56px);

        width: clamp(42px, 4vw, 56px);
        height: clamp(42px, 4vw, 56px);
        margin-right: clamp(10px, 1.15vw, 16px);
    }

    .workKeypointCard__label {
        margin-bottom: clamp(5px, 0.7vw, 10px);

        font-size: clamp(9px, 0.85vw, 12px);
    }

    .workKeypointCard__title {
        font-size: clamp(14px, 1.3vw, 18px);
        line-height: 1.45;
    }

    .workKeypointCard__text {
        margin-top: clamp(14px, 1.75vw, 24px);

        font-size: clamp(11px, 1.12vw, 16px);
        line-height: 1.9;
    }

    /* ------------------------------
       右：サムネイルカード
    ------------------------------ */
    .workThumbCard {
        width: 100%;
        max-width: 600px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .workThumbCard__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 600 / 390;
    }

    .workThumbCard__thumb img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    .workThumbCard__meta {
        width: calc(100% - clamp(32px, 7vw, 100px));
        max-width: 500px;
        height: auto;
        min-height: clamp(70px, 6.7vw, 96px);

        margin: clamp(14px, 1.75vw, 24px) auto 0;

        padding: clamp(13px, 1.75vw, 24px);
        gap: clamp(10px, 1.75vw, 24px);

        box-sizing: border-box;
    }

    .workThumbCard__icon {
        flex: 0 0 clamp(36px, 3.4vw, 48px);

        width: clamp(36px, 3.4vw, 48px);
        height: clamp(36px, 3.4vw, 48px);
    }

    .workThumbCard__icon img {
        width: 100%;
        height: 100%;
    }

    .workThumbCard__metaText {
        width: 100%;
        height: auto;
        min-width: 0;

        gap: clamp(8px, 1.75vw, 24px);
    }

    .workThumbCard__metaLabel {
        font-size: clamp(8px, 0.85vw, 12px);
    }

    .workThumbCard__metaValue {
        font-size: clamp(10px, 1.12vw, 16px);
    }

    /* ======================================================
       3. Home About／Aboutページ
       スキル円を常に正円にする
    ====================================================== */
    .front-about .skills,
    .pageAbout .skills {
        width: 100%;
        max-width: 1032px;
        height: auto;
        min-height: 0;

        padding: clamp(36px, 3.35vw, 48px) clamp(18px, 2vw, 28px)
            clamp(34px, 3vw, 44px);

        box-sizing: border-box;
    }

    .front-about .skills__title,
    .pageAbout .skills__title {
        margin: 0 0 clamp(38px, 4.85vw, 70px);
        padding-top: 0;
    }

    .front-about .skills__list,
    .pageAbout .skills__list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;

        gap: clamp(6px, 0.85vw, 12px);
    }

    .front-about .skillCircle,
    .pageAbout .skillCircle {
        flex: 0 1 clamp(82px, 8.5vw, 122px);

        width: clamp(82px, 8.5vw, 122px);
        min-width: 0;
        max-width: 122px;

        height: auto;
        min-height: 0;
        max-height: none;

        aspect-ratio: 1 / 1;

        padding: 4px;

        border-radius: 50%;
        box-sizing: border-box;

        font-size: clamp(10px, 0.95vw, 14px);
        line-height: 1.15;
    }

    /* 医療ライティングだけ文字を少し小さくして1行表示 */
    .front-about .skillCircle:last-child,
    .pageAbout .skillCircle:last-child {
        padding-inline: 2px;

        font-size: clamp(6px, 0.58vw, 8.5px);
        line-height: 1;
        letter-spacing: -0.08em;
        white-space: nowrap;
    }
}

/* ==========================================================
   769px〜1050px
   Work詳細カードの最狭PC幅調整
========================================================== */
@media (min-width: 769px) and (max-width: 1050px) {
    .workSingleHead__grid {
        grid-template-columns:
            minmax(280px, 0.88fr)
            minmax(0, 1.12fr);

        gap: 24px;
    }

    .workIntroCard {
        padding: 20px;
    }

    .workIntroCard__cats {
        gap: 5px;
    }

    .workIntroCard__cat {
        height: 24px;
        padding-inline: 8px;

        font-size: 8px;
    }

    .workIntroCard__title {
        margin-top: clamp(17px, 2.4vw, 26px);

        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.4;
    }

    .workIntroCard__text {
        margin-top: clamp(17px, 2.4vw, 26px);

        font-size: clamp(10px, 1.15vw, 13px);
        line-height: 1.75;

        -webkit-line-clamp: 5;
    }

    .workKeypointCard {
        padding: 20px;
    }

    .workKeypointCard__icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }

    .workKeypointCard__title {
        font-size: 14px;
    }

    .workKeypointCard__text {
        margin-top: 13px;

        font-size: 11px;
        line-height: 1.75;
    }

    .workThumbCard__meta {
        width: calc(100% - 24px);
        min-height: 68px;

        margin-top: 12px;
        padding: 11px;
        gap: 9px;
    }

    .workThumbCard__icon {
        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }

    .workThumbCard__metaLabel {
        font-size: 8px;
    }

    .workThumbCard__metaValue {
        font-size: 9px;
    }
}

/* ==========================================================
   768px以下
   SP側のサムネイル表示は既存デザインを維持
========================================================== */
@media (max-width: 768px) {
    .front-works .workCard__thumb,
    .worksArchive .workCard__thumb {
        padding: 0;
    }

    .front-works .workCard__img,
    .worksArchive .workCard__img {
        margin: 0;
        padding: 0;

        object-fit: cover;
        object-position: center;
    }

    /* SPでは既存サイズの正円を確実に維持 */
    .front-about .skillCircle,
    .pageAbout .skillCircle {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
    }
}

/* ==========================================================
   Portfolio Responsive：追加最終修正
   style.cssの一番下に丸ごと追加
========================================================== */

/* ==========================================================
   1. Home／Aboutページ
   769px〜1400pxのスキル白枠と円の余白調整
========================================================== */
@media (min-width: 769px) and (max-width: 1400px) {
    .front-about .skills,
    .pageAbout .skills {
        width: fit-content;
        max-width: 100%;
        height: auto;

        margin-inline: auto;
        padding: clamp(34px, 3.4vw, 48px) clamp(18px, 2.4vw, 32px)
            clamp(34px, 3.4vw, 48px);

        box-sizing: border-box;
    }

    .front-about .skills__list,
    .pageAbout .skills__list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        width: fit-content;
        max-width: 100%;
        margin-inline: auto;

        gap: clamp(6px, 0.85vw, 12px);
    }

    .front-about .skillCircle,
    .pageAbout .skillCircle {
        flex: 0 0 clamp(82px, 8.5vw, 122px);

        width: clamp(82px, 8.5vw, 122px);
        height: auto;

        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }
}

/* ==========================================================
   2. Contact SP
   reveal＋backdrop-filterによるモザイク状の描画崩れ対策
========================================================== */
@media (max-width: 768px) {
    /*
       transform中の要素とbackdrop-filterが重なることで、
       Chromeで一時的な描画崩れが起きる場合があるためSPのみ解除
    */
    .contactSection .contactHours,
    .contactSection .contactFormCard {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .contactSection .js-reveal {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;

        transform: translate3d(0, 16px, 0);
        will-change: opacity, transform;
    }

    .contactSection .js-reveal.is-show {
        transform: translate3d(0, 0, 0);
    }

    /*
       アニメーション終了後にGPUレイヤーを解除し、
       モザイク状の残像を防止
    */
    .contactSection .js-reveal.is-show {
        will-change: auto;
    }
}

/* ==========================================================
   3. タグ
   タグ自体は折り返すが、タグ内テキストは改行しない
========================================================== */
.workCard__tags,
.workIntroCard__cats,
.workOtherCard__tags,
.skillsCard__tags {
    flex-wrap: wrap;
}

.tag,
.workIntroCard__cat,
.workOtherCard__tag,
.skillsTag {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* ==========================================================
   4. Works一覧ページ
   769px〜1919pxでカードの高さが伸びる問題を修正
========================================================== */
@media (min-width: 769px) and (max-width: 1919px) {
    .worksArchive .worksGrid {
        align-items: start;
    }

    .worksArchive .workCard {
        display: block;

        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;

        align-self: start;
    }

    .worksArchive .workCard__link {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;
        min-height: 0;
    }

    .worksArchive .workCard__thumb {
        flex: none;

        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .worksArchive .workCard__tags {
        flex: none;
    }

    .worksArchive .workCard__title {
        flex: none;

        margin-bottom: 0;
        padding-bottom: clamp(14px, 1.5vw, 20px);
    }
}

/* ==========================================================
   5. Work詳細ページ・左上カード
   769px〜1919pxで縦方向の余白比率を維持
========================================================== */
@media (min-width: 769px) and (max-width: 1919px) {
    .workSingle .workIntroCard {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 430px;
        height: auto;
        min-height: 0;

        aspect-ratio: 430 / 397;

        padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px)
            clamp(18px, 1.7vw, 24px);

        box-sizing: border-box;
    }

    .workSingle .workIntroCard__cats {
        flex: 0 0 auto;

        width: 100%;
        max-height: none;

        margin: 0;
    }

    .workSingle .workIntroCard__title {
        flex: 0 0 auto;

        margin: clamp(20px, 3.2vw, 54px) 0 0;

        font-size: clamp(20px, 2.1vw, 30px);
        line-height: 1.35;
    }

    /*
       本文をカード下側へ配置。
       画面幅が変わっても下側だけに大きな空白が残らないようにする
    */
    .workSingle .workIntroCard__text {
        flex: 0 0 auto;

        margin: auto 0 0;

        padding-top: clamp(18px, 2.7vw, 42px);

        font-size: clamp(11px, 1.1vw, 16px);
        line-height: 1.9;
    }
}

/* ==========================================================
   6. Work詳細ページ・最狭PC幅
   タグや本文の収まりを補強
========================================================== */
@media (min-width: 769px) and (max-width: 1050px) {
    .workSingle .workIntroCard {
        padding: 18px;
    }

    .workSingle .workIntroCard__cats {
        gap: 5px;
    }

    .workSingle .workIntroCard__cat {
        height: 23px;
        padding-inline: 7px;

        font-size: 7.5px;
    }

    .workSingle .workIntroCard__title {
        margin-top: 16px;

        font-size: clamp(17px, 2vw, 21px);
    }

    .workSingle .workIntroCard__text {
        padding-top: 14px;

        font-size: clamp(9px, 1.1vw, 12px);
        line-height: 1.7;
    }
}
/* ==========================================================
   Works一覧ページ
   769px以上のカード表示を完全統一
   1919px・1920pxの境界差をなくす
========================================================== */
@media (min-width: 769px) {
    /* ------------------------------
       一覧グリッド
    ------------------------------ */
    .worksArchive .worksGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 480px));
        justify-content: space-between;
        align-items: start;
        gap: 32px;

        width: 100%;
    }

    /* ------------------------------
       カード本体
    ------------------------------ */
    .worksArchive .workCard {
        display: block;

        width: 100%;
        max-width: 480px;
        height: auto;
        min-height: 0;

        align-self: start;

        border-radius: 20px;
        overflow: hidden;
    }

    .worksArchive .workCard__link {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;
        min-height: 0;
    }

    /* ------------------------------
       サムネイル
       1920pxでも1919pxでも同じ比率
    ------------------------------ */
    .worksArchive .workCard__thumb {
        flex: none;

        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;

        overflow: hidden;
        background: #f3f4f6;
    }

    .worksArchive .workCard__img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    /* ------------------------------
       タグ・タイトル
    ------------------------------ */
    .worksArchive .workCard__tags {
        flex: none;
        width: 100%;
    }

    .worksArchive .workCard__title {
        flex: none;
        margin-bottom: 0;
        padding-bottom: 20px;
    }
}

@media (min-width: 769px) {
    .worksArchive .workCard__thumb {
        position: relative;
        overflow: hidden;
    }

    .worksArchive .workCard__img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;

        object-fit: cover;
        object-position: center;
    }

    /*
       元画像内に余白が含まれている作品だけ微調整
       画像を少し拡大して下端の白い余白を隠す
    */
    .worksArchive .workCard__img[src*="SHINOBI-GYM"] {
        width: 102%;
        height: 102%;

        max-width: none;

        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
        object-fit: cover;
        object-position: center;
    }
}

/* ==========================================================
   Work Tags Empty Fix
   タグ未設定時の空白を削除
========================================================== */

.workCard__tags:empty,
.workIntroCard__cats:empty,
.workOtherCard__tags:empty {
    display: none;
}

/* =========================
   404 Page
========================= */

.page404 {
    background: #08111f;
    min-height: 70vh;
}

.notFound {
    padding: 100px 0 120px;
    text-align: center;
}

.page404 .sectionHead__title,
.page404 .sectionHead__sub {
    color: #fff;
}

.notFoundBox {
    max-width: 720px;
    margin: 60px auto 0;
    padding: 64px 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 24px;
}

.notFoundBox__title {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.notFoundBox__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: #d9e2f0;
}

.notFoundBox__actions {
    margin-top: 40px;
}

/* SP */
@media (max-width: 768px) {
    .notFound {
        padding: 72px 0 88px;
    }

    .notFoundBox {
        margin-top: 40px;
        padding: 48px 24px;
        border-radius: 20px;
    }

    .notFoundBox__title {
        font-size: 22px;
        line-height: 1.5;
    }

    .notFoundBox__text {
        font-size: 14px;
    }
}

/* ==================================================
   Page Top Button
================================================== */

.to-top {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 900;

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

    width: 56px;
    height: 56px;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: linear-gradient(135deg, #4f7cff 0%, #2f8fed 100%);

    color: #ffffff;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    box-shadow: 0 8px 24px rgba(47, 143, 237, 0.3);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

/* 表示 */
.to-top.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* hover */
.to-top:hover {
    transform: translateY(-3px);

    background: linear-gradient(135deg, #6aa6ff 0%, #4da3ff 100%);

    box-shadow: 0 12px 30px rgba(47, 143, 237, 0.4);
}

/* active */
.to-top:active {
    transform: translateY(0);
}

/* キーボード操作 */
.to-top:focus-visible {
    outline: 3px solid rgba(47, 143, 237, 0.35);
    outline-offset: 4px;
}

/* ==================================================
   Page Top Button SP
================================================== */

@media (max-width: 768px) {
    .to-top {
        right: 16px;
        bottom: 20px;

        width: 48px;
        height: 48px;

        font-size: 21px;
    }
}

/* スマホの擬似hover対策 */
@media (hover: none) {
    .to-top:hover {
        transform: translateY(0);

        background: linear-gradient(135deg, #4f7cff 0%, #2f8fed 100%);

        box-shadow: 0 8px 24px rgba(47, 143, 237, 0.3);
    }
}

/* アニメーションを減らす設定 */
@media (prefers-reduced-motion: reduce) {
    .to-top {
        transition: none;
    }
}