/* expense-features : 経費精算LP「TOKIUMの特徴」2ndビュー（追加CSS）
   - 既存 expense.css の後に読み込む（または末尾に追記）。全ルール .exp-wrapper 配下・クラス/idは exp- 接頭辞
   - 色はすべて実値（CSS変数は使っていません）
   生成: 20261006（lp-keihi/index.html の 2ndビューから変換） */

/* ---- Features: TOKIUMの特徴（2ndビュー） ---- */
.exp-wrapper .exp-scopeacc{background:#fff;padding:56px 0 88px}
.exp-wrapper .exp-scopeacc .exp-sec-title{margin-bottom:44px}
/* ---- 2ndビュー連動UI（ramp式: ビジュアル×アコーディオン×タイムライン） ---- */
.exp-wrapper .exp-scopeacc__wrap{display:flex;gap:40px;align-items:flex-start}
/* ramp準拠: テキスト左・ビジュアル右(600×450) */
.exp-wrapper .exp-scopeacc__visual{position:relative;width:600px;height:450px;flex:none;order:2;border-radius:4px;overflow:hidden;background:#F4F5F5}
.exp-wrapper .exp-scopeacc__visual img,.exp-wrapper .exp-scopeacc__visual iframe,.exp-wrapper .exp-scopeacc__visual video{width:100%;height:100%;display:block;border:0;object-fit:cover}
.exp-wrapper .exp-acc-anim{position:absolute;left:0;top:0;border:0;pointer-events:none;opacity:0;transition:opacity .45s ease}
.exp-wrapper .exp-acc-anim.exp-on{opacity:1}
.exp-wrapper .exp-acc-anim[data-anim="tkmain"]{width:600px;height:450px}
/* ---- SP専用: 連動UIの見せ方（A案） ---- */
.exp-wrapper .exp-acc-chips,.exp-wrapper .exp-acc-timeline{display:none}
@media (max-width:768px){
  .exp-wrapper .exp-acc-chips{
    position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0;padding:2px 0 12px;   /* 容器幅で切る: 左端＝アニメの左端。前の項目の端が余白に覗かない */
  }
  .exp-wrapper .exp-acc-chips::-webkit-scrollbar{display:none}
  .exp-wrapper .exp-acc-chips::after{content:"";flex:none;width:100%}   /* 最後の項目も左端に来られるよう末尾に余白 */
  /* タイムライン: 薄グレーの全幅トラック。ティールがアクティブの左端から右端まで進み、到達で次の項目へ */
  .exp-wrapper .exp-acc-timeline{display:block;position:relative;height:2px;background:#E6ECEC;margin:0 0 16px}
  .exp-wrapper .exp-acc-timeline i{position:absolute;left:0;top:0;height:2px;width:0;background:#008D97;border-radius:1px}
  .exp-wrapper .exp-acc-chip{
    flex:none;white-space:nowrap;
    height:36px;padding:0 16px;border-radius:18px;
    background:#fff;border:1px solid #D9D9D9;color:#5C6266;
    font-family:inherit;font-feature-settings:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
    cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  }
  .exp-wrapper .exp-acc-chip.exp-is-on{background:#008D97;border-color:#008D97;color:#fff}
  .exp-wrapper .exp-scopeacc__visual{height:auto;aspect-ratio:600/450;margin-bottom:0}   /* 高さは幅に追従（JSでも同期） */
  .exp-wrapper .exp-acc-anim{transform-origin:0 0}
  .exp-wrapper .exp-acc-item:not(.exp-open){display:none}          /* 閉じた項目はチップに任せる */
  .exp-wrapper .exp-acc-item.exp-open{border-bottom:0}
  .exp-wrapper .exp-acc-bar{display:none}                      /* 進行はタイムラインが担う */
  .exp-wrapper .exp-acc-item.exp-open .exp-acc-head{display:none}      /* タイトルはチップが担う */
  .exp-wrapper .exp-acc-item.exp-open .exp-acc-body{max-height:none}
  .exp-wrapper .exp-acc-body__in{padding:16px 2px 0}
  .exp-wrapper .exp-acc-body__in p{font-size:15px}
}
/* 閉じている項目はタイトルを一段薄く */
.exp-wrapper .exp-acc-item__title{transition:color .3s ease}
.exp-wrapper .exp-acc-item:not(.exp-open) .exp-acc-item__title{color:#9AA0A2}
.exp-wrapper .exp-scopeacc__list{flex:1;order:1;min-width:0}
.exp-wrapper .exp-acc-item{border-bottom:1px solid #D9D9D9;position:relative}
.exp-wrapper .exp-acc-item:last-child{border-bottom:none}
.exp-wrapper .exp-acc-bar{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none}
.exp-wrapper .exp-acc-bar i{display:block;width:100%;height:100%;background:#008D97;transform:scaleX(0);transform-origin:left center;will-change:transform;backface-visibility:hidden}
.exp-wrapper .exp-acc-head{width:100%;background:none;border:0;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:13px;padding:21px 2px;text-align:left}
.exp-wrapper .exp-acc-item__title{flex:1;font-size:20px;font-weight:600;color:#008D97;line-height:1.35;margin:0}   /* 該当項目はティール */
.exp-wrapper .exp-acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.exp-wrapper .exp-acc-item.exp-open .exp-acc-body{max-height:240px}
.exp-wrapper .exp-acc-body__in{padding:0 2px 24px 2px;display:flex;flex-direction:column;gap:12px}
.exp-wrapper .exp-acc-body__in p{font-size:16px;line-height:1.7;color:#33383A;margin:0;transition:color .35s ease}
.exp-wrapper .exp-acc-body__in p.exp-acc-note{font-size:13px;color:#8C8989}
/* ---- 特徴カード(3列2行): 各シーンの見どころを小型ループで一覧 ---- */
.exp-wrapper .exp-scopeacc__cards{max-width:1100px;margin:56px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.exp-wrapper .exp-sc-card{background:#F6F6F6;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.exp-wrapper .exp-sc-card__anim{margin-top:auto}
.exp-wrapper .exp-sc-card__title{margin:0;padding:16px 12px 8px 20px;font-size:20px;font-weight:500;color:#191414;line-height:1.5;letter-spacing:-.01em}
.exp-wrapper .exp-sc-card__body{margin:0;padding:0 20px 14px;font-size:15px;font-weight:400;color:#5C6266;line-height:1.7}
.exp-wrapper .exp-sc-card__anim{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.exp-wrapper .exp-sc-card__anim iframe{position:absolute;left:0;top:0;width:600px;height:450px;border:0;pointer-events:none;transform-origin:0 0}
.exp-wrapper .exp-sc-card__anim img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.exp-wrapper .exp-sc-note-mk{font-size:.62em;vertical-align:.55em;margin-left:1px}
.exp-wrapper .exp-sc-notes{max-width:1100px;margin:14px auto 0;font-size:12px;line-height:1.7;color:rgba(34,34,41,.6)}
@media (max-width:768px){ .exp-wrapper .exp-scopeacc__cards{grid-template-columns:1fr} }

/* ---- SP: セクションの余白・2カラム解除 ---- */
@media (max-width:768px){
  .exp-wrapper .exp-scopeacc{padding:48px 0 56px}
  .exp-wrapper .exp-scopeacc__wrap{display:block}
  .exp-wrapper .exp-scopeacc__visual{width:100%;height:300px;margin-bottom:8px}
}