/* ===== 申し込みボタン ===== */
.hcr-btn{display:inline-block;padding:.6em 1.2em;border-radius:6px;background:#e8452c;color:#fff!important;text-decoration:none!important;font-weight:bold;line-height:1.3;white-space:nowrap;box-shadow:0 3px 0 #b8321d;transition:transform .1s,box-shadow .1s}
.hcr-btn::after{content:"›";margin-left:.4em}
.hcr-btn:hover{transform:translateY(1px);box-shadow:0 2px 0 #b8321d}
.hcr-btn-sub{background:#fff;color:#e8452c!important;border:2px solid #e8452c;box-shadow:none;padding:calc(.6em - 2px) calc(1.2em - 2px)}
.hcr-btn-sub:hover{box-shadow:none;background:#fff5f3}
.hcr-px{display:inline;width:1px;height:1px;border:0;margin:0;padding:0}

/* ===== 切り替えボタン ===== */
.hcr-sw{margin:.6em 0 0}
.hcr-sw-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em;margin:0 0 .7em}
.hcr-sw-label{font-weight:bold;margin-right:.2em;min-width:5.5em;text-align:right}
.hcr-sw-btn{appearance:none;border:2px solid #e8452c;background:#fff;color:#e8452c;padding:.35em 1.1em;border-radius:999px;font-weight:bold;line-height:1.4;cursor:pointer;transition:background .15s,color .15s}
.hcr-sw-btn:hover{background:#fff5f3}
.hcr-sw-btn[aria-pressed="true"]{background:#e8452c;color:#fff}
.hcr-sw-btn:focus{outline:none;box-shadow:none}
.hcr-sw-btn:focus-visible{outline:2px solid #1d2327;outline-offset:2px}
.hcr-sw-panel{margin-top:1em}
.hcr-sw-panel[hidden]{display:none!important}
/* JSが動かないときはボタンを隠して6つの表を全部見せ、表ごとに条件を出す。JSが動いたら条件の見出しは隠す */
.hcr-sw:not(.hcr-js) .hcr-sw-bar{display:none}
.hcr-sw-cap{margin:1.5em 0 .4em;font-weight:bold}
.hcr-sw.hcr-js .hcr-sw-cap{display:none}
/* 記事の表のオプションなし/オプション込みの切り替えも同じ(JSが動かないときは2つの表を上下に並べる) */
.hcr-tg{margin:.6em 0 0}
.hcr-tg:not(.hcr-js) .hcr-sw-bar{display:none}
.hcr-tg.hcr-js .hcr-sw-cap{display:none}

/* ===== ランキング表 ===== */
/* 表のルール: 項目名(th)は中央・内容(td)は左寄せ、上下は中央。文字の色・大きさと枠線はテーマに任せる */
.wp-block-table.hcr-table-wrap{margin:0 0 .6em;overflow-x:auto}
/* 記事用の表も、狭い画面ではページ全体ではなく表だけを横にスクロール */
.wp-block-table.hcr-scroll{overflow-x:auto;max-width:100%}
/* 列幅は固定せず、ブラウザに中身から決めさせる。折れない語(社名・金額・札・ボタン)の幅が必ず確保されるので、
   セルからはみ出さない。折り返すのは受け取り方の文章だけ */
.hcr-table-wrap .hcr-table{width:100%;table-layout:auto!important}

.hcr-table-wrap .hcr-table th,
.hcr-table-wrap .hcr-table td{padding:.8em .5em;vertical-align:middle}
.hcr-table-wrap .hcr-table thead th{word-break:keep-all}
.hcr-table-wrap .hcr-table th{text-align:center}
.hcr-table-wrap .hcr-table td{text-align:left}
/* ボタンはセル幅いっぱいにそろえる(社ごとに幅がバラバラにならないように) */
.hcr-table-wrap .hcr-table td.hcr-c-apply .hcr-btn{display:block;padding-left:.8em;padding-right:.8em;text-align:center}

/* 順位バッジ */
.hcr-rank{display:flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;margin:0 auto .45em;border-radius:50%;background:#8c96a0;color:#fff;font-weight:bold;line-height:1;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.hcr-rank small{font-size:.6em;margin-left:.05em;font-weight:bold}
.hcr-rank-1{background:linear-gradient(135deg,#f9e27d 0%,#d9a514 55%,#b8860b 100%);box-shadow:0 2px 6px rgba(184,134,11,.45)}
.hcr-rank-2{background:linear-gradient(135deg,#eef1f4 0%,#aab3bc 55%,#8a949e 100%)}
.hcr-rank-3{background:linear-gradient(135deg,#f0c39b 0%,#c27c45 55%,#9c5a2b 100%)}
/* 社名は単語の途中で切らない(列のほうが社名に合わせて広がる) */
.hcr-name{display:block;word-break:keep-all}

/* 金額 */
.hcr-amount{display:block;font-weight:bold;white-space:nowrap;font-size:1.15em}
/* ドコモショップの東日本・西日本は2行なので本文と同じ大きさ */
.hcr-amount-s{font-size:1em}
/* オプション込みの最大額とバッジ。額の下に小さく */
.hcr-max{display:block;margin-top:.3em;font-size:.85em}
.hcr-max-v{margin-right:.4em;white-space:nowrap}
/* 受け取りの手続きの手間 */
.hcr-proc{display:inline-block;margin:0 0 .3em;padding:0 .5em;border-radius:.8em;background:#eef3fb;font-size:.85em;letter-spacing:0}
/* 手続きの説明はバッジの次の行から */
.hcr-rdesc{display:block}
/* 申し込みのボタンは表の中では少し小さく(7列→6列でも表が本文の幅に収まるように) */
.hcr-table-wrap .hcr-table td.hcr-c-apply .hcr-btn{font-size:.85em;padding-left:.5em;padding-right:.5em;letter-spacing:0}
/* dポイントで受け取る窓口の区切り、受け付けていない窓口 */
.hcr-table tr.hcr-sep th{text-align:center;background:#f3f3f3}
.hcr-table tr.hcr-row-none th,.hcr-table tr.hcr-row-none td{color:#888}
.hcr-ad{display:block;white-space:nowrap}
.hcr-sub{display:block}
/* 2年の実質月額。住まいの種類と額を1行ずつ。狭いときは種類と額の間でだけ折れる(額そのものは折らない) */
.hcr-net{display:block}
.hcr-net+.hcr-net{margin-top:.2em}
.hcr-net-l{display:inline-block;margin-right:.5em;word-break:keep-all}
.hcr-net-v{display:inline-block;font-weight:bold;white-space:nowrap}
/* 入金の月。受け取り方の文章の上に。狭いときは「目に」の後ろでだけ折れる */
.hcr-when{display:block;font-weight:bold;word-break:keep-all;margin-bottom:.2em}
/* 札は折らない。列のほうが札に合わせて広がる */
.hcr-tag{display:inline-block;margin-top:.3em;padding:0 .5em;border-radius:999px;white-space:nowrap}
.hcr-tag-none{background:#e7f5ec}
.hcr-tag-opt{background:#fdecea}

.hcr-v{margin:0}
.hcr-note{margin:.4em 0 1.4em}

/* ===== 狭いとき: 1社1枚のカード ===== */
/* 画面幅ではなく「表に使える幅」で切り替える(サイドバーありで本文が狭いときも、はみ出す前にカードになる)。6列の表は約740pxから入るので、余裕を見て760pxで切り替える */
.wp-block-table.hcr-table-wrap{container-type:inline-size}
@container (max-width:760px){
	.hcr-table,
	.hcr-table tbody,
	.hcr-table tr,
	.hcr-table th,
	.hcr-table td{display:block;width:100%;box-sizing:border-box}
	.hcr-table colgroup,
	.hcr-table thead{display:none}
	.hcr-table tr{margin:0 0 1.2em}
	.hcr-table th.hcr-c-name{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.8em}
	.hcr-table th.hcr-c-name .hcr-rank{margin:0}
	.hcr-table th.hcr-c-name .hcr-name{display:inline}
	/* 見出しを上、内容を左寄せで下に */
	.hcr-table td{padding:.7em 1em!important}
	.hcr-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.2em;font-weight:bold}
	/* 空の欄(受付なしの窓口、dポイントの窓口の実質月額と申し込み)はカードに出さない */
	.hcr-table td:empty{display:none}
}
/* 切り替えボタンはスマホ幅で左寄せに */
@media (max-width:600px){
	.hcr-sw-bar{justify-content:flex-start}
	.hcr-sw-label{min-width:0;width:100%;text-align:left}
}

/* ===== オプションの内訳 ===== */
/* 注記と内訳の見出しの間。段落の余白はテーマに上書きされることがあるので、包みのdivで取る */
.hcr-extras{margin:2em 0 1.5em}
.hcr-extras-name{margin:1.2em 0 .4em;font-weight:bold}
.hcr-extras-list{margin:0 0 1em}
.hcr-desc{margin:0 0 1.2em}

/* ===== 記事用ショートコードの段落 ===== */
/* ショートコードの段落はテーマの段落間隔(p+p)から外れるので、余白は自分で付ける */
.hcr-p{margin:0 0 1.5em}
/* 表の窓口名の上のロゴ(ランキング表と記事の額の表) */
.hcr-logo{display:block;height:24px;width:auto;max-width:100%;margin:0 auto .3em;object-fit:contain}
.hcr-namebox{display:block}
/* GMOとくとくBBで借りられるルーターの写真を横に並べる */
.hcr-models{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0 0 .5em}
.hcr-model{margin:0;width:180px;max-width:30%;text-align:center}
.hcr-model img{width:100%;height:auto}
.hcr-model figcaption{font-size:.8em}

/* ===== 記事の図(SVG) ===== */
/* 図の題。図の上に太字で */
.hcr-fig{margin:0 0 .4em}
.hcr-fig-ttl{margin:0 0 .4em;font-weight:bold}
/* 横幅は記事の幅に合わせて伸び縮み。広い画面では大きくしすぎない(文字が本文より大きくならないよう480pxまで) */
.hcr-svg{display:block;width:100%;max-width:480px;height:auto;margin:0 auto}
/* テーマの文字間隔や文字の大きさが図の中の文字に効くと、文字が広がって重なるので、図の中では効かせない */
.hcr-svg text{letter-spacing:0!important;word-spacing:0!important}

/* ===== 記事の額の表・実質月額の表の窓口の列 ===== */
/* ロゴと窓口名を中央にそろえる(ランキング表と同じ見た目)。見出しの「窓口」も列に合わせて中央 */
.wp-block-table.hcr-money tbody th,
.wp-block-table.hcr-money thead th:first-child{text-align:center!important;vertical-align:middle}
/* 窓口名は単語の途中で折らない(「OCN インターネット」は空白で折れる)。入りきらないときだけ折る */
.wp-block-table.hcr-money tbody th{word-break:keep-all;overflow-wrap:anywhere;line-height:1.4}
.wp-block-table.hcr-money tbody th .hcr-logo{margin:0 auto .4em}