@charset "utf-8";
/* ============================================================
   feature.css — シンプルな機能説明ページ共通スタイル
   対象: one-click-payment / webhook-func / ch-plan-fanction
   ブランド: primary #01a0e9 / navy #073B52 / tint #f4f9fd
   ※ plugin.css の pl-* とは別名前空間（feat-*）で衝突を避ける
   ============================================================ */

/* ※ FV下余白ユーティリティ（#fv_low.fv_low--feat）は common.css にグローバル定義。
   function / ticket など feature.css 非読込ページでも使えるようにするため。 */

/* リード文（各セクション先頭の説明） */
.feat-lead{ max-width:840px; margin:0 auto; text-align:center; font-size:18px; line-height:2; color:#3a4a55; font-weight:500; }
@media (max-width:575px){ .feat-lead{ font-size:16px; line-height:1.9; } }

/* βなどのバッジ（FV見出し内） */
.feat-badge{ display:inline-block; font-family:"Poppins",sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; color:#fff; background:#01a0e9; border-radius:999px; padding:3px 13px; margin-left:12px; vertical-align:middle; }

/* 汎用カードグリッド */
.feat-grid{ display:grid; gap:24px; margin-top:48px; }
.feat-grid--2{ grid-template-columns:repeat(2,1fr); }
.feat-grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .feat-grid--3{ grid-template-columns:1fr; } }
@media (max-width:767px){ .feat-grid--2{ grid-template-columns:1fr; } }

.feat-card{ background:#fff; border:1px solid #e2eaf1; border-radius:16px; padding:28px 26px; }
.section--tint .feat-card{ border-color:#dbe8f2; }
.feat-card__icon{ width:52px; height:52px; border-radius:14px; background:#eaf6fe; color:#01a0e9; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feat-card__icon svg{ width:26px; height:26px; }
.feat-card h3{ font-size:20px; font-weight:700; color:#073B52; margin:0 0 10px; }
.feat-card p{ font-size:15px; line-height:1.85; color:#556; margin:0; }

/* ステップ（お客様の操作フローなど） */
.feat-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
@media (max-width:767px){ .feat-steps{ grid-template-columns:1fr; gap:34px; } }
.feat-step{ position:relative; background:#fff; border:1px solid #e2eaf1; border-radius:16px; padding:34px 26px 26px; text-align:center; }
.feat-step__num{ position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; background:#01a0e9; color:#fff; font-family:"Poppins",sans-serif; font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(1,160,233,.35); }
.feat-step h3{ font-size:18px; font-weight:700; color:#073B52; margin:6px 0 8px; }
.feat-step p{ font-size:14px; line-height:1.8; color:#556; margin:0; }

/* 設定パラメータ（選択肢つき） */
.feat-param{ background:#fff; border:1px solid #e2eaf1; border-radius:16px; padding:26px; }
.section--tint .feat-param{ border-color:#dbe8f2; }
.feat-param__label{ display:flex; align-items:center; gap:12px; font-size:17px; font-weight:700; color:#073B52; margin-bottom:16px; }
.feat-param__no{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:#073B52; color:#fff; font-family:"Poppins",sans-serif; font-size:15px; display:flex; align-items:center; justify-content:center; }
.feat-param__opts{ display:flex; flex-wrap:wrap; gap:8px; }
.feat-opt{ font-size:13px; font-weight:600; color:#0561c5; background:#eaf6fe; border:1px solid #cfe6f8; border-radius:999px; padding:6px 14px; }

/* イベント一覧（カテゴリ別） */
.feat-events{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px; }
@media (max-width:767px){ .feat-events{ grid-template-columns:1fr; } }
.feat-eventcat{ background:#fff; border:1px solid #e2eaf1; border-radius:16px; padding:24px 26px; }
.feat-eventcat__head{ font-size:15px; font-weight:700; color:#01a0e9; letter-spacing:.02em; margin-bottom:14px; padding-bottom:12px; border-bottom:1px dashed #d8e2ec; }
.feat-eventcat ul{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.feat-eventcat li{ font-size:14px; font-weight:600; color:#33454f; background:#f4f9fd; border-radius:8px; padding:7px 12px; }

/* 図解（タイムライン図など・2枚並び） */
.feat-figrow{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:48px; }
@media (max-width:900px){ .feat-figrow{ grid-template-columns:1fr; gap:32px; } }
.feat-fig{ background:#fff; border:1px solid #e2eaf1; border-radius:16px; padding:22px 22px 24px; }
.section--tint .feat-fig{ border-color:#dbe8f2; }
.feat-fig figcaption{ display:inline-block; font-size:14px; font-weight:700; color:#fff; background:#01a0e9; border-radius:999px; padding:5px 16px; margin-bottom:18px; }
.feat-fig figcaption.is-down{ background:#073B52; }
.feat-fig img{ width:100%; height:auto; display:block; margin:0; }
/* 縦長スクリーンショット用：高さを抑えて中央寄せ */
.feat-fig--shot{ display:flex; flex-direction:column; align-items:center; }
.feat-fig--shot img{ width:auto; max-width:100%; max-height:560px; border:1px solid #eef3f7; border-radius:8px; }

/* 事例カード（設定＋図） */
.feat-cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
@media (max-width:900px){ .feat-cases{ grid-template-columns:1fr; } }
.feat-case{ background:#fff; border:1px solid #e2eaf1; border-radius:16px; padding:24px; display:flex; flex-direction:column; }
.section--tint .feat-case{ border-color:#dbe8f2; }
.feat-case__label{ align-self:flex-start; font-size:14px; font-weight:700; color:#fff; background:#01a0e9; border-radius:999px; padding:5px 16px; }
.feat-case__lead{ font-size:15px; line-height:1.8; color:#3a4a55; font-weight:500; margin:14px 0 0; }
.feat-case__fig{ margin:16px 0 0; background:#f8fbfe; border:1px solid #eef3f7; border-radius:12px; padding:14px; }
.feat-case__fig img{ width:100%; height:auto; display:block; margin:0; }
.feat-case__spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.feat-case__spec li{ font-size:13px; font-weight:600; color:#33454f; background:#f4f9fd; border-radius:8px; padding:8px 12px; }
.feat-case__spec li span{ display:block; font-size:11px; font-weight:700; color:#7a8b97; margin-bottom:2px; }

/* 画像ズーム（ライトボックス） */
.feat-zoom{ cursor:zoom-in; transition:opacity .15s ease; }
.feat-zoom:hover{ opacity:.86; }
.feat-lightbox{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(7,25,40,.82); opacity:0; visibility:hidden; transition:opacity .18s ease; }
.feat-lightbox.is-open{ opacity:1; visibility:visible; }
.feat-lightbox img{ max-width:min(1100px,96vw); max-height:92vh; width:auto; height:auto; border-radius:10px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.4); cursor:zoom-out; }
.feat-lightbox__close{ position:absolute; top:20px; right:24px; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.feat-lightbox__close:hover{ background:rgba(255,255,255,.3); }

/* 表（プラン変更パターンなど） */
.feat-tablewrap{ margin-top:48px; overflow-x:auto; }
.feat-table{ width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; min-width:680px; font-size:14px; box-shadow:0 2px 14px rgba(7,59,82,.06); }
.feat-table th,.feat-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid #eef3f7; vertical-align:middle; }
.feat-table thead th{ background:#073B52; color:#fff; font-weight:700; font-size:13px; white-space:nowrap; }
.feat-table tbody th{ background:#f4f9fd; color:#073B52; font-weight:700; white-space:nowrap; }
.feat-table tbody tr:last-child td,.feat-table tbody tr:last-child th{ border-bottom:none; }
.feat-table tr.is-standard th,.feat-table tr.is-standard td{ background:#eaf6fe; }

/* 補足バナー（セキュリティ・設定サポートなど） */
.feat-callout{ display:flex; align-items:center; gap:22px; background:#fff; border:1px solid #e2eaf1; border-radius:16px; padding:26px 30px; margin-top:48px; }
.section--tint .feat-callout{ border-color:#dbe8f2; }
@media (max-width:575px){ .feat-callout{ flex-direction:column; text-align:center; gap:14px; padding:26px 22px; } }
.feat-callout__icon{ flex:0 0 auto; width:56px; height:56px; border-radius:14px; background:#eaf6fe; color:#01a0e9; display:flex; align-items:center; justify-content:center; }
.feat-callout__icon svg{ width:28px; height:28px; }
.feat-callout h3{ font-size:18px; font-weight:700; color:#073B52; margin:0 0 6px; }
.feat-callout p{ font-size:14px; line-height:1.8; color:#556; margin:0; }
.feat-callout a{ color:#0561c5; font-weight:700; text-decoration:underline; }

/* 注記 */
.feat-note{ max-width:860px; margin:32px auto 0; font-size:13px; line-height:1.9; color:#6b7c88; }
.feat-note--box{ background:#f4f9fd; border:1px solid #dbe8f2; border-radius:14px; padding:18px 24px; }

/* 関連する機能（機能ページ間の相互リンク・回遊導線） */
.feat-related__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:860px; margin:0 auto; }
.feat-related__card{ display:flex; align-items:center; gap:16px; padding:18px 20px;
  background:#fff; border:1px solid #e2eaf1; border-radius:14px; text-decoration:none;
  box-shadow:0 2px 10px rgba(7,59,82,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feat-related__card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(7,59,82,.10); border-color:#bfe0f4; }
.feat-related__ic{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; background:#eaf6fe; color:#01a0e9; }
.feat-related__ic svg{ width:24px; height:24px; }
.feat-related__tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.feat-related__tx b{ font-size:15px; font-weight:800; color:#073B52; line-height:1.4; }
.feat-related__tx small{ font-size:12.5px; line-height:1.7; color:#7a8b97; }
.feat-related__go{ flex:none; margin-left:auto; color:#01a0e9; display:inline-flex; }
.feat-related__go svg{ width:18px; height:18px; transition:transform .18s ease; }
.feat-related__card:hover .feat-related__go svg{ transform:translateX(4px); }
@media (max-width:575px){
  .feat-related__grid{ grid-template-columns:1fr; }
}