@charset "UTF-8";
/* =========================================================
   ClaroTech - form.css
   下層ページ（お問い合わせ／PC修理依頼／送信完了）用
   ※ main.css を読み込んだ後に読み込むこと
   ========================================================= */

/* ---------- ページヘッダー ---------- */
.page-head{
  position:relative; overflow:hidden;
  padding:calc(var(--header-h) + 54px) 0 54px;
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(13,127,140,.10), transparent 62%),
    linear-gradient(180deg,#f7fafc 0%, #eef4f9 100%);
  border-bottom:1px solid var(--line);
}
.page-head::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px; opacity:.38;
  -webkit-mask-image:radial-gradient(760px 380px at 80% 30%, #000, transparent 72%);
          mask-image:radial-gradient(760px 380px at 80% 30%, #000, transparent 72%);
}
.page-head__inner{position:relative; z-index:2}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); margin-bottom:18px}
.crumb a{color:var(--teal-d); font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb span{color:var(--ink-3)}
.page-head__ttl{font-size:clamp(26px,3.4vw,38px); font-weight:700; color:var(--navy-d); line-height:1.45}
.page-head__lead{margin-top:16px; font-size:16px; color:var(--ink-2); max-width:780px; line-height:1.95}
.page-head__meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px; padding-top:20px;
  border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-2); font-weight:600;
}
.page-head__meta li{display:flex; align-items:center; gap:7px}
.page-head__meta .ck{color:var(--teal); font-weight:700}

/* ---------- フォームレイアウト ---------- */
.form-wrap{padding:72px 0 96px; background:var(--bg-soft)}
.form-layout{display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start}

.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px 44px 44px; box-shadow:var(--shadow-m);
}

/* サイド：先にお読みください */
.side{position:sticky; top:calc(var(--header-h) + 20px); display:grid; gap:16px}
.side__box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 24px}
.side__box h2{font-size:15px; font-weight:700; color:var(--navy); margin-bottom:14px; display:flex; align-items:center; gap:8px}
.side__list li{position:relative; padding-left:18px; font-size:13.5px; color:var(--ink-2); line-height:1.85}
.side__list li + li{margin-top:10px}
.side__list li::before{content:""; position:absolute; left:2px; top:.78em; width:6px;height:6px;border-radius:50%;background:var(--teal); opacity:.6}
.side__box--accent{background:linear-gradient(105deg,#fdf7f3 0%, #fff 70%); border-color:#f0d9c9}
.side__box--accent p{font-size:13.5px; color:var(--ink-2); line-height:1.85}
.side__box--accent .txtlink{margin-top:12px; font-size:13.5px}

/* ---------- フィールド ---------- */
.fset{border:0; padding:0; margin:0}
.fset + .fset{margin-top:38px; padding-top:34px; border-top:1px solid var(--line-2)}
.fset__ttl{
  font-size:16px; font-weight:700; color:var(--navy); margin-bottom:20px;
  display:flex; align-items:center; gap:11px;
}
.fset__no{
  width:26px;height:26px;border-radius:7px;background:var(--navy); color:#fff;
  font-size:12px; display:grid; place-items:center; flex-shrink:0;
}

.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.fitem{margin-bottom:20px}
.fitem:last-child{margin-bottom:0}
.fgrid .fitem{margin-bottom:0}
.fitem--full{grid-column:1/-1}

.flabel{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:9px}
.req{font-size:11px; font-weight:700; color:#fff; background:var(--accent); padding:2px 8px; border-radius:4px; letter-spacing:.04em}
.opt{font-size:11px; font-weight:700; color:var(--ink-3); background:var(--bg-soft); border:1px solid var(--line); padding:2px 8px; border-radius:4px}
.fhint{font-size:12.5px; color:var(--ink-3); margin-top:-3px; margin-bottom:9px; line-height:1.7}

.finput,
.fselect,
.ftext{
  width:100%; padding:14px 16px; font:inherit; font-size:15.5px; color:var(--ink);
  background:#fff; border:1px solid #cdd7e1; border-radius:8px; transition:.18s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.ftext{min-height:150px; line-height:1.85; resize:vertical}
.finput:focus,.fselect:focus,.ftext:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,127,140,.14);
}
.finput::placeholder,.ftext::placeholder{color:#a9b5c1}
.fselect{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23748493' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}
.finput[aria-invalid="true"],.fselect[aria-invalid="true"],.ftext[aria-invalid="true"]{
  border-color:#d9534f; background:#fffafa;
}
.ferror{display:none; margin-top:7px; font-size:12.5px; color:#c9302c; font-weight:600}
.ferror.is-show{display:block}

/* チェック・ラジオ */
.choices{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.choices--1{grid-template-columns:1fr}
.choices--3{grid-template-columns:repeat(3,1fr)}
.choice{
  display:flex; align-items:flex-start; gap:11px; padding:14px 16px; cursor:pointer;
  background:#fff; border:1px solid #cdd7e1; border-radius:8px; transition:.16s var(--ease);
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.6;
}
.choice:hover{border-color:var(--teal); background:#fbfeff}
.choice input{
  width:19px; height:19px; margin:2px 0 0; flex-shrink:0; accent-color:var(--teal); cursor:pointer;
}
.choice:has(input:checked){border-color:var(--teal); background:rgba(13,127,140,.06); box-shadow:0 0 0 1px var(--teal) inset}
.choice small{display:block; font-size:12px; font-weight:500; color:var(--ink-3); margin-top:3px}

/* ファイル */
.ffile{
  display:block; padding:20px; border:1.5px dashed #c2cfdb; border-radius:8px;
  background:#fbfdfe; font-size:14px; color:var(--ink-2); cursor:pointer; transition:.18s var(--ease);
}
.ffile:hover{border-color:var(--teal); background:#f6fcfd}
.ffile input{display:block; margin-top:10px; font-size:13px; width:100%}

/* 同意 */
.agree{
  margin-top:34px; padding:22px 24px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--radius);
}
.agree .choice{background:transparent; border:0; padding:0}
.agree .choice:hover{background:transparent}
.agree .choice:has(input:checked){background:transparent; box-shadow:none}
.agree a{color:var(--teal-d); font-weight:700; text-decoration:underline}

/* 送信 */
.fsubmit{margin-top:28px; text-align:center}
.fsubmit .btn{min-width:340px}
.fsubmit__note{margin-top:14px; font-size:12.5px; color:var(--ink-3); line-height:1.8}

.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

/* ---------- 送信完了 ---------- */
.done{padding:calc(var(--header-h) + 80px) 0 96px; background:var(--bg-soft)}
.done__card{
  max-width:760px; margin-inline:auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:56px 56px 48px; box-shadow:var(--shadow-m); text-align:center;
}
.done__ico{
  width:76px; height:76px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(13,127,140,.10); color:var(--teal); font-size:34px; font-weight:700;
}
.done__ttl{font-size:clamp(22px,2.8vw,29px); font-weight:700; color:var(--navy-d); line-height:1.5}
.done__txt{margin-top:20px; font-size:15.5px; color:var(--ink-2); line-height:2}
.done__box{
  margin-top:32px; padding:24px 26px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); text-align:left;
}
.done__box h2{font-size:15px; font-weight:700; color:var(--navy); margin-bottom:14px}
.done__steps li{position:relative; padding-left:26px; font-size:14px; color:var(--ink-2); line-height:1.85}
.done__steps li + li{margin-top:12px}
.done__steps li b{color:var(--navy)}
.done__steps li::before{
  content:counter(dstep); counter-increment:dstep; position:absolute; left:0; top:.28em;
  width:18px;height:18px;border-radius:50%; background:var(--teal); color:#fff;
  font-size:10.5px; font-weight:700; display:grid; place-items:center;
}
.done__steps{counter-reset:dstep}
.done__note{margin-top:24px; font-size:13px; color:var(--ink-3); line-height:1.85}
.done__btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .form-layout{grid-template-columns:1fr}
  .side{position:static; grid-template-columns:1fr 1fr; display:grid}
  .form-card{padding:34px 32px 38px}
}
@media (min-width:768px) and (max-width:1024px){
  /* 2列表示であまった1枚を中央にそろえる */
  .nf__links{display:flex; flex-wrap:wrap; justify-content:center}
  .nf__links > *{flex:0 1 calc(50% - 6px)}   /* gap:12px の半分 */
}

@media (max-width:767px){
  .page-head{padding:calc(var(--header-h) + 30px) 0 36px}
  .page-head__lead{font-size:15px; margin-top:14px}
  .page-head__meta{gap:8px 16px; font-size:12.5px}
  .form-wrap{padding:44px 0 72px}
  .form-card{padding:26px 20px 32px; border-radius:var(--radius)}
  .side{grid-template-columns:1fr; gap:12px}
  .side__box{padding:20px 18px}
  .fgrid{grid-template-columns:1fr; gap:18px}
  .fset + .fset{margin-top:30px; padding-top:26px}
  .choices,.choices--3{grid-template-columns:1fr}
  .fsubmit .btn{min-width:0; width:100%}
  .finput,.fselect,.ftext{font-size:16px}   /* iOSの自動ズーム防止 */
  .done{padding:calc(var(--header-h) + 40px) 0 72px}
  .done__card{padding:34px 22px 32px}
  .done__box{padding:20px 18px}
  .done__btns .btn{width:100%}
}

/* =========================================================
   規約・ポリシー系ページ
   ========================================================= */
.legal{font-size:15.5px; color:var(--ink-2); line-height:2}
.legal > section + section{margin-top:44px; padding-top:38px; border-top:1px solid var(--line-2)}
.legal h2{
  font-size:20px; font-weight:700; color:var(--navy); line-height:1.55; margin-bottom:18px;
  display:flex; align-items:flex-start; gap:12px; scroll-margin-top:calc(var(--header-h) + 24px);
}
.legal h2 .n{
  flex-shrink:0; width:28px; height:28px; border-radius:7px; background:var(--navy); color:#fff;
  font-size:13px; display:grid; place-items:center; margin-top:4px;
}
.legal h3{font-size:16px; font-weight:700; color:var(--navy); margin:26px 0 12px}
.legal p + p{margin-top:16px}
.legal ul{margin:14px 0 0}
.legal ul li{position:relative; padding-left:19px; line-height:1.95}
.legal ul li + li{margin-top:7px}
.legal ul li::before{content:""; position:absolute; left:4px; top:.85em; width:6px;height:6px;border-radius:50%;background:var(--teal); opacity:.6}
.legal__note{
  margin-top:18px; background:var(--bg-soft); border:1px solid var(--line);
  border-left:4px solid var(--teal); border-radius:var(--radius); padding:20px 24px; font-size:14.5px;
}
.legal__note b{color:var(--navy)}
.legal__tbl{margin-top:18px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.legal__tbl th,.legal__tbl td{padding:14px 18px; font-size:14.5px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top}
.legal__tbl th{width:32%; background:#fbfcfe; font-weight:700; color:var(--navy); white-space:nowrap}
.legal__tbl thead th{
  background:var(--bg-soft); color:var(--ink-3); font-size:12.5px; letter-spacing:.04em;
}
.legal__tbl thead th:last-child{width:auto}
.legal__tbl tr:last-child th,.legal__tbl tr:last-child td{border-bottom:0}
.legal__contact{
  margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px;
}
.legal__contact dl{display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:14.5px}
.legal__contact dt{font-weight:700; color:var(--navy); white-space:nowrap}
.legal__contact dd{margin:0}
.legal__rev{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line-2);
  font-size:13.5px; color:var(--ink-3); text-align:right; line-height:1.9;
}
.legal a{color:var(--teal-d); font-weight:700; text-decoration:underline}

/* 目次 */
.toc{counter-reset:toc}
.toc li + li{margin-top:4px}
.toc a{
  display:block; padding:9px 12px 9px 34px; border-radius:6px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); position:relative; line-height:1.6; transition:.15s var(--ease);
}
.toc a::before{
  counter-increment:toc; content:counter(toc); position:absolute; left:11px; top:11px;
  width:17px; height:17px; border-radius:4px; background:var(--bg-soft); border:1px solid var(--line);
  color:var(--ink-3); font-size:10.5px; font-weight:700; display:grid; place-items:center;
}
.toc a:hover{background:var(--bg-soft); color:var(--teal-d)}
.toc a:hover::before{background:var(--teal); border-color:var(--teal); color:#fff}

@media (max-width:1024px){
  .toc{columns:2; column-gap:10px}
}
@media (max-width:767px){
  .legal{font-size:14.8px; line-height:1.95}
  .legal h2{font-size:17.5px; gap:10px}
  .legal h2 .n{width:24px;height:24px;font-size:12px}
  .legal > section + section{margin-top:34px; padding-top:30px}
  .legal__tbl thead{display:none}            /* スマホでは見出し行を省略 */
  .legal__tbl th,.legal__tbl td{display:block; width:auto; white-space:normal}
  .legal__tbl tbody th{border-bottom:0; padding-bottom:0; background:#fff}
  .legal__contact{padding:20px 18px}
  .legal__contact dl{grid-template-columns:1fr; gap:4px}
  .legal__contact dt{margin-top:10px}
  .legal__contact dt:first-child{margin-top:0}
  .toc{columns:1}
}

/* =========================================================
   料金ページ
   ========================================================= */
.p-sec{padding:76px 0}
.p-sec--soft{background:var(--bg-soft)}
.p-head{margin-bottom:34px}
.p-head__ttl{
  font-size:clamp(21px,2.6vw,28px); font-weight:700; color:var(--navy); line-height:1.5;
  display:flex; align-items:center; gap:13px; scroll-margin-top:calc(var(--header-h) + 24px);
}
.p-head__ttl .n{
  flex-shrink:0; width:34px; height:34px; border-radius:9px; background:var(--navy); color:#fff;
  font-size:14px; display:grid; place-items:center;
}
.p-head__lead{margin-top:14px; font-size:15.5px; color:var(--ink-2); line-height:1.95}

.p-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 34px; box-shadow:var(--shadow-s);
  /* カードを直接リンク先にしたとき、固定ヘッダーに隠れないようにする */
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.p-card + .p-card{margin-top:20px}
.p-card--main{border:2px solid var(--teal); box-shadow:0 10px 30px rgba(13,127,140,.13)}
.p-card__top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px}
.p-card__name{font-size:20px; font-weight:700; color:var(--navy)}
.p-card__for{margin-top:7px; font-size:13.5px; color:var(--teal-d); font-weight:700}
.p-card__price{text-align:right}
.p-card__price b{font-size:clamp(24px,3vw,32px); font-weight:700; color:var(--navy); line-height:1.2}
.p-card__price b .u{font-size:15px; margin-left:2px}
.p-card__price small{display:block; font-size:12px; color:var(--ink-3); margin-top:5px}
.p-card__body{margin-top:22px; padding-top:22px; border-top:1px solid var(--line-2)}
.p-list{display:grid; grid-template-columns:repeat(2,1fr); gap:4px 22px}
.p-list li{position:relative; padding-left:21px; font-size:14px; color:var(--ink-2); line-height:1.95}
.p-list li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700; font-size:13px}

.p-ex{
  margin-top:20px; background:var(--bg-soft); border:1px solid var(--line);
  border-left:4px solid var(--teal); border-radius:var(--radius); padding:20px 24px;
}
.p-ex__ttl{font-size:12.5px; font-weight:700; color:var(--teal-d); letter-spacing:.06em; margin-bottom:9px}
.p-ex p{font-size:14px; color:var(--ink-2); line-height:1.9}
.p-ex .amt{font-size:19px; font-weight:700; color:var(--navy); white-space:nowrap}

/* 料金の条件（スポット等） */
.p-cond{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:22px;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-soft);
}
.p-cond > div{padding:18px 22px; border-right:1px solid var(--line)}
.p-cond > div:last-child{border-right:0}
.p-cond dt{font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; margin-bottom:7px}
.p-cond dd{margin:0; font-size:20px; font-weight:700; color:var(--navy); line-height:1.35}
.p-cond dd small{display:block; font-size:12.5px; font-weight:500; color:var(--ink-2); margin-top:5px; line-height:1.7}

/* 補足の見出し付きブロック */
.p-scope{
  margin-top:20px; padding:16px 20px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:13.5px; color:var(--ink-2); line-height:1.9;
}
.p-scope b{color:var(--navy)}

/* 強調（無料など） */
.p-free{
  display:inline-block; font-size:13px; font-weight:700; color:#fff; background:var(--teal);
  padding:4px 12px; border-radius:6px; margin-bottom:10px;
}

/* 折りたたみ（必要な人だけ開く） */
.fold{
  margin-top:26px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.fold > summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:18px 24px; background:var(--bg-soft);
  font-size:15.5px; font-weight:700; color:var(--navy); transition:.18s var(--ease);
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary:hover{background:#eef4f9}
.fold > summary .fold__icon{
  flex-shrink:0; width:22px; height:22px; border-radius:5px;
  background:var(--teal); color:#fff; display:grid; place-items:center;
  font-size:13px; font-weight:700; line-height:1; transition:transform .2s var(--ease);
}
.fold[open] > summary .fold__icon{transform:rotate(45deg)}
.fold > summary .fold__note{
  margin-left:auto; font-size:12.5px; font-weight:500; color:var(--ink-3); white-space:nowrap;
}
.fold[open] > summary{border-bottom:1px solid var(--line)}
.fold__body{padding:4px 24px 26px}
.fold__body .ptbl-ttl:first-child{margin-top:26px}

/* 料金表 */
.ptbl-ttl{
  display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:700;
  color:var(--navy); margin:34px 0 14px;
}
.ptbl-wrap{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.ptbl{font-size:14.5px}
.ptbl th,.ptbl td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top}
.ptbl thead th{background:var(--bg-soft); font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; white-space:nowrap}
.ptbl tbody th{font-weight:700; color:var(--navy); width:27%}
.ptbl .amt{white-space:nowrap; font-weight:700; color:var(--navy); width:22%}
.ptbl td.desc{color:var(--ink-2); font-size:13.5px; line-height:1.8}
.ptbl tr:last-child th,.ptbl tr:last-child td{border-bottom:0}

.p-notes{margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px}
.p-notes li{position:relative; padding-left:19px; font-size:13.5px; color:var(--ink-2); line-height:1.9}
.p-notes li + li{margin-top:8px}
.p-notes li::before{content:"※"; position:absolute; left:0; color:var(--ink-3)}

.p-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px}
.p-3 > div{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.p-3 h3{font-size:16px; font-weight:700; color:var(--navy); margin-bottom:12px; display:flex; align-items:center; gap:8px}
.p-3 li{position:relative; padding-left:17px; font-size:13.5px; color:var(--ink-2); line-height:1.9}
.p-3 li::before{content:""; position:absolute; left:3px; top:.85em; width:5px;height:5px;border-radius:50%;background:var(--teal); opacity:.6}

@media (max-width:1024px){
  .p-list{grid-template-columns:1fr}
  .p-3{grid-template-columns:1fr}
}
@media (max-width:767px){
  .p-sec{padding:52px 0}
  .p-card{padding:24px 20px}
  .p-card__top{flex-direction:column; align-items:flex-start; gap:14px}
  .p-card__price{text-align:left}
  .p-head__ttl{font-size:19px; gap:10px}
  .p-head__ttl .n{width:28px;height:28px;font-size:13px}
  .fold > summary{padding:16px 18px; font-size:14.5px; flex-wrap:wrap}
  .fold > summary .fold__note{margin-left:34px; width:100%; white-space:normal}
  .fold__body{padding:4px 16px 20px}
  .ptbl-wrap{border:0; background:transparent}
  .ptbl,.ptbl thead,.ptbl tbody,.ptbl th,.ptbl td,.ptbl tr{display:block}
  .ptbl thead{display:none}
  .ptbl tbody tr{background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; padding:4px 0}
  .ptbl tbody th{width:auto; border-bottom:0; padding-bottom:4px; font-size:15px}
  .ptbl .amt{width:auto; padding-top:0; padding-bottom:8px; color:var(--teal-d); font-size:15px}
  .ptbl td.desc{padding-top:0; border-bottom:0}
  /* 説明が2列以上ある表では、スマホで列の見出しをセル内に表示する */
  .ptbl td[data-l]::before{
    content:attr(data-l); display:block; margin-bottom:4px;
    font-size:11.5px; font-weight:700; color:var(--teal-d); letter-spacing:.03em;
  }
  .ptbl td[data-l]{border-bottom:1px solid var(--line-2); padding-bottom:12px}
  .ptbl tbody tr td[data-l]:last-child{border-bottom:0}
  .p-notes{padding:18px 16px}
  .p-ex{padding:16px 18px}
  .p-cond{grid-template-columns:1fr}
  .p-cond > div{border-right:0; border-bottom:1px solid var(--line)}
  .p-cond > div:last-child{border-bottom:0}
}

/* =========================================================
   お知らせ一覧 / 404
   ========================================================= */
.news-list{max-width:900px; margin-inline:auto}
.news-item{
  display:grid; grid-template-columns:110px 96px 1fr; align-items:start; gap:20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; box-shadow:var(--shadow-s);
}
.news-item + .news-item{margin-top:12px}
.news-item time{font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:2px}
.news-cat{
  display:inline-block; font-size:11.5px; font-weight:700; text-align:center;
  padding:4px 0; border-radius:5px; width:100%;
}
.news-cat--info{background:rgba(16,51,79,.08); color:var(--navy)}
.news-cat--service{background:rgba(13,127,140,.10); color:var(--teal-d)}
.news-cat--biz{background:rgba(232,112,58,.12); color:#c0562a}
.news-item__body h2{font-size:16.5px; font-weight:700; color:var(--navy); line-height:1.6}
.news-item__body p{margin-top:9px; font-size:14px; color:var(--ink-2); line-height:1.9}

.news-empty{
  max-width:900px; margin:28px auto 0; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px; font-size:13.5px; color:var(--ink-2); line-height:1.9;
}

/* 404 */
.nf{padding:calc(var(--header-h) + 80px) 0 96px; background:var(--bg-soft)}
.nf__card{
  max-width:820px; margin-inline:auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:56px 56px 48px; box-shadow:var(--shadow-m); text-align:center;
}
.nf__code{
  font-size:clamp(52px,8vw,80px); font-weight:700; line-height:1; color:var(--navy);
  letter-spacing:.02em; opacity:.18;
}
.nf__ttl{margin-top:14px; font-size:clamp(21px,2.8vw,28px); font-weight:700; color:var(--navy-d); line-height:1.5}
.nf__txt{margin-top:18px; font-size:15.5px; color:var(--ink-2); line-height:2}
.nf__links{
  margin-top:34px; padding-top:28px; border-top:1px solid var(--line-2);
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; text-align:left;
}
.nf__links a{
  display:block; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; font-size:14.5px; font-weight:700; color:var(--navy); transition:.18s var(--ease);
}
.nf__links a:hover{border-color:var(--teal); background:#f6fcfd; color:var(--teal-d)}
.nf__links small{display:block; font-size:12px; font-weight:500; color:var(--ink-3); margin-top:4px}
.nf__btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px}

@media (max-width:767px){
  .news-item{grid-template-columns:1fr; gap:10px; padding:20px 18px}
  .news-item time{padding-top:0}
  .news-cat{width:auto; padding:4px 12px}
  .nf{padding:calc(var(--header-h) + 40px) 0 72px}
  .nf__card{padding:34px 22px 32px}
  .nf__links{grid-template-columns:1fr}
  .nf__btns .btn{width:100%}
}