）は表全体に対して中央揃えにする。
上のtd/th:last-childルールはcolspanセル（=同時にlast-childでもある）にも
適用されて右寄せになってしまうため、より詳細度の高いこちらで上書きする。 */
.post_content table.rm-price-table th[colspan] {
text-align: center;
white-space: normal;
}
/* プラン名列は左揃え、料金列は右揃えを明示（列幅はcolgroupで70〜75%／25〜30%に指定） */
.post_content table.rm-price-table--plan td:first-child {
text-align: left;
white-space: normal;
}
@media (max-width: 599px) {
.post_content table.rm-price-table {
width: 100%;
max-width: 100%;
}
.post_content table.rm-price-table--plan td:first-child {
font-size: 0.92em;
}
}
/* スマホでの余白調整 */
@media (max-width: 599px) {
.post_content > div[style*="padding"] {
padding-left: 5vw !important;
padding-right: 5vw !important;
}
.post_content h2:where(:not([class^="swell-block-"])) {
font-size: 1.1em;
}
}
/* =========================================================
機種詳細ページ（limit_post）を商品ページらしく
========================================================= */
.rm-product {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: flex-start;
max-width: 1100px;
margin: 0 auto 1.4em;
}
.rm-product__figure {
flex: 1 1 320px;
max-width: 380px;
margin: 0 auto;
}
.rm-product__figure img {
width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid var(--color_border, #e5e5e5);
}
.rm-product__body {
flex: 1 1 380px;
}
.rm-product__price {
background: var(--color_pale02, #f3f8fd);
border-radius: 8px;
padding: 0.7em 1.1em;
margin: 0.8em 0;
}
.rm-product__price p {
margin: 0.25em 0;
font-size: 1.1em;
}
/* スペック表：table構造だと1行でも長い項目があると全行の列幅が引きずられて
横に間延びするため、行ごとに項目名の幅が決まるflex構成に変更 */
.rm-spec-list {
max-width: 520px;
margin: 0.8em auto;
border: 1px solid var(--color_border, #e5e5e5);
border-radius: 8px;
overflow: hidden;
}
.rm-spec-list__row {
display: flex;
}
.rm-spec-list__row + .rm-spec-list__row {
border-top: 1px solid var(--color_border, #e5e5e5);
}
.rm-spec-list__label {
flex: 0 0 auto;
min-width: 7.5em;
background: #fafafa;
padding: 0.5em 0.9em;
font-size: 16px;
line-height: 1.5;
white-space: nowrap;
}
.rm-spec-list__value {
flex: 1 1 auto;
min-width: 0;
padding: 0.5em 0.9em;
font-size: 16px;
line-height: 1.5;
border-left: 1px solid var(--color_border, #e5e5e5);
word-break: break-word;
}
@media (max-width: 380px) {
.rm-spec-list__label {
min-width: 6em;
font-size: 14.5px;
}
.rm-spec-list__value {
font-size: 14.5px;
}
}
@media (max-width: 599px) {
.rm-spec-list {
max-width: 100%;
}
}
/* PC表示：中央に細長く浮いて見えないよう横幅を広げ、左右比率を明示（文字サイズ・行間・SP表示は変更しない） */
@media (min-width: 600px) {
.rm-spec-list {
width: 100%;
max-width: 740px;
}
.rm-spec-list__label {
flex: 0 0 33%;
min-width: 0;
}
.rm-spec-list__value {
flex: 1 1 67%;
}
}
/* =========================================================
料金シミュレーター（/sim ページのプラン選択）
========================================================= */
.rm-price-sim {
max-width: 1100px;
margin: 1.2em auto;
background: #fff;
border: 1px solid var(--color_border, #e5e5e5);
border-radius: 10px;
padding: 18px 20px;
}
.rm-price-sim__note {
margin: 0 0 0.7em;
font-size: 0.9em;
color: #666;
}
.rm-price-sim__options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 14px;
align-items: stretch;
}
/* post_content の wpautop により選択肢の間に紛れ込む
がグリッド枠を1つ消費し、
PCで2列＋中央に大きな空白ができる原因になっていたため、グリッド内では無効化する */
.rm-price-sim__options br {
display: none;
}
.rm-price-sim__option {
position: relative;
display: block;
border: 2px solid var(--color_border, #e5e5e5);
border-radius: 8px;
padding: 9px 10px 9px 32px;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
font-size: 0.9em;
line-height: 1.3;
}
.rm-price-sim__option input[type="radio"] {
position: absolute;
left: 12px;
top: 14px;
}
.rm-price-sim__option:has(input:checked) {
border-color: var(--color_main);
background: var(--color_pale02, #f3f8fd);
}
/* 金額そのものは選択状態に関わらず常に濃色。選択状態は枠・背景・ラジオで示す */
.rm-price-sim__option-text strong {
color: var(--color_text);
}
.rm-price-sim__result {
display: flex;
gap: 24px;
justify-content: center;
background: var(--color_pale02, #f3f8fd);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
/* プラン未選択時：「￥ー」のみの表示を避け、選択を促す案内文を表示する */
.rm-price-sim__placeholder {
margin: 0;
width: 100%;
text-align: center;
font-size: 0.95em;
color: #666;
}
.rm-price-sim__result-item {
text-align: center;
}
.rm-price-sim__result-item span {
display: block;
font-size: 0.85em;
color: #666;
margin-bottom: 4px;
}
.rm-price-sim__result-item strong {
font-size: 1.5em;
color: var(--color_text);
}
.rm-price-sim__cta {
text-align: center;
}
.rm-price-sim__btn {
background-color: var(--color_main);
color: #fff;
border: none;
border-radius: 6px;
padding: 0.9em 2.5em;
font-size: 1em;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s;
}
.rm-price-sim__btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* 確認画面：同意チェックボックス未チェック時の送信ボタンを視覚的にも無効表示にする */
.wpcf7-form .wpcf7-submit:disabled {
background-color: #ccc !important;
opacity: 1 !important;
cursor: not-allowed;
box-shadow: none !important;
}
.rm-price-sim__btn:not(:disabled):hover {
opacity: 0.85;
}
@media (max-width: 767px) {
.rm-price-sim__options {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.rm-price-sim__options {
grid-template-columns: 1fr;
}
}
.rm-price-sim__options--charger {
grid-template-columns: repeat(2, 1fr);
max-width: 480px;
}
@media (max-width: 480px) {
.rm-price-sim__options--charger {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
規約・注意事項ページ：長い条文リストの行間・項目間の余白を改善
（文言・色は変更せず、可読性のための余白のみ調整）
========================================================= */
.rm-legal-list li {
line-height: 1.9;
margin-bottom: 0.9em;
}
@media (max-width: 599px) {
.rm-legal-list li {
line-height: 2;
margin-bottom: 1.1em;
}
}
/* =========================================================
共通：本文冒頭の余白統一（H1直下の間隔を主要ページで揃える）
/sim・/sales・/wi-fi は元々 padding:32px 20px の冒頭ブロックを持っていたため、
同じ余白を持たない /flow・/pay・/qa・/contact の本文先頭要素にも付与する。
========================================================= */
.rm-content-top-space {
padding-top: 32px;
}
/* =========================================================
/sales ページ（機種一覧・商品ページ）
========================================================= */
.rm-sales-intro {
max-width: 1100px;
margin: 0 auto;
padding: 32px 20px;
}
.rm-sales-intro h2 {
margin-top: 0;
}
/* ファーストビュー：見出し・説明・CTA（左）と商品画像（右）の2カラム。
PCで画像なし・空白のみになっていた問題を解消。/sim・/wi-fi と縦の余白を揃える。 */
.rm-sales-hero {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 1.6em;
}
.rm-sales-hero__body {
flex: 1 1 50%;
min-width: 0;
}
.rm-sales-hero__body h2 {
margin-top: 0;
}
.rm-sales-hero__visual {
flex: 1 1 50%;
min-width: 0;
margin: 0;
}
.rm-sales-hero__visual img.rm-page-visual {
margin: 0;
}
@media (max-width: 767px) {
.rm-sales-hero {
flex-direction: column;
gap: 1.2em;
}
.rm-sales-hero__body,
.rm-sales-hero__visual {
flex: 1 1 auto;
width: 100%;
}
}
.rm-sales-catalog {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 32px;
}
.rm-sales-catalog__heading {
text-align: center;
margin: 0 0 1.2em;
}
.rm-device-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 0 0 1.5em;
}
@media (max-width: 1000px) {
.rm-device-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 700px) {
.rm-device-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 420px) {
.rm-device-grid {
grid-template-columns: 1fr;
}
}
.rm-device-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--color_border, #e5e5e5);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.2s;
}
.rm-device-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.rm-device-card__figure {
aspect-ratio: 1 / 1;
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.rm-device-card__figure img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 12px;
}
.rm-device-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 14px 16px 18px;
}
.rm-device-card__name {
margin: 0 0 0.4em;
font-weight: 700;
font-size: 1em;
line-height: 1.4;
}
.rm-device-card__price {
margin: 0 0 0.2em;
font-size: 0.9em;
color: #444;
}
.rm-device-card__from {
margin: 0 0 0.8em;
font-size: 0.85em;
color: #666;
}
.rm-device-card__btn {
margin-top: auto;
display: block;
text-align: center;
background: var(--color_main);
color: #fff;
border-radius: 6px;
padding: 0.6em 0.8em;
font-size: 0.85em;
font-weight: 700;
}
/* 選択内容サマリー（申込フォーム上部） */
.rm-selection-summary {
max-width: 640px;
margin: 0 auto 2em;
background: var(--color_pale02, #f3f8fd);
border-radius: 8px;
padding: 18px 20px;
}
.rm-selection__title {
margin: 0 0 0.6em;
font-weight: 700;
font-size: 0.95em;
color: var(--color_main);
}
.rm-selection__row {
padding: 0.35em 0;
font-size: 0.95em;
border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.rm-selection__row,
.rm-selection__row > p {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 0;
}
.rm-selection__row:first-of-type {
border-top: none;
}
.rm-selection__label {
color: #666;
flex: 0 0 auto;
}
.rm-selection__value {
font-weight: 700;
text-align: right;
}
/* 確認画面：入力内容の一覧テーブル（項目名｜内容の2列。編集不可のテキスト表示専用）
PCは横並びの2列、SPは項目名→内容の縦積みにして横スクロールを発生させない。 */
.rm-confirm-table {
max-width: 640px;
margin: 1.5em auto;
border: 1px solid var(--color_border, #e5e5e5);
border-radius: 8px;
overflow: hidden;
}
.rm-confirm-table__row {
display: flex;
}
.rm-confirm-table__row + .rm-confirm-table__row {
border-top: 1px solid var(--color_border, #e5e5e5);
}
.rm-confirm-table__label {
flex: 0 0 9.5em;
background: #fafafa;
padding: 0.75em 1em;
font-weight: 700;
font-size: 0.95em;
}
.rm-confirm-table__value {
flex: 1 1 auto;
min-width: 0;
padding: 0.75em 1em;
border-left: 1px solid var(--color_border, #e5e5e5);
font-size: 0.95em;
word-break: break-word;
}
/* お問い合わせ内容など複数行の入力のみ、改行を保持して表示する */
.rm-confirm-table__value--message {
white-space: pre-wrap;
}
/* wpautopが行内テキストをで包む際に前後へ挿入する改行が、
pre-wrap指定の行で余白として見えてしまうのを防ぐ */
.rm-confirm-table__label > p,
.rm-confirm-table__value > p {
margin: 0;
display: inline;
}
@media (max-width: 599px) {
.rm-confirm-table__row {
flex-direction: column;
}
.rm-confirm-table__label {
flex-basis: auto;
border-bottom: 1px solid var(--color_border, #e5e5e5);
}
.rm-confirm-table__value {
border-left: none;
}
}
/* 確認画面の操作エリア：「戻る」（控えめ）と「送信する」（既存の強調ボタン）を横並びに */
.rm-confirm-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 2em;
}
.rm-confirm-actions input[type="submit"] {
width: auto;
min-width: 200px;
margin: 0;
}
.rm-confirm-back-btn {
display: inline-block;
padding: 0.9em 1.6em;
font-size: 0.95em;
color: #666;
background: #f4f4f4;
border: 1px solid #ddd;
border-radius: 6px;
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
white-space: nowrap;
}
.rm-confirm-back-btn:hover {
background: #eaeaea;
border-color: #ccc;
text-decoration: none;
}
@media (max-width: 599px) {
.rm-confirm-actions {
flex-direction: column;
}
.rm-confirm-actions input[type="submit"],
.rm-confirm-back-btn {
width: 100%;
max-width: 320px;
text-align: center;
}
}
/* =========================================================
申込フォーム（CF7）レイアウト全面調整
========================================================= */
.wpcf7-form,
.wpcf7 {
max-width: 640px;
margin: 0 auto;
}
.wpcf7-form p {
margin: 0 0 1.4em;
}
.wpcf7-form > p:first-child,
.wpcf7-form br {
display: none;
}
.wpcf7-form label {
display: block;
font-weight: 700;
font-size: 0.95em;
margin-bottom: 0.5em;
line-height: 1.5;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.75em 0.9em;
font-size: 1em;
border: 1px solid var(--color_border, #ccc);
border-radius: 6px;
background: #fff;
}
.wpcf7-form textarea {
min-height: 120px;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
outline: none;
border-color: var(--color_main);
box-shadow: 0 0 0 3px var(--color_main_thin, rgba(4,56,76,0.08));
}
/* 姓名・セイメイなど、1つの p 内に入力欄が2つ並ぶ場合は横並び2分割 */
.wpcf7-form p:has(> span.wpcf7-form-control-wrap + span.wpcf7-form-control-wrap) {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.wpcf7-form p:has(> span.wpcf7-form-control-wrap + span.wpcf7-form-control-wrap) > span.wpcf7-form-control-wrap {
flex: 1 1 0;
min-width: 140px;
}
/* ラジオボタン・チェックボックス */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
.wpcf7-form .wpcf7-list-item {
margin: 0;
}
.wpcf7-form .wpcf7-list-item-label {
display: inline-flex;
align-items: center;
gap: 0.4em;
cursor: pointer;
}
.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--color_main);
}
/* 郵便番号・住所欄 */
.wpcf7-form input#zip {
max-width: 200px;
}
/* 申込フォーム：送信ボタン手前の案内文（未入力時に進めない理由の説明） */
.wpcf7-form .rm-form-hint {
max-width: 480px;
margin: 1.6em auto 0.6em;
padding: 0.7em 1em;
background: var(--color_pale02, #f3f8fd);
border-radius: 6px;
font-size: 0.85em;
line-height: 1.7;
color: #555;
}
/* 必須・任意ラベル */
.wpcf7-form .necessary {
display: inline-block;
background: #e0433f;
color: #fff;
font-size: 0.7em;
font-weight: 700;
padding: 0.15em 0.6em;
border-radius: 3px;
margin-left: 0.5em;
vertical-align: middle;
}
/* 確認画面へ／送信するボタン */
.wpcf7-form input[type="submit"] {
display: block;
width: 100%;
max-width: 320px;
margin: 2em auto 0;
background-color: var(--rm-cta-red);
color: #fff;
border: none;
border-radius: 6px;
padding: 0.9em 1.5em;
font-size: 1.05em;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s;
}
.wpcf7-form input[type="submit"]:hover {
opacity: 0.85;
}
/* 同意チェックボックス
DOM構造:
→ チェックボックスとラベル文の親である |