@charset "UTF-8"; /* Template: swell Theme Name: elle Theme URI: https://swell-theme.com/ Description: SWELLの子テーマ Version: 1.0.0 Author: LOOS WEB STUDIO Author URI: https://loos-web-studio.com/ License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* ========================================================================== 株式会社e'lle — カスタムスタイル 【ルール】 - SWELLの内部クラスに依存しない。ブロックの「追加CSSクラス」に付けた el- 始まりのクラスを起点にする（テーマ更新で壊れないようにするため） - WordPressコアのクラス（.wp-block-columns 等）は安定しているので使ってよい - SWELL専用ブロック（投稿リスト等）とプラグインの内部クラスは推測で書かない。 必要になったら実機のHTMLを確認してから追記する - !important は最終手段……のはずだったが、下記「重要な注意」のとおり このテーマでは事実上必須になっている 【手順書】 - ページ構築： design/swell_page_build.md - FIRST VIEW： design/swell_fv_setup.md - 初期設定： design/swell_initial_settings.md 【最終整理】2026-08-18 — 実装〜公開前レビューで見つかった重複・死んだ コードを整理した。挙動は変更していない（表示結果は整理前と同じはず）。 ========================================================================== */ /* ========================================================================== 0. トークン ========================================================================== */ :root{ --el-base: #FFFFFF; --el-surface: #F5F0E9; --el-dark: #2B1D16; --el-mid: #6B4E3D; --el-gold: #B08D4F; /* ダーク背景上の文字／全背景の1px線・円 */ --el-gold-dark: #7F6234; /* 明るい背景上の文字専用（WCAG AA確保） */ --el-rule: #E3DBD0; --el-text: #3F332C; --el-en: 'Marcellus', serif; /* head内コードで読み込む */ /* 和文は Noto Sans JP。SWELLの「サイト全体設定 > 基本デザイン」で指定 */ --el-hd-pc: 76px; --el-hd-sp: 60px; /* ブレークポイント（メディアクエリでは変数が使えないため参考値） PC : 960px 以上 … SWELLのPC/SP境界に合わせる タブレット : 782〜959px スマホ : 781px 以下 … WordPress標準のカラム縦積み境界 小型端末 : 374px 以下 */ /* セクションの余白 */ --el-pad-y: 120px; --el-pad-x: 40px; --el-w-wide: 1080px; --el-w-narrow: 760px; } @media (max-width: 959px){ :root{ --el-pad-y: 72px; --el-pad-x: 24px; } } /* ========================================================================== 0-1. 【重要】WordPress/Gutenbergレイアウトシステムの負のマージン対策 このテーマで発生した不具合の大半は、下記1つの原因に集約される： WordPressのブロックレイアウト機能（ブロック間隔・カラムのガター調整）が、 フルワイドブロックやカラムブロックに対して自動的に margin: -32px（上下）、-164.5px（左右）、-24px（カラムのガター分） のような負のマージンを付与することがある。これにより、 - 隣接セクションが重なる（例：MARiELの黒背景がパートナー帯の ベージュに侵食した） - カラムが親要素からはみ出す／逆に内側にずれる（例：BUSINESSの 見出しが左右164.5pxずつ画面外に広がった） という現象が繰り返し起きた。実機のDevTools「Computed」タブの ボックスモデル図で、margin欄に見慣れない負の数値がないかを見るのが 最速の診断方法（2026-08-18、複数回この方法で特定した）。 【対策の原則】 独自クラス（.el-sec、.el-biz-row、.el-partner-row、.el-info、 カラムの .swell-block-columns__inner 等）を新設するときは、 必ず margin: 0 !important と width:100% !important 相当を明示すること。 自動では絶対に0にならない。 ========================================================================== */ /* ========================================================================== 1. セクション共通 器は SWELL の「フルワイドブロック」に .el-sec を付けて使う。 ブロック側の上下パディングは 0 にし、余白はここで管理する。 SWELLのフルワイドブロックは次の構造（実機HTMLで確認済み 2026-08-17）：
…中身…
.el-sec は「外側」に付く。中身は __inner の中にあるため、 横方向の幅と余白は __inner 側で管理する（外側で padding-inline すると二重になる） ========================================================================== */ .el-sec{ margin: 0 !important; /* → 0-1「WPの負のマージン対策」参照 */ padding-block: var(--el-pad-y) !important; padding-inline: 0 !important; background: var(--el-base); /* 外側の箱が中身より低く切れて次セクションの背景が透ける不具合の予防策 */ height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .el-sec > .swell-block-fullWide__inner{ max-width: var(--el-w-wide); margin-inline: auto; padding-inline: var(--el-pad-x); } .el-sec--narrow > .swell-block-fullWide__inner{ max-width: var(--el-w-narrow); } .el-sec--beige { background: var(--el-surface); } .el-sec--dark { background: var(--el-dark); } .el-sec--center{ text-align: center; } /* --- 英字ラベル --- */ .el-sec__label{ font-family: var(--el-en); font-size: 13px; letter-spacing: .20em; line-height: 1.4; color: var(--el-gold-dark); /* 明るい背景上はダークゴールド（AA確保） */ margin: 0 0 14px; } .el-sec--dark .el-sec__label{ color: var(--el-gold); } /* --- 安全網：セクション内の見出しからSWELLの装飾を無条件に外す --- el-sec__title の付け忘れがあっても、ダークブラウンの帯にならないようにする。 ただし文字サイズ・ゴールド線は付かないので、クラス自体は必ず付けること */ .el-sec h2, .el-sec h3, .el-sec h4{ background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } .el-sec h2::before, .el-sec h3::before, .el-sec h4::before{ content: none !important; display: none !important; } /* --- 和文H2＋ゴールド1px線 --- SWELLは見出しに独自デザイン（背景色・罫線・擬似要素）を当てる。 打ち消さないと帯状の塗りが残るため、装飾系を明示的にリセットしてから当てる。 SWELL側は .post_content h2 等の詳細度で来るので .el-sec を前置して勝たせる */ .el-sec .el-sec__title{ background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; text-align: inherit; font-size: 32px; font-weight: 400; letter-spacing: .08em; line-height: 1.75; color: var(--el-dark); margin: 0 0 32px; } .el-sec--dark .el-sec__title{ color: #fff; } /* SWELLが ::before で付ける装飾を消す */ .el-sec .el-sec__title::before{ content: none !important; display: none !important; } /* ゴールドの1px線はこちらで出す */ .el-sec .el-sec__title::after{ content: "" !important; display: block !important; position: static !important; width: 40px !important; height: 1px !important; background: var(--el-gold) !important; border: 0 !important; margin: 24px 0 0 !important; transform: none !important; } .el-sec--center .el-sec__title::after{ margin-inline: auto !important; } /* --- リード文（1行だけ大きく見せる） --- */ .el-sec__lead{ font-size: 24px; letter-spacing: .08em; line-height: 1.9; color: var(--el-dark); margin: 0 0 28px; } .el-sec--dark .el-sec__lead{ color: #fff; } /* --- 本文 --- */ .el-sec__body{ font-size: 16px; letter-spacing: .04em; line-height: 1.95; color: var(--el-text); margin: 0 0 28px; } .el-sec__body:last-child{ margin-bottom: 0; } .el-sec--dark .el-sec__body{ color: rgba(255,255,255,.85); } @media (max-width: 959px){ .el-sec__label{ font-size: 11px; letter-spacing: .18em; } .el-sec__title{ font-size: 22px; margin-bottom: 24px; } .el-sec__title::after{ margin-top: 20px; } .el-sec__lead { font-size: 18px; } .el-sec__body { font-size: 14px; text-align: left; } } /* ========================================================================== 1-2. ヘッダーナビの CONTACT を枠線ボタン化する案（2026-08-18 見送り） design_prompts.md の仕様では CONTACT だけ枠線ボタンにする想定だったが、 実装後に他のメニュー項目にも影響が出ているとの報告があり、原因を 再現・特定できなかったため、リスクを避けて見送った。 他のナビ項目と同じテキストリンクの見た目のまま運用する。 再検討する場合は design/swell_page_build.md の該当箇所も合わせて 見直すこと（el-nav-contact クラスの割り当て手順が残っている）。 ========================================================================== */ /* ========================================================================== 2. ボタン（枠線のみ。塗りはCONTACTの［SEND］だけ） ========================================================================== */ /* ボタンは「コアのボタンブロック」を使い、枠線ボタンに上書きする。 SWELLボタンは塗り前提の設計のため、枠線表現はコアブロックのほうが素直。 .wp-block-button__link はWordPressコアのクラスで安定しているため使用可 */ .el-btn .wp-block-button__link, a.el-btn{ display: inline-block; width: auto; /* コアの .wp-block-buttons .wp-block-button__link{width:100%} を打ち消す */ min-width: 240px; /* 文字数が違ってもボタン幅を揃える */ border: 1px solid var(--el-dark); border-radius: 2px; background: transparent; padding: 17px 44px; color: var(--el-dark); font-size: 14px; letter-spacing: .10em; line-height: 1.4; text-decoration: none; transition: background .25s, color .25s; } .el-btn .wp-block-button__link:hover, a.el-btn:hover{ background: var(--el-dark); color: #fff; } /* ダーク背景上 */ .el-btn--light .wp-block-button__link, a.el-btn--light{ border-color: rgba(255,255,255,.55); color: #fff; } .el-btn--light .wp-block-button__link:hover, a.el-btn--light:hover{ background: rgba(255,255,255,.12); color: #fff; } /* ボタン群は中央揃え・PC横並び／SP縦積み */ .el-btns{ margin-top: 52px; display: flex; gap: 16px; justify-content: center; } @media (max-width: 959px){ .el-btns{ margin-top: 40px; flex-direction: column; align-items: stretch; } } /* ========================================================================== 3. 01 FIRST VIEW（メインビジュアル内のブログパーツ） ========================================================================== */ .el-fv{ width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 80px; text-align: left; } .el-fv__label{ margin: 0 0 28px; font-family: var(--el-en); font-size: 14px; letter-spacing: .22em; line-height: 1.4; color: var(--el-gold); } .el-fv__copy{ margin: 0 0 30px; font-size: 40px; font-weight: 400; letter-spacing: .08em; line-height: 1.85; color: #fff; } .el-fv__lead{ margin: 0; max-width: 640px; /* リード文が中途半端な位置で折り返さないよう幅を確保 */ font-size: 16px; letter-spacing: .04em; line-height: 2.0; color: rgba(255,255,255,.88); } @media (max-width: 959px){ /* ⚠️ .p-mainVisual__inner に display:flex を当てると SPでメインビジュアルが消える（2026-08-18 実機で確認）。絶対に触らないこと。 SPの下寄せは .el-fv 自身の上パディングだけで作る */ .el-fv { width: 100%; padding-inline: 24px; padding-block: 26vh 12vh; } .el-fv__label{ margin-bottom: 20px; font-size: 11px; letter-spacing: .18em; } .el-fv__copy { margin-bottom: 24px; font-size: 24px; } .el-fv__lead { max-width: none; font-size: 14px; } } @media (max-width: 374px){ .el-fv { padding-inline: 20px; padding-block: 72px 56px; } .el-fv__copy{ font-size: 22px; } } /* ========================================================================== 4. 03 BUSINESS ========================================================================== */ /* ⚠️ カラムは「SWELLのカラムブロック」を使用している（実機HTMLで確認 2026-08-18） .swell-block-columns > .swell-block-columns__inner > .swell-block-column WordPressコアの .wp-block-columns ではないため、そちらを指定しても当たらない。 */ /* --- 事業ブロック：左＝ビジュアル／右＝ダーク面。左右を交互にしない --- */ .el-biz-row, .el-partner-row{ padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } .el-biz-row > .swell-block-fullWide__inner, .el-partner-row > .swell-block-fullWide__inner{ margin-block: 0 !important; } /* SWELLの __inner は .l-article（--article_size:900px）で細く絞られる。 BUSINESSは主役セクションなので広げる */ .el-biz-row > .swell-block-fullWide__inner{ max-width: 1200px; margin-inline: auto; padding-inline: 0; } /* --- PC：グリッドにして左右を確実に等高にする --- flexの align-items:stretch はWordPress側の干渉で効かなかったため、 行の高さが自動で揃うグリッドに変更した（2026-08-18） */ @media (min-width: 960px){ .el-biz-row .swell-block-columns__inner{ display: grid !important; grid-template-columns: 45fr 55fr; gap: 0 !important; align-items: stretch !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .el-biz-row .swell-block-column{ display: flex !important; flex-direction: column; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .el-biz-row .swell-block-column > *{ flex: 1 1 auto; margin: 0 !important; } } /* --- ダークパネルの見た目（01・02で2種類のDOM構造に対応） --- 01：ブロックエディタ上で el-biz__panel クラスが「内側のグループ」に付いている 02：el-biz__panel クラスが「外側のカラム」に付き、内側は無地グループになっている （どちらもクライアント側での配置作業により生じた差。CSS側で両対応させる） WordPressはグループブロックに "wp-container-core-group-is-layout-xxxxx" のような 固有クラスを自動生成し、!important 付きのpadding/marginを注入することがある。 単一クラスの !important 同士は詳細度が並ぶと「あとに書かれた方」が勝つため、 .el-biz-row を前置して詳細度を上げ、確実に上書きする（body二重指定は保険） */ /* 01：内側グループに el-biz__panel が付いているケース */ .el-biz-row .el-biz__panel, body .el-biz-row .el-biz__panel{ background: var(--el-dark); padding: 72px !important; height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } @media (max-width: 959px){ .el-biz-row .el-biz__panel, body .el-biz-row .el-biz__panel{ padding: 44px 24px !important; } } /* 02：外側カラムに el-biz__panel が付いているケース → カラム自身の padding/background は 0 にし、内側の無地グループ側に本来の見た目を移す */ .el-biz-row .swell-block-column.el-biz__panel, body .el-biz-row .swell-block-column.el-biz__panel{ padding: 0 !important; background: transparent !important; } .el-biz-row .swell-block-column.el-biz__panel > .wp-block-group, body .el-biz-row .swell-block-column.el-biz__panel > .wp-block-group{ background: var(--el-dark) !important; padding: 72px !important; height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } @media (max-width: 959px){ .el-biz-row .swell-block-column.el-biz__panel > .wp-block-group, body .el-biz-row .swell-block-column.el-biz__panel > .wp-block-group{ padding: 44px 24px !important; } } /* 事業H3もSWELLの見出し装飾を打ち消す（.el-secの外なので個別に必要） */ .el-biz__panel .el-biz__title{ background: none !important; background-color: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } .el-biz__panel .el-biz__title::before, .el-biz__panel .el-biz__title::after{ content: none !important; display: none !important; } /* --- ビジュアル面（写真／数字プレースホルダー） --- */ .el-biz__visual{ margin: 0 !important; height: 100%; } .el-biz__visual img{ display: block; width: 100% !important; height: 100% !important; min-height: 520px; object-fit: cover; border-radius: 0 !important; } /* 事業02用：写真がないときのベージュ面＋巨大な数字 */ .el-biz__visual--num{ display: flex; align-items: flex-end; min-height: 520px; background: var(--el-surface); padding: 48px; } .el-biz__bignum{ font-family: var(--el-en); font-size: 180px; line-height: 1; color: var(--el-rule); margin: 0; } /* --- パネル内テキスト --- */ /* 番号をゴールドの1px円で囲む（独自要素「円」の適用箇所①） */ .el-biz__num{ font-family: var(--el-en); font-size: 20px; line-height: 1; color: var(--el-gold); width: 56px; height: 56px; border: 1px solid var(--el-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 0 28px; } .el-biz__en{ font-family: var(--el-en); font-size: 20px; letter-spacing: .14em; color: var(--el-gold); margin: 0 0 12px; } .el-biz__title{ font-size: 28px; font-weight: 400; letter-spacing: .08em; line-height: 1.7; color: #fff; margin: 0 0 24px; } .el-biz__text{ font-size: 15px; letter-spacing: .04em; line-height: 2.0; color: rgba(255,255,255,.85); margin: 0 0 28px; } .el-biz__more a{ color: var(--el-gold); font-size: 14px; letter-spacing: .08em; text-decoration: none; border-bottom: 1px solid var(--el-gold); padding-bottom: 3px; } /* --- パートナー帯（事業02の行の外に独立して置く） --- 事業02のパネル内に入れると、左の「02」面がリストの高さまで引き伸ばされるため、 横幅全体の帯として別行に分けている。 MARiELセクションと同じダークだと境目が分からなくなるため、この帯はベージュにする （ダーク[事業02] → ベージュ[パートナー] → ダーク[MARiEL] でリズムを作る）。 ブロック側の背景色も #F5F0E9 に設定すること（編集画面での見え方を揃えるため） */ .el-partner-row{ background: var(--el-surface) !important; } .el-partner-row > .swell-block-fullWide__inner{ max-width: 1200px; margin-inline: auto; padding: 72px 40px !important; /* .l-article(--article_size:900px)の既定paddingを上書き */ } @media (max-width: 959px){ .el-partner-row > .swell-block-fullWide__inner{ padding: 48px 24px !important; } } .el-partner-row .el-partner{ margin-top: 0; margin-bottom: 0; border: 0; padding: 0; /* ボーダーがなくなったため内側paddingは不要。外側の72pxで十分 */ } /* ベージュ地に載せるため、旧仕様（ダーク背景内の帯）の色指定を上書きする */ .el-partner-row .el-partner__title{ color: var(--el-gold-dark); } .el-partner-row .el-partner__lead{ color: var(--el-text) !important; } .el-partner-row .el-partner__list li{ color: var(--el-text) !important; } .el-partner-row .el-partner__list li::before{ background: var(--el-gold-dark); } /* --- パートナーブロックの構造（カードにせず帯として置く） --- */ .el-partner{ border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); padding: 28px 0; margin-top: 32px; } .el-partner__title{ font-family: var(--el-en); font-size: 14px; letter-spacing: .18em; color: var(--el-gold); margin: 0 0 14px; } .el-partner__lead{ font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.85); margin: 0 0 16px; } .el-partner__list{ margin: 0; padding: 0; list-style: none; } .el-partner__list li{ position: relative; padding-left: 18px; font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.85); } /* チェックやアイコンフォントは使わず、ゴールドの小さな菱形 */ .el-partner__list li::before{ content: ""; position: absolute; left: 0; top: .8em; width: 4px; height: 4px; background: var(--el-gold); transform: rotate(45deg); } /* --- タブレット以下は縦積みにする（959pxで前倒し） --- 768pxのとき 45/55 だと右パネルの本文が約278pxしか残らず読みにくいため。 WordPress標準の縦積みは781pxなので、ここだけ先に切り替える */ @media (max-width: 959px){ .el-biz-row .swell-block-columns__inner{ flex-direction: column; margin: 0 !important; /* → 0-1「WPの負のマージン対策」。PC用グリッドのリセットは960px以上専用のため、ここにも別途必要 */ width: 100% !important; max-width: 100% !important; } .el-biz-row .swell-block-column{ width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* 写真・パネル・数字面の間に不揃いな隙間が出ないよう、余白を全て消して接地させる。 すべて .el-biz-row を前置し、WordPress自動生成クラスの !important に対抗する */ .el-biz-row .swell-block-column, .el-biz-row .swell-block-column > *, .el-biz-row .el-biz__visual, .el-biz-row .el-biz__visual--num, .el-biz-row .el-biz__panel, .el-biz-row .swell-block-column.el-biz__panel > .wp-block-group{ margin: 0 !important; } .el-biz-row .el-biz__visual img{ min-height: 280px !important; } /* 番号だけの面は高さを詰める（280pxは空白が長すぎた） */ .el-biz-row .el-biz__visual--num{ min-height: 180px !important; padding: 28px 24px !important; } .el-biz-row .el-biz__bignum{ font-size: 88px !important; } .el-biz__title { font-size: 20px; } .el-biz__text { font-size: 14px; } } /* ========================================================================== 5. 04 MARiEL ========================================================================== */ .el-mariel__logo{ margin: 0 auto 30px !important; text-align: center; } .el-mariel__logo img{ width: 180px !important; max-width: 100%; height: auto !important; margin-inline: auto; } .el-mariel__main{ margin: 64px 0 16px !important; } .el-mariel__main img{ display: block; width: 100% !important; height: 460px !important; object-fit: cover; border-radius: 2px; } .el-mariel__thumbs{ margin: 0; border: 0 !important; padding: 0 !important; } .el-mariel__thumbs img{ display: block; width: 100%; height: 240px; object-fit: cover; border-radius: 2px; } /* 安全策：ギャラリーブロックに誤って el-info__row 等の別クラスが付いていても、 MARiELセクション内のギャラリーは el-mariel__thumbs と同じ見た目にする。 正しくは HTML側で el-mariel__thumbs に付け替えること（design/swell_page_build.md 参照） */ #mariel .wp-block-gallery{ border: 0 !important; padding: 0 !important; margin: 64px 0 16px !important; } #mariel .wp-block-gallery img{ width: 100% !important; height: 240px !important; object-fit: cover; border-radius: 2px; } @media (max-width: 959px){ #mariel .wp-block-gallery img{ height: 200px !important; } #mariel .wp-block-gallery figure.wp-block-image{ width: 100% !important; } } /* 写真にホバーズームを付けない（仕様） */ .el-mariel__main img, .el-mariel__thumbs img{ transition: none; } /* --- 店舗情報 --- ⚠️ .el-info は「swell-block-columns」自体に付いており、 実際のカラムは1階層下の .swell-block-columns__inner の中にある （実機HTMLで確認 2026-08-18）： .el-info(=swell-block-columns) > .swell-block-columns__inner > .swell-block-column 左右で下線が揃わない問題は、内側のグリッドを .swell-block-columns__inner に対して組み、 2つの .swell-block-column を display:contents で消して 4つの el-info__row を直接グリッドの子にすることで解決した。 grid-auto-flow:column により、書字順「HOURS,ADDRESS,ACCESS,INSTAGRAM」のまま 1列目=HOURS/ADDRESS、2列目=ACCESS/INSTAGRAM の配置を維持できる。 幅は50%/50%。タブレットまで横並びを維持し、781px以下でWordPress標準の縦積みになる （値が短いため、タブレットで2カラムのままでも無理がない） */ .el-info{ margin: 0 !important; /* → 0-1「WPの負のマージン対策」 */ margin-top: 64px !important; border-top: 1px solid var(--el-mid); text-align: left; max-width: 100% !important; width: 100% !important; } @media (min-width: 782px){ .el-info .swell-block-columns__inner{ display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 56px; row-gap: 0; margin: 0 !important; /* WordPressが列ガター用に付ける負のmargin-leftを打ち消す */ width: 100% !important; max-width: 100% !important; } .el-info .swell-block-column{ display: contents !important; } } .el-info__row{ border-bottom: 1px solid var(--el-mid); padding: 24px 0; } .el-info__dt{ font-family: var(--el-en); font-size: 12px; letter-spacing: .20em; color: var(--el-gold); margin: 0 0 10px; } .el-info__dd{ font-size: 15px; letter-spacing: .04em; line-height: 1.9; color: #fff; margin: 0; } .el-info__note{ display: block; font-size: 13px; color: rgba(255,255,255,.62); margin-top: 4px; } /* 地図はiframeを埋め込まずテキストリンクで案内する */ .el-maplink a, a.el-maplink{ display: inline-block; margin-top: 10px; color: var(--el-gold); font-size: 13px; letter-spacing: .06em; text-decoration: none; border-bottom: 1px solid var(--el-gold); padding-bottom: 2px; } @media (max-width: 959px){ .el-mariel__logo img{ width: 130px !important; } .el-mariel__main{ margin: 44px 0 12px !important; } .el-mariel__main img { height: 240px !important; } /* SPは3列だと「2枚＋余った1枚」になり偶発的に見える。1列に揃える */ .el-mariel__thumbs figure.wp-block-image{ width: 100% !important; } .el-mariel__thumbs img{ height: 200px; } .el-info{ margin-top: 44px !important; } .el-info__row{ padding: 20px 0; } .el-info__dd { font-size: 14px; } } /* ========================================================================== 6. 05 MESSAGE ========================================================================== */ /* .el-msg が付いていない場合に備え、アンカーidからも当てる。 カラムはSWELL独自ブロックのため .swell-block-columns__inner を対象にする */ .el-msg .swell-block-columns__inner, #message .swell-block-columns__inner{ align-items: center; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .el-msg .el-sec__title::after, #message .el-sec__title::after{ margin-inline: 0 !important; } /* 左寄せ */ /* 本文に手動改行(br)が多いと、SPで自動折り返しと二重になって読みにくい。 段落単位で組み、意図的な箇所以外の br は削除すること（HTML側で対応） */ /* 代表写真：正円トリミング＋ゴールドの二重円（独自要素「円」の適用箇所②） */ .el-msg__photo{ position: relative; margin: 0 auto; width: 320px; max-width: 100%; } .el-msg__photo img{ display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; /* 背景の花を目立たせないための処置。撮り下ろしに差し替えたらこの1行を外す */ filter: saturate(.8); } .el-msg__photo::after{ content: ""; position: absolute; inset: -12px; border: 1px solid var(--el-gold); border-radius: 50%; pointer-events: none; } .el-msg__sign{ text-align: right; font-size: 15px; letter-spacing: .06em; line-height: 2.0; color: var(--el-dark); margin: 32px 0 0; } /* タブレット（782〜959px）：横並びを維持したまま写真だけ縮める */ @media (max-width: 959px){ .el-msg__photo{ width: 240px; } .el-msg__sign { font-size: 14px; } } /* 〜781px：WordPress標準で縦積みになる。写真を中央に置き直す */ @media (max-width: 781px){ .el-msg__photo{ width: 200px; margin: 0 auto 32px; } } /* ========================================================================== 7. 06 COMPANY（テーブル：横罫線のみ・外枠と縦線を引かない） ========================================================================== */ .el-company table{ width: 100%; border-collapse: collapse; text-align: left; } .el-company th, .el-company td{ border: 0; border-bottom: 1px solid var(--el-rule); padding: 22px 0; vertical-align: top; background: transparent; } .el-company th{ width: 180px; font-weight: 400; font-size: 14px; letter-spacing: .06em; color: var(--el-mid); white-space: nowrap; } .el-company td{ font-size: 16px; letter-spacing: .04em; line-height: 1.9; color: var(--el-text); } /* WordPressのテーブルブロックは1列目も td で出力されることがある。 th に変換できない場合に備え、1列目を見出し扱いにする */ .el-company td:first-child{ width: 180px; font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--el-mid); white-space: nowrap; } @media (max-width: 959px){ /* 2列を縦積みにする */ .el-company th, .el-company td{ display: block; width: auto; } .el-company th, .el-company td:first-child{ border-bottom: 0; padding: 20px 0 6px; white-space: normal; } .el-company td{ padding: 0 0 20px; font-size: 15px; } } /* ========================================================================== 8. 07 NEWS ========================================================================== */ /* 実機HTMLで確認済み（2026-08-18） .p-postListWrap > ul.p-postList.-type-simple > li.p-postList__item > a.p-postList__link > div.p-postList__body > div.p-postList__meta > div.p-postList__times > time.c-postTimes__posted > span.p-postList__cat > h2.p-postList__title */ .el-news{ text-align: left; margin-top: 8px; } /* 上端の罫線は ul ではなく最初の li の border-top で描画する （理由は「9-3 カテゴリーアーカイブページ」セクションの同種コメント参照。 ul自体にpaddingは無いが、念のため同じ組み方で統一し、border-bottomの 太さ・色もSWELL既定に負けないよう !important を付ける） */ .el-news .p-postList{ margin: 0; padding: 0; list-style: none; /* SWELL既定の