@charset "UTF-8"; /* ========================================================================== gamdom.style - homepage content components -------------------------------------------------------------------------- Separate from home-layout.css (page shell) and cards.css (post cards, signed off and untouched) so any one of the three can be reverted alone. Aligned to the reference at gamdom-style.vercel.app, approved 2026-09-12. Radius tokens come from home-layout.css, which loads first. The shadows this file used to add are gone. The reference has none at all - 141 rounded elements, zero box-shadow - and its cleanliness comes from hairline borders and space instead. That applies here too. NO NEW COLOUR. The table divider uses var(--color_border--table), which this site already defines as #dcdcdc; it simply was not reaching the page (see the table note below). Loaded site-wide from functions.php since 2026-09-13 (was page 152 only). The "N on this page" counts in the notes below describe the homepage, where each rule was first measured. ========================================================================== */ /* -------------------------------------------------------------------------- 1. INTERNAL LINK CARDS (7 on this page) A white panel on a near-white page with no edge, and a title at body weight, read as a stray image beside a stray paragraph rather than a link. SWELL already sets `padding: 24px` on the inner, so that is not restated. -------------------------------------------------------------------------- */ .post_content .p-blogCard__inner { border: 1px solid var(--color_border); border-radius: var(--gs-radius-component); } .post_content .p-blogCard__thumb { border-radius: var(--gs-radius-thumb); overflow: hidden; /* clips the thumbnail to its own radius */ } /* SWELL ships the title at weight 400, underlined. In a card the whole surface is the link, so the weight carries it and the underline is redundant - it comes back on hover, where it confirms the target. */ .post_content .p-blogCard__title { font-weight: 700; line-height: 1.5; text-decoration: none; } .post_content .p-blogCard:hover .p-blogCard__title { text-decoration: underline; } /* -------------------------------------------------------------------------- 2. FAQ (5 items) The badges were squares and the items had no separation at all - five question-answer pairs in one undifferentiated stack. --swl-faq_icon_radius is SWELL's own variable for the badge corner, so the circle is set through the theme's knob rather than by overriding its rule. The badge colours are SWELL's `fill-custom` values and are left alone. -------------------------------------------------------------------------- */ .swell-block-faq { --swl-faq_icon_radius: 50%; } .swell-block-faq .swell-block-faq__item { border: 1px solid var(--color_border); border-radius: var(--gs-radius-component); padding: 4px 18px; margin-bottom: 14px; } .swell-block-faq .swell-block-faq__item:last-child { margin-bottom: 0; } /* A hairline between question and answer. The badge is positioned from the left edge of .faq_q, so the item's own padding sets its inset - the badge still clears the border. */ .swell-block-faq .faq_q { border-bottom: 1px solid var(--color_border); } /* -------------------------------------------------------------------------- 2B. FAQ AS AN ACCORDION (2026-09-13) faq-toggle.js adds `.is-toggle` to the block and toggles `.is-open` plus `hidden` on each answer. Everything below is scoped to `.is-toggle`, so without the script the FAQ renders fully open, as before - nothing here can hide an answer on its own. Content, markup and order are unchanged. The Q/A badges are SWELL's ::before; the chevron uses the free ::after. It is a toggle indicator, not content: an empty generated box, drawn from two borders in --color_main. -------------------------------------------------------------------------- */ .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_q { position: relative; padding-right: 44px; /* clears the chevron */ cursor: pointer; border-bottom-color: transparent; /* hairline only while open */ transition: border-color .2s ease; } .post_content .swell-block-faq.is-toggle .swell-block-faq__item.is-open > .faq_q { border-bottom-color: var(--color_border); } .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_q::after { content: ""; position: absolute; top: 50%; right: 8px; width: 9px; height: 9px; border-right: 2px solid var(--color_main); border-bottom: 2px solid var(--color_main); transform: translateY(-70%) rotate(45deg); /* pointing down */ transition: transform .2s ease; } .post_content .swell-block-faq.is-toggle .swell-block-faq__item.is-open > .faq_q::after { transform: translateY(-30%) rotate(-135deg); /* pointing up */ } /* `hidden` is set by the script; stated here too because SWELL gives .faq_a an explicit display that would otherwise override the attribute. */ .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_a[hidden] { display: none; } .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_q:focus-visible { outline: 2px solid var(--color_main); outline-offset: 2px; border-radius: 6px; } @media (max-width: 959px) { .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_q { padding-right: 36px; } .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_q::after { right: 6px; } } @media (prefers-reduced-motion: reduce) { .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_q, .post_content .swell-block-faq.is-toggle .swell-block-faq__item > .faq_q::after { transition: none; } } /* -------------------------------------------------------------------------- 3. TABLES (6 on this page) The reference keeps the navy header - which is this site's --color_main, already identical - but drops every gridline. No vertical rules at all, light horizontal dividers between body rows, and the only outer edge is a rounded border on the wrapper. Two things to know about the selectors here. First, specificity. Matching SWELL's `.post_content td` (0,1,1) is not enough: WordPress core ships wp-includes/blocks/table/style.min.css with `.wp-block-table td,.wp-block-table th{border:1px solid;padding:.5em}` at the same (0,1,1), and core is enqueued AFTER the child theme - so core wins on position. Hence (0,2,1) throughout this block. Second, the dark gridlines were never a design decision. That same core rule's unqualified `border: 1px solid` resolves to currentColor (#333) and overrode SWELL's intended var(--color_border--table), which this site sets to #dcdcdc. Clearing the border lets the site's own value apply again. -------------------------------------------------------------------------- */ .post_content .wp-block-table { border: 1px solid var(--color_border); border-radius: var(--gs-radius-component); } .post_content .wp-block-table td, .post_content .wp-block-table th { padding: 14px 20px; border: 0; } .post_content .wp-block-table tbody tr:not(:last-child) td, .post_content .wp-block-table tbody tr:not(:last-child) th { border-bottom: 1px solid var(--color_border--table); } /* -------------------------------------------------------------------------- 3B. PROS / CONS COMPARISON (総合評価: 良い点 | 悪い点) - 2026-09-13 A two-column table - th 良い点 / 悪い点, one body row whose cells hold `span.swl-inline-list` points (SWELL's inline icon lists) separated by
. Shown as two comparison cards instead of a table, without editing the table: each column's th + td become one card. SELECTOR: the only table on the page whose cells hold SWELL icon-list spans (1 of 6 when written). HOW: the table becomes a 2-column grid and thead/tbody/tr use `display: contents`, so th1, th2, td1, td2 fall into the grid in document order: header row, then body row - th1 over td1, th2 over td2. The
s are hidden so every point is its own row. The ○ / × icons are SWELL's, absolutely positioned against their span, so the span's own padding is never changed - rows are spaced with margin and divided by a hairline on the span's free ::after. Colours: the accents are --color_list_good / --color_list_bad, the same green and red the ○ and × icons already use. The header text is --color_text. The navy header bar is replaced by those accents. -------------------------------------------------------------------------- */ .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) { border: 0; border-radius: 0; overflow: visible; } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; width: 100%; } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > thead, .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody, .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > thead > tr, .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr { display: contents; } /* Card top: header, with the accent line inset along its rounded top edge. */ .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > thead > tr > th { display: block; background: none; color: var(--color_text); font-weight: 700; padding: 17px 18px 14px; border: 1px solid var(--color_border); border-radius: var(--gs-radius-component) var(--gs-radius-component) 0 0; box-shadow: inset 0 3px 0 var(--color_list_good); } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > thead > tr > th:nth-child(2) { box-shadow: inset 0 3px 0 var(--color_list_bad); } /* Card body. Grid stretch keeps both cards the same height. */ .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr > td { display: block; padding: 12px 18px; border: 1px solid var(--color_border); border-top: 0; border-radius: 0 0 var(--gs-radius-component) var(--gs-radius-component); } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr > td > br { display: none; } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr > td > .swl-inline-list { display: block; } /* Every point after the first: 24px above it, with a hairline across the full card width centred in that gap (12px each side). */ .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr > td > br + .swl-inline-list { margin-top: 24px; } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr > td > br + .swl-inline-list::after { content: ""; position: absolute; top: -12px; left: -18px; right: -18px; height: 1px; background: var(--color_border); } /* Mobile: one column, 良い点 card first, then 悪い点. */ @media (max-width: 599px) { .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table { grid-template-columns: minmax(0, 1fr); } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > thead > tr > th:nth-child(1) { order: 1; } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr > td:nth-child(1) { order: 2; } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > thead > tr > th:nth-child(2) { order: 3; margin-top: 16px; } .post_content figure.wp-block-table:has(> table > tbody > tr:only-child > td > .swl-inline-list[data-icon]):has(> table > thead > tr > th:nth-child(2):last-child) > table > tbody > tr > td:nth-child(2) { order: 4; } } /* -------------------------------------------------------------------------- 4. CAPTION BOX Navy title bar over a navy-bordered body, both square. Rounding the wrapper and clipping gives the two parts one silhouette - the same treatment the accordions get in home-layout.css. -------------------------------------------------------------------------- */ .post_content .cap_box { border-radius: var(--gs-radius-component); overflow: hidden; } /* 2026-09-13, same fix as the accordions (home-layout.css, 7.): the navy border is drawn by .cap_box_content with square corners, and the wrapper's 12px clip above cut them off - the bottom line looked detached from the sides. Rounding the content's own bottom corners makes the border follow the curve instead of being cut by it. */ .post_content .cap_box .cap_box_content { border-radius: 0 0 var(--gs-radius-component) var(--gs-radius-component); padding: 15px 20px; /* reads as ~20px of visible space above and below the text, like the accordion lists */ } /* The title bar matches the accordion title bars' padding, so the two navy-headed boxes on this page share one proportion. */ .post_content .cap_box .cap_box_ttl { padding: 15px 20px; } /* -------------------------------------------------------------------------- 5. CONTENT IMAGES (9 on this page) Radius only. The shadow that used to be here is gone, for the reason at the top of this file - and because transitioning box-shadow on these lazy-loaded images once left off-screen ones stuck at the interpolation start, rendering transparent. Not transitioning anything removes that whole class of bug. -------------------------------------------------------------------------- */ .post_content figure.wp-block-image img { border-radius: var(--gs-radius-component); } /* -------------------------------------------------------------------------- 6. STEP BLOCKS (3 blocks, 12 items - the last content type on this page with no design applied at all, found in the 2026-09-13 full-page audit) Plain SWELL default: a 48px circle-ish badge flush at the top-left corner, a 1px dashed line connecting items into a timeline, no border, no card - the one block type that still looked untouched next to everything else. Rebuilt as standalone cards, matching the reference's step treatment: a bigger rounded-square badge, generous padding, no connecting line. The 64px number badge is SWELL's own counter - `content: counter(step)` on ::after, set by SWELL - not stored text, so restyling it here invents nothing. The "STEP" label above the number is real markup already in the block (`.__label`), kept, just made smaller relative to the number so the number reads as the primary thing in the badge. `margin-bottom: 0 !important` is SWELL's own rule on this exact element (base style, no modifier class) - so the gap between cards is added as `margin-top` on the sibling instead of fought with !important, the same dodge already used for #sidebar's adjacent-sibling margin. -------------------------------------------------------------------------- */ /* REBUILT 2026-09-13 (second pass) - supersedes the badge sizes described above. Measured problems with the first pass: - a 112px left gutter for the absolutely positioned badge indented the whole body, so every screenshot sat off-centre in a narrow column - the title rendered centred across the card: SWELL's own `.swell-block-step:not(.is-style-big):not(.is-style-small) > ... > .swell-block-step__title` (specificity 0,5,0) sets flex-direction: column, and the earlier `align-items: center` here then centred the text horizontally, away from the badge - 375x667 screenshots shown at full size made cards 850-1700px tall Now one component: a header row (badge + left-aligned title), a hairline, then the body - description on the left, screenshot in a slim frame on the right on desktop, stacked below 960px. Selectors carry SWELL's own (0,5,0) prefix so none of these silently lose to its step rules. DOM order and content are untouched; the screenshot is only floated. */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center; border: 1px solid var(--color_border); border-radius: var(--gs-radius-panel); /* 28px everywhere; the bottom is 21px because the last paragraph's 1.9 line height already adds ~7px of empty leading under its text. */ padding: 28px 28px 21px; } .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item + .swell-block-step__item { margin-top: 16px; } /* SWELL's dashed timeline line between items - each step is its own card. */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item::before { display: none; } /* Badge: back in normal flow (grid cell 1), relative only so the green marker below can anchor to it. The number is still SWELL's own CSS counter; the "STEP" label is real markup, kept. Background stays SWELL's `.u-bg-main` navy. */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__number { position: relative; top: auto; left: auto; grid-column: 1; grid-row: 1; /* Top of the header row, not centred on it: a title that wraps to two lines (step 11 on a phone) made the row taller and pushed a centred badge 8px lower than every other card's. A one-line title is still centred against the badge - the badge sets that row's height. */ align-self: start; box-sizing: border-box; width: 52px; height: 52px; border-radius: var(--gs-radius-component); } .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__number::after { font-size: 22px; font-weight: 700; } .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__number .__label { font-size: 9px; letter-spacing: .06em; } /* Small accent-green marker on the badge - decorative, empty ::before. */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__number::before { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--gs-accent); } /* Title: grid cell 2, left-aligned, vertically centred on the badge by the grid itself. Font size stays SWELL's `.u-fz-l` (it is !important). */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__title { grid-column: 2; grid-row: 1; display: block; min-height: 0; line-height: 1.5; text-align: left; } /* Body: full card width under a hairline that ties it to its header. margin-left is set because SWELL pulls this body -48px left on phones. */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body { grid-column: 1 / -1; grid-row: 2; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--color_border); display: flow-root; /* contains the floated screenshot */ } /* Screenshot frame: a slim, neutral frame at a fixed readable size instead of a full-size 375x667 image. The image file and its markup are unchanged. */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body > figure.wp-block-image { width: min(100%, 220px); margin: 0 auto 1em; padding: 8px; border: 1px solid var(--color_border); border-radius: var(--gs-radius-component); background: rgba(0, 0, 0, .03); } .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body > figure.wp-block-image img { display: block; width: 100%; border-radius: 6px; } /* Desktop: screenshot on the right, description beside it. flow-root on the other children makes each text block keep a clean edge beside the image instead of wrapping under it; tables clear to full width below. */ @media (min-width: 960px) { .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body > figure.wp-block-image { float: right; width: 200px; /* 7px under the frame: when the screenshot is the lowest thing in the card, that plus the card's 21px bottom padding reads as the same 28px as the other sides (16px here made it 37px). */ margin: 0 0 7px 28px; } /* When a table follows the screenshot it clears below it - give it room. */ .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body > figure.wp-block-image:has(~ figure.wp-block-table) { margin-bottom: 20px; } .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body > :not(figure) { display: flow-root; } .post_content .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body > figure.wp-block-table { clear: both; } } /* -------------------------------------------------------------------------- 7. THE 24-LEVEL LIST (VIP section: ブロンズ1 ... オパール3) A plain list block -