@charset "utf-8";
/* =========================================================
   TOP（Figma 613:14444）— 2026-10 改訂デザイン
   1rem = 100 design-px（style.css 参照）
   ========================================================= */

/* ---------- ABOUT〜主導権（613:14455：暗色 6223px） ---------- */
.tab {
  position: relative; height: 62.2305rem; padding-top: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.30rem;
  background: #352e2e; color: #fff; font-family: "Noto Sans JP", sans-serif;
}
.tab__band { position: absolute; left: 0; top: 0; width: 14.4rem; height: 23.69rem; pointer-events: none; }
.tab > :not(.tab__band):not(.tab__dome) { position: relative; flex: none; }
.tab__intro { width: 12.01rem; height: 6.21rem; padding-left: .87rem; display: flex; flex-direction: column; gap: .65rem; }
.tab__ttl { display: flex; flex-direction: column; gap: .15rem; font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.tab__txt { display: flex; flex-direction: column; gap: .59rem; font-weight: 400; font-size: .22rem; line-height: .59rem; letter-spacing: .033rem; white-space: nowrap; }
.tab__dome { position: absolute; left: 0; bottom: 0; width: 14.4rem; height: 1.06551rem; transform: scaleY(-1); }

/* 手にするのは、この2つ */
.two { width: 11rem; height: 4.0146rem; display: flex; flex-direction: column; align-items: center; gap: .70rem; }
.two__ttl { height: .52rem; font-weight: 700; font-size: .34951rem; line-height: .51512rem; letter-spacing: .0249rem; /* Figma .024466。カンプの行幅に合わせて補正 */ text-align: center; white-space: nowrap; }
.two__ttl em { position: relative; z-index: 0; display: inline-block; margin: 0 .05rem 0 .02rem; padding: 0 0 0 .06rem; color: #352e2e; } /* 黄色の箱は「2つ」に余白をとって前後と離す（カンプ実測：箱の前後 9px・内側 8px） */
.two__ttl em::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(50% - .20rem); height: .42rem; background: #fbff1d; } /* 文字が塗りの上下中央（カンプ実測 上9・下7px） */
.two__row { display: flex; align-items: center; gap: .22rem; }
.two__card {
  flex: none; width: 3.341524rem; height: 2.79rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .15779rem;
  padding: calc(.24133rem + .02785rem) calc(.29702rem + .02785rem);
  background: #fff; box-shadow: inset 0 0 0 .02785rem #fd6a05; border-radius: .18564rem;
  color: #352e2e;
}
.two__card--auto { width: 3.174448rem; height: 2.7946rem; }
.two__card--or { width: 3.547366rem; background: #fd6a05; color: #fff; }
.two__lbl { height: .30rem; display: flex; align-items: center; padding: 0 .07977rem; background: #feedcf; color: #fd6a05; font-weight: 700; font-size: .16708rem; line-height: .2908rem; letter-spacing: .011695rem; white-space: nowrap; }
.two__h { margin-top: calc(.11138rem - .15779rem); height: .75rem; font-weight: 700; font-size: .2599rem; line-height: .37128rem; letter-spacing: .018193rem; white-space: nowrap; }
.two__list { display: flex; flex-direction: column; gap: .08354rem; }
.two__list li { position: relative; width: calc(.17799rem + 2.71963rem); padding-left: .17799rem; font-weight: 400; font-size: .15822rem; line-height: .26699rem; letter-spacing: .011075rem; }
.two__list li::before { content: ""; position: absolute; left: 0; top: .10877rem; width: .04944rem; height: .04944rem; border-radius: 50%; background: #fd6a05; }
.two__list li.s { width: calc(.16639rem + 2.73819rem); padding-left: .16639rem; font-size: .1479rem; line-height: .24958rem; letter-spacing: .010353rem; }
.two__list li.s::before { top: .10168rem; width: .04622rem; height: .04622rem; }
.two__card--or .two__list li::before { background: #fff; }
.two__op { width: .39rem; text-align: center; font-weight: 700; font-size: .38867rem; line-height: .57283rem; letter-spacing: .027207rem; }

/* 動画カード */
.tmovie {
  width: 12.91rem; height: 5.6488rem; display: flex; align-items: center; gap: .59rem; padding: .62rem .64rem;
  background: #fff; border-radius: .20rem; color: #352e2e;
}
.tmovie__thumb { flex: none; width: 5.86rem; height: 3.30618rem; border-radius: .08763rem; overflow: hidden; }
.tmovie__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tmovie__thumb { position: relative; display: block; }
.tmovie__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.04rem; height: 1.04rem; margin: -.52rem 0 0 -.52rem; border-radius: 50%; background: rgba(53, 46, 46, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 56% 50% / 46% no-repeat; box-shadow: 0 0 0 .02rem rgba(255, 255, 255, .7); transition: background-color .3s; pointer-events: none; }
.tmovie__thumb:hover::after { background-color: rgba(253, 106, 5, .85); }
.tmovie__thumb.is-play::after { content: none; }
.tmovie__thumb iframe { display: block; width: 100%; height: 100%; border: 0; }
.tmovie__body { display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; }
.tmovie__ttl { font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.tmovie__txt { font-weight: 400; font-size: .16rem; line-height: .34rem; letter-spacing: .024rem; white-space: nowrap; }
.tmovie__body .btn { margin-top: calc(.57rem - .18rem); }

/* ボタン（17.2px 版：Figma 92:367 の縮小インスタンス）と、矢印なし・枠線版 */
.btn--s { --k: .955556; }
.btn--auto > span { width: auto; white-space: nowrap; }
.btn--auto { padding-left: calc(.48747rem); padding-right: calc(.48747rem); }
.btn--line {
  height: .71rem; background: none; box-shadow: inset 0 0 0 .04rem #fd6a05, 0 .1147rem .30586rem rgba(0,0,0,.08); filter: none;
}

/* 初めての方へ（茶色の角丸パネル） */
.tfirst {
  width: 11.67rem; height: 3.1488rem;
  display: flex; flex-direction: column; align-items: center; gap: .41rem;
  padding: calc(.42rem + .06rem) calc(.55rem + .06rem);
  background: #4d3529; box-shadow: inset 0 0 0 .06rem #fd6a05; border-radius: .60rem;
  color: #fff; text-align: center;
}
.tfirst__txt { display: flex; flex-direction: column; align-items: center; gap: .14rem; white-space: nowrap; }
.tfirst__txt h2 { height: .52rem; font-weight: 700; font-size: .34951rem; line-height: .51512rem; letter-spacing: .024466rem; }
.tfirst__txt p { font-weight: 400; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; }
.tfirst__btns { display: flex; align-items: flex-start; gap: .41rem; }

/* kintoneを導入したのに、こうなっていませんか？ */
.trouble {
  width: 14.4rem; height: 9.41rem;
  display: flex; flex-direction: column; align-items: center; gap: .66rem; padding: 1rem 0;
  background: #4b4344;
}
.trouble__warn { position: absolute; left: 5.99rem; top: .425rem; width: 2.42rem; height: 2.42rem; }
.trouble__ttl { position: relative; font-weight: 700; font-size: .43424rem; line-height: .76rem; letter-spacing: .030397rem; text-align: center; white-space: nowrap; }
.trouble__row { position: relative; display: flex; align-items: flex-start; gap: .37rem; }
.tbox {
  width: 5.5864rem; height: 3.98rem; display: flex; flex-direction: column;
  background: #4d3529; box-shadow: inset 0 0 0 .06rem #fff; border-radius: .20rem; overflow: hidden;
}
.tbox__h { height: .80rem; padding-top: .06rem; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; color: #352e2e; font-weight: 700; font-size: .27rem; line-height: .74rem; letter-spacing: .0189rem; white-space: nowrap; }
.tbox__list { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .22rem; padding: .36rem .39rem; }
.tbox__list li { position: relative; padding-left: .34637rem; width: calc(.34637rem + 4.46rem); font-weight: 500; font-size: .16rem; line-height: .29rem; letter-spacing: .024rem; }
.tbox__list li::before { content: ""; position: absolute; left: 0; top: .05rem; width: .18rem; height: .18rem; box-shadow: inset 0 0 0 .02rem #f1a36e; }
.trouble__msg { position: relative; font-weight: 700; font-size: .32918rem; line-height: .58733rem; letter-spacing: .049377rem; white-space: nowrap; }
.trouble__down { position: absolute; z-index: 1; left: 7.125rem; top: 8.91rem; width: .158897rem; height: 1.58706rem; }

/* 原因は〜 */
.cause { width: 10.2947rem; height: 9.59rem; padding-top: .52rem; display: flex; flex-direction: column; align-items: center; gap: .70rem; }
.cause__ttl { font-weight: 700; font-size: .43424rem; line-height: .76rem; letter-spacing: .030397rem; text-align: center; white-space: nowrap; }
.cause__ttl em { color: #fd6a05; }

/* 主導権（style.css の .shift を流用。見出しと余白だけ差分） */
.tab .shift { width: 12.424107rem; height: 11.1528rem; margin: 0; }
.tab .shift__ttl { line-height: .76rem; }
.tab .shift__ttl em { color: #fd6a05; }
.tab .shift__lead { height: .79rem; }
.tab .shift__cases { margin-bottom: 0; }
.case__brk u { position: relative; display: inline-block; text-decoration: none; }
.case__brk u::after { content: ""; position: absolute; left: -.09rem; right: .03rem; top: calc(100% - .03rem); height: .01rem; background: currentColor; } /* 下線は文字から 7px 離し、頭の空白ぶん左へ（カンプ実測） */

/* では、どうやって主導権を移していくのか。 */
.thow { width: 7.17rem; height: .59rem; text-align: center; font-weight: 700; font-size: .32918rem; line-height: .58733rem; letter-spacing: .0112rem; white-space: nowrap; }
.thow em { position: relative; z-index: 0; display: inline-block; margin: 0 .04rem 0 .05rem; padding: 0 .065rem; color: #352e2e; } /* 黄色の箱：内側の余白＋前後の間（カンプ実測） */
.thow em::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(50% - .195rem); height: .43rem; background: #fbff1d; }

/* ---------- 担当者を育成（613:14726：オレンジ） ---------- */
.grow {
  position: relative; height: 12.96rem;
  display: flex; flex-direction: column; align-items: center; gap: .70rem; padding: 1rem .62rem;
  background: #ff9532; color: #fff; font-family: "Noto Sans JP", sans-serif;
  box-shadow: 0 -.02rem 0 #ff9532;
}
.grow__head { width: 11.84rem; display: flex; flex-direction: column; align-items: center; gap: .385rem; /* Figma 値は20px だがカンプでは18px 下（見出し枠の固定高さ）*/ text-align: center; }
.grow__ttl { font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.grow__lead { width: 9.02rem; font-weight: 700; font-size: .21rem; line-height: .39117rem; letter-spacing: .0315rem; }
.grow__list { display: flex; flex-direction: column; align-items: flex-start; gap: .41rem; }
.grow__list li { width: 11.07rem; display: flex; flex-direction: column; gap: .03rem; padding: .19rem .35rem; background: #d36a22; }
.grow__list h3 { display: flex; align-items: center; gap: .41rem; font-weight: 700; font-size: .30352rem; line-height: .48057rem; letter-spacing: .021246rem; white-space: nowrap; }
.grow__list b {
  flex: none; width: .59rem; height: .59rem; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: .04658rem .17855rem .03882rem .16303rem;
  font-family: Poppins, Montserrat, sans-serif; font-weight: 700; font-size: .32665rem; line-height: .49776rem; letter-spacing: .022866rem; color: #fd6a05;
}
.grow__list p { padding-left: 1.01rem; width: calc(1.01rem + 9.36rem); font-weight: 400; font-size: .17603rem; line-height: .33rem; letter-spacing: .026404rem; }

/* ---------- 営業と開発の分断（613:14735） ---------- */
.split {
  position: relative; height: 14.7943rem; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: .82rem; padding: 0 .62rem 1.30rem;
  color: #352e2e; font-family: "Noto Sans JP", sans-serif;
}
.split__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.split__dome { position: relative; flex: none; width: 14.40004rem; height: 1.06551rem; margin-top: -.02rem; margin-bottom: .02rem; }
.split__head, .stbl, .split__msg { position: relative; }
.split__head { width: 11.84rem; display: flex; flex-direction: column; align-items: center; gap: .28rem; text-align: center; }
.split__ttl { font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.split__ttl { padding-top: .04rem; }
.split__ttl > span { display: block; height: .77rem; padding-top: .04rem; line-height: .73rem; } /* Figma は1行目が4px・2行目が8px下（カンプ実測） */
.split__ttl em { position: relative; z-index: 0; display: inline-block; margin: 0 .08rem 0 -.04rem; padding: 0 .04rem; } /* 黄色の箱：内側の余白＋後ろの間（カンプ実測） */
.split__ttl em::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(50% - .295rem); height: .59rem; background: #fbff1d; }
.split__lead { width: 9.02rem; font-weight: 700; font-size: .21rem; line-height: .39117rem; letter-spacing: .0315rem; }
.stbl-wrap { position: relative; display: contents; }
.split .stbl { margin-top: calc(.72rem - .82rem); }
.stbl table { border-collapse: separate; border-spacing: 0; font-size: .16rem; letter-spacing: .0112rem; }
.stbl th, .stbl td { padding: .11rem .28rem; border: .01rem solid #352e2e; vertical-align: middle; }
.stbl thead th { height: .59542rem; background: #9f9f9f; color: #fff; font-weight: 700; line-height: .35542rem; text-align: center; }
.stbl .c1 { width: 5.08rem; }
.stbl .c2 { width: 1.38rem; }
.stbl .c3 { width: 5.45rem; }
.stbl tbody td.c1 { height: .74rem; background: #fff; font-weight: 400; line-height: .25rem; }
.stbl tbody th.c2 { background: #e7e7e7; font-weight: 700; line-height: .35542rem; text-align: center; }
.stbl tbody tr.r3 > * { height: .49rem; padding-top: 0; padding-bottom: 0; }
.stbl thead th.c3 { background: #fd6a05; border-color: #fd6a05; font-size: .23rem; letter-spacing: .0161rem; }
.stbl tbody td.c3 { background: #ffead7; border-color: #fd6a05; font-weight: 700; line-height: .25rem; }
.stbl { position: relative; }
.stbl::after { content: ""; position: absolute; right: .005rem; top: .004rem; width: 5.45rem; height: 2.57rem; box-shadow: inset 0 0 0 .06rem #fd6a05; pointer-events: none; }
.split__msg { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-weight: 700; text-align: center; white-space: nowrap; }
.split > .split__msg { margin-top: calc(.71rem - .82rem); }
.split__msg .l { font-size: .32918rem; line-height: .58733rem; letter-spacing: .023043rem; }
.split__msg .s { font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; }
.tfirst--consult { position: relative; width: auto; height: auto; }

/* ---------- 3つのサービス（613:14783） ---------- */
.tsvc {
  position: relative; height: 15.378428rem;
  display: flex; flex-direction: column; align-items: center; gap: .70rem; padding: 1.30rem .62rem;
  background: #352e2e; color: #fff; font-family: "Noto Sans JP", sans-serif;
}
.tsvc__deco { position: absolute; left: 0; top: 0; width: 2.93rem; height: 5.96rem; }
.tsvc__head { position: relative; width: 11.84rem; display: flex; flex-direction: column; align-items: center; gap: .20rem; text-align: center; }
.tsvc__ttl { font-weight: 700; letter-spacing: .030397rem; white-space: pre; }
.tsvc__ttl > span { display: block; font-size: .43424rem; line-height: .64rem; }
.tsvc__ttl > span:first-child { height: .66rem; padding-top: .11rem; } /* 大小混在の2行：Figma の字面位置に合わせる（カンプ実測） */
.tsvc__ttl .p { letter-spacing: -.2866rem; }
.tsvc__ttl .l { font-size: .5742rem; line-height: .87rem; }
.tsvc__ttl em { font-size: .8842rem; color: #fd6a05; }
.tsvc__lead { width: 9.02rem; font-weight: 700; font-size: .21rem; line-height: .39117rem; letter-spacing: .0315rem; }
.tsvc__cards { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: .41rem; }
.tsvc__note { position: relative; width: 7.67rem; white-space: nowrap; font-weight: 400; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; text-align: center; }
.tsvc__note a { font-weight: 700; color: #f1a36e; text-decoration: underline; text-decoration-thickness: from-font; }

/* サービスカード（559:15000） */
.scard { flex: none; width: 3.54rem; display: flex; flex-direction: column; align-items: flex-start; }
.scard__tab { display: flex; align-items: center; height: .51rem; padding: 0 .21rem; background: #fd6a05; border-radius: .10rem .10rem 0 0; font-weight: 700; font-size: .18rem; line-height: .3133rem; letter-spacing: .0126rem; white-space: nowrap; }
.scard__box {
  width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: .33rem;
  padding: calc(.41rem + .03rem) calc(.36rem + .03rem) calc(.36rem + .03rem);
  background: #4b4344; box-shadow: inset 0 0 0 .03rem #fd6a05; border-radius: 0 .20rem .20rem .20rem;
}
.scard__in { width: 2.76rem; display: flex; flex-direction: column; align-items: flex-start; }
.scard__lbl { display: flex; align-items: center; padding: 0 .08594rem; background: #fff; color: #352e2e; font-weight: 700; font-size: .18rem; line-height: .3133rem; letter-spacing: .0126rem; white-space: nowrap; }
.scard__name { display: flex; align-items: center; height: .33516rem; margin-top: .22rem; font-weight: 700; font-size: .32rem; line-height: .57502rem; letter-spacing: .0224rem; white-space: nowrap; }
.scard--s .scard__name { font-size: .25rem; letter-spacing: .0175rem; }
.scard__line { width: 100%; height: 0; margin-top: .27rem; box-shadow: 0 0 0 .01rem #fd6a05; } /* 2px の線（h0 の中心線）はレイアウト高に入らない */
.scard__ph { position: relative; width: 100%; height: 1.67rem; margin-top: .27rem; overflow: hidden; }
.scard__ph img { position: absolute; left: 0; top: -6.29%; width: 100%; height: 123.95%; }
.scard:nth-child(2) .scard__ph img { top: -5.49%; }
.scard__txt { width: 2.60rem; margin-top: .16rem; font-weight: 400; font-size: .16rem; line-height: .28rem; letter-spacing: .0112rem; }
.scard__who { margin-top: .16rem; display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; padding: .12rem .19rem; background: #feedcf; border-radius: .06rem; color: #352e2e; }
.scard__who-h { display: flex; align-items: flex-start; gap: .12059rem; color: #fd6a05; font-weight: 700; font-size: .19294rem; line-height: .33765rem; letter-spacing: .013506rem; white-space: nowrap; }
.scard__who-h::before { content: ""; flex: none; width: .28941rem; height: .28941rem; background: url(../img/top/target.svg) no-repeat 52% 50% / 89.5% 89.5%; }
.scard__who-t::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0; box-shadow: 0 0 0 .01rem #fd6a05; }
.scard__who-t { position: relative; width: 2.38rem; padding-top: .08rem; font-weight: 700; font-size: .16rem; line-height: .28rem; letter-spacing: .0112rem; }
.scard__more { display: flex; align-items: flex-start; gap: .11164rem; font-weight: 700; font-size: .16rem; line-height: .21425rem; letter-spacing: .0112rem; text-decoration: underline; text-decoration-thickness: from-font; white-space: nowrap; }
.scard__more i { flex: none; width: .22327rem; height: .22327rem; background: url(../img/top/arrow-circle.svg) no-repeat center / 100% 100%; }

/* ---------- 数字で知る（613:14797） ---------- */
.tdata {
  position: relative; height: 18.396299rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.09rem; padding: 1.30rem .62rem;
  color: #352e2e; font-family: "Noto Sans JP", sans-serif;
}
.tdata__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tdata__bg img { position: absolute; left: -38.12%; top: .01%; width: 188.58%; height: 151.91%; }
.tdata__main { position: relative; display: flex; flex-direction: column; align-items: center; gap: .70rem; }
.tdata .dcard { background: rgba(255,255,255,.89); box-shadow: none; color: #352e2e; }
.tdata__awards { display: flex; align-items: flex-start; gap: .27054rem; }
.tdata__awards img { width: 5.62473rem; height: 2.06121rem; object-fit: cover; }
.tdata > .btn { position: relative; flex: none; }

/* セクション見出し（Frame 253 系：中央揃え・ラベルなし） */
.thead { position: relative; width: 11rem; display: flex; flex-direction: column; align-items: center; gap: .30rem; color: #fff; text-align: center; }
.thead--dark { color: #352e2e; }
.tdata .thead { width: 11.84rem; gap: .43rem; }
.tdata .thead__ttl { padding-top: .10rem; } /* 見出し枠の字面位置（カンプ実測） */
.thead__ttl { font-weight: 700; font-size: .43424rem; line-height: .64rem; letter-spacing: .030397rem; white-space: nowrap; }
.thead__lead { width: 9.02rem; font-weight: 400; font-size: .17603rem; line-height: .39117rem; letter-spacing: .026404rem; }
.thead__lead--b { width: auto; font-weight: 700; font-size: .21rem; letter-spacing: .0315rem; white-space: nowrap; }

/* ---------- 支援実績（613:14943） ---------- */
.tcase {
  position: relative; height: 15.706652rem;
  display: flex; flex-direction: column; align-items: center; gap: .82rem; padding: 1.30rem .62rem;
  background: #352e2e; color: #fff; font-family: "Noto Sans JP", sans-serif;
}

/* ---------- メディア（613:14955） ---------- */
.tmedia { position: relative; height: 35.044131rem; padding: 1.30rem 0; background: #fff; color: #352e2e; font-family: "Noto Sans JP", sans-serif; }
.tmedia__main { width: 11rem; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .52rem; }
.tmedia .media__list { align-items: flex-start; gap: .47rem; }
.tmedia .mblk__cards { gap: .30rem; }
.tmedia .mblk__more i { background-image: url(../img/top/arrow-circle-or.svg); }

/* ---------- 記事カード（新デザイン）。--dark：支援実績 / --white：メディア ---------- */
.ncards { position: relative; display: flex; flex-direction: column; gap: .51rem; }
.ncards__row { display: flex; align-items: flex-start; justify-content: center; gap: .37804rem; }
.ncard { flex: none; width: 3.41464rem; display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; font-family: "Noto Sans JP", sans-serif; }
.ncard__img { display: block; width: 3.41464rem; height: 1.91853rem; border-radius: .10501rem; overflow: hidden; background: #e7e7e7; }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; }
.ncard__body { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .09rem; }
.ncard__tags { display: flex; gap: .12601rem; min-height: .36rem; }
.ncard__tags > span { display: flex; align-items: center; justify-content: center; padding: .03839rem .22071rem; background: #fd6a05; border-radius: .27319rem; color: #fff; font-weight: 500; font-size: .15357rem; line-height: .27955rem; letter-spacing: .016893rem; white-space: nowrap; }
.ncard__ttl { width: 100%; font-weight: 700; font-size: .21002rem; line-height: .33442rem; letter-spacing: .014702rem; text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ncard__meta { width: 100%; margin-top: calc(.06301rem - .09rem); display: flex; flex-direction: column; font-weight: 500; font-size: .16802rem; line-height: .33442rem; letter-spacing: .011761rem; }
.ncard__date { height: .34rem; }
.ncard__co { min-height: .34rem; margin-bottom: -.06rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncards--dark .ncard { color: #fff; filter: drop-shadow(0 .10561rem .14081rem rgba(0,0,0,.08)); }
.ncards--white { flex-direction: row; align-items: flex-start; gap: .30rem; }
.ncards--white .ncard {
  width: 3.52rem; gap: .15941rem; padding: .19484rem .24797rem;
  background: #fff; border-radius: .15588rem; filter: drop-shadow(0 .10627rem .1417rem rgba(0,0,0,.08)); color: #352e2e;
}
.ncards--white .ncard__img { width: 3.02406rem; height: 1.69908rem; border-radius: .093rem; }
.ncards--white .ncard__body { gap: .07971rem; }
.ncards--white .ncard__tags { gap: .1116rem; min-height: .31557rem; }
.ncards--white .ncard__tags > span { padding: .034rem .19546rem; border-radius: .24194rem; font-size: .136rem; line-height: .24757rem; letter-spacing: .01496rem; }
.ncards--white .ncard__ttl { font-size: .186rem; line-height: .29617rem; letter-spacing: .01302rem; }
.ncards--white .ncard__meta { margin-top: calc(.0558rem - .07971rem); font-size: .1488rem; line-height: .29617rem; letter-spacing: .010416rem; }
.ncards--white .ncard__co { min-height: .30rem; margin-bottom: -.05314rem; }
.ncards--white .ncard__date { height: .30rem; }