/* 2つのページ（製品・実績）で共有する見た目。会社のホームページ（rhodium.co.jp）に合わせる */
/* 見た目は会社のホームページ（rhodium.co.jp）に合わせる＝白地・見出しは濃い青・Noto Sans JP・明るい青のグラデーションのボタン */
:root { --blue:#075a8d; --blue2:#1272ad;   /* ボタンの明るい側。ホームページの水色（#1a8fd0 前後）だと白い字との差が 3.57＝基準 4.5 に届かないので濃くした */ --ink:#1f2937; --soft:#4b5563; --bg:#ffffff; --bg2:#f3f8fc; --line:#e2e8f0; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:"Noto Sans JP", sans-serif; color:var(--ink); background:var(--bg); line-height:1.8; font-size:16px; word-break:auto-phrase; text-wrap:pretty; -webkit-font-smoothing:antialiased; }
img, video { display:block; max-width:100%; }
a { color:inherit; }
.wrap { width:min(1120px, 100% - 40px); margin-inline:auto; }
h1, h2, h3 { color:var(--blue); font-weight:700; line-height:1.4; }
/* 見出しは言葉の区切りで改行を固定（任せると言葉の途中で折れる＝知見_LP 6章） */
.ln { display:block; white-space:nowrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:999px; font-weight:700; font-size:16px; color:#fff; text-decoration:none; background:linear-gradient(90deg, var(--blue), var(--blue2)); box-shadow:0 10px 24px rgba(7,90,141,.25); transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(7,90,141,.3); }
.btn.ghost { background:#fff; color:var(--blue); border:2px solid var(--blue); box-shadow:none; padding:13px 28px; }
.btn.white { background:#fff; color:var(--blue); box-shadow:0 10px 24px rgba(0,0,0,.15); }
.btn .arw { font-size:18px; line-height:1; }

/* ── ヘッダー ── */
header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
header .co { font-weight:700; color:var(--blue); text-decoration:none; font-size:17px; letter-spacing:.04em; }
header .btn { padding:9px 20px; font-size:14px; box-shadow:none; }
header .acts { display:flex; align-items:center; gap:10px; }
header .nav { font-size:14px; font-weight:700; color:var(--blue); text-decoration:none; padding:6px 8px; }
header .nav:hover { text-decoration:underline; }
/* 開発実績へのリンク：広い画面はヘッダー、狭い画面（640以下）は最初の画面の下（ヘッダーに入りきらない） */
.hero-link { display:none; margin-top:18px; font-size:15px; font-weight:700; }
.hero-link a { color:var(--blue); }
header .btn.runner { padding:7px 18px; font-size:14px; gap:0; }   /* PageRunner＝相談するの右・枠だけの控えめなボタン。.btn.ghost より強く指定（高さを相談するとそろえる） */

/* ── 最初の画面 ── */
.hero { background:linear-gradient(180deg, var(--bg2), #fff 75%); padding:clamp(56px, 8vw, 104px) 0 clamp(56px, 7vw, 96px); text-align:center; overflow:hidden; }
.tag { display:inline-block; font-size:14px; font-weight:700; color:var(--blue); background:#e3eff8; padding:4px 16px; border-radius:999px; letter-spacing:.08em; }
.hero h1 { margin-top:22px; font-size:clamp(17px, 5.4vw, 60px);   /* 最小は幅320でも左右16px残る大きさ（最長の行「自分たちで作り、動かしています」15字） */ font-weight:900; letter-spacing:.01em; }
.hero .sub { margin-top:18px; font-size:clamp(15px, 1.8vw, 18px); color:var(--soft); }
.hero .cta { margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* 主役＝5製品の実際の画面のタイル（紹介動画から取ったコマ） */
.tiles { margin:clamp(44px, 6vw, 72px) auto 0; width:min(1240px, 100% - 40px); display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(10px, 1.4vw, 18px); align-items:center; }
.tiles img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; box-shadow:0 18px 44px rgba(7,90,141,.16); border:1px solid #fff; }
.tiles img:nth-child(odd) { transform:translateY(14px); }
.tiles img:nth-child(3) { transform:scale(1.12); position:relative; z-index:1; }

/* ── 製品 ── */
#products > .wrap > .lead { padding-top:clamp(64px, 8vw, 112px); text-align:center; }
.lead h2 { font-size:clamp(24px, 3.6vw, 38px); }
.lead p { margin-top:10px; color:var(--soft); }
#products article { padding-block:clamp(56px, 7vw, 100px); }
#products article:nth-of-type(even) { background:var(--bg2); }
#products article .wrap { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(28px, 5vw, 64px); align-items:center; }
#products article:nth-of-type(even) .wrap { grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); }
#products article:nth-of-type(even) .text { order:2; }
.worry { color:var(--soft); font-size:clamp(15px, 1.7vw, 17px); padding-left:14px; border-left:3px solid #9cc7e4; }
#products article h2 { margin-top:16px; font-size:clamp(17px, 5.2vw, 32px); }   /* 最長「シャドーIT／AI利用状況レポート」が幅320で収まる */
#products article .text { min-width:0; }
.what { margin-top:12px; font-size:clamp(17px, 2vw, 21px); font-weight:700; line-height:1.7; }
.what small { display:block; font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.04em; margin-top:10px; }
.what small:first-child { margin-top:0; }
.what .s { display:block; white-space:nowrap; }   /* 2つの文は文の区切りで改行し、文の中では折らない（幅320でも1行に収まる長さ・はみ出しは点検が測る） */
dl.support { margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; }
#products article:nth-of-type(odd) dl.support { background:var(--bg2); border-color:#dbe8f2; }
dl.support dt { font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.06em; }
dl.support dd { margin-top:4px; font-size:15px; }
.next { margin-top:24px; }
.next .btn { padding:12px 26px; font-size:15px; }
.movies { display:grid; gap:22px; }
.movies h3 { font-size:15px; margin-bottom:8px; }
figure { position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(7,90,141,.16); background:#0b1b2b; }
figure img, figure video { width:100%; height:100%; object-fit:cover; }
figure video { position:absolute; inset:0; object-fit:contain; background:#000; }
figure:not(.on) video { visibility:hidden; }
figure.on img, figure.on [data-play] { display:none; }
[data-play] { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(7,30,50,0) 55%, rgba(7,30,50,.18)); border:0; cursor:pointer; font:inherit; }
[data-play] .pill { display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--blue); font-weight:700; font-size:15px; padding:11px 22px 11px 14px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .2s; }
[data-play]:hover .pill, [data-play]:focus-visible .pill { transform:scale(1.05); }
/* キーボードの焦点＝ボタンは図いっぱいに広がり既定の枠は角で切れるので、真ん中の札に枠を付ける */
[data-play]:focus-visible { outline:none; }
[data-play]:focus-visible .pill { outline:3px solid var(--blue); outline-offset:3px; }
[data-play] .tri { width:30px; height:30px; border-radius:50%; background:linear-gradient(90deg, var(--blue), var(--blue2)); display:grid; place-items:center; }
[data-play] .tri::before { content:""; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
[data-play] .meta { font-weight:500; color:var(--soft); font-size:13px; }

/* ── 声のボタン（Growlia の LP と同じ形） ── */
.voices { margin-top:22px; display:grid; gap:8px; }
.vlabel { font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.04em; }
.vlabel span { margin-left:10px; font-weight:500; color:var(--soft); }
.voice { display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 18px 10px 10px; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.voice:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(7,90,141,.12); }
.voice:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.voice i { width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(90deg, var(--blue), var(--blue2)); }
.voice i::after { content:""; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.voice[aria-pressed="true"] i::after { border:0; margin:0; width:3px; height:13px; background:#fff; box-shadow:-5px 0 #fff, 5px 0 #fff; }
.voice .vt { display:flex; flex-direction:column; line-height:1.55; }
.voice b { font-weight:500; font-size:15px; }
.voice small { font-size:13px; color:var(--soft); }

/* ── 作り方 ── */
#how { padding-block:clamp(72px, 9vw, 128px); }
#how h2 { text-align:center; font-size:clamp(22px, 3.4vw, 36px); }
.steps { margin-top:clamp(32px, 4vw, 48px); display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; list-style:none; counter-reset:s; }
.steps li { background:var(--bg2); border-radius:16px; padding:26px 26px 28px; counter-increment:s; }
.steps li::before { content:"0" counter(s); display:block; font-size:28px; font-weight:900; color:#9cc7e4; line-height:1; }
.steps h3 { margin-top:12px; font-size:19px; }
.steps p { margin-top:8px; font-size:15px; color:var(--soft); }

/* ── 締め ── */
.end { background:linear-gradient(120deg, var(--blue), #0b6aa5 60%, var(--blue2)); color:#fff; text-align:center; padding-block:clamp(64px, 8vw, 104px); }
.end h2 { color:#fff; font-size:clamp(24px, 3.6vw, 38px); }
.end p { margin-top:10px; color:#fff; }
.end .btn { margin-top:28px; }
footer { padding:28px 0; text-align:center; font-size:13px; color:var(--soft); }

@media (max-width: 860px) {
  #products article .wrap, article:nth-of-type(even) .wrap { grid-template-columns:1fr; }
  #products article:nth-of-type(even) .text { order:0; }
  .steps { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  header .acts { gap:6px; }
  header .nav { display:none; }
  .hero-link { display:block; }
  header .btn, header .btn.runner { padding:7px 12px; font-size:13px; }
  header .co { font-size:15px; }
  .tiles { grid-template-columns:repeat(2, 1fr); }
  .tiles img:nth-child(odd), .tiles img:nth-child(3) { transform:none; }
  .tiles img:nth-child(5) { grid-column:1 / -1; width:calc(50% - 5px); justify-self:center; }
  header .co { font-size:15px; }
}
/* 幅420未満＝会社名とボタン2つが1行に入りきらないので「遊ぶ」だけにする */
@media (max-width: 419px) { header .runner .wide { display:none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* ── 製品のロゴ（ロゴがある製品だけ・見出しの上に小さく） ── */
img.logo { height:28px; width:auto; margin-top:16px; }
img.logo + h2 { margin-top:8px; }

/* ── 受託開発の実績（製品のページの3件・実績のページの12件で同じ形） ── */
#works { padding-block:clamp(72px, 9vw, 128px); background:var(--bg2); }
#works .lead { text-align:center; }
.works { margin-top:clamp(28px, 4vw, 44px); display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:18px; }
.work { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; }
.work .ind { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.work .ind span { font-size:13px; font-weight:700; color:var(--blue); background:#e3eff8; padding:2px 12px; border-radius:999px; }
.work .ind b { font-size:13px; font-weight:700; color:var(--ink); }
.work h3 { font-size:18px; line-height:1.55; }
.work p { font-size:15px; color:var(--soft); }
.work ul { list-style:none; display:grid; gap:6px; margin-top:4px; }
.work li { font-size:14px; padding:8px 12px; background:var(--bg2); border-radius:8px; display:flex; flex-wrap:wrap; column-gap:12px; row-gap:2px; align-items:baseline; }
.work li span { flex:1 1 14em; min-width:0; overflow-wrap:anywhere; }
.work li em { font-style:normal; font-weight:700; color:var(--blue); white-space:nowrap; margin-left:auto; }
/* 処理の規模（削減時間とは別）＝色を変えて区別する */
.work li em.scale { color:var(--soft); font-weight:500; }
/* 実績の一覧の最後の「他、多数」 */
.work-more { grid-column:1 / -1; text-align:center; font-size:18px; font-weight:700; color:var(--blue); padding:20px 0 4px; }
.page-works .works { grid-template-columns:repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.page-works .hero { padding-bottom:clamp(40px, 5vw, 64px); }
.page-works #works { padding-top:0; background:none; }
.page-works .works { margin-top:0; }