.opf{--ink:#15202B;--sub:#5B5F66;--line:#E3DED3;--bg:#F6F4EE;--card:#fff;--gold:#F0B429;--cta:#E4572E;--cta2:#C93F1C;--ok:#0F8A5F;--warn:#7A2A14;--warnbg:#FBE9E4;--note:#FDF6E4;font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;color:var(--ink);line-height:1.75;font-size:15px;background:var(--bg);margin:0;padding:1px 12px 96px;border-radius:0}
.opf *{box-sizing:border-box}
.opf h1,.opf h2,.opf h3{font-family:"Zen Kaku Gothic Antique","Zen Kaku Gothic New",sans-serif;font-weight:900;line-height:1.35;margin:0}
.opf h1{font-size:25px;margin:8px 0 12px}
.opf h2{font-size:22px;margin:36px 0 10px;padding-top:10px;position:relative}
.opf h2:before{content:""!important;display:block!important;position:static!important;width:40px!important;height:4px!important;border:0!important;border-radius:2px;background:var(--gold)!important;margin:0 0 8px!important;padding:0!important;transform:none!important;opacity:1!important;z-index:auto!important}
.opf h3{font-size:17px;margin:0}
.opf p{margin:0 0 12px}
.opf .num{font-family:"Dela Gothic One",sans-serif;font-weight:400}
.opf .pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;margin:0 6px 6px 0}
.opf .pill-y{background:#FDF1D6;color:#7A4B00}.opf .pill-b{background:#E8EEF7;color:#1F3B6E}.opf .pill-g{background:#EEECE6;color:var(--sub)}
.opf .hero{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 16px;margin-top:12px}
.opf .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.opf .kpi div{background:var(--bg);border-radius:10px;padding:10px 6px;text-align:center}
.opf .kpi b{display:block;font-size:22px;line-height:1.1}.opf .kpi span{font-size:11px;color:var(--sub)}
.opf .upd{font-size:12px;color:var(--sub)}
.opf .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:14px 0}
.opf .card.top{border:2px solid var(--gold)}
.opf .rank{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.opf .rank .r{width:52px;height:52px;border-radius:12px;background:#D9DEE5;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.opf .rank .r b{font-size:22px}.opf .rank .r span{font-size:10px;font-weight:700}
.opf .card.top .rank .r{background:var(--gold)}
.opf .rank img,.opf .rank .logo{width:64px;height:44px;object-fit:contain;border:1px dashed #B8B2A6;border-radius:8px;flex-shrink:0}
.opf .rank .t{font-size:18px}.opf .rank .c{font-size:12px;color:var(--cta2);font-weight:700}
.opf .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 12px}
.opf .chips div{background:var(--bg);border-radius:8px;padding:8px 6px;font-size:12px;font-weight:700}
.opf .chips small{display:block;font-size:10px;color:var(--sub);font-weight:400}
.opf .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border-radius:12px;background:var(--cta);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:16px;line-height:1.2;margin:10px 0 4px;box-shadow:0 4px 0 var(--cta2)}
.opf .btn small{font-size:11px;font-weight:400;opacity:.9;margin-top:2px}
.opf .btn.o{background:#fff;color:var(--ink)!important;border:2px solid var(--ink);box-shadow:none}
.opf .code{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;margin:8px 0}
.opf .code em{font-style:normal;font-size:11px;color:var(--sub);flex-shrink:0}
.opf .code b{flex:1;letter-spacing:.08em;font-size:15px}
.opf .code button{min-height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--ink);background:#fff;font-size:12px;font-weight:700;cursor:pointer}
.opf .note{background:var(--note);border-radius:10px;padding:10px 12px;font-size:12px;color:#7A4B00;margin:8px 0}
.opf .warn{background:var(--warnbg);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--warn);margin:8px 0}
.opf .memo{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;margin:8px 0}
.opf .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:#fff}
.opf table{border-collapse:collapse;font-size:12px;min-width:640px;width:100%}
.opf table th{background:var(--ink);color:#fff;text-align:left;padding:10px 8px;font-weight:700;white-space:nowrap}
.opf table td{padding:10px 8px;border-bottom:1px solid #EEEBE4;vertical-align:top}
.opf table tr.hl td{background:#FFFBEF}
.opf table.spec{min-width:0}.opf table.spec th{background:var(--bg);color:var(--ink);width:96px;white-space:normal}
.opf .tbtn{display:inline-block;padding:7px 10px;border-radius:8px;background:var(--cta);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:11px;white-space:nowrap}
.opf .tbtn.o{background:#fff;color:var(--ink)!important;border:1px solid var(--ink)}
.opf .steps{list-style:none;padding:0;margin:8px 0;counter-reset:s}
.opf .steps li{position:relative;padding:12px 12px 12px 48px;background:#fff;border:1px solid var(--line);border-radius:12px;margin:8px 0;counter-increment:s}
.opf .steps li:before{content:counter(s);position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:8px;background:var(--ink);color:var(--gold);font-family:"Dela Gothic One",sans-serif;display:flex;align-items:center;justify-content:center;font-size:13px}
.opf .ph{border:1px dashed #B8B2A6;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:#8A8F96;font-size:12px;min-height:120px;margin:10px 0}
.opf details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0}
.opf summary{font-weight:700;cursor:pointer;list-style:none}
.opf summary:before{content:"Q";color:var(--cta2);font-family:"Dela Gothic One",sans-serif;margin-right:8px}
.opf details p{margin:6px 0 0 22px;font-size:13px;color:#3D444D}
.opf .toc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 0;margin:14px 0}
.opf .toc a{display:block;padding:9px 14px;border-bottom:1px solid #EEEBE4;text-decoration:none;color:var(--ink);font-size:14px}
.opf .toc a:last-child{border:0}.opf .toc a span{color:var(--cta2);font-family:"Dela Gothic One",sans-serif;font-size:12px;margin-right:8px}
.opf .sticky{position:fixed;left:0;right:0;bottom:0;z-index:999;background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.opf .sticky .l{font-size:12px;line-height:1.2;flex-shrink:0}.opf .sticky .l small{display:block;font-size:10px;color:var(--sub)}
.opf .sticky a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:10px;background:var(--cta);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:14px}
.opf .foot{font-size:12px;color:var(--sub);margin-top:24px}
.opf ul.tight{padding-left:18px;margin:6px 0}.opf ul.tight li{margin:3px 0}
@media (min-width:768px){.opf{padding:1px 24px 96px}.opf .top3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.opf .top3 .card{margin:0}.opf h1{font-size:34px}.opf table{min-width:0}}

/* ---- SWELL / ブロックエディタ対応 ---- */
.opf h1,.opf h2,.opf h3,.opf .wp-block-heading{background:none!important;border:0!important;color:inherit;box-shadow:none!important;padding-left:0;padding-right:0;letter-spacing:0}
.opf h2:after,.opf h3:before,.opf h3:after,.opf h1:before,.opf h1:after{display:none!important;content:none!important}
.opf h2{padding:10px 0 0!important}
.opf h1 strong,.opf .hero h1 strong{color:#C93F1C;font-weight:900}
.opf .hero>*:last-child{margin-bottom:0}
.opf .wp-block-group{margin-top:0}
.opf .card>*:first-child{margin-top:0}.opf .card>*:last-child{margin-bottom:0}
.opf .card h3{margin:0 0 10px}
.opf .card.top{position:relative}
.opf .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff;margin:10px 0}
.opf .wp-block-table table{margin:0;border:0}
.opf .wp-block-table th,.opf .wp-block-table td{border:0;border-bottom:1px solid #EEEBE4}
.opf .wp-block-table thead{border:0}
.opf .wp-block-table figcaption{font-size:11px;color:var(--sub);padding:6px 10px}
.opf .wp-block-table.spec{overflow:visible}
.opf .spec table{min-width:0}
.opf .spec td:first-child{background:var(--bg);font-weight:700;width:96px}
.opf ol.steps,.opf ul.steps{list-style:none;padding:0;margin:8px 0;counter-reset:s}
.opf ol.warn{padding:10px 12px 10px 32px}
.opf p.note,.opf p.memo,.opf p.warn{margin:8px 0}
.opf p.ph{min-height:96px}
.opf p.small{font-size:12px;color:var(--sub)}
.opf .wp-block-details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0}
.opf .wp-block-details p{margin:6px 0 0 22px;font-size:13px;color:#3D444D}
.opf .top3 .card{margin:14px 0}
.opf a.btn{margin:10px 0 4px}
.opf .wp-block-shortcode{margin:0}

.opf [id^="s-"]{scroll-margin-top:84px}
html{scroll-behavior:smooth}
.opf a.opf-to{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.opf .rank .t a.opf-to,.opf table a.opf-to{text-decoration:none}

.opf h4,.opf h4.wp-block-heading{font-family:"Zen Kaku Gothic Antique","Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:15px;line-height:1.45;margin:20px 0 8px!important;padding:8px 12px!important;background:var(--bg)!important;border:0!important;border-left:4px solid var(--cta)!important;border-radius:0 8px 8px 0;color:inherit;box-shadow:none!important}
.opf h4:before,.opf h4:after{display:none!important;content:none!important}

.opf h1,.opf h2,.opf h3,.opf h4{position:relative;z-index:0;-webkit-text-fill-color:currentColor}

/* ===== 1.2.0 添削対応 ===== */
/* ② TOP3の幅をそろえる：列幅を均等に固定し、ボタンを下端でそろえる */
.opf .top3{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.opf .top3 .card{display:flex;flex-direction:column;margin:0;min-width:0}
.opf .top3 .card>a.btn{margin-top:auto}
.opf .top3 .card .note,.opf .top3 .card .code{margin-bottom:10px}
@media (min-width:768px){
 .opf .top3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .opf .top3 .rank{flex-wrap:wrap;gap:8px}
 .opf .top3 .rank span.logo{display:none}
 .opf .top3 .rank img.logo{width:100%;height:48px;order:3}
 .opf .top3 .rank .t{font-size:16px;line-height:1.3}
 .opf .top3 .chips{grid-template-columns:minmax(0,1fr)}
 .opf .top3 .chips div{display:block}
 .opf .top3 a.btn{font-size:14px;min-height:54px;padding:8px 10px}
}
/* ④ ボタン：スマホで端に寄らないよう中央・全幅・余白を固定 */
.opf a.btn{box-sizing:border-box;width:100%;max-width:560px;margin:12px auto 6px!important;padding:10px 14px;text-align:center;border:0!important;outline:0;word-break:normal;overflow-wrap:break-word;line-break:strict;text-wrap:balance;line-height:1.35}
.opf a.btn small{display:block;margin-top:3px;line-height:1.3}
.opf .wp-block-shortcode>p,.opf p:has(>a.btn){margin:0!important;text-align:center}
@media (max-width:480px){.opf a.btn{font-size:15px;min-height:56px}}
/* ⑤⑥ 紹介カードの画像 */
.opf figure.shot{margin:10px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.opf figure.shot img{display:block;width:100%;height:auto;max-height:220px;object-fit:cover}
.opf figure.shot.is-logo{display:flex;align-items:center;justify-content:center;padding:18px;min-height:110px}
.opf figure.shot.is-logo img{width:auto;max-width:70%;max-height:80px;object-fit:contain}
/* ⑧ 各社の特徴 */
.opf p.feat{font-size:13px;color:#3D444D;margin:-4px 0 10px!important;padding-left:10px;border-left:3px solid var(--gold)}
/* ③⑦ 表の見出し追従（JSが複製を出す） */
.opf .opf-fixhead{position:fixed;z-index:60;overflow:hidden;display:none;pointer-events:none;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.opf .opf-fixhead table{margin:0!important;border-collapse:collapse;table-layout:fixed}
.opf .opf-fixhead th{white-space:nowrap}

.opf .top3{padding-top:14px;align-items:stretch}
.opf .top3 .card,.opf .top3 .card.top,.opf[data-opf-theme] .top3 .card.top{margin:0!important}
.opf .top3 .card>a.btn{margin-top:auto!important}
.opf .code{min-width:0}
.opf .code b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opf .code button{white-space:nowrap;flex-shrink:0}
.opf .code em{white-space:nowrap}
@media (min-width:768px){.opf .top3 .code{flex-wrap:wrap;gap:4px 8px}.opf .top3 .code em{width:100%}.opf .top3 .code b{white-space:normal;overflow:visible;font-size:14px}}

.opf table.opf-cmp .tlogo{width:56px;height:32px;object-fit:contain;display:block}
.opf table.opf-cmp span.tlogo{display:none}
.opf table.opf-cmp .tcode{font-weight:700;letter-spacing:.04em;white-space:nowrap}
.opf table.opf-cmp td.c-rank,.opf table.opf-cmp th.c-rank{width:44px;text-align:center}
.opf table.opf-cmp td.c-cta{white-space:nowrap}

/* ===== 追従クーポンパネル ===== */
.opf-float{position:fixed;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:990;font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;max-width:calc(100vw - 24px)}
.opf-float-toggle{display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:#0F8A5F;color:#fff;padding:10px 16px 10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;font-family:inherit;text-align:left}
.opf-float-toggle .ic{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:16px}
.opf-float-toggle .tx b{display:block;font-size:13px;line-height:1.2}.opf-float-toggle .tx small{font-size:10px;opacity:.9}
.opf-float-toggle .ar{font-weight:900;margin-left:4px}
.opf-float.is-open .opf-float-toggle{display:none}
.opf-float-panel{width:300px;max-width:calc(100vw - 24px);max-height:70vh;display:flex;flex-direction:column;background:#fff;border:1px solid #E3DED3;border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.opf-float-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#0F8A5F;color:#fff;font-size:14px}
.opf-float-close{border:0;background:rgba(255,255,255,.25);color:#fff;width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer}
.opf-float-list{overflow-y:auto;padding:8px}
.opf-float-item{border:1px solid #E3DED3;border-radius:10px;padding:10px;margin-bottom:8px;background:#fff}
.opf-float-top{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.opf-float-top .flogo{width:36px;height:36px;object-fit:contain;border-radius:8px;border:1px solid #E3DED3;flex-shrink:0;display:block}
.opf-float-top span.flogo{background:#F6F4EE}
.opf-float-top .fn{font-weight:900;font-size:13px;line-height:1.2}.opf-float-top .fb{font-size:11px;color:#C93F1C;font-weight:700}
.opf-float-item .code{margin:6px 0}.opf-float-item .code b{font-size:13px}
.opf-float-btn{display:flex;justify-content:center;align-items:center;min-height:40px;border-radius:8px;background:#0F8A5F;color:#fff!important;font-weight:700;font-size:12px;text-decoration:none!important}
/* ===== インフォグラフィック ===== */
.opf .opf-info{background:#fff;border:2px solid #15202B;border-radius:14px;padding:14px;margin:14px 0}
.opf .opf-info-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.opf .opf-info-head .ilogo{width:64px;height:40px;object-fit:contain;display:block}.opf .opf-info-head span.ilogo{display:none}
.opf .opf-info-head .iname{font-weight:900;font-size:16px}.opf .opf-info-head .ititle{margin-left:auto;font-weight:900;font-size:18px;color:var(--cta2);letter-spacing:.06em}
.opf .opf-info-row{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--bg);color:inherit!important;text-decoration:none!important;transition:transform .1s}
.opf .opf-info-row:hover{transform:translateY(-1px)}
.opf .opf-info-row .il b{display:inline-block;background:var(--ink);color:#fff;font-size:12px;padding:3px 10px;border-radius:6px;margin-bottom:4px}
.opf .opf-info-row .il span{display:block;font-weight:900;font-size:16px;line-height:1.3}
.opf .opf-info-row .ia{text-align:center;color:var(--cta);font-weight:900}
.opf .opf-info-row .iv{text-align:right}.opf .opf-info-row .iv b{display:block;font-size:24px;font-weight:900;color:var(--cta2);line-height:1.1}.opf .opf-info-row .iv small{font-size:11px;color:var(--sub)}
.opf .opf-info-note{font-size:12px;color:var(--sub);margin:6px 0}
@media (max-width:420px){.opf .opf-info-row{grid-template-columns:1fr;gap:4px}.opf .opf-info-row .ia{display:none}.opf .opf-info-row .iv{text-align:left}}
/* ===== 画像マップ ===== */
.opf .opf-map{position:relative;display:block;margin:14px 0;line-height:0}
.opf .opf-map img{width:100%;height:auto;display:block;border-radius:10px}
.opf .opf-map-area{position:absolute;display:block;border-radius:6px}
.opf .opf-map-area:hover,.opf .opf-map-area:focus{outline:3px solid var(--cta);outline-offset:-3px;background:rgba(228,87,46,.08)}
.opf-float-panel[hidden]{display:none!important}
.opf-float:not(.is-open) .opf-float-panel{display:none!important}

/* ===== 運営者アイコンの吹き出し ===== */
.opf .opf-say{display:flex;gap:10px;align-items:flex-start;margin:16px 0}
.opf .opf-say-av{flex-shrink:0;width:64px;text-align:center}
.opf .opf-say-av img{width:64px;height:64px;border-radius:50%;display:block;margin:0 auto;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.opf .opf-say-av span{display:block;font-size:10px;color:var(--sub);margin-top:4px;line-height:1.2}
.opf .opf-say-bubble{position:relative;flex:1;min-width:0;background:#fff;border:2px solid var(--gold);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.7}
.opf .opf-say-bubble:before{content:"";position:absolute;left:-12px;top:22px;border:6px solid transparent;border-right:8px solid var(--gold);border-left:0}
.opf .opf-say-bubble:after{content:"";position:absolute;left:-8px;top:24px;border:4px solid transparent;border-right:6px solid #fff;border-left:0}
.opf .opf-say-bubble b,.opf .opf-say-bubble strong{color:var(--cta2)}
.opf .opf-say.is-smug .opf-say-bubble{border-color:#15202B}.opf .opf-say.is-smug .opf-say-bubble:before{border-right-color:#15202B}
.opf .opf-say.is-sparkle .opf-say-bubble{border-color:var(--cta);background:#FFF8F5}.opf .opf-say.is-sparkle .opf-say-bubble:before{border-right-color:var(--cta)}.opf .opf-say.is-sparkle .opf-say-bubble:after{border-right-color:#FFF8F5}