/* /u/ 専用 — l.css の上に載せる */
.uNav{
  margin: 14px 0 0;
  padding-left: calc(var(--indent-3) * 2);
}
.uNav a{
  color: var(--accent) !important;
  font-weight: 700;
}
.uNavCaseJump{
  margin: 12px 0;
}
.uNavCaseJump + .caseJump{
  margin-top: 0;
}
.uNavCaseJump + .optRow{
  margin-top: 0;
}
.caseBlock{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(83,19,195,.14);
}
.caseBlock:first-of-type{
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}
.caseBlock h3{
  margin: 0 0 8px;
  padding-left: calc(var(--indent-2) * 2);
  font-size: var(--fs-large);
  font-weight: 900;
  color: var(--accent) !important;
}
.caseBlock > .textLines{
  margin: 0 0 10px;
}
.caseCaption{
  margin: 10px 0 0;
  padding-left: calc(var(--indent-3) * 2);
  font-size: var(--fs-note);
  color: rgba(20,20,40,.72) !important;
}
.macroBadge{
  margin: 8px 0 0;
  padding-left: calc(var(--indent-3) * 2);
  font-weight: 800;
  font-size: var(--fs-note);
}
.macroBadge strong{
  color: var(--accent) !important;
}
.useCaseImg,
.illustration picture{
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.useCaseImg{
  height: auto;
  border-radius: 12px;
}
.videoWrap{
  margin: 12px 0 0;
  padding: 0 calc(var(--indent-3) * 2);
}
.videoWrap video{
  width: 100%;
  max-width: 560px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #000;
}
.setupFig{
  margin: 14px 0 4px;
  padding: 0 calc(var(--indent-3) * 2) 0 calc(var(--indent-3) * 2 + 1em);
}
.setupFig img{
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(20,20,40,.08);
}
.setupFigCap{
  margin: 8px 0 0;
  padding: 0 calc(var(--indent-3) * 2);
  font-size: var(--fs-note);
  color: rgba(20,20,40,.72) !important;
  line-height: 1.55;
}
.textLines > div.figCapLine{
  padding-left: 0;
  text-indent: 0;
  font-size: var(--fs-note);
  color: rgba(20,20,40,.72) !important;
  margin-bottom: calc(1.7 * var(--fs-body));
}
.warnBox{
  border-color: rgba(230,0,0,.35);
  background: rgba(255,255,255,.95);
}
.warnBox h2{
  color: #c00 !important;
}
.priceEm{
  font-weight: 950;
  color: var(--accent) !important;
}

/* 箇条：l・p と同じぶら下げインデント（・始まり・折り返しは本文頭に揃える） */
.subtitle > div,
.textLines > div{
  margin: 0;
  line-height: 1.7;
  padding-left: 1em;
  text-indent: -1em;
}
.textLines > div.lineCont{
  padding-left: 1em;
  text-indent: 0;
}
.textLines > div.stepLine{
  padding-left: 4em;
  text-indent: -3em;
}
.textLines + .textLines{
  margin-top: 8px;
}
.caseJump.textLines > .caseRow{
  padding-left: 1em;
  text-indent: 0;
}

/* 出荷準備中（購入ボタン代替・赤） */
.btn.btnShipWait{
  background: #c62828;
  border-color: rgba(180, 0, 0, 0.45);
  box-shadow: 0 14px 34px rgba(120, 0, 0, 0.22);
  cursor: default;
  pointer-events: none;
}
.btn.btnShipWait,
.btn.btnShipWait *{
  color: #fff !important;
}


/* 業態名リンク（☞…☜ と同系の紫） */
.caseItemLink{
  color: var(--accent) !important;
  font-weight: 700;
  text-decoration: none;
}
.caseItemLink:hover{
  text-decoration: underline;
}

/* /u 幹ページ：活用事例の一覧（少し華やかに） */
.caseJump{
  margin-top: 10px;
  /* ⑫「コワーキング・レンタル会議室」の実測幅(11.1em) + リーダー5点(2.5em) */
  --case-no-w: 2.5em;
  --case-tab-w: calc(11.1em + 2.5em);
}
.caseRow{
  display: grid;
  grid-template-columns: var(--case-no-w) minmax(0, var(--case-tab-w)) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0;
  padding: 2px 0;
  margin: 6px 0;
}
.caseNo{
  font-weight: 850;
  color: rgba(20,20,40,.9) !important;
}
.caseMain{
  display: flex;
  align-items: baseline;
  width: 100%;
  max-width: var(--case-tab-w);
  min-width: 0;
  overflow: hidden;
  gap: 0;
}
.caseJump .caseItemLink{
  flex: 0 0 auto;
  white-space: nowrap;
}
.caseLeader{
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: inherit;
}
.caseLeader::before{
  /* 最短名(⑥カフェ)で最大24点必要 → 余裕を持って30点 */
  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
  color: rgba(83,19,195,.28);
  letter-spacing: 0;
}
.caseDesc{
  padding-left: 0.6em;
  color: rgba(20,20,40,.66) !important;
  font-weight: 650;
  font-size: var(--fs-note);
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 520px){
  .caseRow{
    grid-template-columns: var(--case-no-w) minmax(0, 1fr);
    row-gap: 4px;
  }
  .caseMain{
    width: auto;
    max-width: var(--case-tab-w);
    overflow: hidden;
  }
  .caseDesc{
    grid-column: 1 / -1;
    padding-left: calc(var(--case-no-w) + 1em);
  }
}

/* お客様用QR：サンプルPNG＋実例写真3枚（同幅・等間隔） */
.qrCustFigs{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 14px 0 4px;
  padding: 0 calc(var(--indent-3) * 2);
}
.qrCustFig{
  margin: 0;
}
.qrCustFig img{
  display: block;
  width: min(220px, 58%);
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(20,20,40,.08);
}
.qrCustCap{
  margin: 0;
}
.qrCustCap .figCapLine{
  margin: 0;
}
.qrCustFigs > .qrCustCap:last-child{
  margin-bottom: calc(1.7 * var(--fs-body));
}

/* お客様用QR：コンビニプリント2系統 */
.qrPrintMethods{
  margin-top: 0;
}
.qrPrintCols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-top: 0;
  padding: 0;
}
.qrPrintCol h3{
  margin: 0 0 6px;
  padding-left: 0;
  font-size: var(--fs-body);
  font-weight: 900;
  line-height: 1.35;
  color: var(--accent) !important;
}
.qrPrintCol .textLines{
  padding-left: 0;
}
@media (max-width: 640px){
  .qrPrintCols{
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* ３色ボタン：サムネ（QR画像3枚と同幅 220px） */
.optRow{
  padding: 0 calc(var(--indent-3) * 2);
  margin-top: 10px;
}
.optThumb{
  display: block;
  width: min(220px, 58%);
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(20,20,40,.08);
}
.optThumb img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== ３色ボタン購入：/p/ 申込フォーム（#apply）案Bと同系 ===== */
#purchase{
  background: linear-gradient(168deg, #fdf8ef 0%, #faf3e2 100%);
  border: 1px solid #e8dcc4;
  box-shadow: 0 2px 12px rgba(180,140,60,.08);
}
#purchase h2{
  color: #7a5c1e !important;
}
#purchase .textLines > div{
  color: #6b5d3e !important;
}
#purchase .ctaPrice,
#purchase .priceEm{
  color: #7a5c1e !important;
}
#purchase .ctaRow .btn.primary{
  border-color: #c08a10;
  background: linear-gradient(135deg, #d4a017, #c08a10);
  box-shadow: 0 4px 14px rgba(200,150,30,.25);
}