/*
 * カツプロの使い方だけの部品（2026-10-06）。base.css（ひな形）のあとに読む。
 * 文字はすべて15px以上（カツプロ全サービスの決まり・UIUX 決定45）。
 */

/* 共通ヘッダーが上に貼りつくので、ページ内のリンク（#svc-…）で飛んだ先が隠れないように */
[id] { scroll-margin-top: 116px; }

/* サービスの画像（アイコン）を写真の代わりに使うときは、切り抜かずに淡い地に収める */
img.is-icon { object-fit: contain !important; background: #f3f6ff; padding: 12%; }
.pick img.is-icon { padding: 18%; background: #e8efff; }

/* トップの特集の並び。記事が5本そろうまでは本数に合わせて組む */
.picks__inner--n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.picks__inner--n2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.picks__inner--n3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); }
.picks__inner--n4 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.picks__inner--n1 .pick--main, .picks__inner--n2 .pick--main { grid-row: auto; }
.picks__inner--n4 .pick--main { grid-row: span 3; }
@media (max-width: 760px) {
  .picks__inner--n1, .picks__inner--n2, .picks__inner--n3, .picks__inner--n4 { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .picks__inner--n2 .pick:not(.pick--main) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .picks__inner--n4 .pick--main { grid-row: auto; }
}

.lead-intro { margin: 0 0 32px; font-size: 16px; line-height: 1.9; }
.lead-intro a, .nart a, .svc-sec__soon a, .qa__more a, .side-link { color: var(--rose); }
.lead-intro strong { color: var(--text-strong); }

/* よく読まれている（順位だけ。数字は出さない） */
.rank { list-style: none; margin: 0; padding: 0; }
.rank li { border-bottom: 1px solid var(--line); }
.rank a { display: flex; gap: 14px; align-items: baseline; padding: 12px 2px; text-decoration: none; color: var(--text-strong); }
.rank__no { flex: none; width: 1.6em; font-family: var(--latin); font-weight: 700; font-size: 20px; color: var(--rose); text-align: center; }
.rank__title { font-size: 15px; line-height: 1.7; }
.rank a:hover .rank__title { text-decoration: underline; }
.rank--side .rank__no { font-size: 17px; }

/* 用途から探す（用途5つ×サービス＋やりたいこと特集）。色は共通ヘッダーのパネルと同じ（UIUX 決定49） */
.usegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.use { --c: #0055ff; --bg2: #f3f6ff; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 8px; padding: 14px 16px 10px; background: linear-gradient(var(--bg2), #fff 80px); min-width: 0; }
.use#use-site { --c: #0f766e; --bg2: #effaf8; }
.use#use-check { --c: #b91c1c; --bg2: #fdf2f2; }
.use#use-sns { --c: #be185d; --bg2: #fdf2f7; }
.use#use-work { --c: #a16207; --bg2: #fdf8ec; }
.use#use-feature { --c: #6d28d9; --bg2: #f6f2fe; }
.use__head { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 17px; color: var(--c); }
.use__head .ico { margin-top: 0; }
.use__more { margin-left: auto; font-size: 15px; font-weight: 400; color: var(--text-sub); white-space: nowrap; }
.use__head:hover .use__more { color: var(--c); text-decoration: underline; }
.use__svcs { list-style: none; margin: 10px 0 0; padding: 0; }
.use__svcs a { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text-strong); font-size: 15px; line-height: 1.5; }
.use__svcs img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.use__svcs em { margin-left: auto; flex: none; font-style: normal; font-size: 15px; color: var(--text-sub); }
.use__svcs a:hover span { text-decoration: underline; }
.use__desc { margin: 10px 0 6px; font-size: 15px; line-height: 1.8; }
@media (max-width: 760px) { .usegrid { grid-template-columns: 1fr; } }

/* カツプロへの帯（写真の代わりに青の地） */
.brandband { background: linear-gradient(120deg, #0055ff 0%, #0b2a7a 100%); border-radius: 8px; }
.brandband__text { position: static; padding: 36px 8%; }
.brandband__quote { font-size: 24px; }
.brandband__sub { font-size: 15px; max-width: 34em; }
.brandband__btn { align-self: flex-start; margin-top: 16px; padding: 8px 20px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 99px; font-weight: 700; font-size: 15px; }
.brandband:hover .brandband__btn { background: rgba(255, 255, 255, .15); }
@media (max-width: 760px) { .brandband__quote { font-size: 20px; } .brandband__text { padding: 28px 20px; } }

/* サービスの箱（記事の頭・あわせて使う・用途のページ） */
.svc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin: 0 0 12px; }
.svc--big { grid-template-columns: 96px minmax(0, 1fr); border-color: #c9d8ff; background: #f8faff; }
.svc__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; background: #fff; }
.svc__name { margin: 0 !important; font-weight: 700; font-size: 17px; color: var(--text-strong); line-height: 1.5; }
.svc__short { margin: 4px 0 0 !important; font-size: 15px; line-height: 1.7; }
.svc__open { display: inline-block; margin-top: 8px; padding: 6px 16px; border-radius: 99px; background: var(--rose); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; }
.svc__open:hover { background: #0044cc; }
.who { list-style: none; margin: 8px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; }
.who__item { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 15px; line-height: 1.5; }
.who__item .kps-b { flex: none; }
.svc-wrap { margin: 0 0 2em; }
.svc-wrap__label { margin: 0 0 8px !important; font-weight: 700; font-size: 15px; color: var(--text-sub); }
@media (max-width: 480px) {
  .svc, .svc--big { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; }
}

/* 使い方の動画（音なし・繰り返し・自動再生）。スマホの縦長の動画は画面の高さに収める */
.gvideo { margin: 0 0 1.6em; }
.gvideo video { display: block; width: 100%; height: auto; max-height: 78vh; margin: 0 auto; background: #0b1f4d; border-radius: 8px; border: 1px solid var(--line); }
@media (max-width: 600px) { .gvideo video { width: auto; max-width: 100%; } }
.gvideo figcaption { margin-top: 6px; font-size: 15px; color: var(--text-sub); text-align: center; }

/* 手順（番号つき・本物の画面つき） */
.mag-src .mp-flow ol.steps { list-style: none; counter-reset: st; padding: 0; }
.mag-src .mp-flow ol.steps > li { counter-increment: st; position: relative; padding: 0 0 0 2.4em; margin: 0 0 1.8em; }
.mag-src .mp-flow ol.steps > li::before { content: counter(st); position: absolute; left: 0; top: .1em; width: 1.7em; height: 1.7em; border-radius: 99px; background: var(--rose); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; line-height: 1; }
.mag-src .mp-flow ol.steps img { margin-top: 10px; width: 100%; border: 1px solid var(--line); border-radius: 6px; }
.open-tool a { display: inline-block; padding: 10px 22px; border-radius: 99px; background: var(--rose); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.open-tool a:hover { background: #0044cc; }
.mag-src .qa__more { margin-top: 16px !important; font-size: 15px; }
.mag-src > .mp-flow--with, .mag-src > .mp-flow--src { margin-top: 56px; }
.mag-src .mp-flow strong { background: linear-gradient(transparent 62%, rgba(0, 85, 255, .14) 62%); }

/* 一覧（用途のページ・関連記事）。写真は画面の写しなので横長 16:10 */
.rel { grid-template-columns: 160px 1fr; }
.rel__img { width: 160px; height: 100px; border-radius: 6px; }
.page__body .rel { grid-template-columns: calc(var(--u) * 28) 1fr; }
.page__body .rel__img { aspect-ratio: 16 / 10; }
@media (max-width: 760px) {
  .rel { grid-template-columns: 112px 1fr; }
  .rel__img { width: 112px; height: 70px; }
}
.list-head__kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 15px; color: var(--rose); font-weight: 700; }
.list-head__kicker .ico { margin-top: 0; }
.list-head h1 { font-size: 24px; }
.list-head p { font-size: 15px; }
.svc-jump { max-width: var(--col); margin: 0 auto 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-jump a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-size: 15px; color: var(--text-strong); background: #fff; }
.svc-jump a:hover { border-color: var(--rose); color: var(--rose); }
.svc-sec { max-width: var(--col); margin: 0 auto 36px; }
.svc-sec .rels { margin-top: 4px; }
.svc-sec__soon { max-width: var(--col); margin: 0 auto; padding: 12px 16px; background: var(--gray); border-radius: 8px; font-size: 15px; line-height: 1.8; }
.svc-sec__soon span { display: inline-block; margin-right: 8px; padding: 0 10px; border-radius: 99px; background: #e5e7eb; font-weight: 700; color: var(--text-sub); }
.block--others { margin-top: 56px; }

/* 読みもの（このサイトについて・計測について） */
.nart ol, .nart ul { padding-left: 1.4em; margin: 0 0 1.4em; }
.nart code { background: var(--gray); padding: 0 .3em; border-radius: 4px; }

/* 足の上段の全記事の一覧 */
.kps-foot .foot-arts { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* 2段組みの幅（UIUX 決定5＝中身は最大1400px・記事の本文は読みやすい幅）。サイドバーの分だけ広げた */
.layout { width: min(1180px, calc(100% - 48px)); }
@media (max-width: 1023px) { .layout { width: min(820px, calc(100% - 32px)); } }
.picks__inner { width: min(1180px, calc(100% - 48px)); }
@media (max-width: 760px) { .picks__inner { width: calc(100% - 32px); } }

/* 「雑誌で読む」のボタンの本のアイコン（ひな形では頭の部品と同じ指定に書いてあった） */
.mag-switch__btn svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }

/* 記事の表紙の写真は画面の写し（1024×640）なので、正方形に切らず 16:10 のまま */
.mag-src .cover__img { aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 8px; }

/* 共通ヘッダー・フッターの中身の幅を、このサイトの2段組み（1180px）の端にそろえる（本体は 1184px にそろえている） */
.kps-head, .kps-foot { --kps-max: 1228px; }

/* 動画のある記事は、縦スクロールでは表紙の写真（＝動画の最初の画面）を出さない。同じ画面が2回続くため。雑誌の誌面と一覧・OGP では使う */
.mag-src .mp--cover.has-video .cover__img { display: none; }

/* メインビジュアル＝3列×2段の6枚（2026-10-06 カツ「6記事くらい（3カラム）が並ぶ感じで」）。スマホは2列 */
.picks__inner--grid { height: auto; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 14px; }
.picks__inner--grid .pick { aspect-ratio: 16 / 10; }
.picks__inner--grid .pick__title { font-size: 17px; }
.pick--soon::after { background: linear-gradient(to top, rgba(12, 18, 26, .85) 0%, rgba(12, 18, 26, .45) 60%, rgba(12, 18, 26, .25) 100%); }
.pick--soon .pick__cat { border-style: dashed; }
@media (max-width: 760px) {
  .picks__inner--grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .picks__inner--grid .pick { aspect-ratio: 4 / 3; }
  .picks__inner--grid .pick__title { font-size: 15px; }
}