@charset "utf-8";
/* ============================================================
   /ticket チケット機能：ベネフィット訴求＋刷新（名前空間 .tk-）
   2025のデザイン言語に統一（navy #073b52 / accent #01a0e9）
   ============================================================ */

/* 共通 */
.tk-sec{ padding:64px 0; }
.tk-sec--tint{ background:#f3f9fd; }
.tk-lead{ max-width:680px; margin:14px auto 0; text-align:center; color:#5a6b75; font-size:.98rem; line-height:1.85; }

/* ---- 3つのベネフィット ---- */
.tk-benefit__grid{ max-width:1000px; margin:40px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tk-card{ background:#fff; border:1px solid #e3eef5; border-radius:18px; padding:30px 24px 28px; text-align:center;
  box-shadow:0 22px 50px -38px rgba(1,160,233,.5); transition:transform .18s, box-shadow .18s; }
.tk-card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(1,160,233,.55); }
.tk-card__ic{ width:62px; height:62px; margin:0 auto; border-radius:16px; background:linear-gradient(135deg,#01a0e9,#0575c4);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px -12px rgba(1,160,233,.7); }
.tk-card__ic svg{ width:30px; height:30px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tk-card h3{ margin:18px 0 0; font-size:1.12rem; font-weight:800; color:#073b52; line-height:1.5; }
.tk-card p{ margin:11px 0 0; font-size:.9rem; color:#5a6b75; line-height:1.8; text-align:left; }

/* ---- しくみ（課金連動の自動制御）2トラック ---- */
.tk-flow{ max-width:880px; margin:40px auto 0; display:grid; gap:18px; }
.tk-track{ display:flex; align-items:stretch; gap:0; border-radius:18px; overflow:hidden; border:1px solid #e3eef5; background:#fff; }
.tk-track__label{ flex:0 0 124px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:18px 10px; color:#fff; text-align:center; }
.tk-track__label svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tk-track__label b{ font-size:.92rem; font-weight:800; line-height:1.4; }
.tk-track--on .tk-track__label{ background:linear-gradient(135deg,#16b48a,#0f9c86); }
.tk-track--off .tk-track__label{ background:linear-gradient(135deg,#e8804a,#d8643a); }
.tk-track__steps{ flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:8px 4px; padding:18px 22px; }
.tk-step{ font-size:.92rem; font-weight:700; color:#39474f; background:#f4f9fd; border:1px solid #e3eef5;
  border-radius:99px; padding:8px 16px; white-space:nowrap; }
.tk-track--on .tk-step.is-last{ background:#e7f7f1; border-color:#bfe9da; color:#0c7d63; }
.tk-track--off .tk-step.is-last{ background:#fdeee5; border-color:#f4cdb4; color:#bb5326; }
.tk-arrow{ color:#9fb6c4; flex:0 0 auto; display:flex; }
.tk-arrow svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.tk-flow__note{ max-width:880px; margin:16px auto 0; text-align:center; color:#6b7d88; font-size:.86rem; }
.tk-flow__note svg{ width:15px; height:15px; vertical-align:-2px; margin-right:5px; stroke:#01a0e9; fill:none; stroke-width:2; }

/* ---- ユースケース ---- */
.tk-uc__grid{ max-width:980px; margin:40px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tk-uc{ background:#fff; border:1px solid #e3eef5; border-radius:16px; padding:24px 18px; text-align:center;
  transition:transform .18s, border-color .18s; }
.tk-uc:hover{ transform:translateY(-3px); border-color:#bfe0f6; }
.tk-uc__ic{ width:52px; height:52px; margin:0 auto; border-radius:14px; background:#eaf6fe;
  display:flex; align-items:center; justify-content:center; }
.tk-uc__ic svg{ width:26px; height:26px; stroke:#0575c4; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tk-uc p{ margin:14px 0 0; font-size:.9rem; font-weight:700; color:#39474f; line-height:1.6; }

/* ---- 割り振り方（ステップ） ---- */
.tk-assign__grid{ max-width:980px; margin:40px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tk-stepcard{ background:#fff; border:1px solid #e3eef5; border-radius:18px; padding:26px 22px; position:relative;
  box-shadow:0 22px 50px -40px rgba(1,160,233,.5); }
.tk-stepcard__no{ position:absolute; top:-14px; left:22px; width:34px; height:34px; border-radius:10px;
  background:#073b52; color:#fff; font-family:"Poppins",sans-serif; font-weight:800; font-size:1rem;
  display:flex; align-items:center; justify-content:center; }
.tk-stepcard h3{ margin:10px 0 0; font-size:1.04rem; font-weight:800; color:#073b52; line-height:1.5; }
.tk-stepcard p{ margin:10px 0 0; font-size:.88rem; color:#5a6b75; line-height:1.8; }
.tk-assign__media{ max-width:880px; margin:30px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tk-assign__media figure{ margin:0; background:#fff; border:1px solid #e3eef5; border-radius:14px; padding:14px; }
.tk-assign__media img{ width:100%; height:auto; display:block; border-radius:8px; }

/* ---- レスポンシブ ---- */
@media (max-width:991px){
  .tk-benefit__grid{ grid-template-columns:1fr; max-width:480px; }
  .tk-uc__grid{ grid-template-columns:repeat(2,1fr); }
  .tk-assign__grid{ grid-template-columns:1fr; max-width:480px; }
}
@media (max-width:767px){
  .tk-sec{ padding:48px 0; }
  .tk-track{ flex-direction:column; }
  .tk-track__label{ flex-basis:auto; flex-direction:row; justify-content:flex-start; padding:13px 18px; }
  .tk-track__steps{ padding:16px 18px; }
  .tk-assign__media{ grid-template-columns:1fr; }
}
@media (max-width:575px){
  .tk-uc__grid{ grid-template-columns:1fr 1fr; gap:12px; }
}

/* ---- FV見出し：長文化に対応（2行できれいに収める） ---- */
/* 横並びで head が50%になる中間幅は縮小 */
@media (min-width:992px) and (max-width:1199px){
  #fv_low.ticket_low .fv_low_head > h1{ font-size:38px; }
}
/* タブレット以下は縦積みにして見出しへ全幅を与える（Bootstrap d-md-flex の !important を上書き） */
@media (max-width:991px){
  #fv_low.ticket_low .fv_low_wrap{ display:block !important; }
  #fv_low.ticket_low .fv_low_head{ width:100%; padding-right:0; }
  #fv_low.ticket_low .fv_low_head > h1{ font-size:34px; }
  #fv_low.ticket_low figure{ width:100%; max-width:400px; margin:22px auto 0; }
}
@media (max-width:575px){
  #fv_low.ticket_low .fv_low_head > h1{ font-size:7.2vw; }
}