@charset "utf-8"; /* ============================================================================ SA 2026 下層ページ土台 (lower-2026.css) ---------------------------------------------------------------------------- 対象: #contents を持つ下層ページすべて （#invidual / #corporation / #company / #information / #contact、 および旧PHPページ） 【なぜ必要か】 invidual.css / corporation.css / company.css / information.css の4本が ほぼ同じ内容の重複で、しかも旧・本文720px（2カラム）時代の固定px幅が そのまま残っている。本文幅を1080pxにしたので、下記が全部ズレていた。 #kousijin_invi .frame p.left 488px → 枠内1030pxに対し370px余る #smc2 .frame p.left 460px #kousijin_detail p.left 464px #kameiten .franchise_info table 534px div.buy_area p 400px #kanren p.kanrenitem_lead 400px .gallery .halfcube 360px 固定（正方形前提） .entry-title 960px 固定（本文1080pxに120px足りない） 【方針】 - HTMLは触らない。1ページずつ直すのではなく、共通の土台でまとめて効かせる。 - .frame を float 前提から flex に切り替える。DOM順がそのまま見た目順になるので 既存マークアップ（h4 → p.left → img.right → ボタン）がそのまま成立する。 - 固定px幅を全部やめて可変にする。 - SPは1カラムに落とす。 【読み込み順】 invidual.css 等は functions.php の include_custom_css（wp_head 優先度10）で 出力されるため、enqueue したCSSより後になる。このファイルは wp_head 優先度20で 出すことで確実に最後に来るようにしている。セレクタの詳細度は旧指定と同点に 合わせてあり、後勝ちで上書きする（無闇に !important を使わない）。 ============================================================================ */ :root{ /* 幅 */ --sa-l-max: 1080px; /* 色 */ --sa-c-brand: #ff5a00; --sa-c-brand-dark: #e04e00; /* セクションごとのアクセント色。 このサイトは区分ごとに色を変えている（個人=オレンジ／法人=紺／ 会社情報・インフォメーション=グレー）。4本のページCSSがそれぞれ 同じ役割の色を直書きしていたので、トークンにして土台側で一元管理する。 既定値は個人向けのオレンジ。 */ --sa-c-accent: #ff5a00; --sa-c-accent-dark: #e04e00; --sa-c-gold: #c09e62; --sa-c-ink: #333436; --sa-c-ink-2: #5f6165; --sa-c-line: #e3e3e1; --sa-c-line-soft: #efefec; --sa-c-surface: #ffffff; --sa-c-surface-2: #faf9f7; /* 角丸・影 */ --sa-r: 10px; --sa-r-s: 6px; --sa-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.045); --sa-shadow-hover:0 2px 4px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.08); /* 余白 */ --sa-s-1: 4px; --sa-s-2: 8px; --sa-s-3: 12px; --sa-s-4: 16px; --sa-s-5: 24px; --sa-s-6: 32px; --sa-s-7: 48px; --sa-s-8: 64px; /* 文字 */ --sa-f-body: 16px; --sa-lh-body: 1.95; --sa-f-mincho: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif; } /* 区分ごとのアクセント色。カスタムプロパティは継承するので、 ラッパーの article に置くだけで中の見出し・ボタン・strong に伝わる。 旧PHPページも
を使っているのでそのまま効く。 */ #invidual, #contact{ --sa-c-accent:#ff5a00; --sa-c-accent-dark:#e04e00; } #corporation{ --sa-c-accent:#161e5a; --sa-c-accent-dark:#0d1338; } #company, #information{ --sa-c-accent:#444548; --sa-c-accent-dark:#2c2d2f; } /* ============================================================================ 0. ページCSS4本から移設した共通定義 ---------------------------------------------------------------------------- invidual.css / corporation.css / company.css / information.css に まったく同じ内容で書かれていたものを、ここ1か所にまとめた。 置き場所をファイル先頭（トークン直後）にしているのは意図的。 4本はもともと lower-2026.css より前に読み込まれていたので、 「土台の各コンポーネント定義より前」という位置関係を保っておけば、 詳細度が同点になったときの勝ち負けが移設前と変わらない。 ========================================================================== */ /* ここに .entry-header / .entry-title / #content .wrap / .edit-link は置かない。 これらは「そのページ区分で上部の帯を出すかどうか」のスイッチで、 other.css / contact.css を使うページ（サイトマップ・個人情報保護方針・ お問い合わせなど）はあえて出していない。土台に上げると全ページで出てしまう。 実際に一度まとめてみたところ ID315/317/319 で帯が出てレイアウトが127px下がった。 ページ区分ごとの判断なので、4本のCSSに残す。 */ /* 上部の画像並び */ .topimage{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .clear_both{ clear: both; line-height: 1; padding: 0; margin: 0; } #contents #top{ text-align: center; } /* ピックアップ（個人／法人トップの横並び） */ #contents #pickup{ color: var(--sa-c-gold); display: flex; flex-wrap: nowrap; } #contents #pickup div{ width: 100%; margin-right: 10px; } #contents #pickup div:last-child{ margin-right: 0; } #contents #pickup img{ margin-right: 16px; } #contents #pickup h3{ font-weight: 400; font-size: 16px; margin: 0; padding-bottom: 8px; } /* 講師陣（一覧・詳細）。invidual.css と corporation.css に同内容で重複していた */ #kousijin_invi .frame p.left{ width: 488px; font-size: 14px; letter-spacing: -0.5px !important; margin-right: 10px; } #kousijin_invi img.right{ margin: 0; } #kousijin div.frame{ padding: 49px 0 0 49px; } #kousijin .frame img{ padding: 0; margin: 0 48px 48px 0; } #kousijin .frame a:hover img{ opacity: .8; transition: all .5s; } #kousijin_detail h2 span{ font-size: 20px; } #kousijin_detail p.left{ width: 464px; padding: 0; line-height: 1.85; margin: 24px 0 2.5rem 0; } #kousijin_detail p.left span{ letter-spacing: -0.04em !important; } #kousijin_detail p.left + img{ width: 240px; margin: 24px 0 0 0; } #kousijin_detail hr{ clear: both; background-color: #c09e62; height: 2px; margin: 0 0 20px 0; } #kousijin_detail table{ margin: 1.3rem 0 2rem 0; } #kousijin_detail table th{ width: 200px; font-weight: normal; padding: 16px 0 24px 24px; } #kousijin_detail table td{ padding: 16px 24px !important; } #kousijin_detail div.gallery{ width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; margin: 0 0 3rem 0; } #kousijin_detail .gallery .fullwidth{ width: 100%; height: 100%; } #kousijin_detail .gallery .halfcube{ width: 360px; height: 360px; } #kousijin_detail .gallery a, #kousijin_detail .gallery a img{ box-shadow: none; } #kousijin_detail .gallery a:hover > img{ opacity: .7; } #kousijin_detail .gallery img{ display: block; } #kousijin_detail .gallery div.halfarea{ width: 50%; } /* SP：詳しくはこちらボタン（4本に同内容であった） */ @media screen and (max-width: 62.5em){ a.invi_linkarea, button.invi_linkarea, a.company_linkarea{ width: 100% !important; float: none !important; display: block !important; font-size: 16px !important; padding: 14px 0 !important; margin: 12px 0 !important; border-radius: 4px; box-sizing: border-box; } } /* ============================================================================ 1. ページ上部の帯（.entry-title） ---------------------------------------------------------------------------- 旧: width:960px / height:120px 固定、line-height:1400px + overflow:hidden で

のテキストを画面外へ飛ばして隠していた。 → 本文1080pxに対して120px足りず、SPでは画像が縮んで下半分が白帯になる。 新: 元画像（1920×240）の比率で可変にする。見出しテキストは読み上げ用に残す。 ========================================================================== */ body.page:not(.twentyseventeen-front-page) .entry-header .entry-title{ width: 100%; max-width: var(--sa-l-max); height: auto; aspect-ratio: 1920 / 240; background-size: cover; background-position: center; border-radius: var(--sa-r); overflow: hidden; /* テキストは消さずに読み上げだけ残す（旧 line-height:1400px の置き換え） */ line-height: 0; font-size: 0; color: transparent; } body.page:not(.twentyseventeen-front-page) .entry-header{ margin: 0 0 var(--sa-s-5) 0; } /* 旧PHPページの上部の帯（h2#mainimg）。 WPページの .entry-title と同じ幅・同じ余白にして、行き来しても揃って見えるようにする。 */ h2#mainimg{ box-sizing: border-box; width: 100%; max-width: calc(var(--sa-l-max) + 40px); margin: 0 auto var(--sa-s-5) auto; padding: 0 20px; line-height: 0; } h2#mainimg img{ display: block; width: 100%; height: auto; border-radius: var(--sa-r); } /* ============================================================================ 2. 本文の基本タイポグラフィ ---------------------------------------------------------------------------- 旧: 本文14〜15px。1080px幅で14pxは1行が長すぎて読みにくい。 ========================================================================== */ /* 本文コンテナ。 WPページは #content .wrap（style.css の SA-2026-WIDTH）が幅を持っているが、 旧PHPページは .wrap を通らないので #contents が body 直下にあり、 幅の制限がまったく効いていなかった（加盟店ページなどが画面いっぱいに広がる）。 #contents 自身にも同じ幅を持たせて、両方で揃うようにする。 */ #contents{ box-sizing: border-box; width: 100%; max-width: calc(var(--sa-l-max) + 40px); /* padding 20px×2 を足した値 */ margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; color: var(--sa-c-ink); font-size: var(--sa-f-body); line-height: var(--sa-lh-body); } /* WPページ側は .wrap が幅と余白を持っているので二重にしない */ .wrap #contents{ max-width: none; padding-left: 0; padding-right: 0; } #contents p, #contents li, #contents dd, #contents td{ font-size: var(--sa-f-body); line-height: var(--sa-lh-body); color: var(--sa-c-ink); } /* 原寸のまま置かれた画像が本文幅を突き破らないように。 （例: SMCページの section 直下にある幅1440pxのバナー） */ #contents img{ max-width: 100%; height: auto; } #contents section{ margin: 0 0 var(--sa-s-7) 0; } #contents section:last-child{ margin-bottom: 0; } /* --- 本文とフッターの間の余白 -------------------------------------------- WordPressのページは .entry-content が下マージン32pxを持っていて、 フッターとの間に実測44pxの余白ができる。旧PHPページはそこを通らないので 12pxしかなく、とくに「予約へ」「確認する」のようにボタンで終わる画面は フッター（濃い色のベタ面）に密着して見えていた（2026-09-19）。 旧ページ側の相当する入れ物にも同じ役目の余白を入れる。 article#invidual は旧ページ23枚すべてに入っている （残り3つの index.php は中身がWordPressの固定ページなのでこの経路を通らない）。 */ #main > article#invidual{ margin-bottom: var(--sa-s-7); } /* --- h2: セクション見出し ------------------------------------------------- */ #contents section h2{ font-size: 30px; line-height: 1.45; color: var(--sa-c-accent); text-align: left; font-weight: 600; letter-spacing: .02em; margin: 0 0 var(--sa-s-5) 0; padding: 0 0 var(--sa-s-3) 0; border-bottom: 2px solid var(--sa-c-line); position: relative; background-image: none; /* 旧: 下線の画像を敷いていた */ } #contents section h2::after{ content: ""; position: absolute; left: 0; bottom: -2px; width: 96px; height: 2px; background: var(--sa-c-accent); } /* 記事一覧の見出し（Shortcodes Ultimate の su-post-title）はセクション見出し ではないので、上のアクセント線を出さない。 /info/ で1件ごとにタイトルの下へ96pxの線が入っていた。 */ #contents section h2.su-post-title::after{ content: none; } /* 旧マークアップのページ（加盟店一覧の #Wrapper / .Contents / .Frame 大文字系）は ページ専用CSSが h2 を中央寄せにしている。左端のアクセントは位置が合わないので出さない。 */ #contents #Wrapper h2::after{ display: none; } /* --- h3: セクション直下の見出し（中央寄せの飾り見出し） ------------------- */ #contents section > h3{ font-size: 22px; line-height: 1.6; color: var(--sa-c-accent); text-align: center; font-weight: 500; letter-spacing: .02em; margin: var(--sa-s-6) 0 var(--sa-s-4) 0; padding: 0; background-image: none; } #contents section > h3:first-child{ margin-top: 0; } #contents section > h3 span{ font-size: 16px; } /* 講座区分の帯見出し（#kouza_sss 等）は既存のデザインをそのまま活かす */ #contents section > h3[id^="kouza_"]{ text-align: left; color: #fff; font-size: 16px; margin: var(--sa-s-6) 0 var(--sa-s-4) 0; border-radius: var(--sa-r-s); overflow: hidden; } /* ============================================================================ 3. .frame —— カード ---------------------------------------------------------------------------- 旧: 5px の太いグレー枠 + overflow:hidden + 中身は float 頼り。 新: 1px の枠 + 角丸 + flex。DOM順がそのまま横並び順になる。 ========================================================================== */ #contents .frame{ box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--sa-s-5); background: var(--sa-c-surface); border: 1px solid var(--sa-c-line); border-radius: var(--sa-r); padding: var(--sa-s-5) var(--sa-s-6); margin: 0 0 var(--sa-s-4) 0; overflow: visible; clear: both; } /* カード内の文字。 旧CSSが #invidual .frame p {font-size:14px; line-height:18pt} を持っていて、 #contents p（詳細度101）では届かない。同じ詳細度(111)で後ろから上書きする。 */ #contents .frame p, #contents .frame li, #contents .frame dd, #contents .frame td{ font-size: var(--sa-f-body); line-height: var(--sa-lh-body); color: var(--sa-c-ink); } #contents .frame p span{ font-size: 13px; } /* --- カード内の要素の並び方 ---------------------------------------------- */ /* カードの子は border-box。 テーマ既定は content-box で、flex-basis:100% の子に padding が付くと その分だけカードをはみ出す（個人情報保護方針の ul.privacy で発生していた）。 */ #contents .frame > *{ box-sizing: border-box; max-width: 100%; } /* リストの左インデントは margin ではなく padding で取る。 margin は flex-basis:100% に加算されてしまい、はみ出す原因になる。 */ #contents .frame > ul, #contents .frame > ol{ margin-left: 0; padding-left: 2.2em; } /* 見出し・リスト・表・区切りは必ず1行使う */ #contents .frame > h2, #contents .frame > h3, #contents .frame > h4, #contents .frame > h5, #contents .frame > hr, #contents .frame > ul, #contents .frame > ol, #contents .frame > dl, #contents .frame > table, #contents .frame > iframe{ flex: 0 0 100%; max-width: 100%; } /* 段落は既定で1行まるごと使う（連続する

が横に並ばないように） */ #contents .frame > p{ flex: 1 1 100%; max-width: 100%; width: auto; float: none; margin: 0 0 var(--sa-s-3) 0; padding: 0; } #contents .frame > p:last-child{ margin-bottom: 0; } /* 画像は縮まない側。float は flex 下では無効になるので指定を戻しておく */ #contents .frame > img, #contents .frame > a > img{ flex: 0 0 auto; float: none; max-width: 100%; height: auto; margin: 0 0 var(--sa-s-3) 0; padding: 0; border-radius: var(--sa-r-s); } #contents .frame > a{ flex: 0 0 auto; } /* 画像とセットで横に並べたい段落だけ、可変幅の「本文カラム」にする。 ・p.left … 講師陣など（DOM順: p.left → img.right） ・img + p … 関連商品など（DOM順: img → p） 旧CSSの 488px / 460px / 464px / 400px 固定はここで全部上書きされる。 */ #contents .frame > p.left, #contents .frame > div.left, #contents .frame > img + p, #contents .frame > div:has(> img:only-child) + p{ flex: 1 1 22em; width: auto; max-width: 100%; min-width: 0; margin-right: 0; } /* 画像だけを包んだ

（SMC など）は画像と同じ扱い */ #contents .frame > div:has(> img:only-child){ flex: 0 0 auto; margin: 0 0 var(--sa-s-3) 0; } #contents .frame > div:has(> img:only-child) > img{ display: block; max-width: 100%; height: auto; border-radius: var(--sa-r-s); } /* それ以外の
は1行使う */ #contents .frame > div{ flex: 1 1 100%; max-width: 100%; } /* 右側に置く画像 */ #contents .frame > img.right{ margin-left: auto; } /* --- カード内の見出し ----------------------------------------------------- */ #contents .frame h4{ font-size: 19px; line-height: 1.6; font-weight: 600; color: var(--sa-c-gold); text-align: left; margin: 0 0 var(--sa-s-3) 0; padding: 0; border-bottom: none; } #contents .frame h4 span{ font-size: 14px; font-weight: 400; } #contents .frame h3{ font-size: 19px; line-height: 1.6; font-weight: 600; color: var(--sa-c-gold); text-align: left; margin: 0 0 var(--sa-s-3) 0; padding: 0; } #contents .frame h3.invitop, #contents .frame h3.corptop, #contents .frame h3.companytop{ color: var(--sa-c-accent); font-size: 21px; } /* リンクになっているカード（提携店など）はホバーで持ち上げる */ #contents .frame h4.franchise_name:hover{ opacity: 1; color: var(--sa-c-accent); } /* ============================================================================ 4. ボタン ---------------------------------------------------------------------------- 旧: a.invi_linkarea は width:27% + float:right。本文幅が変わるたびに伸縮して 278px になったり潰れたりしていた。 ========================================================================== */ #contents a.invi_linkarea, #contents button.invi_linkarea, #contents a.company_linkarea, #contents a.login_btn, #contents a.buy_btn{ flex: 0 0 auto; align-self: flex-end; /* カード内では右下に置く */ display: inline-flex; align-items: center; justify-content: center; gap: var(--sa-s-2); box-sizing: border-box; /* テーマ既定が content-box。幅100%時に padding 分はみ出す */ min-width: 200px; width: auto; margin-left: auto; padding: 10px var(--sa-s-5); background: var(--sa-c-accent); color: #fff; font-size: 14px; line-height: 1.4; font-weight: 500; text-align: center; text-decoration: none; border-radius: 999px; float: none; clear: none; transition: background-color .2s, transform .2s, box-shadow .2s; } #contents a.invi_linkarea::after, #contents button.invi_linkarea::after, #contents a.company_linkarea::after{ content: "›"; font-size: 16px; line-height: 1; transform: translateY(-1px); } #contents a.invi_linkarea:hover, #contents button.invi_linkarea:hover, #contents a.company_linkarea:hover, #contents a.login_btn:hover{ background: var(--sa-c-accent-dark); color: #fff; box-shadow: var(--sa-shadow); transform: translateY(-1px); } /* ページ内リンクの横並びグループ（関連商品のカテゴリ切り替えなど）。 旧: a.itemmedia を width:137px + float:left で並べていた。 */ #contents div.kanrenitem_linkarea{ display: flex; flex-wrap: wrap; gap: var(--sa-s-2); clear: both; margin: 0 0 var(--sa-s-6) 0; } #contents div.kanrenitem_linkarea > a{ flex: 1 1 150px; min-width: 0; width: auto; margin: 0; } /* 単体で右に置くボタン（ログインなど）。inline-flex だと margin:auto が効かない */ #contents a.login_btn{ display: flex; width: fit-content; margin: 0 0 var(--sa-s-3) auto; } /* 大きいCTA */ #contents a.invi_bottan, #contents a.company_bottan{ display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; max-width: 560px; margin: var(--sa-s-6) auto; padding: var(--sa-s-4) var(--sa-s-5); background: var(--sa-c-accent); color: #fff; font-family: var(--sa-f-mincho); font-size: 20px; line-height: 1.5; text-align: center; text-decoration: none; border-radius: var(--sa-r); box-shadow: var(--sa-shadow); transition: background-color .25s, transform .25s, box-shadow .25s; } #contents a.invi_bottan:hover, #contents a.company_bottan:hover{ background: var(--sa-c-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--sa-shadow-hover); } /* Amazonバナー等、中身が画像のボタンは着色しない */ #contents a.buy_btn{ background: none; min-width: 0; padding: 0; border-radius: 0; } #contents a.buy_btn img{ display: block; margin: 0; padding: 0; } #contents a.buy_btn:hover{ opacity: .8; background: none; box-shadow: none; } /* ---------------------------------------------------------------------------- 4-2. 区分トップのメニューボタン（.sa-prog）（2026-10-22 高木さんの指摘） ---------------------------------------------------------------------------- 個人のお客様トップ（/invidual/）の SAプログラム／SAマスター倶楽部／SAセールス・スクール／SAマスター・クローザー養成講座 は、353×102 の画像（btn_sapgm.webp ほか）を並べていた。画像は幅に合わせて縮むだけで、 スマホでは文字が小さく潰れ、列の数も変えられなかったので、文字とCSSで描く。 PC・スマホとも2列。画像に近い見た目（金色の明朝の名前＋細い金の線＋下に説明）に、 ほかのカードと同じ角丸・枠・影をそろえた。 ---------------------------------------------------------------------------- */ ul.sa-prog{ list-style: none; margin: 0 0 var(--sa-s-4) 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sa-s-4); } /* 本文の