@charset "utf-8";
/* =========================================================
   下層ページの PC 用の見た目(パターン2)。
   下層ページの HTML はスマホ用(P1)と共通で、721px 以上のときだけ
   p2/style.css(ヘッダー・メニュー・フッター・トークン)とこのファイルが効く。
   720px 以下では読み込まれず、main.css(P1)が効く。
   ========================================================= */

/* P1 の部品は PC では出さない(P2 のヘッダー・フッターが代わりに出る) */
.curtain, .cursor, .progress, .site-header, .site-footer { display: none !important; }

main { display: block; padding-top: var(--hd-h); }

.wrap { padding: 0 var(--pad); }
.wrap.article-body { padding: 0; margin-left: var(--pad); }

/* ---------- 出現(main.js が .is-in を付ける) ---------- */
.mask-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask-line > em { display: block; font-style: normal; }
.js .mask-line > em { transform: translateY(105%); transition: transform 1.05s var(--e-out); }
.js .mask-line.is-in > em { transform: none; }
.js [data-anim] { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--e-out), transform 1s var(--e-out); }
.js [data-anim].is-in { opacity: 1; transform: none; }
.reduce-motion .mask-line > em,
.reduce-motion [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- 見出しまわり ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--haze);
}
.eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--flare);
}

.page-hero { padding: clamp(70px, 14vh, calc(170 * var(--u))) 0 clamp(44px, 8vh, calc(96 * var(--u))); }
.page-hero .wrap { display: grid; gap: clamp(14px, 2.4vh, calc(26 * var(--u))); justify-items: start; }
.page-hero__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(2.2rem, 6.4vw, calc(92 * var(--u)));
    line-height: 1.1;
    letter-spacing: -0.045em;
    word-break: auto-phrase;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
/* 記事・お知らせの詳細はタイトルが長いので一段小さく */
.page-hero__title--long { font-size: clamp(1.8rem, 3.6vw, calc(52 * var(--u))); line-height: 1.3; letter-spacing: -0.02em; max-width: 22em; }
.page-hero__lead {
    max-width: 34em;
    font-size: calc((calc(15 * var(--u))) * var(--bf));
    color: rgba(16, 19, 25, 0.72);
}
.page-hero__meta {
    font-family: var(--f-en);
    font-size: calc(12 * var(--u));
    letter-spacing: 0.16em;
    color: var(--haze);
}
.page-hero__cta { margin-top: 10px; }

.page-body {
    padding: clamp(50px, 9vh, calc(110 * var(--u))) 0 clamp(80px, 14vh, calc(160 * var(--u)));
    border-top: 1px solid var(--line);
}

/* ---------- リンク・ボタン ---------- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(30px, 5vh, calc(56 * var(--u)));
    font-family: var(--f-en);
    font-size: calc(13 * var(--u));
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.link-arrow > span {
    display: block;
    width: 40px; height: 1px;
    background: currentColor;
    overflow: hidden;
    text-indent: -999em;
    transition: width 0.5s var(--e-out);
}
.link-arrow:hover > span { width: 66px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 22px 34px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: calc(15.36 * var(--u));
    letter-spacing: 0.04em;
    color: var(--milk);
    background: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: color 0.5s ease, border-color 0.5s ease;
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--flare);
    transform: translateY(101%);
    transition: transform 0.6s var(--e-io);
}
.btn::after {
    content: "";
    display: block;
    width: 46px; height: 1px;
    background: currentColor;
    transition: width 0.5s var(--e-out);
}
.btn:hover { color: #fff; border-color: var(--flare); }
.btn:hover::before { transform: none; }
.btn:hover::after { width: 70px; }

/* ---------- 本文 ---------- */
.article-body { max-width: 46em; }
.article-body > * + * { margin-top: 1.55em; }
.article-body h2 {
    margin-top: 2.6em;
    padding-top: 1.4em;
    border-top: 1px solid var(--line);
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.3rem, 2vw, calc(28 * var(--u)));
    line-height: 1.45;
    letter-spacing: -0.01em;
}
.article-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body h3 {
    margin-top: 2em;
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.5vw, calc(20 * var(--u)));
    line-height: 1.55;
}
.article-body p { line-height: 2.05; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body ul > li { list-style: disc; }
.article-body ol > li { list-style: decimal; }
.article-body li + li { margin-top: 0.6em; }
.article-body li::marker { color: var(--flare); }
.article-body blockquote { padding-left: 1.2em; border-left: 2px solid var(--flare); color: rgba(16, 19, 25, 0.72); }
.article-body a { border-bottom: 1px solid var(--flare); }
.article-body strong { font-weight: 700; }
.article-body img { margin-top: 1em; }
.article-hero__image { margin-top: 0; padding: 0 var(--pad) clamp(30px, 5vh, calc(60 * var(--u))); }
.article-hero__image img { width: 100%; max-height: 70vh; object-fit: cover; }

/* 会社概要の表 */
.spec-table { width: 100%; border-collapse: collapse; margin-top: 20px; border-top: 1px solid var(--line); }
.spec-table th,
.spec-table td { padding: 18px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th {
    width: 11em;
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--haze);
    padding-top: 22px;
}

/* ---------- サービス一覧 ---------- */
.services__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.service-row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(52px, 6vw, calc(90 * var(--u))) minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, calc(34 * var(--u)));
    padding: clamp(24px, 3.4vw, calc(44 * var(--u))) 0;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.6s var(--e-out);
}
.service-row:hover { background: var(--ink-2); }
.service-row__index {
    font-family: var(--f-en);
    font-size: calc(12 * var(--u));
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--flare);
    padding-top: 0.6em;
}
.service-row__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.3rem, 2.4vw, calc(34 * var(--u)));
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.service-row__lead { margin-top: 10px; max-width: 44em; font-weight: 500; }
.service-row__desc { margin-top: 10px; max-width: 44em; color: rgba(16, 19, 25, 0.66); }
.service-row__rule, .service-row__fill { display: none; }

/* ---------- コラム一覧 ---------- */
.column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(300 * var(--u)), 1fr));
    gap: clamp(30px, 3.4vw, calc(48 * var(--u)));
}
.column-card { display: block; }
.column-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.column-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: transform 1s var(--e-out), filter 0.7s ease;
}
.column-card:hover .column-card__thumb img { transform: scale(1.06); filter: none; }
.column-card__body { padding-top: 20px; }
.column-card__date {
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    letter-spacing: 0.14em;
    color: var(--haze);
}
.column-card__title {
    margin-top: 8px;
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.05rem, 1.5vw, calc(21 * var(--u)));
    line-height: 1.5;
}
.column-card:hover .column-card__title { color: var(--flare); }
.column-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 10px;
    color: rgba(16, 19, 25, 0.66);
    font-size: calc((calc(13.44 * var(--u))) * var(--bf));
    line-height: 1.95;
}
.column-empty { color: var(--haze); }

/* ---------- お知らせ一覧(トップの行と同じ見た目) ---------- */
.news-list { border-top: 1px solid var(--line); }
.news-row {
    display: grid;
    grid-template-columns: clamp(110px, 12vw, calc(180 * var(--u))) minmax(0, 1fr) calc(48 * var(--u));
    align-items: baseline;
    gap: clamp(14px, 2.4vw, calc(34 * var(--u)));
    padding: clamp(20px, 2.6vw, calc(32 * var(--u))) 0;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.6s var(--e-out);
}
.news-row:hover { background: var(--ink-2); }
.news-row__date {
    font-family: var(--f-en);
    font-size: calc(13 * var(--u));
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--haze);
}
.news-row__title {
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, calc(21 * var(--u)));
    line-height: 1.55;
    background-image: linear-gradient(var(--flare), var(--flare));
    background-size: 0% 1px;
    background-position: left bottom 0.06em;
    background-repeat: no-repeat;
    transition: background-size 0.7s var(--e-out);
}
.news-row:hover .news-row__title { background-size: 100% 1px; }
.news-row__arrow {
    align-self: center;
    height: 1px;
    background: var(--milk);
    transform-origin: right;
    transform: scaleX(0.5);
    transition: transform 0.6s var(--e-out), background-color 0.4s ease;
}
.news-row:hover .news-row__arrow { transform: scaleX(1); background: var(--flare); }
.news-pager { display: flex; justify-content: space-between; margin-top: 30px; }

/* ---------- お問い合わせフォーム ---------- */
.form { max-width: 44em; }
.form__row { display: block; margin-top: 30px; }
.form__row:first-of-type { margin-top: 0; }
.form__label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: calc(14 * var(--u));
}
.form__label .req {
    margin-left: 8px;
    font-family: var(--f-en);
    font-size: calc(10 * var(--u));
    letter-spacing: 0.14em;
    color: var(--flare);
}
.form input[type="text"],
.form input[type="email"],
.form textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--line-2);
    border-radius: 0;
    background: var(--ink-3);
    color: var(--milk);
    font: inherit;
    transition: border-color 0.3s ease;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--flare); }
.form textarea { resize: vertical; line-height: 1.9; }
.form__submit { margin-top: 40px; }
.form-note { padding: 14px 18px; border-left: 2px solid var(--flare); background: var(--ink-2); }
.form-done { max-width: 44em; padding: 40px; border: 1px solid var(--line); background: var(--ink-3); }
.form-done__title { font-family: var(--f-jp); font-weight: 900; font-size: calc(22 * var(--u)); }
.form-done p + p { margin-top: 12px; color: rgba(16, 19, 25, 0.72); }

/* ---------- 下の誘導(P2 トップの CTA と同じ見た目) ---------- */
.cta { padding: clamp(90px, 18vh, calc(200 * var(--u))) 0; }
.cta__inner { display: grid; gap: clamp(14px, 2.4vh, calc(26 * var(--u))); justify-items: start; }
.cta__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(2rem, 6.4vw, calc(92 * var(--u)));
    line-height: 1.08;
    letter-spacing: -0.045em;
}
.cta__desc { max-width: 30em; font-size: calc((calc(14.08 * var(--u))) * var(--bf)); color: rgba(16, 19, 25, 0.72); }
.cta .btn { margin-top: clamp(10px, 2vh, calc(24 * var(--u))); }

/* ナビの現在地 */
.hd__nav a.is-current::after { transform: scaleX(1); }

/* ---------- AI導入・研修ページ(/services/ai) ---------- */
.split-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.split-card { padding: 28px 26px; border: 1px solid var(--line); background: var(--ink-2); }
.split-card__tag { font-family: var(--f-en); font-size: calc(11 * var(--u)); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--flare); }
.article-body .split-card h3 { margin-top: 8px; }
.article-body .split-card p { margin-top: 10px; line-height: 1.9; }

.article-body ol.steps { padding-left: 0; border-top: 1px solid var(--line); counter-reset: step; }
.article-body ol.steps > li { list-style: none; counter-increment: step; display: grid; grid-template-columns: 4em minmax(0, 1fr); column-gap: 8px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.article-body ol.steps > li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--f-en); font-size: calc(28 * var(--u)); font-weight: 300; line-height: 1.1; color: var(--flare); }
.steps strong { font-weight: 700; }
.steps span { margin-top: 4px; line-height: 1.9; color: rgba(16, 19, 25, 0.66); }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plan { display: flex; flex-direction: column; padding: 26px 22px; border: 1px solid var(--line); background: var(--ink-2); }
.plan__name { font-family: var(--f-en); font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--flare); }
.article-body .plan__price { margin-top: 10px; line-height: 1.3; }
.plan__price b { font-family: var(--f-en); font-size: calc(34 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-right: 2px; }
.plan__rows { margin-top: 16px; border-top: 1px solid var(--line); }
.plan__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.plan__rows dt { color: rgba(16, 19, 25, 0.66); }
.plan__rows dd { font-variant-numeric: tabular-nums; }
.article-body .plan__scale { margin-top: 14px; font-size: 0.86rem; line-height: 1.8; color: rgba(16, 19, 25, 0.66); }
.article-body .note { font-size: 0.86rem; line-height: 1.9; color: rgba(16, 19, 25, 0.66); }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.data-table th, .data-table td { padding: 16px 14px 16px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { font-family: var(--f-en); font-size: calc(11 * var(--u)); font-weight: 500; letter-spacing: 0.16em; color: var(--haze); }
.data-table tbody th { font-weight: 500; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.service-row__go { position: relative; z-index: 1; margin-top: 14px; }