@charset "utf-8";
/* ============================================================
   /plan 価格ページ：デザイン磨き
   ※ プラン内容・金額・リンク等の「事実」は一切変更しない。視覚のみ。
   ※ 比較表は構造・行高さを触らず「先頭列スティッキー＋スクロール誘導」を加算。
   ============================================================ */

/* ---- FV：見出しの折り返し調整（モバイルで「し」が孤立するのを解消） ---- */
@media (max-width:575px){
  #fv_low.fv_low_sec .fv_low_head > h2{ font-size:6vw; line-height:1.62; letter-spacing:.005em; }
}
@media (max-width:359px){
  #fv_low.fv_low_sec .fv_low_head > h2{ font-size:5.6vw; }
}

/* ---- 横スクロール誘導ヒント（モバイルのみ） ---- */
.plan_scroll_hint{ display:none; }
@media (max-width:991px){
  .plan_scroll_hint{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:0 auto 16px; padding:9px 16px; width:max-content; max-width:90%;
    border-radius:99px; background:#eaf6fe; color:#0561c5; font-size:.82rem; font-weight:700;
    box-shadow:0 6px 16px -10px rgba(1,160,233,.6);
  }
  .plan_scroll_hint svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
  .plan_scroll_hint .x{ animation:planHintX 1.3s ease-in-out infinite; }
}
@keyframes planHintX{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }

/* ---- 比較表：先頭列（機能名）＆プラン見出しをスティッキー固定 ---- */
/* （横スクロールしても行ラベルが流れず、どの機能か迷子にならない） */
.plan_list_wrap table tr th:first-child{
  position:sticky; left:0; z-index:4; background:#ffffff;
  box-shadow:7px 0 12px -9px rgba(7,59,82,.3);
}
.plan_list_wrap table tr.plan_detail_head th:first-child{ z-index:6; background:#ffffff; }

/* オプション表も同様に先頭列（アカウント区分）を固定 */
.planoption_list_scl table tr th:first-child{ position:sticky; left:0; z-index:3; }
.planoption_list_scl table tr:first-of-type th:first-child{ background:#ffffff; z-index:5; }

/* ============================================================
   モバイル/タブレット（≤991px）：比較表を「縦積みカード」に置換
   既存の横スクロール表(.plan_list_wrap)は隠し、JSが生成する .plan_m を表示。
   各機能ごとに プラン名ラベル付きで値を縦に並べ、横スクロール不要に。
   ※ 値（◯×・ラベル）は既存表からコピー＝事実は不変。
   ============================================================ */
.plan_m{ display:none; }
@media (max-width:991px){
  .plandetailArea .plan_list_wrap{ display:none; }              /* 横スクロール表を隠す */
  .plandetailArea .plan_scroll_hint{ display:none !important; } /* 詳細表の誘導は不要に */
  .plan_m{ display:block; max-width:560px; margin:8px auto 0; }
  .plan_m__cat{ margin-top:30px; }
  .plan_m__cat:first-child{ margin-top:6px; }
  .plan_m__catname{ display:flex; align-items:center; gap:9px; margin:0; padding:0 4px 12px;
    font-size:1.06rem; font-weight:800; color:#073b52; border-bottom:2px solid #e3eef5; }
  .plan_m__catname::before{ content:""; width:24px; height:24px; flex:0 0 auto; background:center/contain no-repeat; }
  .plan_m__row{ background:#fff; border:1px solid #e9eef2; border-radius:14px;
    padding:15px 16px; margin-top:12px; box-shadow:0 12px 28px -24px rgba(7,59,82,.45); }
  .plan_m__feat{ margin:0; font-size:.97rem; font-weight:700; color:#26323a; line-height:1.5; }
  .plan_m__note{ margin:6px 0 0; font-size:.78rem; color:#8295a1; line-height:1.65; }
  .plan_m__vals{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
  .plan_m__val{ display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:#f5f9fc; border:1px solid #e9eef2; border-radius:10px; padding:9px 12px; min-height:42px; }
  .plan_m__val.is-no{ background:#fafbfc; opacity:.62; }
  .plan_m__plan{ font-size:.78rem; font-weight:700; color:#5a6b75; flex:0 0 auto; }
  .plan_m__o{ color:#01a0e9; font-weight:800; font-size:1rem; }
  .plan_m__x{ color:#c2ccd2; font-weight:700; }
  .plan_m__t{ font-size:.8rem; font-weight:700; color:#0561c5; text-align:right; line-height:1.4; }
  .plan_m__all{ margin:13px 0 0; display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;
    background:#eaf6fe; border-radius:10px; padding:11px 13px; font-size:.85rem; font-weight:700; color:#0561c5; line-height:1.6; }
  .plan_m__alllbl{ flex:0 0 auto; background:#01a0e9; color:#fff; font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:99px; }
  .plan_m__catname.plan1::before{ background-image:url("../img/plan/icon_plan1.png"); }
  .plan_m__catname.plan2::before{ background-image:url("../img/plan/icon_plan2.png"); }
  .plan_m__catname.plan3::before{ background-image:url("../img/plan/icon_plan3.png"); }
  .plan_m__catname.plan4::before{ background-image:url("../img/plan/icon_plan4.png"); }
  .plan_m__catname.plan5::before{ background-image:url("../img/plan/icon_plan5.png"); }
  .plan_m__catname.plan6::before{ background-image:url("../img/plan/icon_plan6.png"); }
  .plan_m__catname.plan7::before{ background-image:url("../img/plan/icon_plan7.png"); }
  .plan_m__catname.plan8::before{ background-image:url("../img/plan/icon_plan8.png"); }
  .plan_m__catname.plan9::before{ background-image:url("../img/plan/icon_plan9.png"); }
  .plan_m__catname.plan10::before{ background-image:url("../img/plan/icon_plan10.png"); }
  .plan_m__catname.plan11::before{ background-image:url("../img/plan/icon_plan11.png"); }
  .plan_m__catname.plan12::before{ background-image:url("../img/plan/icon_plan12.png"); }
  .plan_m__catname.plan13::before{ background-image:url("../img/plan/icon_plan13.png"); }
}

/* ---- 価格カード：視覚の磨き（金額・リンクは不変） ---- */
.price_wrap .price_list .price_list_item{ transition:transform .18s ease, box-shadow .18s ease; }
@media (min-width:768px){
  .price_wrap .price_list .price_list_item:hover{
    transform:translateY(-5px); box-shadow:0 18px 38px -20px rgba(1,160,233,.42) !important;
  }
}
.price_wrap .price_list .price_list_item a{ transition:filter .15s ease, transform .15s ease; }
.price_wrap .price_list .price_list_item a:hover{ filter:brightness(1.05); transform:translateY(-1px); opacity:1; }
/* 月/年トグル：少し質感を上げる */
.switch input.cmn-toggle-round + label{ box-shadow:inset 0 1px 3px rgba(0,0,0,.12); }
.switch input.cmn-toggle-round:checked + label{ background-color:#01a0e9; }
.switch input.cmn-toggle-round:checked + label:after{ background-color:#ffffff; }