/* /usm/port-out/ 専用（H2O Wireless → USモバイル 移行申込みページ）。元は Google Apps Script のページ。すべて .po の中だけに効かせる */
.po{--accent:#5B3FB8;--warn:#C8000F;--bg:#FFFFFF;--ink:#222222;--sub:#666666;--purple:#A084E8;--lav:#EDE6FB;--line:#A084E8;--yellow:#FFE600;--band:#000000;--req:#F39800;--hint:#6650B8;--field:#FFFFFF;--fieldline:#BDBDBD;--note:#EEF3F8;--noteline:#7A9CC0;--focus:#1D5FA8;--body:'GenJyuuGothic',sans-serif;color:#222;font-family:var(--body);font-size:16px;line-height:1.7}
.po *,.po *::before,.po *::after{box-sizing:border-box}
.po .gutter{padding-left:16px;padding-right:16px}
.po .sec_form_brand{padding:30px 0;text-align:center}
.po .sec_form_brand img{width:223px;max-width:100%;height:auto}
.po .band{margin-bottom:30px}
.po p,.po ul,.po ol,.po dl,.po dd,.po h2,.po h3{margin-block:0}
.po .gutter{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.po .sec_form_brand{padding-bottom:30px;text-align:center}
.po .sec_form_brand img{width:223px;max-width:100%;height:auto}
.po .band{background:var(--band);color:#ffd900;text-align:center;font-weight:800;font-size:17px;padding-block:10px;margin-bottom:30px}
.po .wrap{max-width:860px;margin:0 auto;padding-block:20px 64px}
.po .mock{background:var(--note);border-left:5px solid var(--noteline);border-radius:6px;padding:10px 14px;font-size:14px;margin-bottom:18px}
.po .mock b{display:block}
.po .mockflow{border:1px solid var(--noteline);border-radius:6px;margin:-8px 0 18px;font-size:14px}
.po .mockflow summary{cursor:pointer;padding:8px 14px;font-weight:700}
.po .mockflow-body{padding:0 14px 10px}
.po .mockflow-body p{margin:0 0 8px}
.po .mockflow-body ol{margin:0 0 8px;padding-left:20px}
.po .mockflow-sub{font-size:13px;color:var(--sub)}
.po .center{text-align:center;margin:0 0 18px}
.po .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px}
.po .tabs button{font:inherit;font-size:15px;font-weight:700;padding:10px 8px;border-radius:8px;border:2px solid var(--line);background:#fff;color:var(--sub);cursor:pointer;line-height:1.4}
.po .tabs button[aria-selected="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.po .tabs button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.po .tabs small{display:block;font-weight:400;font-size:12px}
.po .lead{margin:0 0 16px}
.po .lead-points{margin:0 0 20px;padding:12px 16px 12px 34px;background:var(--lav);border-radius:8px;font-size:15px;font-weight:700}
.po .lead-points li{margin-bottom:4px}
.po .lead-points li:last-child{margin-bottom:0}
.po .box{border:2px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:24px}
.po .box h2{margin:0;background:var(--purple);color:#fff;text-align:center;font-size:17px;padding:8px}
.po .row{display:grid;grid-template-columns:46% 54%;border-top:1px solid var(--line)}
.po .box h2+.row{border-top:0}
.po .caution{margin:0;padding:16px 18px 16px 34px;font-size:15px}
.po .caution li{margin-bottom:10px}
.po .caution li:last-child{margin-bottom:0}
.po .caution .warn{color:var(--warn);font-weight:700}
.po .box-note{margin:0;padding:10px 16px;font-size:14px;text-align:center}
.po .row .lab{background:var(--lav);padding:20px 16px 20px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-right:1px solid var(--line);min-width:0}
.po .row .val{padding:18px 18px;min-width:0}
.po .req{background:#B85500;color:#fff;font-size:12px;font-weight:800;border-radius:3px;padding:2px 8px;white-space:nowrap;flex:none}
.po .opt{background:var(--fieldline);color:#fff;font-size:12px;font-weight:800;border-radius:3px;padding:2px 8px;white-space:nowrap;flex:none}
.po input[type=text],.po input[type=email],.po input[type=tel],.po input[type=date],.po textarea{font:inherit;width:100%;max-width:100%;padding:8px 12px;border:1px solid var(--fieldline);border-radius:4px;background:var(--field);color:var(--ink)}
.po input.short{max-width:250px}
.po textarea{min-height:90px}
.po input:focus-visible,.po textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.po .hint{font-size:13px;color:var(--hint);margin:8px 0 0}
.po .notes{margin:0;padding:16px 18px 16px 34px;font-size:14px}
.po .notes li{margin-bottom:4px}
.po .free{margin:16px 18px 0;padding:10px 14px;background:var(--lav);border-radius:8px;font-size:14px}
.po .steps{list-style:none;counter-reset:st;margin:0;padding:14px 18px 16px;font-size:14px}
.po .steps li{counter-increment:st;position:relative;padding:6px 0 6px 36px}
.po .steps li::before{content:counter(st);position:absolute;left:0;top:6px;width:24px;height:24px;line-height:24px;text-align:center;border-radius:12px;background:var(--purple);color:#fff;font-weight:700}
.po .contact{padding:16px 18px;font-size:14px}
.po .contact p{margin:0 0 6px}
.po .submit{display:block;margin:0 auto;min-width:260px;max-width:100%;font:inherit;font-size:17px;font-weight:800;padding:12px 24px;border:0;border-radius:40px;background:var(--purple);color:#fff;cursor:pointer}
.po .contact{margin-top:32px}
.po .contact-lead{margin:16px 18px 8px;font-size:15px}
.po .contact-way{margin:0 18px 16px;padding:12px 16px;background:var(--lav);border-radius:8px;font-size:16px;font-weight:700;text-align:center}
.po .submit:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.po .done{margin-top:12px;font-size:14px;color:var(--sub);text-align:center;min-height:1.5em}
@media (max-width:600px){
  .po .row{grid-template-columns:1fr}
  .po .row .lab{border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
  .po .row .val{padding:14px}
}
.po .important{margin:16px 18px 0;border:2px solid #E60012;border-radius:8px;background:#FFF1F1;padding:12px 16px;color:#222}
.po .important p{margin:0 0 8px;font-size:15px;line-height:1.7}
.po .important p:last-child{margin-bottom:0}
.po .important .imp-title{color:#E60012;font-weight:800;font-size:16px}
.po .important .mark{background:linear-gradient(transparent 55%,#FFE600 55%)}
.po .contact .tip{background:var(--lav);border-radius:6px;padding:8px 12px;margin-top:8px}
.po .esim{margin:16px 18px 0;border:2px solid var(--purple);border-radius:8px;background:var(--lav);padding:12px 16px}
.po .esim p{margin:0;font-size:15px}
.po .esim .esim-title{font-weight:800;font-size:16px;margin-bottom:4px}
.po .stay{margin:12px 18px 0;border:2px solid var(--warn);border-radius:8px;padding:12px 16px;font-size:14px}
.po .stay p{margin:0}
.po .stay .stay-title{font-weight:800;font-size:15px;color:var(--warn);margin-bottom:4px}
.po .carrier{margin:12px 18px 0;border:2px solid var(--purple);border-radius:8px;padding:12px 16px;font-size:14px}
.po .carrier p{margin:0}
.po .carrier .carrier-title{font-weight:800;font-size:15px;margin-bottom:6px}
.po .carrier ul{margin:0 0 6px;padding-left:20px}
.po .carrier li{margin-bottom:4px}
.po .carrier .warn{color:var(--warn);font-weight:700}
.po .carrier .carrier-sub{font-size:13px;color:var(--sub);margin-top:6px}
.po .plan-lead{margin:16px 18px 0;font-size:15px}
.po .plan-lead p{margin:0 0 6px}
.po .plan-lead b{background:linear-gradient(transparent 55%,#FFE600 55%)}
.po .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12px;margin:22px 18px 0}
.po .plan{position:relative;border:1px solid var(--fieldline);border-radius:8px;padding:12px 14px;min-width:0}
.po .plan.rec{border:3px solid var(--req);padding:10px 12px}
.po .plan .badge{position:absolute;top:-13px;left:10px;display:inline-block;margin:0;background:var(--req);color:#fff;font-size:12px;font-weight:800;border-radius:3px;padding:2px 10px}
.po .plan h3{margin:0;font-size:16px}
.po .plan-top{margin:16px 18px 0;font-size:16px;font-weight:700;text-align:center}
.po .plan .year{margin:-6px 0 8px;font-size:13px;font-weight:700;color:var(--sub)}
.po .plan .year small{font-size:12px}
.po .plan .price{margin:2px 0 8px;font-size:22px;font-weight:800;color:var(--accent)}
.po .plan .price small{font-size:13px;font-weight:700;color:var(--sub)}
.po .plan ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}
.po .plan li{margin-bottom:4px}
@media (max-width:760px){
  .po .plans{grid-template-columns:1fr}
}
.po .more{margin:0 18px 16px;border:1px solid var(--line);border-radius:8px}
.po .more-title{margin:0;padding:10px 14px;font-weight:700;color:var(--accent);text-align:center}
.po .more-body{border-top:1px solid var(--line);padding:12px 0 0}
.po .more .notes{padding-top:8px}
.po .cmp-wrap{overflow-x:auto;margin:0 12px}
.po .cmp{border-collapse:collapse;width:100%;min-width:620px;font-size:13.5px;line-height:1.5}
.po .cmp th,.po .cmp td{border:1px solid var(--line);padding:8px;vertical-align:top;text-align:left}
.po .cmp thead th{background:var(--purple);color:#fff;text-align:center;font-size:13px}
.po .cmp tbody th{background:var(--lav);white-space:nowrap;font-weight:700}
.po .cmp small{font-weight:400;font-size:11.5px;color:var(--sub)}
/* 料金（月払い・年払い）は、太く大きく（11/4 佐藤さん「料金が見えづらい」） */
.po .cmp tr.price td{font-size:17px;font-weight:800;color:var(--ink)}
.po .cmp tr.price td small{font-size:11.5px}
.po .cmp .tbd{color:var(--sub)}
.po .nw{white-space:nowrap}
.po .cmp thead th.h2o{background:#8A8494}
.po .cmp thead th.h2o small{color:#fff}
.po .cmp thead th.h2o{vertical-align:middle}
.po .cmp thead th.usm{background:#5B3FB8;font-size:14px}
.po .cmp td.h2o{background:var(--note)}
.po .cmp tr.hl th,.po .cmp tr.hl td{border-top:2px solid var(--purple);border-bottom:2px solid var(--purple)}
.po .call-note{margin:14px 12px 0;border:2px solid var(--purple);border-radius:8px;background:var(--lav);color:var(--ink);padding:10px 14px;font-size:14px}
.po .call-note p{margin:0 0 4px}
.po .call-note p:last-child{margin:0}
.po .call-note .call-title{font-weight:800}
.po .call-note .call-sub{font-size:12.5px;color:var(--sub)}
@media (max-width:600px){
  .po .cmp-wrap{overflow:visible}
  .po .cmp{min-width:0}
  .po .cmp thead{display:none}
  .po .cmp,.po .cmp tbody,.po .cmp tr,.po .cmp th,.po .cmp td{display:block;width:auto}
  .po .cmp tr{border:1px solid var(--line);border-radius:6px;margin-bottom:10px;overflow:hidden}
  .po .cmp th,.po .cmp td{border:0}
  .po .cmp tbody th{white-space:normal}
  .po .cmp tbody th br{display:none}
  .po .cmp td{position:relative;padding-left:calc(6.5em + 16px);border-top:1px solid var(--line)}
  .po .cmp td::before{content:attr(data-n);position:absolute;left:8px;top:8px;width:6.5em;font-weight:700;color:var(--accent)}
  .po .cmp tr.hl{border:2px solid var(--purple)}
  .po .cmp tr.hl th,.po .cmp tr.hl td{border-bottom:0}
  .po .cmp tr.hl th{border-top:0}
  .po .cmp tr.hl td{border-top:1px solid var(--line)}
}
.po .hero{text-align:center;margin:0 0 20px;padding:22px 16px;border-radius:14px;background:linear-gradient(135deg,var(--lav),#fff6bf)}
.po .hero-sub{margin:0;font-size:14px;font-weight:700;color:var(--accent)}
.po .hero-main{margin:2px 0 10px;font-size:24px;font-weight:800;line-height:1.4}
.po .hero-time{margin:0;font-size:15px}
.po .hero-time b{display:inline-block;margin:0 6px;padding:0 10px;font-size:22px;color:#fff;background:var(--purple);border-radius:6px}
.po .points{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.po .points li{border:2px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;background:#fff;display:flex;flex-direction:column;gap:4px}
.po .points .ico{display:block;margin:0 auto 4px;width:48px;height:48px;line-height:48px;font-size:24px;border-radius:50%;background:var(--lav)}
.po .points b{display:block;font-size:16px;color:var(--accent);margin-bottom:2px}
.po .points li div span{display:block;font-size:12.5px;color:var(--sub);line-height:1.5}
.po .cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 18px 0}
.po .ccard{border:2px solid var(--warn);border-radius:10px;padding:14px 16px;font-size:14px;position:relative}
.po .ccard p{margin:0}
.po .ccard .cbadge{display:inline-block;margin-bottom:6px;background:var(--warn);color:#fff;font-size:12px;font-weight:800;border-radius:3px;padding:1px 8px}
.po .ccard .ctitle{font-size:17px;font-weight:800;line-height:1.5;margin-bottom:6px}
.po .ccard .warn{color:var(--warn);background:linear-gradient(transparent 60%,#FFE600 60%)}
.po .cnote{margin:12px 18px 16px;padding:10px 14px;background:var(--lav);border-radius:8px;font-size:14px;font-weight:700;text-align:center}
.po .flow{list-style:none;counter-reset:fl;margin:0;padding:16px 18px 10px}
.po .flow li{counter-increment:fl;position:relative;padding:0 0 18px 52px;min-height:40px}
.po .flow li::before{content:counter(fl);position:absolute;left:0;top:0;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%;background:var(--purple);color:#fff;font-weight:800;font-size:17px}
.po .flow li::after{content:"";position:absolute;left:17px;top:40px;bottom:4px;width:2px;background:var(--line);opacity:.5}
.po .flow li:last-child{padding-bottom:6px}
.po .flow li:last-child::after{display:none}
.po .flow b{display:block;font-size:16px;line-height:36px}
.po .flow span{display:block;font-size:13.5px;color:var(--sub);line-height:1.6}
.po details.more>summary{list-style:none;cursor:pointer}
.po details.more>summary::-webkit-details-marker{display:none}
.po details.more>summary::after{content:" ▼";font-size:11px}
.po details.more[open]>summary::after{content:" ▲"}
.po details.more>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:760px){
  .po .points,.po .cards{grid-template-columns:1fr}
  .po .points li{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:10px 14px}
  .po .points .ico{margin:0;flex:none}
  .po .hero-main{font-size:20px}
}
.po .hero{background:#FFD700;border:2px solid #000;box-shadow:4px 5px 0 #000;color:#000;padding:22px 16px}
.po .hero-sub{color:#000}
.po .hero-time b{background:#fff;color:#000;border:2px solid #000;box-shadow:2px 3px 0 #000}
.po .points{gap:18px}
.po .points li{border:2px solid #000;box-shadow:4px 5px 0 #000;background:#fff;position:relative;padding:22px 12px 14px}
.po .points .plabel{position:absolute;top:-14px;left:12px;background:#FFD700;color:#000;border:2px solid #000;border-radius:999px;padding:0 12px;font-size:13px;font-weight:800;font-style:italic;line-height:24px}
.po .points b{color:#000;font-size:17px}
.po .points li div span{color:#444}
.po .points li div span.pdl{display:block;margin-top:4px;font-size:13.5px;font-weight:700;line-height:1.5;color:#C8000F}
.po .points li div span.pdl b{display:inline;margin:0;font-size:15px;color:#C8000F;background:linear-gradient(transparent 55%,#FFD700 55%)}
.po .points li div span.pdl span{display:inline;color:#C8000F;font-size:13.5px}
.po .box.ymsec{border:0;border-radius:0;overflow:visible}
.po .ymhead{text-align:center;margin:0 0 18px}
.po .ymhead .en{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;font-size:34px;font-style:italic;font-weight:700;line-height:1.3;font-family:"Zen Maru Gothic","Baloo 2",var(--body)}
.po .ymhead .en::before,.po .ymhead .en::after{content:"";width:2px;height:28px;background:var(--ink)}
.po .ymhead .ja{margin:2px 0 0;font-size:18px;font-weight:800}
.po .ymsec .cards,.po .ymsec .flow{margin-left:0;margin-right:0}
.po .ymsec .cards{margin-top:0}
.po .ccard{border:2px solid #000;box-shadow:4px 5px 0 #000;border-radius:12px;background:#fff;color:#222}
.po .ccard .cbadge{background:#FFD700;color:#000;border:2px solid #000;border-radius:999px;padding:0 12px;line-height:22px;font-style:italic}
.po .ccard .ctitle{color:#000}
.po .ccard .ng{color:#C8000F}
.po .ccard .warn{color:#000;background:linear-gradient(transparent 55%,#FFD700 55%)}
.po .cnote{margin:20px 0 0;background:#FFEF99;border:2px solid #000;border-radius:999px;color:#000}
.po .flow{padding:6px 0 10px}
.po .flow li{padding-left:92px;padding-bottom:20px}
.po .flow li::before{content:"STEP." counter(fl);width:76px;height:32px;line-height:28px;border-radius:999px;background:#FFD700;color:#000;border:2px solid #000;box-shadow:2px 3px 0 #000;font-size:14px;font-style:italic}
.po .flow li::after{left:38px;top:36px;width:2px;background:var(--ink);opacity:1}
.po .flow b{line-height:32px}
.po .flow span{color:var(--sub)}
.po details.more{border:2px solid #000;border-radius:12px}
.po details.more>summary{color:#000;background:#FFD700;border-radius:10px;font-weight:800}
.po details.more[open]>summary{border-radius:10px 10px 0 0;border-bottom:2px solid #000}
@media (max-width:760px){
  .po .ymhead .en{font-size:28px}
  .po .flow li{padding-left:84px}
  .po .flow li::before{width:68px}
  .po .flow li::after{left:34px}
  .po .points{gap:22px}
}
.po .nets-wrap{margin:8px 18px 18px}
.po .nets-lead{margin:0 0 16px;font-size:16px;font-weight:700;text-align:center}
.po .nets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 14px}
.po .net{position:relative;border:2px solid #000;box-shadow:3px 4px 0 #000;border-radius:10px;padding:14px;background:#fff;color:#222;min-width:0}
.po .net.rec{background:#FFF8CC}
.po .net .badge{position:absolute;top:-14px;left:10px;margin:0;background:#FFD700;color:#000;border:2px solid #000;border-radius:999px;padding:0 12px;font-size:12px;font-weight:800;line-height:22px}
.po .net h3{margin:0;font-size:18px;font-style:italic;font-weight:800}
.po .net-sub{margin:0 0 8px;font-size:13px;font-weight:700;color:#5E5872}
.po .net-text{margin:0;font-size:13.5px;line-height:1.6}
.po .net-note{margin:8px 0 0;font-size:13.5px;font-weight:800;line-height:1.5;color:#C8000F}
.po .ymsec .cards{gap:20px}
.po .ymsec .cards2{margin-top:20px}
@media (max-width:760px){
  .po .nets{grid-template-columns:1fr}
}
.po .cmp-tabs{display:none}
@media (max-width:600px){
  .po .cmp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 12px 14px}
  .po .cmp-tabs button{font:inherit;font-size:14px;font-weight:800;padding:8px 4px;border:2px solid #000;border-radius:999px;background:#fff;color:#000;cursor:pointer;line-height:1.3}
  .po .cmp-tabs button[aria-pressed="true"]{background:#FFD700;box-shadow:2px 3px 0 #000}
  .po .cmp-tabs button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .po .cmp[data-sel="Premium"] td[data-p="Starter"],.po .cmp[data-sel="Premium"] td[data-p="Light"],.po .cmp[data-sel="Starter"] td[data-p="Premium"],.po .cmp[data-sel="Starter"] td[data-p="Light"],.po .cmp[data-sel="Light"] td[data-p="Premium"],.po .cmp[data-sel="Light"] td[data-p="Starter"]{display:none}
  .po .cmp td:not(.h2o){background:#FFF8CC}
  .po .cmp tr{border:2px solid #000}
}
.po .contact.ymsec{margin-top:40px}
.po .contact.ymsec .contact-lead{margin:0 0 18px;font-size:15px;text-align:center}
.po .contact-card{background:#FFD700;border:2px solid #000;box-shadow:4px 5px 0 #000;border-radius:12px;padding:18px 16px;text-align:center}
.po .contact-label{display:inline-block;margin:0 0 8px;background:#fff;border:2px solid #000;border-radius:999px;padding:0 14px;font-size:13px;font-weight:800;line-height:24px;color:#000}
.po .contact-main{margin:0;font-size:19px;font-weight:800;line-height:1.6;color:#000}
@media (max-width:600px){
  .po .contact-main{font-size:16px}
}
@media (min-width:601px){
  .po .sp-br{display:none}
}
.po .plans{gap:22px 16px;margin:26px 18px 0;align-items:stretch}
.po .plan,.po .plan.rec{border:2px solid #000;box-shadow:4px 5px 0 #000;border-radius:12px;padding:0;overflow:visible;background:#fff;display:flex;flex-direction:column}
.po .plan.rec{border-width:3px;background:#FFFCE8}
.po .plan h3{margin:0;padding:10px 12px;font-size:17px;font-weight:800;text-align:center;background:#FFEF99;border-bottom:2px solid #000;border-radius:10px 10px 0 0}
.po .plan.rec h3{background:#FFD700;border-bottom-width:3px;padding-top:14px}
.po .plan .badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);margin:0;background:#000;color:#FFD700;border:0;border-radius:999px;padding:0 14px;font-size:12px;font-weight:800;line-height:26px;white-space:nowrap}
.po .pprice{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #ccc}
.po .pprice>div{padding:10px 8px;text-align:center}
.po .pprice>div+div{border-left:1px solid #ccc}
.po .pl{display:inline-block;font-size:11.5px;font-weight:800;border:1.5px solid #000;border-radius:999px;padding:0 8px;line-height:18px;background:#fff}
.po .plan .price{margin:4px 0 0;font-size:22px;font-weight:800;line-height:1.3;color:#000}
.po .plan .price.yr{font-size:17px}
.po .plan .price small{display:block;font-size:11.5px;font-weight:700;color:var(--sub)}
.po .spec{margin:0;padding:0}
.po .spec>div{padding:9px 14px;border-top:1px solid #ddd}
.po .spec>div:first-child{border-top:0}
.po .spec dt{font-size:12px;font-weight:700;color:var(--sub)}
.po .spec dd{margin:0;font-size:15px;font-weight:800;line-height:1.5}
.po .spec dd small{display:block;font-size:12px;font-weight:400;color:var(--sub)}
@media (max-width:760px){
  .po .plans{gap:28px}
  .po .spec>div{display:grid;grid-template-columns:8.5em 1fr;gap:8px;align-items:baseline}
}
@media (max-width:600px){
  .po .cmp-tabs button{font-size:12.5px;padding:6px 4px;border-radius:14px;line-height:1.35}
  .po .cmp td{padding:10px 12px 12px}
  .po .cmp td::before{content:attr(data-n);position:static;display:block;width:fit-content;margin:0 0 6px;padding:0 10px;font-size:12px;line-height:20px;font-weight:800;color:#FFD700;background:#000;border-radius:999px}
  .po .cmp td.h2o::before{background:#8A8494;color:#fff}
  .po .cmp td:not(.h2o)::before{color:#000;background:#FFD700;border:1.5px solid #000;line-height:17px}
  /* H2O と USモバイルを左右に並べ、1つの項目を1段で見られるように（11/4 佐藤さん「スクロールしないと月払い・年払いが分かりづらい」） */
  .po .cmp tr{display:grid;grid-template-columns:1fr 1fr}
  .po .cmp tr th{grid-column:1/-1}
  .po .cmp td{min-width:0;padding:8px 10px 10px;font-size:13.5px}
  .po .cmp td:not(.h2o){border-left:1px solid var(--line)}
  /* プラン名のラベルは、2行になっても形が崩れないよう角を丸四角に（11/4 髙橋さん「プラン名の見え方が良くない」） */
  .po .cmp td::before{font-size:11px;padding:2px 9px;line-height:1.3;margin:0 0 6px;border-radius:10px;text-wrap:balance}
  .po .cmp td:not(.h2o)::before{line-height:1.3}
  .po .cmp tr.price td{font-size:16px}
}
.po .cmp-foot{margin:10px 12px 14px;font-size:13px;color:var(--sub)}
.po .cmp-foot a{color:var(--accent);font-weight:700;text-decoration:underline}
@media (min-width:601px){
  .po .cmp{table-layout:fixed;border-collapse:separate;border-spacing:0;border:2px solid #000;border-radius:10px;overflow:hidden;font-size:14px}
  .po .cmp col.c0{width:18%}
  .po .cmp col.c1{width:22%}
  .po .cmp col.c2{width:20%}
  .po .cmp th,.po .cmp td{border:0;border-left:1px solid #CFCFCF;border-bottom:1px solid #CFCFCF;padding:10px 12px;vertical-align:middle;text-align:left}
  .po .cmp tr>*:first-child{border-left:0}
  .po .cmp tbody tr:last-child>*{border-bottom:0}
  .po .cmp thead th{background:#FFD700;color:#000;text-align:center;font-size:14px;font-weight:800;border-bottom:2px solid #000}
  .po .cmp thead tr:first-child th:first-child{background:#fff}
  .po .cmp thead th.h2o{background:#E4E2EA;color:#000}
  .po .cmp thead th.h2o small{color:#444;font-weight:400}
  .po .cmp thead th.usm{background:#000;color:#FFD700;font-size:14px;border-bottom:1px solid #000}
  .po .cmp thead tr:nth-child(2) th{border-left:1px solid #CFCFCF}
  .po .cmp tbody th{background:#FFF8CC;white-space:normal;font-weight:800;color:#000}
  .po .cmp td.h2o{background:#F4F3F7}
  .po .cmp td[data-p="Starter"]{background:#FFFCE8}
  .po .cmp tr.hl th,.po .cmp tr.hl td{border-top:0;border-bottom:1px solid #CFCFCF}
  .po .cmp tbody tr:last-child.hl>*{border-bottom:0}
  .po .cmp small{color:#666}
}
@media (max-width:600px){
  .po .cmp colgroup{display:none}
}
.po .hero{margin-bottom:44px}
.po .pc-br{display:none}
@media (min-width:761px){
  .po .pc-br{display:inline}
  .po .points b{line-height:1.5}
}
.po .err{color:var(--warn,#C8000F);font-weight:700;font-size:14px;margin:8px 0 0}
.po .box .err{margin:8px 0 0}
.po .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.po .btns .submit{margin:0}
.po .back{font:inherit;font-size:16px;font-weight:700;padding:12px 28px;border-radius:40px;border:2px solid var(--purple);background:#fff;color:var(--purple);cursor:pointer}
.po .back:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.po .submit[disabled]{opacity:.6;cursor:wait}
.po #confirm .val{word-break:break-all}
/* ボタン内の文字はセンター合わせ */
.po .submit,.po .back{text-align:center}
.po details.more>summary{display:block;text-align:center}

/* 11/6 修正：アメリカ国内での開通の注意（赤カード）と確認の2問 */
.po .ccard.alert{background:#FFE1E1;border:3px solid #C8000F;box-shadow:4px 5px 0 #C8000F;color:#222}
.po .ccard.alert p{color:#222}
.po .ccard.alert .ctitle{color:#000}
.po .ccard.alert .lapse{margin-top:8px;color:#C8000F;font-weight:800}
.po .ccard.alert .ngband{margin-top:10px;background:#C8000F;color:#fff;font-weight:800;font-size:15px;line-height:1.6;border-radius:8px;padding:10px 12px}
.po .consent{margin:0 0 22px;border:2px solid #C8000F;border-radius:12px;background:#FFF1F1;color:#222;padding:14px 16px;font-size:15px;line-height:1.7}
.po .consent p{margin:0 0 10px;color:#222}
.po .consent b{color:#C8000F}
.po .consent .consent-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;color:#C8000F;margin-bottom:6px}
.po .consent .err{text-align:center;color:#C8000F;font-weight:800}
.po .yn{border:0;border-top:1px dashed #E3A0A0;margin:12px 0 0;padding:12px 0 0;min-width:0}
.po .yn legend{float:left;width:100%;padding:0;margin:0 0 10px;font-size:16px;font-weight:800;color:#000;line-height:1.6}
.po .yn-opts{clear:both;display:flex;gap:12px;justify-content:center}
.po .yn-opts label{flex:1;max-width:160px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:2px solid #000;border-radius:999px;background:#fff;color:#000;font-size:17px;font-weight:800;cursor:pointer;box-shadow:2px 3px 0 #000}
.po .yn-opts input{width:20px;height:20px;margin:0;accent-color:#C8000F;cursor:pointer;color-scheme:light}
.po .yn-opts label:has(input:checked){background:#FFD700}
.po .yn .err{clear:both}