/* ==========================================================================
   機能詳細ページ（feature-*.html）共通スタイル
   予実管理／収集・統合／予算策定／可視化・AI分析 の4ページで共用する。
   トップ（index.html）と同じ newtop-custom.css / テーマCSS の上に読み込む。
   ========================================================================== */

.feat-v2 {
  color: #222222;
}
.feat-v2 .v2-container {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 52px;
  box-sizing: border-box;
}

/* --- ページ見出し --- */
.feat-v2 .sec-pagehead {
  padding: 72px 0 56px;
  background: #ffffff;
}
.feat-v2 .page-ttl {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.feat-v2 .page-lead {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.9;
}

/* --- 機能詳細（薄い灰色の帯に、画像とテキストを交互に） --- */
.feat-v2 .sec-featdetail {
  padding: 120px 0;
  background: #F5F8FA;
}
.feat-v2 .featdetail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  -webkit-column-gap: 72px;
  column-gap: 72px;
  align-items: center;
}
.feat-v2 .featdetail-row + .featdetail-row {
  margin-top: 140px;
}
.feat-v2 .featdetail-row--reverse .featdetail-visual {
  order: 2;
}
.feat-v2 .featdetail-row--reverse .featdetail-txt {
  order: 1;
}
.feat-v2 .featdetail-visual {
  margin: 0;
}
/* 画像自体に枠と影が含まれているので、CSSでは角丸・影を付けない */
.feat-v2 .featdetail-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.feat-v2 .featdetail-ttl {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.feat-v2 .featdetail-body {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.9;
}

/* --- その他の主な機能（3枚のカード） --- */
.feat-v2 .sec-featother {
  padding: 96px 0 120px;
  background: #ffffff;
}
.feat-v2 .featother-ttl {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}
.feat-v2 .featother-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -webkit-column-gap: 24px;
  column-gap: 24px;
  margin-top: 36px;
}
.feat-v2 .featother-card {
  display: block;
  box-sizing: border-box;
  padding: 24px 24px 28px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #222222;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 30px -14px rgba(20, 30, 60, 0.16), 0 1px 3px rgba(20, 30, 60, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feat-v2 .featother-card:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 10px -6px rgba(20, 30, 60, 0.18), 0 1px 2px rgba(20, 30, 60, 0.05);
  color: #222222;
  text-decoration: none;
}
.feat-v2 .featother-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 150px;
  padding: 6px 10px;
}
.feat-v2 .featother-visual img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.feat-v2 .featother-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.feat-v2 .featother-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #222222;
  color: #ffffff;
}
.feat-v2 .featother-arrow .v2-ico-arrow {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.feat-v2 .featother-txt {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
}

/* --- 中間CTA はトップと同じ（newtop-custom.css の .sec-midcta を利用） --- */

/* --- SP --- */
@media (max-width: 768px) {
  .feat-v2 .v2-container {
    padding: 0 20px;
  }
  .feat-v2 .sec-pagehead {
    padding: 40px 0 32px;
  }
  .feat-v2 .page-ttl {
    font-size: 24px;
  }
  .feat-v2 .sec-featdetail {
    padding: 56px 0;
  }
  .feat-v2 .featdetail-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .feat-v2 .featdetail-row + .featdetail-row {
    margin-top: 64px;
  }
  .feat-v2 .featdetail-row--reverse .featdetail-visual {
    order: 1;
  }
  .feat-v2 .featdetail-row--reverse .featdetail-txt {
    order: 2;
  }
  .feat-v2 .featdetail-ttl {
    font-size: 20px;
  }
  .feat-v2 .featdetail-body {
    margin-top: 12px;
  }
  .feat-v2 .sec-featother {
    padding: 56px 0 72px;
  }
  .feat-v2 .featother-ttl {
    font-size: 22px;
  }
  .feat-v2 .featother-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    margin-top: 24px;
  }
  .feat-v2 .featother-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    -webkit-column-gap: 16px;
    column-gap: 16px;
    align-items: center;
    padding: 16px;
    text-align: left;
  }
  .feat-v2 .featother-visual {
    grid-row: 1 / span 2;
    height: auto;
    aspect-ratio: 4 / 3;
    padding: 0;
  }
  .feat-v2 .featother-name {
    justify-content: space-between;
    margin: 0;
    font-size: 16px;
  }
  .feat-v2 .featother-txt {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
  }
  .feat-v2 .featother-txt br {
    display: none;
  }
}


/* ==========================================================================
   220回目（2026/09/29）：ページ見出しを中央揃え＋カテゴリ／ラベル、機能は2列グリッド
   ========================================================================== */
.feat-v2 .sec-pagehead--center,
.bp-v2 .sec-pagehead--center {
  padding: 72px 0 64px;
  text-align: center;
}
.feat-v2 .page-kicker {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.feat-v2 .sec-pagehead--center .page-ttl,
.bp-v2 .sec-pagehead--center .page-ttl {
  font-size: 36px;
  line-height: 1.5;
}
.feat-v2 .sec-pagehead--center .page-lead,
.bp-v2 .sec-pagehead--center .page-lead {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.9;
}
.feat-v2 .page-labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.feat-v2 .page-label {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: #FDECEF;
  color: #F32F4C;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
/* 機能：見出し → 画像 → 説明文 を2列に */
.feat-v2 .featdetail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 48px;
}
.feat-v2 .featdetail-item {
  min-width: 0;
}
.feat-v2 .featdetail-item .featdetail-ttl {
  margin: 0;
  font-size: 32px;
  line-height: 1.4;
}
.feat-v2 .featdetail-item .featdetail-visual {
  margin: 20px 0 0;
}
.feat-v2 .featdetail-item .featdetail-body {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .feat-v2 .sec-pagehead--center,
  .bp-v2 .sec-pagehead--center {
    padding: 40px 0 36px;
  }
  .feat-v2 .page-kicker {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .feat-v2 .sec-pagehead--center .page-ttl,
  .bp-v2 .sec-pagehead--center .page-ttl {
    font-size: 22px;
  }
  .feat-v2 .sec-pagehead--center .page-lead,
  .bp-v2 .sec-pagehead--center .page-lead {
    margin-top: 12px;
    font-size: 14px;
    text-align: left;
  }
  .feat-v2 .page-labels {
    gap: 8px;
    margin-top: 18px;
  }
  .feat-v2 .page-label {
    padding: 6px 10px;
    font-size: 12px;
  }
  .feat-v2 .featdetail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .feat-v2 .featdetail-item .featdetail-ttl {
    font-size: 22px;
  }
  .feat-v2 .featdetail-item .featdetail-visual {
    margin-top: 14px;
  }
  .feat-v2 .featdetail-item .featdetail-body {
    margin-top: 14px;
  }
}


/* ==========================================================================
   221回目（2026/09/29）
   ========================================================================== */
.feat-v2 .page-kicker .dot {
  color: #F32F4C;
}
.feat-v2 .sec-pagehead--center .page-lead {
  line-height: 1.7;
}
.feat-v2 .page-labels {
  flex-wrap: nowrap;
  gap: 8px;
}
.feat-v2 .page-label {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.feat-v2 .featdetail-item .featdetail-ttl {
  padding-left: 1em;
  font-size: 28px;
}
.feat-v2 .featdetail-item .featdetail-body {
  padding-left: 1em;
  line-height: 1.7;
}
.feat-v2 .featother-ttl {
  font-size: 36px;
}
@media (max-width: 768px) {
  .feat-v2 .page-labels {
    flex-wrap: wrap;
  }
  .feat-v2 .featdetail-item .featdetail-ttl {
    padding-left: 0;
    font-size: 22px;
  }
  .feat-v2 .featdetail-item .featdetail-body {
    padding-left: 0;
  }
  .feat-v2 .featother-ttl {
    font-size: 22px;
  }
}


/* 222回目（2026/09/29）：カテゴリの太さをトップの「・kpieeでできること」と同じ（通常）に、ラベル14px */
.feat-v2 .page-kicker {
  font-weight: 400;
}
.feat-v2 .page-label {
  font-size: 14px;
}
@media (max-width: 768px) {
  .feat-v2 .page-label {
    font-size: 12px;
  }
}


/* 223回目（2026/09/29） */
.feat-v2 .page-labels--rows {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.feat-v2 .page-labels__row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.feat-v2 .featdetail-item .featdetail-ttl {
  padding-left: 0.5em;   /* 半角1文字分 */
}
.feat-v2 .featdetail-item .featdetail-visual {
  margin-top: 24px;
}
.feat-v2 .featother-txt {
  line-height: 1.7;
}
@media (max-width: 768px) {
  .feat-v2 .page-labels__row {
    flex-wrap: wrap;
  }
  .feat-v2 .featdetail-item .featdetail-ttl {
    padding-left: 0;
  }
  .feat-v2 .featdetail-item .featdetail-visual {
    margin-top: 14px;
  }
}


/* 224回目（2026/09/29）：見出しの行間 1.4、機能の間隔（縦90px・横60px） */
.feat-v2 .sec-pagehead--center .page-ttl {
  line-height: 1.4;
}
.feat-v2 .featdetail-grid {
  gap: 90px 60px;
}
@media (max-width: 768px) {
  .feat-v2 .featdetail-grid {
    gap: 40px;
  }
}


/* 231回目（2026/09/30）：予実管理ページは機能群を白、「その他の主な機能」を灰色に */
.feat-v2 .sec-featdetail--white {
  background: #ffffff;
}
.feat-v2 .sec-featother--gray {
  background: #F5F8FA;
}


/* ==========================================================================
   239回目（2026/09/30）：機能ブロックを横並び（テキスト｜画像、1行ずつ交互）に戻す。
   DOM は 見出し→画像→説明文 のまま、grid-area で配置。説明文 16px
   ========================================================================== */
@media (min-width: 769px) {
  .feat-v2 .featdetail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 90px 0;
  }
  .feat-v2 .featdetail-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* 16px の本文が折り返しにくいよう等分 */
    grid-template-rows: auto auto;
    -webkit-column-gap: 48px;
    column-gap: 48px;
    row-gap: 18px;
    align-items: center;
    align-content: center;
  }
  /* 奇数番目：テキスト左・画像右 */
  .feat-v2 .featdetail-item .featdetail-ttl   { grid-area: 1 / 1 / 2 / 2; align-self: end; padding-left: 0; }
  .feat-v2 .featdetail-item .featdetail-body  { grid-area: 2 / 1 / 3 / 2; align-self: start; padding-left: 0; margin: 0; font-size: 16px; line-height: 1.7; letter-spacing: -0.02em; }
  .feat-v2 .featdetail-item .featdetail-visual{ grid-area: 1 / 2 / 3 / 3; margin: 0; }
  /* 偶数番目：画像左・テキスト右 */
  .feat-v2 .featdetail-item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .feat-v2 .featdetail-item:nth-child(even) .featdetail-ttl   { grid-area: 1 / 2 / 2 / 3; }
  .feat-v2 .featdetail-item:nth-child(even) .featdetail-body  { grid-area: 2 / 2 / 3 / 3; }
  .feat-v2 .featdetail-item:nth-child(even) .featdetail-visual{ grid-area: 1 / 1 / 3 / 2; }
}


/* 251回目：その他の主な機能は4パネル */
@media (min-width: 901px) {
  .feat-v2 .featother-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -webkit-column-gap: 20px;
    column-gap: 20px;
  }
  .feat-v2 .featother-card { padding: 20px 18px 24px; }
  .feat-v2 .featother-visual { height: 130px; }
  .feat-v2 .featother-name { font-size: 18px; gap: 10px; }
  .feat-v2 .featother-txt { font-size: 13px; }
}


/* 252回目：その他の主な機能の説明文（SPはSP用の改行、PC用は非表示） */
@media (max-width: 768px) {
  .feat-v2 .featother-txt br { display: none; }
  .feat-v2 .featother-txt br.v2-only-sp { display: inline; }
  /* 収集・統合のリード文（見出し）だけ 21px */
  .feat-v2 .sec-pagehead--center .page-ttl.page-ttl--collect { font-size: 21px; }
}


/* 253回目：ラベルのPC用／SP用の切替 */
.feat-v2 .page-labels--sp { display: none; }
@media (max-width: 768px) {
  .feat-v2 .page-labels--pc { display: none; }
  .feat-v2 .page-labels--sp { display: flex; }
  .feat-v2 .page-lead br { display: inline; }
}


/* 254回目 SP */
@media (max-width: 768px) {
  .feat-v2 .sec-pagehead--center .page-lead { text-align: center; }
  /* ラベルを必ず表示（--pc/--sp のないページも含めて） */
  .feat-v2 .page-labels { display: flex; flex-wrap: wrap; justify-content: center; }
  .feat-v2 .page-labels--pc { display: none; }
  .feat-v2 .page-labels--sp { display: flex; flex-direction: column; align-items: center; }
  .feat-v2 .page-labels__row { display: flex; justify-content: center; }
  /* その他の主な機能：トップの主な機能（SP）と同じレイアウト・サイズ */
  .feat-v2 .featother-card { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); }
  .feat-v2 .featother-visual img { width: 95%; max-width: 95%; margin: auto; }
  .feat-v2 .featother-name { font-size: 14px; }
  .feat-v2 .featother-txt { font-size: 12px; line-height: 1.5; }
  .feat-v2 .featother-txt br.v2-only-sp { display: inline; }
  .feat-v2 .featother-txt br.v2-only-pc { display: none; }
}


/* 255回目 SP：その他の主な機能＝トップの主な機能パネルと同じ余白 */
@media (max-width: 768px) {
  .feat-v2 .featother-card { padding: 16px; -webkit-column-gap: 16px; column-gap: 16px; }
  .feat-v2 .featother-name { margin: 0; align-self: end; }
  .feat-v2 .featother-txt { margin-top: 8px; align-self: start; }
}

/* 256回目 SP：その他の主な機能の説明文はトップと同じ改行（通常の<br>も表示、PC用だけ非表示） */
@media (max-width: 768px) {
  .feat-v2 .featother-txt br { display: inline; }
  .feat-v2 .featother-txt br.v2-only-pc { display: none; }
}

/* 257回目 SP：収集・統合のラベルを 1→2→2 で収める（文字11px・余白を詰めて1行に2つ並ぶように） */
@media (max-width: 768px) {
  .feat-v2 .page-labels--collect { gap: 6px; }
  .feat-v2 .page-labels--collect .page-labels__row { gap: 6px; flex-wrap: nowrap; }
  .feat-v2 .page-labels--collect .page-label { padding: 5px 7px; font-size: 11px; white-space: nowrap; }
}

/* 258回目 SP：見出し・説明文の改行位置を画面幅に左右されないように
   （改行は<br>だけで行い、文字サイズを画面幅に応じてわずかに縮める） */
@media (max-width: 768px) {
  .feat-v2 .sec-pagehead--center .page-ttl { white-space: nowrap; font-size: min(22px, 5.6vw); }
  .feat-v2 .sec-pagehead--center .page-ttl.page-ttl--collect { font-size: min(21px, 5.5vw); }
  .feat-v2 .sec-pagehead--center .page-ttl br.v2-only-sp { display: inline; }
  .feat-v2 .sec-pagehead--center .page-ttl br.v2-only-pc { display: none; }
  .feat-v2 .sec-pagehead--center .page-lead { white-space: nowrap; font-size: min(14px, 3.9vw); }
}

/* 259回目 SP：ラベル → 1機能目 の余白 60px */
@media (max-width: 768px) {
  .feat-v2 .sec-featdetail { padding-top: 60px; }
}