/* vivitto — 下層ページ（サービス・料金・実績・コラム）
   トップと同じ色と書体。スマートフォン縦を基準に、読みやすさを優先する。 */

.page { background: var(--black); }

/* 冒頭 */
.phero { padding: calc(var(--header-h) + clamp(28px, 5vw, 64px)) 0 clamp(40px, 6vw, 80px); background: var(--black); overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.phero__text { display: grid; gap: 18px; }
.phero__title { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.3; font-feature-settings: "palt"; }
.phero__title span { display: block; margin-top: 6px; font-size: 0.48em; color: var(--gold); }
.phero__title--article { font-size: clamp(26px, 3.2vw, 44px); }
.phero__lead { color: #cfcec9; max-width: 36em; font-size: clamp(15px, 1.2vw, 17px); }
.phero__facts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.phero__facts li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(203, 180, 136, 0.45); font-size: 13.5px; font-weight: 700; }
.phero__facts b { font-family: var(--f-mincho); font-size: 1.35em; color: var(--gold); margin: 0 2px; font-variant-numeric: lining-nums tabular-nums; }
.phero__media { position: relative; }
.phero__media--web { padding-bottom: 12%; }
.phero__media--web .sc-desk { transform: none; width: 92%; }
.phero__media--web .sc-phone { position: absolute; right: 0; bottom: 0; width: 28%; }
.phero__media--movie video { width: min(320px, 70vw); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; margin-inline: auto; display: block; background: #000 url("../video/sept-pv-poster.jpg") center / cover; }
.phero__media--app { display: grid; place-items: center; }
.phero__media--app .sc-phone--big { height: min(60vh, 520px); transform: rotate(-3deg); }
.phero__media--ai { display: grid; place-items: center; }
.phero__media--design .sc-mosaic__main { aspect-ratio: 2 / 1 !important; }
@media (max-width: 899px) { .phero__grid { grid-template-columns: minmax(0, 1fr); } .phero__media--app .sc-phone--big { height: 62vw; max-height: 420px; } }

/* パンくず */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12.5px; color: var(--mute); }
.crumbs li + li::before { content: "／"; margin: 0 8px; color: var(--mute-2); }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--gold-hi); border-bottom-color: currentColor; }

/* 本文の場面：明るい面を基本にする */
.psec { --text: #0a0b0c; --mute: #55575b; --mute-2: #66686c; --line: rgba(10, 11, 12, 0.12); --line-2: rgba(10, 11, 12, 0.22); --gold: #7a6433; --gold-hi: #6f5b2d;
  background: var(--paper); color: var(--text); color-scheme: light; padding-block: clamp(48px, 7vw, 96px); }
.psec--light { background: #fbfaf7; }
.psec--dark { --text: #ecebe6; --mute: #a3a5a9; --mute-2: #8a8c90; --line: rgba(236, 235, 230, 0.12); --line-2: rgba(236, 235, 230, 0.22); --gold: #cbb488; --gold-hi: #e3d1a8;
  background: var(--black); color: var(--text); color-scheme: dark; }
.psec--tight { padding-top: 0; }
.psec__title { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.35; margin-bottom: clamp(18px, 2.4vw, 28px); font-feature-settings: "palt"; }
.psec__title--sub { font-size: clamp(20px, 2vw, 28px); margin-top: clamp(36px, 4vw, 56px); }
.psec__lead { color: var(--mute); max-width: 42em; margin-bottom: 18px; }
.psec__more { margin-top: 22px; }
.psec .faq__grid .psec__title { position: static; }

.pains { display: grid; gap: 10px; max-width: 40em; }
.pains li { position: relative; padding: 14px 16px 14px 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 600; }
.pains li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--gold); }

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.feats li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.feats b { font-family: var(--f-mincho); font-size: 22px; color: var(--gold); }
.feats h3 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.feats p { color: var(--mute); font-size: 14.5px; }

.chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
.chips2 li { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; }
.psec--dark .chips2 li { color: #e6e5e0; }

.psteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.psteps li { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.psteps b { font-family: var(--f-mincho); font-size: 22px; color: var(--gold); }
.psteps h3 { font-size: 17px; font-weight: 700; }
.psteps p { color: var(--mute); font-size: 14px; }
@media (max-width: 899px) { .psteps { grid-template-columns: minmax(0, 1fr); } }

.ptable { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ptable > div { padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ptable h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.ptable li { position: relative; padding-left: 18px; color: #3f4144; font-size: 14.5px; line-height: 1.9; }
.ptable li::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
@media (max-width: 899px) { .ptable { grid-template-columns: minmax(0, 1fr); } }

.links2 { display: grid; gap: 10px; }
.links2 a { display: block; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--text); font-weight: 700; text-decoration: none; }
.links2 a:hover { border-color: var(--gold); }

.pvid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pvid__player { width: min(320px, 80vw); aspect-ratio: 9 / 16; border-radius: 16px; background: #000; }
@media (max-width: 899px) { .pvid { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.psec .why__reel { margin: 0; width: 100%; }

.rk--static { width: min(380px, 100%); }
.rk__list--static { height: auto; display: grid; gap: 4px; }
.rk__list--static li { position: static; }

.archive__grid--page { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.psec .archive__grid--page { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.works .archive__grid--page, .psec--tight .archive__grid--page { grid-template-columns: repeat(10, minmax(0, 1fr)); }
@media (max-width: 899px) { .psec .archive__grid--page, .psec--tight .archive__grid--page { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.psec .area__list li { background: #fff; }

/* 相談への入口 */
.pcta { background: var(--black); padding-block: clamp(56px, 8vw, 100px); }
.pcta__inner { display: grid; justify-items: center; gap: 16px; text-align: center; }
.pcta__text { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.5; max-width: 24em; }
.pcta__note { font-size: 13px; color: var(--mute); }

/* コラム */
.colcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.colcard a { display: grid; gap: 10px; height: 100%; padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color 0.3s; }
.colcard a:hover { border-color: var(--gold); }
.colcard__date { font-size: 12.5px; color: var(--mute); }
.colcard__title { font-family: var(--f-mincho); font-weight: 700; font-size: 19px; line-height: 1.5; }
.colcard__desc { font-size: 14px; color: var(--mute); }
.article__wrap { max-width: 780px; }
.article__meta { font-size: 13px; color: var(--mute); margin-bottom: 22px; }
.toc { padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--line); margin-bottom: 36px; }
.toc__title { font-weight: 700; margin-bottom: 8px; }
.toc ol { display: grid; gap: 6px; padding-left: 1.4em; list-style: decimal; }
.toc a { color: var(--text); }
.article__sec { margin-bottom: 40px; scroll-margin-top: calc(var(--header-h) + 16px); }
.article__sec h2 { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.45; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.article__sec p { margin-bottom: 14px; line-height: 2; }
.article__sec ul, .article__sec ol { display: grid; gap: 8px; margin: 0 0 14px 1.4em; line-height: 1.9; }
.article__sec ul { list-style: disc; }
.article__sec ol { list-style: decimal; }
.nw { display: inline-block; }
.phero__grid:not(:has(.phero__media)) { grid-template-columns: minmax(0, 1fr); }
.phero__grid:not(:has(.phero__media)) .phero__text { max-width: 860px; }
.phero__title span.nw { display: inline-block; margin-top: 0; font-size: 1em; color: inherit; }
.rk { color: #0a0b0c; }
.phero__title span:not(.nw) { font-size: clamp(15px, 1.8vw, 24px); }
.phero__media--video { margin: 0; display: grid; gap: 10px; justify-items: center; }
.phero__media--video .vframe { width: min(300px, 72vw); }
.phero__media--video figcaption, .pvids figcaption { font-size: 13px; color: var(--mute); text-align: center; }
.pside { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.pside__media { display: grid; place-items: center; }
.pvids { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.pvids figure { margin: 0; display: grid; gap: 10px; }
.pvids .vframe { width: min(280px, 80vw); }
@media (max-width: 899px) { .pside { grid-template-columns: minmax(0, 1fr); } }
.toc ol { list-style: none; padding-left: 0; }
.colgroup { font-family: var(--f-mincho); font-weight: 800; font-size: clamp(20px, 2vw, 26px); margin: clamp(32px, 4vw, 48px) 0 16px; }
.colgroup:first-child { margin-top: 0; }
.colcard__date { display: flex; align-items: center; gap: 10px; }
.colcard__cat { padding: 2px 10px; border-radius: 999px; background: rgba(122, 100, 51, 0.12); color: #6f5b2d; font-size: 12px; font-weight: 700; }
.chips2 a, .industry__list a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.chips2 a:hover, .industry__list a:hover { color: var(--gold-hi); }
.phero__title, .psec__title, .article__sec h2, .colcard__title, .colgroup, .pcta__text { word-break: keep-all; text-wrap: balance; }
.phero__media--app .sc-phone--app img { animation-play-state: running; }
/* 下層ページ：文字の大きさの基準 */
.article__sec h2 { font-feature-settings: "palt"; }
.feats h3, .psteps h3 { font-size: clamp(17px, 1.3vw, 18px); }
.phero__lead, .psec__lead { font-size: 16px; }
@media (min-width: 900px) { .phero__lead, .psec__lead { font-size: 17px; } }
.feats p, .psteps p { font-size: 14px; }
@media (min-width: 900px) { .feats p, .psteps p { font-size: 15px; } }
.article__sec p { font-size: 16px; }
.crumbs li[aria-current] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.crumbs ol { flex-wrap: nowrap; overflow: hidden; }
.crumbs li { flex: none; }
.crumbs li[aria-current] { flex: 1 1 auto; min-width: 0; }
/* 冒頭がスマホで右に切れないように（パンくずの長さに引っぱられない） */
.phero__text { grid-template-columns: minmax(0, 1fr); }
.crumbs { min-width: 0; }
/* 見出しの段差：ページの見出し ＞ 区切りの見出し ＞ 小見出し */
.psec__title--sub { font-size: clamp(20px, 2vw, 26px); }
.article__sec h2 { font-size: clamp(21px, 2.2vw, 28px); }
.colgroup { font-size: clamp(24px, 2.4vw, 32px); }
.psec__lead { max-width: 36em; }
/* アプリ開発：RPAと、作れる仕組みの例 */
.rpa-sec__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .rpa-sec__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.rpa-sec__fig { margin: 0; display: grid; gap: 8px; }
.rpa-sec__fig figcaption { font-size: 12px; }
.sys-cards { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 700px) { .sys-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sys-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sys-cards li { padding: 18px 18px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(10, 11, 12, 0.12); }
.sys-cards h3 { font-family: var(--f-mincho); font-weight: 800; font-size: 18px; margin-bottom: 6px; font-feature-settings: "palt"; }
.sys-cards p { font-size: 14px; line-height: 1.7; }
.pv-board { margin: 8px 0 14px; border-radius: 14px; overflow: hidden; background: #0d1520; }
.pv-board img { width: 100%; }
.pv-stills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pv-stills img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }

/* ================================================================ 第10版：下層ページも、文字は黒か白。黒地の金は光らせる */
.psec { --text: #0a0b0c; --mute: #0a0b0c; --mute-2: #0a0b0c; --gold: #0a0b0c; --gold-hi: #0a0b0c; }
.psec--dark, .phero, .pcta, .page > .site-footer { --text: #ffffff; --mute: #ffffff; --mute-2: #ffffff; --gold: #d9b762; --gold-hi: #f0d896; }
.phero__lead, .psec--dark .chips2 li { color: #fff; }
.ptable li, .colcard__cat { color: #0a0b0c; }
.phero__title span:not(.nw), .psec--dark .plan__price b, .phero__facts b {
  background: var(--gold-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: gold-sheen 7s linear infinite;
}
.psec:not(.psec--dark) .plan__price b { background: none; color: #0a0b0c; -webkit-text-fill-color: #0a0b0c; animation: none; }
@media (prefers-reduced-motion: reduce) { .phero__title span:not(.nw), .psec--dark .plan__price b, .phero__facts b { animation: none; } }
.phero__media--design2 { display: grid; gap: 10px; }
.phero__media--design2 .dz-cap { color: #fff; }
/* 第19版：下層ページの金の文字もプラチナに、暗い面のリンクは白に */
.phero__title span:not(.nw), .psec--dark .plan__price b, .phero__facts b { background-image: var(--plat-grad); }
.psec--dark .link-arrow, .phero .link-arrow, .pcta .link-arrow { color: #fff; }

/* コラムの終わり：前後のコラムと、同じ分類のコラム（2026-10-09） */
.colnav { padding-top: 0; }
.colnav__wrap { max-width: 780px; display: grid; gap: 16px; }
.colnav__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.colnav__card { display: grid; align-content: start; gap: 10px; padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: #0a0b0c; text-decoration: none; transition: border-color 0.3s, transform 0.3s; }
.colnav__card:hover { border-color: #cbb488; transform: translateY(-2px); }
.colnav__card--next { text-align: right; }
.colnav__k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.colnav__card--next .colnav__k { justify-content: flex-end; }
.colnav__arw { width: 16px; height: 16px; flex: none; transition: transform 0.3s; }
.colnav__card--prev .colnav__arw { transform: rotate(180deg); }
.colnav__card--next:hover .colnav__arw { transform: translateX(3px); }
.colnav__card--prev:hover .colnav__arw { transform: rotate(180deg) translateX(3px); }
.colnav__t { font-size: 15px; font-weight: 700; line-height: 1.6; }
.colnav__h { margin-top: 12px; font-size: 15px; font-weight: 700; color: #0a0b0c; }
@media (max-width: 640px) {
  .colnav__pn { grid-template-columns: minmax(0, 1fr); }
  .colnav__card--next { text-align: left; }
  .colnav__card--next .colnav__k { justify-content: flex-start; }
}

/* 会社概要（2026-10-09） */
.cinfo__wrap { max-width: 880px; }
.cinfo { margin: 8px 0 0; border-top: 1px solid var(--line-2); }
.cinfo__row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cinfo dt { font-weight: 700; color: #0a0b0c; }
.cinfo dd { margin: 0; color: #0a0b0c; line-height: 1.8; }
.cinfo a { color: #0a0b0c; text-decoration: underline; text-decoration-color: #cbb488; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cinfo__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cmsg { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; max-width: 980px; }
.cmsg__photo { width: 200px; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.cmsg__photo img { width: 100%; height: 100%; object-fit: cover; }
.cmsg__body { display: grid; gap: 14px; color: #0a0b0c; }
.cmsg__lead { font-family: var(--f-mincho); font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.5; font-feature-settings: "palt"; word-break: keep-all; overflow-wrap: anywhere; }
.cmsg__sign { font-weight: 700; }
.cmsg__sept { font-size: 14px; }
.cmsg__sept a { color: #0a0b0c; text-decoration-color: #cbb488; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .cmsg { grid-template-columns: minmax(0, 1fr); }
  .cmsg__photo { width: 132px; }
}
@media (max-width: 640px) {
  .cinfo__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .cinfo dt { font-size: 13px; }
}

/* 送信完了（2026-10-09） */
.thanks__wrap { max-width: 780px; display: grid; gap: 28px; }
.thanks__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.psec--light .thanks__links .link-arrow { color: #0a0b0c; }

/* お問い合わせのページ（2026-10-10） */
.contact-page .contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); max-width: none; align-items: start; }
.contact__notes { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; color: #fff; font-size: 14px; line-height: 1.8; }
.contact__notes li { padding-left: 1.2em; position: relative; }
.contact__notes li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: #cbb488; }
.contact-page .cform__fields { display: grid; }
@media (min-width: 900px) { .contact-page .contact__side { position: sticky; top: calc(var(--header-h) + 24px); } }
@media (max-width: 899px) { .contact-page .contact__grid { grid-template-columns: minmax(0, 1fr); } }