/* 下層ページ（コラム一覧・記事）だけが読むスタイル。トップは site.css のみ */

/* =====================================================
   下層ページ共通：見出し帯と水色の地
   ===================================================== */
.page-surface {
  min-height: 60vh;
  padding: 72px 0 0;
  background: var(--sky);
}

.page-head { margin-bottom: 34px; }

.page-lead {
  margin: -6px 0 28px;
  color: #344866;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .04em;
}

.page-surface .quick-links { padding: 84px 0 82px; }

/* カテゴリの札（紺の角丸） */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}

/* =====================================================
   コラム一覧：横長のカード
   ===================================================== */
.column-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.column-filter button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(14, 35, 71, .32);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.column-filter button:hover { border-color: var(--blue); }

.column-filter button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.post-list {
  display: grid;
  gap: 20px;
}

.post-row[hidden] { display: none; }

.post-row > a {
  display: grid;
  grid-template-columns: 300px 1fr;
  background: #fff;
  transition: box-shadow .35s ease;
}

.post-row > a:hover { box-shadow: 0 10px 26px rgba(14, 35, 71, .1); }

.post-row__image {
  aspect-ratio: 1.45;
  overflow: hidden;
  background: #d5e9ee;
}

.post-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.post-row > a:hover img { transform: scale(1.055); }

.post-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 22px 30px;
}

.post-row__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: #344866;
  font-size: 13px;
  letter-spacing: .04em;
}

.post-row__title {
  margin: 0 0 10px;
  color: #122442;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.6;
}

.post-row__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #344866;
  font-size: 14px;
  line-height: 1.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-empty {
  margin: 0;
  padding: 40px 0;
  color: #344866;
  font-size: 15px;
  text-align: center;
}

/* コラム一覧のページ送り（‹ 1 2 ›） */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 36px 0 0;
}

.pager[hidden] { display: none; }

.pager__item {
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid rgba(14, 35, 71, .32);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.pager__item:hover:not(:disabled) { border-color: var(--blue); }

.pager__item[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.pager__item--arrow { font-size: 18px; }

.pager__item:disabled {
  cursor: default;
  opacity: .35;
}

/* =====================================================
   コラム記事
   ===================================================== */
.post {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 60px 72px 56px;
  background: #fff;
}

.post-header { margin-bottom: 30px; }

.post-date {
  display: block;
  margin-bottom: 14px;
  color: #344866;
  font-size: 13px;
  letter-spacing: .06em;
}

.post-title {
  margin: 16px 0 10px;
  font-size: clamp(24px, 2.3vw, 30px);
  letter-spacing: .04em;
  line-height: 1.6;
}

/* 題と副題は文節の切れ目（<wbr>）でだけ改行し、行の長さをそろえる（2026-11-01 本人「タイトルの改行気になる」。
   スマホで「変えるなら」の「ら」、「方法」の「法」だけが次の行に落ちていた）。
   keep-all で文字の間の改行を止め、<wbr> を置いた所だけで折る。入りきらないときだけ anywhere で折る */
.post-title,
.post-subtitle {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* かっこの後ろは keep-all でも折れる（Chrome で「売上金額だけ」の後ろが割れた）。かっこを含むまとまりは <span class="nw"> で包む */
.post-title .nw,
.post-subtitle .nw { white-space: nowrap; }

@media (max-width: 380px) {
  .page-head .section-sub--split .nw { white-space: normal; }   /* 下の 760px 以下の nowrap より強くする */
}

/* 記事の題は改行しない（2026-11-02 本人「改行しない設定でいい」）。1行に入らない幅では pages.js が字を小さくして収める */
.post-title { white-space: nowrap; }

.post-subtitle {
  margin: 0 0 20px;
  color: #344866;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.8;
}

.post-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #344866;
  font-size: 13px;
  letter-spacing: .04em;
}

.share {
  display: flex;
  gap: 8px;
}

.share a,
.share button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease;
}

.share a:hover,
.share button:hover { background: var(--blue); }

.post-eyecatch {
  margin: 0 0 36px;
  aspect-ratio: 1.5;
  overflow: hidden;
  background: #d5e9ee;
}

.post-eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文 */
.post-body {
  font-size: 16px;
  letter-spacing: .04em;
  line-height: 2;
}

.post-body p { margin: 0 0 1.6em; }

.post-body h2 {
  margin: 2.6em 0 1em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.6;
}

.post-body h3 {
  margin: 2em 0 .8em;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
}

.post-body a {
  color: #1a6fa3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* step-badges:start（tools/step_badges.py が書く。手で直さない） */
/* 進め方の手順（番号つき）。丸と数字を1枚の SVG にして、どの端末でも数字が丸の真ん中に来るようにする
   （2026-10-31 本人「◯と1を別描画にしてるからでは？」。文字で重ねると iPhone で数字がずれた） */
.post-body > ol {
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
}
.post-body > ol li {
  position: relative;
  margin-bottom: .7em;
  padding-left: 2.4em;
  line-height: 1.85;
}
.post-body > ol li::before {
  content: "";
  position: absolute;
  top: calc((1.85em - 23px) / 2);  /* 1行目の高さの真ん中 */
  left: 0;
  width: 23px;
  height: 23px;
  background: no-repeat center / 100% 100%;
}
.post-body > ol li:nth-child(1)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M11.628406605172726 17.75V8.09661473936489Q11.097849385280576 8.427351707609347 10.022954238486086 8.778759736369084L9.74044974477728 7.476482923906531Q11.008274789714367 7.042390653085681 12.076279583003762 6.25H13.220078264849178V17.75Z%22/></svg>"); }
.post-body > ol li:nth-child(2)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M9.262771586955965 17.839574595566205V16.344367884961052Q9.469482192108751 15.262582384661473 10.02071047251618 14.2703714799281Q10.461693096842124 13.491761533852605 11.447013648070405 12.299730377471539L11.715737434769027 11.975883762732174Q12.46678596682415 11.059466746554822 12.694167632492213 10.64604553624925Q12.990452833211208 10.115488316357098 12.990452833211208 9.274865188735768Q12.990452833211208 8.65473337327741 12.790632581563514 8.241312162971838Q12.480566673834335 7.6005092869982 11.812202383840326 7.6005092869982Q11.240303042917619 7.6005092869982 10.813101125601861 8.048382264829238Q10.489254510862496 8.39289994008388 10.165407896123131 9.109496704613539L9.090512749328642 8.234421809466745Q9.435030424583287 7.4075793888556 10.000039412000902 6.897693229478728Q10.819991479106953 6.160425404433791 11.887996272396348 6.160425404433791Q13.25917661990983 6.160425404433791 14.030896212480231 7.180197723187536Q14.65102802793859 7.993259436788495 14.65102802793859 9.20596165368484Q14.65102802793859 10.404883163571 14.07223833351079 11.321300179748352Q13.899979495883468 11.596914319952067 13.066246721767229 12.575344517675253Q12.962891419190836 12.699370880766924 12.783742228058422 12.919862192929898L12.446114906308871 13.326393049730376Q11.695066374253749 14.242810065907728 11.295425870958361 15.069652486518873Q10.923346781683346 15.848262432594368 10.909566074673162 16.247902935889755H14.719931562989519V17.839574595566205Z%22/></svg>"); }
.post-body > ol li:nth-child(3)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M10.128854842710016 11.000898741761535H11.127956100948483Q11.892785340013791 11.000898741761535 12.27864513629899 10.491012582384663Q12.719627760624935 9.912222887956862 12.719627760624935 9.01647693229479Q12.719627760624935 8.417016177351709 12.437123266916128 7.989814260035951Q12.065044177641113 7.424805272618336 11.424241301667475 7.424805272618336Q10.494043578479939 7.424805272618336 9.708543278899352 8.56171360095866L8.81968767674237 7.521270221689637Q9.239999240553036 6.859796285200721 9.949705651577602 6.47393648891552Q10.728315597653097 6.03984421809467 11.55515801826424 6.03984421809467Q12.499136448461964 6.03984421809467 13.195062152476343 6.529059316956262Q14.359531894837039 7.335230677052129 14.359531894837039 8.988915518274418Q14.359531894837039 10.125823846614741 13.794522907419424 10.807968843618935Q13.250184980517087 11.462552426602759 12.44401362042122 11.669263031755545V11.724385859796287Q14.559352146484732 12.23427201917316 14.559352146484732 14.632115038945479Q14.559352146484732 16.299580587177953 13.553360534741174 17.25733972438586Q12.816092709696235 17.960155781905335 11.451802715687847 17.960155781905335Q9.722323985909537 17.960155781905335 8.57852530406412 16.237567405632117L9.591407269312773 15.183343319352907Q9.97037671209288 15.837926902336731 10.487153224974845 16.182444577591376Q10.969477970331347 16.50629119233074 11.451802715687847 16.50629119233074Q12.264864429288806 16.50629119233074 12.650724225574006 15.817255841821453Q12.905667305262444 15.355602156980229 12.905667305262444 14.604553624925106Q12.905667305262444 13.522768124625527 12.485355741451778 13.019772318753747Q11.982359935579998 12.42720191731576 11.100394686928112 12.42720191731576H10.128854842710016Z%22/></svg>"); }
.post-body > ol li:nth-child(4)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M12.075985896807584 6.25H13.908819929162288V13.843169562612344H15.011276489977147V15.269472738166568H13.908819929162288V17.75H12.386051804536764V15.269472738166568H8.520563488179663V13.815608148591972ZM12.454955339587693 13.843169562612344V11.259286998202517Q12.454955339587693 9.94322947872978 12.56520099566918 7.862342720191732H12.510078167628436L12.4480649860826 8.055272618334332Q11.965740240726099 9.578040742959857 11.621222565471456 10.301527860994607L9.933085956723701 13.843169562612344Z%22/></svg>"); }
.post-body > ol li:nth-child(5)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M9.749936702448272 6.156980227681245H14.394034964880866V7.624625524266028H11.16245917099231L10.962638919344617 11.01467944877172H11.01776174738536Q11.444963664701119 10.24985020970641 12.31314820634282 10.24985020970641Q12.940170375306272 10.24985020970641 13.512069716228979 10.68394248052726Q14.766114054155882 11.648591971240265 14.766114054155882 13.963750748951469Q14.766114054155882 15.286698621929299 14.283789308799381 16.24445775913721Q13.94616198704983 16.912822049131215 13.408714413652586 17.319352905931694Q12.726569416648392 17.843019772318755 11.85838487500669 17.843019772318755Q10.376958871411723 17.843019772318755 9.2400505430714 16.3478130617136L10.087564024197823 15.21779508687837Q10.92129679831406 16.361593768723786 11.844604167996504 16.361593768723786Q12.36138068087847 16.361593768723786 12.705898356133114 15.844817255841821Q13.160661687469243 15.176452965847814 13.160661687469243 13.956860395446375Q13.160661687469243 12.98532055122828 12.891937900770621 12.344517675254643Q12.561200932526162 11.59346914319952 11.968630531088177 11.59346914319952Q11.114226696456662 11.59346914319952 10.77659937470711 12.861294188136608L9.439870794719093 12.606351108448173Z%22/></svg>"); }
.post-body > ol li:nth-child(6)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M10.768576450302232 11.658927501497901Q11.037300237000855 11.0801378070701 11.471392507821704 10.74251048532055Q11.926155839157834 10.397992810065904 12.449822705544893 10.397992810065904Q13.47648537780373 10.397992810065904 14.179301435323204 11.314409826243256Q14.944130674388513 12.313511084481725 14.944130674388513 14.042989814260034Q14.944130674388513 15.875823846614738 14.213753202848668 16.874925104853205Q13.40069148924771 17.977381665668062 12.215550686371735 17.977381665668062Q10.727234329271676 17.977381665668062 9.879720848145253 16.275464349910123Q9.27336973969708 15.0420910724985 9.27336973969708 12.596015578190531Q9.27336973969708 10.356650689035348 10.479181603088332 8.496255242660274Q11.540296042872635 6.870131815458356 13.207761591105108 6.022618334331932L13.958810123160232 7.1801977231875345Q12.622081543172214 7.86234272019173 11.684993466479584 9.219742360695024Q10.892602813393903 10.36354104254044 10.727234329271676 11.658927501497901ZM12.222441039876829 11.624475733972437Q11.657432052459214 11.624475733972437 11.326695084214755 12.368633912522466Q10.995958115970298 13.112792091072496 10.995958115970298 13.946524865188735Q10.995958115970298 14.787147992810064 11.29224331668929 15.669113241461952Q11.5747478103981 16.523517076093466 12.208660332866643 16.523517076093466Q12.75299825976898 16.523517076093466 13.04239310698288 15.800029958058715Q13.338678307701873 15.048981426003593 13.338678307701873 14.029209107249848Q13.338678307701873 12.80961653684841 12.973489571931951 12.141252246854402Q12.690985078223143 11.624475733972437 12.222441039876829 11.624475733972437Z%22/></svg>"); }
.post-body > ol li:nth-child(7)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M9.068479567829522 6.284451767525464H14.78058262355151V7.552276812462553Q14.063985859021852 9.557369682444579 13.347389094492193 12.795835829838229Q12.7617090465593 15.414170161773518 12.410301017799563 17.715548232474536H10.804848651112925Q11.438761173581469 13.636458957459558 13.071774954288479 7.848562013181546H10.591247692455045V10.253295386458959H9.068479567829522Z%22/></svg>"); }
.post-body > ol li:nth-child(8)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M10.686136312354284 11.844967046135409Q9.321846318345896 10.7907429598562 9.321846318345896 9.075044937088075Q9.321846318345896 7.883013780707008 9.935087780299162 7.042390653085679Q10.69991701936447 5.98816656680647 11.988413124816837 5.98816656680647Q13.263128523259017 5.98816656680647 14.021067408819233 6.97348711803475Q14.654979931287777 7.786548831635708 14.654979931287777 8.96479928100659Q14.654979931287777 10.19128220491312 14.076190236859976 10.942330736968243Q13.738562915110425 11.383313361294187 13.187334634702996 11.748502097064108V11.789844218094666Q14.896142303966027 12.92675254643499 14.896142303966027 14.862941881366087Q14.896142303966027 16.178999400838826 14.179545539436369 17.03340323547034Q13.359593472330317 18.011833433193527 11.99530347832193 18.011833433193527Q10.610342423798262 18.011833433193527 9.817951770712583 17.067855002995806Q9.122026066698202 16.234122228879567 9.122026066698202 14.911174355901736Q9.122026066698202 13.078340323547032 10.686136312354284 11.900089874176153ZM12.002193831827022 11.169712402636307Q12.456957163163151 10.859646494907128 12.753242363882144 10.349760335530256Q13.07708897862151 9.784751348112641 13.07708897862151 9.109496704613539Q13.07708897862151 8.323996405032952 12.794584484912702 7.800329538645894Q12.484518577183524 7.228430197723187 11.988413124816837 7.228430197723187Q11.561211207501078 7.228430197723187 11.271816360287177 7.676303175554223Q10.927298685032534 8.199970041941281 10.927298685032534 9.081935290593169Q10.927298685032534 9.846764529658476 11.237364592761713 10.370431396045536Q11.485417318945057 10.7907429598562 11.885057822240443 11.087028160575194Q11.99530347832193 11.176602756141401 12.002193831827022 11.169712402636307ZM11.947071003786279 12.527112043139603Q10.775710907920491 13.264379868184541 10.775710907920491 14.794038346315158Q10.775710907920491 15.517525464349909 11.023763634103835 15.99985020970641Q11.354500602348292 16.654433792690234 11.99530347832193 16.654433792690234Q12.546531758729358 16.654433792690234 12.891049433984001 16.123876572798082Q13.228676755733552 15.600209706411023 13.228676755733552 14.759586578789694Q13.228676755733552 14.036099460754942 12.877268726973817 13.443529059316955Q12.580983526254823 12.940533253445174 12.140000901928879 12.644248052726182Q11.960851710796465 12.513331336129419 11.947071003786279 12.527112043139603Z%22/></svg>"); }
.post-body > ol li:nth-child(9)::before { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2212%22 fill=%22%230e2347%22/><path fill=%22%23fff%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linejoin=%22round%22 d=%22M13.137429089936036 12.633912522468544Q13.013402726844365 12.98532055122828 12.792911414681393 13.219592570401439Q12.269244548294335 13.763930497303773 11.51130566273412 13.763930497303773Q10.491533343980375 13.763930497303773 9.816278700481273 12.792390653085679Q9.08590122894143 11.73816656680647 9.08590122894143 10.008687837028159Q9.08590122894143 8.27920910724985 9.774936579450715 7.142300778909526Q10.519094758000746 5.929598562013181 11.814481216958205 5.929598562013181Q13.178771210966595 5.929598562013181 13.929819743021717 7.266327142001197Q14.673977921571748 8.575494307968842 14.673977921571748 11.324745356500898Q14.673977921571748 14.563211503894546 13.599082774777258 16.051527860994607Q12.586200809528606 17.45026962252846 10.31238415284796 18.070401437986817L9.595787388318302 16.75434391851408Q11.373498592632263 16.37537447573397 12.193450659738314 15.417615338526064Q13.054744847874922 14.411623726782505 13.192551917976779 12.633912522468544ZM11.807590863453113 7.355901737567404Q11.256362583045682 7.355901737567404 11.015200210367432 7.989814260035949Q10.691353595628067 8.823547034152186 10.691353595628067 9.946674655482324Q10.691353595628067 11.01467944877172 11.001419503357248 11.745056920311562Q11.270143290055868 12.392750149790292 11.773139095927649 12.392750149790292Q12.296805962314707 12.392750149790292 12.627542930559164 11.662372678250449Q12.965170252308715 10.904433792690233 12.965170252308715 9.981126423007789Q12.965170252308715 8.85799880167765 12.627542930559164 8.044937088076692Q12.345038436850356 7.355901737567404 11.807590863453113 7.355901737567404Z%22/></svg>"); }
/* step-badges:end */

.post-body figure { margin: 2em 0; }

/* 本文の図（動画のために書いた図の最後のコマなど）。width/height は比率の目安として付けるので、高さは幅に合わせる（2026-11-01、スマホで縦に伸びた） */
.post-body figure > img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.post-body figcaption {
  margin-top: 10px;
  color: #53667b;
  font-size: 13px;
  line-height: 1.7;
}

/* この記事のポイント */
.post-points {
  margin: 0 0 2.4em;
  padding: 20px 24px;
  background: var(--sky);
}

.post-points__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.post-points ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.9;
}

/* コラムの解説動画（YouTube）：16:9で幅いっぱい */
.post-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8eef3;
}

.post-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* コラムの出典 */
.post-sources {
  margin-top: 3em;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: #53667b;
  font-size: 13px;
  line-height: 1.8;
}

.post-sources__title {
  margin: 0 0 6px !important;
  font-weight: 800;
  letter-spacing: .1em;
}

.post-sources ul { margin: 0; padding-left: 1.2em; }

/* 流れの図（段階を矢印でつなぐ） */
.post-flow {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-flow li {
  position: relative;
  flex: 1;
  padding: 14px 6px 12px;
  border: 1px solid rgba(14, 35, 71, .3);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.post-flow li + li { margin-left: 22px; }

.post-flow li + li::before {
  position: absolute;
  top: 50%;
  left: -17px;
  color: var(--blue);
  content: "›";
  font-size: 22px;
  font-weight: 400;
  line-height: 0;
}

.post-flow li::after {
  display: block;
  margin-top: 4px;
  color: #53667b;
  content: attr(data-note);
  font-size: 11px;
  font-weight: 400;
}

.post-flow li.is-stuck {
  border-color: var(--blue);
  background: #f2fafe;
}

/* 記事の終わり：筆者と共有 */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: #344866;
  font-size: 13px;
  line-height: 1.7;
}

.post-footer__author a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 関連する支援 */
.post-service {
  display: grid;
  grid-template-columns: 220px 1fr;
  width: min(760px, 100%);
  margin: 28px auto 0;
  background: #fff;
}

.post-service__image {
  overflow: hidden;
  background: #d4e9ee;
}

.post-service__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-service__body { padding: 24px 28px; }

.post-service__label {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.post-service__body h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
}

.post-service__body p:not(.post-service__label) {
  margin: 0 0 16px;
  color: #344866;
  font-size: 14px;
  line-height: 1.9;
}

.post-service .outline-button {
  min-width: 160px;
  min-height: 44px;
}

.related { padding-top: 76px; }

/* 一覧に戻る */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
}

.back-link .circle-arrow {
  width: 34px;
  height: 34px;
  transform: rotate(180deg);
}

.back-link:hover .circle-arrow { background-color: var(--blue); }

@media (max-width: 760px) {
  .page-surface { padding-top: 44px; }
  .page-head { margin-bottom: 22px; }

  /* 「人手不足解消／・業務効率化支援」の2行で折れる大きさにする（2026-11-02 本人「改行がキモい」）。
     WORKFORCE が 244px で残りは「画面の幅 − 280px」。2行目の8文字は字の大きさの約8.5倍の幅なので、そこから決める。
     11px を切るほど狭い画面（380px 以下）だけは、まとまりの中でも折れてよいことにする */
  .section-sub--split { font-size: clamp(11px, calc((100vw - 288px) / 8.6), 15px); }
  .section-sub--split .nw { white-space: nowrap; }
  .page-lead { font-size: 14px; }

  /* カテゴリは横にスクロールできる1列にする */
  .column-filter {
    flex-wrap: nowrap;
    margin: 0 -18px 20px;
    padding: 0 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .column-filter::-webkit-scrollbar { display: none; }

  .column-filter button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* 一覧：写真を左に小さく、タイトルと冒頭を右に */
  .post-list { gap: 12px; }

  .post-row > a {
    grid-template-columns: 34% 1fr;
    align-items: center;
  }

  .post-row__image { aspect-ratio: 1; }
  .post-row__body { padding: 10px 12px; }

  .post-row__meta {
    gap: 8px;
    margin-bottom: 5px;
    font-size: 11px;
  }

  .tag {
    min-height: 20px;
    padding: 0 8px;
    font-size: 10px;
  }

  .post-row__title {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.5;
  }

  .post-row__excerpt {
    font-size: 12px;
    line-height: 1.7;
    -webkit-line-clamp: 2;
  }

  /* 記事：白い紙を画面いっぱいにする */
  .page-surface--post { padding-top: 0; }

  .post {
    width: auto;
    margin: 0 -18px;
    padding: 30px 18px 36px;
  }

  .post-title { font-size: 23px; }
  .post-subtitle { font-size: 14px; }
  .post-eyecatch { margin: 0 -18px 28px; }

  .post-body {
    font-size: 15px;
    line-height: 1.95;
  }

  .post-body h2 { font-size: 18px; }
  .post-points { padding: 16px 18px; }

  .post-flow li {
    padding: 10px 2px 9px;
    font-size: 12px;
  }

  .post-flow li + li { margin-left: 16px; }
  .post-flow li + li::before { left: -13px; }
  .post-flow li::after { font-size: 10px; }

  .post-service {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .post-service__image { aspect-ratio: 2; }
  .post-service__body { padding: 20px 18px 24px; }
  .related { padding-top: 56px; }
}

/* =====================================================
   支援メニュー
   ===================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 左に文章、右に写真 */
.svc-split {
  display: grid;
  grid-template-columns: 1fr 42%;
  gap: 48px;
  align-items: start;
}

.svc-split__text p {
  margin: 0 0 1.4em;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2;
}

.svc-split__image {
  margin: 0;
  aspect-ratio: 1.3;
  overflow: hidden;
  background: #d4e9ee;
}

.svc-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-intro { margin-bottom: 72px; }

/* 相談の写真は2人が右側に写っているので右に寄せる */
.svc-intro .svc-split__image img { object-position: center; }

.svc-intro__label {
  margin-bottom: 10px !important;
  color: var(--blue);
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: .12em !important;
}

.svc-intro__title {
  margin-bottom: 18px !important;
  font-size: 21px !important;
  font-weight: 800;
  line-height: 1.6 !important;
}

/* 支援のかたちの図（屋根＝成長、柱＝3つの支援、土台＝伴走） */
.svc-diagram {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 32px;
  align-items: center;
  margin: 0;
  padding: 48px 56px;
  background: #fff;
}

.svc-diagram__name {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
}

.svc-diagram__sub {
  margin: 0;
  color: #53667b;
  font-size: 12px;
  letter-spacing: .06em;
}

.svc-diagram__house {
  display: grid;
  gap: 10px;
}

.svc-en {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.svc-diagram strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.5;
}

.svc-roof {
  padding: 34px 20% 16px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.svc-roof .svc-en { color: #8fd4f5; }

.svc-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 4%;
}

.svc-pillar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 132px;
  padding: 14px 8px;
  border: 1px solid rgba(14, 35, 71, .22);
  background: var(--sky);
  text-align: center;
  transition: background-color .3s ease, border-color .3s ease;
}

.svc-pillar:hover {
  border-color: var(--blue);
  background: #c9ebfa;
}

.svc-base {
  padding: 14px 12px;
  border: 1px solid rgba(14, 35, 71, .3);
  text-align: center;
}

/* 図の説明 */
.svc-points { padding: 44px 0 0; }

.svc-points h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.6;
}

.svc-points p {
  margin: 0 0 26px;
  color: #344866;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.9;
}

/* 支援ごとの節 */
.svc-line {
  padding-top: 76px;
  scroll-margin-top: 84px;
}

.svc-line__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.svc-line__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.4;
}

.svc-line__en {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.svc-line__label {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: .1em !important;
}

.svc-list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.svc-list li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid rgba(14, 35, 71, .12);
  font-size: 14px;
  line-height: 1.7;
}

.svc-list li::before {
  position: absolute;
  top: 18px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

/* 目指す姿 */
.svc-vision { padding-top: 96px; }

.svc-vision__image {
  margin: 0 0 30px;
  aspect-ratio: 2.3;
  overflow: hidden;
  background: #d4e9ee;
}

.svc-vision__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.svc-vision h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.6;
}

.svc-vision p {
  margin: 0 0 1.2em;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2;
}

@media (max-width: 760px) {
  .svc-split {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* スマホでは写真を先に見せる */
  .svc-split__image { order: -1; }
  .svc-split__text p { font-size: 14px; }
  .svc-intro { margin-bottom: 48px; }
  .svc-intro__title { font-size: 18px !important; }

  .svc-diagram {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0 -18px;
    padding: 30px 18px;
  }

  .svc-diagram__name { font-size: 17px; }
  .svc-diagram__name br { display: none; }
  .svc-roof { padding: 30px 14% 12px; }
  .svc-diagram strong { font-size: 13px; }
  .svc-en { font-size: 9px; letter-spacing: .1em; }

  .svc-pillars {
    gap: 6px;
    padding: 0;
  }

  .svc-pillar {
    min-height: 104px;
    padding: 10px 4px;
  }

  .svc-points h2 { font-size: 16px; }
  .svc-points p { font-size: 14px; }

  .svc-line {
    padding-top: 56px;
    scroll-margin-top: 68px;
  }

  .svc-line__title { font-size: 19px; }
  .svc-vision { padding-top: 64px; }
  .svc-vision__image { margin: 0 -18px 24px; aspect-ratio: 1.6; }
  .svc-vision h2 { font-size: 18px; }
  .svc-vision p { font-size: 14px; }
}

/* =====================================================
   サービスの個別ページ
   ===================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -36px 0 26px;
  color: #53667b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--blue); }

.svc-block { padding-top: 80px; }

.svc-block__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.svc-block__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.5;
}

/* お悩み：チェックつきの白い札 */
.svc-worries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-worries li {
  position: relative;
  padding: 16px 18px 16px 50px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.svc-worries li::before {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* チェックは丸の中に絵として描き、丸のちょうど真ん中に置く */
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6 9.4 3.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  content: "";
  transform: translateY(-50%);
}

/* 進め方：番号つきの段階を横に並べ、矢印でつなぐ */
.svc-steps {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 28px;
  background: #fff;
  list-style: none;
}

.svc-steps--4 { grid-template-columns: repeat(4, 1fr); }
.svc-steps--5 { grid-template-columns: repeat(5, 1fr); }

.svc-step {
  position: relative;
  padding: 18px 14px;
  border-top: 3px solid var(--ink);
  background: var(--sky);
}

.svc-step + .svc-step::before {
  position: absolute;
  top: 50%;
  left: -17px;
  color: var(--blue);
  content: "›";
  font-size: 24px;
  line-height: 0;
}

.svc-step:last-child { border-top-color: var(--blue); }

.svc-step__num {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.svc-step strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.svc-step p {
  margin: 0;
  color: #344866;
  font-size: 13px;
  line-height: 1.8;
}

/* 主な支援内容 */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.svc-card {
  padding: 24px 26px;
  border-left: 3px solid var(--blue);
  background: #fff;
}

.svc-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.6;
}

.svc-card p {
  margin: 0;
  color: #344866;
  font-size: 14px;
  line-height: 1.9;
}

/* 連携先 */
.svc-partner__box {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: center;
  padding: 34px 36px;
  background: #fff;
}

.svc-partner__logo img {
  width: 100%;
  height: auto;
}

.svc-partner__text p {
  margin: 0 0 1.2em;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2;
}

.svc-partner .outline-button::after { content: "↗"; font-size: 15px; }

/* AIを使った業務の代行 */
.svc-bpo__box {
  padding: 34px 36px;
  background: #fff;
}

.svc-bpo__lead,
.svc-bpo__note {
  margin: 0;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2;
}

.svc-bpo__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}

.svc-bpo__col {
  padding: 20px 22px;
  border-top: 3px solid var(--blue);
  background: #f3f9fd;
}

.svc-bpo__col--owner { border-top-color: var(--ink); }

.svc-bpo__col h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
}

.svc-bpo__col ul {
  margin: 0;
  padding-left: 1.2em;
}

.svc-bpo__col li {
  font-size: 15px;
  letter-spacing: .03em;
  line-height: 1.9;
}

.svc-bpo__note { color: #344866; font-weight: 700; }

/* よくある質問 */
.faq-list {
  display: grid;
  gap: 10px;
}

.faq {
  background: #fff;
}

.faq summary {
  position: relative;
  padding: 18px 54px 18px 52px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::before {
  position: absolute;
  top: 17px;
  left: 20px;
  color: var(--blue);
  content: "Q";
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.faq summary::after {
  position: absolute;
  top: 50%;
  right: 22px;
  content: "+";
  font-size: 22px;
  font-weight: 400;
  line-height: 0;
}

.faq[open] summary::after { content: "−"; }

.faq p {
  margin: 0;
  padding: 0 24px 20px 52px;
  color: #344866;
  font-size: 14px;
  line-height: 1.9;
}

/* ほかの支援 */
.svc-others {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.svc-other {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  align-items: center;
  padding-right: 18px;
  background: #fff;
  transition: box-shadow .35s ease;
}

.svc-other:hover { box-shadow: 0 10px 26px rgba(14, 35, 71, .1); }
.svc-other:hover .circle-arrow { background-color: var(--blue); }

.svc-other__image {
  display: block;
  aspect-ratio: 1.3;
  overflow: hidden;
}

.svc-other__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-other__body strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.svc-other .circle-arrow {
  width: 34px;
  height: 34px;
}

@media (max-width: 760px) {
  .breadcrumb { margin: -20px 0 18px; font-size: 11px; }
  .svc-block { padding-top: 56px; }
  .svc-block__title { font-size: 18px; }

  .svc-worries { grid-template-columns: 1fr; gap: 8px; }
  .svc-worries li { padding: 13px 14px 13px 46px; font-size: 14px; }
  .svc-worries li::before { left: 15px; }

  /* 進め方：縦に並べ、矢印を下向きにする */
  .svc-steps--4,
  .svc-steps--5 {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 -18px;
    padding: 22px 18px;
  }

  .svc-step + .svc-step::before {
    top: -12px;
    left: 50%;
    transform: rotate(90deg);
  }

  .svc-cards { grid-template-columns: 1fr; gap: 10px; }
  .svc-card { padding: 18px 18px; }
  .svc-card h3 { font-size: 16px; }

  .svc-partner__box {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
  }

  .svc-partner__logo { width: 200px; }
  .svc-partner__text p { font-size: 14px; }
  .svc-bpo__box { padding: 24px 18px; }
  .svc-bpo__cols { grid-template-columns: 1fr; }
  .svc-bpo__lead, .svc-bpo__note, .svc-bpo__col li { font-size: 14px; }

  .faq summary { padding: 15px 44px 15px 44px; font-size: 14px; }
  .faq summary::before { top: 14px; left: 16px; }
  .faq summary::after { right: 16px; }
  .faq p { padding: 0 16px 16px 44px; font-size: 13px; }

  .svc-others { grid-template-columns: 1fr; gap: 10px; }
  .svc-other { grid-template-columns: 96px 1fr auto; gap: 14px; padding-right: 14px; }
}

/* =====================================================
   お問い合わせフォーム
   ===================================================== */
.form-sheet {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 48px 56px 52px;
  border-top: 4px solid var(--ink);
  background: #fff;
}

.form-intro {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.form-intro__title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .05em;
}

.form-intro ul {
  margin: 0 0 14px;
  padding-left: 1.2em;
  color: #344866;
  font-size: 14px;
  line-height: 1.9;
}

.form-required-note {
  margin: 0;
  color: #53667b;
  font-size: 12px;
}

.req { color: #d0423b; font-weight: 800; }

.contact-form { display: grid; gap: 24px; }

/* display の指定より hidden（送信後に隠す）を優先する */
.contact-form[hidden],
.form-intro[hidden],
.form-done[hidden] { display: none; }

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > label,
.field legend {
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
}

.field legend { margin-bottom: 10px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(14, 35, 71, .3);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
}

.field textarea { resize: vertical; }

/* 選ぶ欄：ブラウザ任せの矢印をやめ、右に余白をとった矢印を描く */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 46px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230e2347' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center / 12px 8px no-repeat;
  cursor: pointer;
}

.field select.is-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5 11 6.5' fill='none' stroke='%230e2347' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(32, 167, 231, .25);
}

.field ::placeholder { color: #8a97a8; }

.choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid rgba(14, 35, 71, .2);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .2s ease, background-color .2s ease;
}

.choice:hover { border-color: var(--blue); }

.choice:has(input:checked) {
  border-color: var(--blue);
  background: #f2fafe;
}

.choice input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--ink);
}

.field--consent {
  padding: 18px 20px;
  background: var(--sky);
}

.consent-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.consent-text a { text-decoration: underline; text-underline-offset: 3px; }
.field--consent .choice { background: #fff; }

.form-status {
  min-height: 0;
  margin: 0;
  color: #d0423b;
  font-size: 13px;
}

.submit-button {
  justify-self: center;
  min-width: 260px;
  min-height: 56px;
  border: 0;
  border-radius: 28px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  transition: background-color .25s ease, transform .25s ease;
}

.submit-button:hover { background: var(--blue); transform: translateY(-2px); }
.submit-button:disabled { opacity: .6; cursor: wait; transform: none; }

.form-done { text-align: center; outline: none; }

.form-done__title {
  margin: 10px 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .05em;
}

.form-done p:not(.form-done__title) {
  margin: 0;
  color: #344866;
  font-size: 15px;
  line-height: 1.9;
}

.form-done .form-done__note { margin-top: 12px; color: #53667b; font-size: 13px; }

.page-bottom-space { height: 90px; }

.policy { margin-bottom: 0; }
.policy .post-body h2 { font-size: 18px; margin-top: 2em; }
.policy-date { margin-top: 2.4em !important; text-align: right; color: #53667b; font-size: 14px; }

@media (max-width: 760px) {
  .form-sheet {
    width: auto;
    margin: 0 -18px;
    padding: 30px 18px 36px;
  }

  .form-intro__title { font-size: 19px; }
  .form-intro ul { font-size: 13px; }
  .field-row,
  .choices { grid-template-columns: 1fr; }
  .field-row { gap: 24px; }
  .submit-button { width: 100%; min-width: 0; }
  .page-bottom-space { height: 60px; }
}

/* お問い合わせの種類：丸いタブから1つ選ぶ（中身はラジオボタン） */
.tab-choices {
  display: grid;
  gap: 10px;
}

.tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-choice {
  position: relative;
  cursor: pointer;
}

.tab-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tab-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(14, 35, 71, .32);
  border-radius: 20px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tab-choice:hover span { border-color: var(--blue); }

.tab-choice input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.tab-choice input:focus-visible + span {
  outline: 3px solid rgba(32, 167, 231, .6);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .tab-choice span {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* 同意のチェック：ブラウザ任せにせず、白い□に紺のレ点を自前で描く（iPhoneで黒い四角になり位置がずれるため） */
.choice input[type="checkbox"] {
  position: relative;
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  border: 2px solid rgba(14, 35, 71, .45);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.choice input[type="checkbox"]:checked {
  border-color: var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.choice input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(32, 167, 231, .6);
  outline-offset: 2px;
}

.field--consent .choice {
  gap: 12px;
  padding: 12px 16px;
}

/* コラムの検索窓 */
.column-search {
  position: relative;
  max-width: 520px;
  margin: 0 0 18px;
}

.column-search__input {
  width: 100%;
  min-height: 50px;
  padding: 0 56px 0 20px;
  border: 1px solid rgba(14, 35, 71, .3);
  border-radius: 25px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.column-search__input::placeholder { color: #8a97a8; font-size: 14px; }

.column-search__input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(32, 167, 231, .25);
}

.column-search__input::-webkit-search-cancel-button { cursor: pointer; }

.column-search__button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M12.6 12.6l4 4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  cursor: pointer;
  transition: background-color .2s ease;
}

.column-search__button:hover { background-color: var(--blue); }

.column-search--post { margin: 40px 0 0; }

.post-result {
  min-height: 0;
  margin: 0 0 12px;
  color: #344866;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.post-result:empty { display: none; }

@media (max-width: 760px) {
  .column-search { max-width: none; }
  .column-search__input { min-height: 46px; }
  .column-search__button { top: 3px; width: 40px; height: 40px; }
}

/* カテゴリの札は折り返さない。入りきらないときは日付を次の行へ回す */
.tag { white-space: nowrap; }
.post-row__meta { flex-wrap: wrap; row-gap: 4px; }

/* =====================================================
   プロフィール
   ===================================================== */
.prof-hero {
  position: relative;
  background: #fff;
}

.prof-hero__photo {
  margin: 0;
  aspect-ratio: 1.9;
  overflow: hidden;
  background: #dcefff;
}

.prof-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
}

.prof-hero__name {
  position: absolute;
  top: 50%;
  left: 7%;
  transform: translateY(-50%);
}

.prof-hero__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
}

.prof-hero__title span {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .1em;
}

.prof-hero__ja {
  margin: 0 0 8px;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
}

.prof-hero__en {
  margin: 0;
  color: #344866;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
}

.prof-message__body {
  padding: 36px 44px;
  background: #fff;
}

.prof-message__body p {
  margin: 0 0 1.4em;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2.1;
}

.prof-message__body p:last-child { margin-bottom: 0; }

.prof-message__lead {
  font-size: 21px !important;
  font-weight: 800;
  line-height: 1.6 !important;
}

.prof-strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.prof-strength {
  padding: 26px 24px;
  border-top: 3px solid var(--ink);
  background: #fff;
}

.prof-strength__num {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
}

.prof-strength h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
}

.prof-strength p {
  margin: 0;
  color: #344866;
  font-size: 14px;
  line-height: 1.9;
}

/* 経歴：縦の線でつないだ年表 */
.prof-career {
  margin: 0;
  padding: 30px 36px;
  background: #fff;
  list-style: none;
}

.prof-career li {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 0 0 26px 26px;
}

.prof-career li:last-child { padding-bottom: 0; }

.prof-career li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  content: "";
}

.prof-career li:not(:last-child)::after {
  position: absolute;
  top: 22px;
  bottom: 2px;
  left: 6px;
  width: 1px;
  background: var(--line);
  content: "";
}

.prof-career li.is-now::before {
  border-color: var(--blue);
  background: var(--blue);
}

.prof-career__when {
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
}

.prof-career strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
}

.prof-career p {
  margin: 0;
  color: #344866;
  font-size: 14px;
  line-height: 1.8;
}

.prof-more__lead {
  margin: -8px 0 18px;
  color: #344866;
  font-size: 15px;
  line-height: 1.9;
}

.prof-more__wide { grid-column: 1 / -1; }

.prof-more__rules {
  margin: 14px 0 0;
  padding: 12px 16px 12px 34px;
  background: var(--sky);
  font-size: 13px;
  line-height: 1.9;
}

.prof-more__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.prof-more__link::after { content: "›"; font-size: 18px; line-height: 1; }
.prof-more__link:hover { color: var(--blue); }

@media (max-width: 760px) {
  .prof-hero { margin: 0 -18px; }
  .prof-hero__photo { aspect-ratio: 1.25; }
  .prof-hero__photo img { object-position: 64% 20%; }

  /* スマホでは名前を写真の下に置く */
  .prof-hero__name {
    position: static;
    padding: 22px 18px 26px;
    transform: none;
  }

  .prof-hero__ja { font-size: 30px; }
  .prof-message__body { margin: 0 -18px; padding: 26px 18px; }
  .prof-message__body p { font-size: 14px; }
  .prof-message__lead { font-size: 18px !important; }
  .prof-strengths { grid-template-columns: 1fr; gap: 10px; }
  .prof-strength { padding: 20px 18px; }
  .prof-career { margin: 0 -18px; padding: 24px 18px; }
  .prof-career li { grid-template-columns: 1fr; gap: 2px; padding-left: 24px; }
}

/* 連携先との関係の明記 */
.svc-partner__text .svc-partner__note {
  margin-top: -.4em;
  padding: 10px 14px;
  background: var(--sky);
  font-size: 13px;
  line-height: 1.8;
}

/* 「〜の相談をする」：下線は文字だけ、矢印は線で描いて文字の高さの真ん中に置く */
.prof-more__link {
  gap: 8px;
  text-decoration: none;
}

/* 下線は付けない。太字と矢印で押せることを示し、指を乗せると青くなって矢印が動く */
.prof-more__link span { text-decoration: none; }

.prof-more__link::after {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  font-size: 0;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.prof-more__link:hover::after { transform: translateX(3px) rotate(45deg); }

/* 創業の無料相談の案内 */
.prof-more__free {
  display: inline-block;
  margin: 12px 0 0 !important;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--sky);
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 800;
}

/* =====================================================
   支援実績
   ===================================================== */
.case-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 10px;
  background: #fff;
}

.case-summary div {
  display: grid;
  gap: 6px;
  padding: 26px 20px;
  text-align: center;
}

.case-summary div + div { border-left: 1px solid var(--line); }

.case-summary strong {
  color: var(--ink);
  font-family: Arial, sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}

.case-summary small { margin-left: 2px; font-size: 18px; }

.case-summary span {
  color: #344866;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.case-note {
  margin: 0 0 48px;
  color: #53667b;
  font-size: 12px;
  line-height: 1.8;
}

.case-card {
  display: grid;
  grid-template-columns: 42% 1fr;
  margin-bottom: 28px;
  background: #fff;
  scroll-margin-top: 100px;
}

.case-card__photo {
  margin: 0;
  overflow: hidden;
  background: #d4e9ee;
}

.case-card__photo img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.case-card__body { padding: 30px 32px 32px; }

.case-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 10px;
  color: #344866;
  font-size: 13px;
  font-weight: 700;
}

.case-card__title {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
}

.case-card__facts {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
}

.case-card__facts div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
}

.case-card__facts dt {
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.case-card__facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.case-card__label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
}

.case-card__result {
  margin-bottom: 22px;
  padding: 18px 20px;
  background: var(--sky);
}

.case-card__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 12px;
}

.case-card__nums p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.case-card__nums strong {
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.case-card__nums small { font-size: 15px; }

/* 満足度の内訳の帯グラフ */
.sat-bar {
  display: flex;
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
}

.sat-bar__seg { display: block; height: 100%; }
.is-top { background: var(--ink); }
.is-sat { background: var(--blue); }
.is-mid { background: #a9c4d6; }
.is-low { background: #e3a59f; }

.sat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
  padding: 0;
  color: #344866;
  font-size: 12px;
  list-style: none;
}

.sat-legend li { display: flex; align-items: center; gap: 6px; }

.sat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.case-card__voices ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-card__voices li {
  position: relative;
  padding: 12px 16px 12px 40px;
  border: 1px solid rgba(14, 35, 71, .14);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.8;
}

.case-card__voices li::before {
  position: absolute;
  top: 6px;
  left: 14px;
  color: var(--blue);
  content: "“";
  font-family: Georgia, serif;
  font-size: 30px;
  line-height: 1;
}

@media (max-width: 760px) {
  .case-summary { grid-template-columns: 1fr; margin: 0 -18px 10px; }
  .case-summary div { grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; }
  .case-summary div + div { border-top: 1px solid var(--line); border-left: 0; }
  .case-summary strong { font-size: 32px; min-width: 86px; }
  .case-note { margin-bottom: 32px; }
  .case-card { grid-template-columns: 1fr; margin: 0 -18px 20px; }
  .case-card__photo img { min-height: 0; aspect-ratio: 1.7; }
  .case-card__body { padding: 22px 18px 26px; }
  .case-card__title { font-size: 18px; }
  .case-card__facts div { grid-template-columns: 1fr; gap: 2px; }
  .case-card__nums strong { font-size: 26px; }
  .case-card__voices li { font-size: 13px; }
}

/* 実績の写真：話している代表が切り抜きの中に収まるよう、写真ごとに位置を合わせる */
#hr .case-card__photo img { object-position: 64% 50%; }
#manufacturing .case-card__photo img { object-position: 56% 50%; }
#wholesale .case-card__photo img { object-position: 30% 50%; }

.page-lead.case-lead { margin-bottom: 36px; }

/* 屋号の由来：Next × Keiei = NeXKei の図 */
.prof-name {
  padding: 32px 40px 34px;
  background: #fff;
}

.prof-name__formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}

.prof-name__part {
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 16px 20px;
  border: 1px solid rgba(14, 35, 71, .2);
  border-radius: 6px;
  color: #344866;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.prof-name__part strong {
  color: #8a97a8;
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}

.prof-name__part em {
  color: var(--ink);
  font-style: normal;
}

.prof-name__part--result {
  justify-items: center;
  gap: 6px;
  border-color: var(--ink);
  background: #fff;
  color: #344866;
}

.prof-name__logo {
  display: block;
  width: 150px;
  height: auto;
}

.prof-name__op {
  color: var(--blue);
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.prof-name__text p {
  margin: 0 0 1em;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2;
}

.prof-name__text p:last-child { margin-bottom: 0; }

/* ロゴに込めた思い */
.prof-logo {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.prof-logo__title {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
}

.prof-logo__list { display: grid; gap: 18px; margin: 0; }

.prof-logo__list dt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}

.prof-logo__list dd {
  margin: 0 0 0 52px;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2;
}

.prof-logo__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(14, 35, 71, .2);
  border-radius: 6px;
  background: #fff;
}

/* ロゴから切り抜いた X・i の画像 */
.prof-logo__mark img {
  display: block;
  width: auto;
  max-width: 26px;
  height: auto;
  max-height: 28px;
}

@media (max-width: 760px) {
  .prof-name { margin: 0 -18px; padding: 24px 18px 26px; }
  /* スマホ：Next × Keiei を1行に、その下に = と NeXKei */
  .prof-name__formula {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px 8px;
  }

  .prof-name__part { min-width: 0; padding: 12px 6px; font-size: 12px; }
  .prof-name__part strong { font-size: 22px; }
  .prof-name__op { font-size: 20px; text-align: center; }
  .prof-name__op:nth-child(4) { grid-column: 1 / -1; justify-self: center; line-height: 1; transform: rotate(90deg); }
  .prof-name__part--result { grid-column: 1 / -1; }
  .prof-name__logo { width: 140px; }
  .prof-name__text p { font-size: 14px; }
  .prof-logo__list dt { font-size: 14px; }
  .prof-logo__list dd { margin-left: 0; font-size: 14px; }
}