/** * Layout + section wrapper CSS * Figma 再現用の外周構造 v2 */ body { background: var(--technoauto-bg-base, #FFFFFF); color: var(--technoauto-text-primary, #000); min-height: 100vh; position: relative; overflow-x: hidden; padding: 0 40px; } /* 左右の縦書き装飾帯 (Figma: ネイビー背景 + 白テキスト 交互繰り返し) */ body::before, body::after { content: "YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS　YOKOHAMA TECHNOAUTO COLLEGE　CHALLENGE SPIRITS"; position: fixed; top: 0; width: 40px; height: 100vh; background: #6BD0FF; color: var(--technoauto-text-primary, #000); font-family: var(--technoauto-font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; line-height: 40px; writing-mode: vertical-rl; text-orientation: mixed; overflow: hidden; z-index: 100; pointer-events: none; padding: 20px 0; text-align: center; } body::before { left: 0; } body::after { right: 0; } /* コンテンツエリア: 白ベース（ヒーロー等の色付きセクションはブロック側で担う） */ .page-body { background: var(--technoauto-bg-base, #FFFFFF); max-width: 100%; margin: 0; padding: 0 0 40px; border-radius: 0; box-shadow: none; position: relative; z-index: 1; } .page-body__inner { padding: 40px 40px 60px; max-width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: space-between; row-gap: 32px; column-gap: 0; } /* Page Hero はコンテナ内フル幅 */ .page-body__inner > .page-hero { flex-basis: 100%; max-width: 100%; margin-bottom: 8px; } /* ========================================== Section Card 概念 （section-heading と直後のブロック群を1枚の白カードにラップする） ========================================== */ /* section-heading = カード開始 */ .page-body__inner > .section-heading, .page-body__inner > .section-heading-lead, .page-body__inner > .section-heading-top { flex-basis: 100%; max-width: 100%; background: var(--technoauto-bg-base, #FFFFFF); border: 1px solid var(--technoauto-border-base, #39364E); border-radius: 12px 12px 0 0; padding: 30px 40px 20px; margin-bottom: 0 !important; border-bottom: none; } /* section-heading と隣接するブロック群を "セクションカードの中身" として扱う */ /* CSSでは "next of section-heading" が最初の中身、"次の section-heading の前" までがカード内 */ /* 実装: 各ブロックにも共通の白背景+左右ボーダーを付ける */ .page-body__inner > .feature-item, .page-body__inner > .worry-item, .page-body__inner > .check-item, .page-body__inner > .check-item-req, .page-body__inner > .curriculum-card, .page-body__inner > .voice-card, .page-body__inner > .review-card, .page-body__inner > .interview-card-sub, .page-body__inner > .info-card, .page-body__inner > .info-card-wide, .page-body__inner > .info-box, .page-body__inner > .stat-card, .page-body__inner > .stat-card-sub, .page-body__inner > .pickup-card, .page-body__inner > .course-card-sub, .page-body__inner > .facility-item, .page-body__inner > .logo-item, .page-body__inner > .gallery-item, .page-body__inner > .practical-item, .page-body__inner > .practical-flow-card, .page-body__inner > .course-step { background: transparent; /* 中身要素は各自のカードスタイルを持ちつつ、外側の枠に収まる */ } /* ========================================== カード幅（グリッド） ========================================== */ :root { --grid-gap: 20px; } /* 4カラム */ .page-body__inner > .feature-item, .page-body__inner > .worry-item, .page-body__inner > .check-item, .page-body__inner > .gallery-item, .page-body__inner > .stat-card-sub, .page-body__inner > .logo-item { flex-basis: calc((100% - 3 * var(--grid-gap)) / 4) !important; max-width: calc((100% - 3 * var(--grid-gap)) / 4) !important; width: calc((100% - 3 * var(--grid-gap)) / 4) !important; margin-left: 0; } /* 3カラム */ .page-body__inner > .course-card-sub, .page-body__inner > .interview-card-sub, .page-body__inner > .stat-card, .page-body__inner > .pickup-card, .page-body__inner > .facility-item, .page-body__inner > .info-card, .page-body__inner > .practical-item, .page-body__inner > .course-step { flex-basis: calc((100% - 2 * var(--grid-gap)) / 3) !important; max-width: calc((100% - 2 * var(--grid-gap)) / 3) !important; width: calc((100% - 2 * var(--grid-gap)) / 3) !important; } /* 2カラム: voice/review/body/category/curriculum */ .page-body__inner > .voice-card, .page-body__inner > .review-card, .page-body__inner > .body-card, .page-body__inner > .category-card, .page-body__inner > .info-box, .page-body__inner > .interview-card-top, .page-body__inner > .event-card, .page-body__inner > .course-card-top, .page-body__inner > .curriculum-card, .page-body__inner > .info-card-wide, .page-body__inner > .practical-flow-card, .page-body__inner > .check-item-req { flex-basis: calc((100% - var(--grid-gap)) / 2) !important; max-width: calc((100% - var(--grid-gap)) / 2) !important; width: calc((100% - var(--grid-gap)) / 2) !important; } /* フル幅ブロック */ .page-body__inner > .cta-card, .page-body__inner > .primary-button, .page-body__inner > .curriculum-goal, .page-body__inner > .anchor-link, .page-body__inner > .share-row, .page-body__inner > .fee-head, .page-body__inner > .fee-row, .page-body__inner > .fee-year-head, .page-body__inner > .fee-row-2col, .page-body__inner > .schedule-row, .page-body__inner > .event-row, .page-body__inner > .route-row, .page-body__inner > .history-row, .page-body__inner > .pdf-row, .page-body__inner > .link-row, .page-body__inner > .definition-row, .page-body__inner > .definition-list-v, .page-body__inner > .definition-head, .page-body__inner > .article-row, .page-body__inner > .article-row-h, .page-body__inner > .faq-item, .page-body__inner > .year-accordion, .page-body__inner > .step-item, .page-body__inner > .step-item-h, .page-body__inner > .form-field, .page-body__inner > .choice-row-h, .page-body__inner > .choice-row-v, .page-body__inner > .confirm-row, .page-body__inner > .form-steps, .page-body__inner > .tab, .page-body__inner > .recruit-box, .page-body__inner > .success-mark, .page-body__inner > .location-card, .page-body__inner > .map-embed, .page-body__inner > .pagination, .page-body__inner > .search-bar, .page-body__inner > .search-field, .page-body__inner > .search-field-filter, .page-body__inner > .sitemap-head, .page-body__inner > .sitemap-row, .page-body__inner > .wordmark, .page-body__inner > .company-chip, .page-body__inner > .carousel-controls, .page-body__inner > .carousel-dots { flex-basis: 100%; max-width: 100%; } /* Curriculum Goal は青バー */ .page-body__inner > .curriculum-goal { background: var(--technoauto-bg-brand, #439FFF); color: #fff; border-radius: 8px; padding: 20px 40px; text-align: center; font-weight: 700; font-size: 18px; } /* max-width の強制解除ブロックはグリッドルールの !important で対応済み */ /* ========================================== Feature Item バッジ色分け（Figma: 青→黄→緑→赤 ローテーション） ~ 兄弟セレクタで確実に数える ========================================== */ /* 2つ目: 黄 */ .page-body__inner > .feature-item + .feature-item .feature-item__number { background: var(--technoauto-bg-accent, #FFEF6B) !important; color: var(--technoauto-text-primary, #000) !important; } /* 3つ目: 緑 */ .page-body__inner > .feature-item + .feature-item + .feature-item .feature-item__number { background: var(--technoauto-bg-success, #20D99B) !important; color: #fff !important; } /* 4つ目: 赤 */ .page-body__inner > .feature-item + .feature-item + .feature-item + .feature-item .feature-item__number { background: var(--technoauto-badge-exam, #FC3855) !important; color: #fff !important; } /* Header / Footer は header-footer.css で定義 */ /* SP */ @media screen and (max-width: 768px) { body { padding: 0; } body::before, body::after { display: none !important; } .page-body { border-radius: 0; margin: 0; } .page-body__inner { padding: 20px 16px 40px; column-gap: 12px; row-gap: 24px; } .page-body__inner > * { flex-basis: 100% !important; max-width: 100% !important; } } /* 2026-09-25 micro-typography v4 */ /* v4 micro-typography layout defaults: body直下の欧文/日本語混植を精緻化 */ body { font-feature-settings: "palt" 1, "kern" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main, article, section { font-feature-settings: "palt" 1, "kern" 1; } main p, article p, section p { letter-spacing: 0.02em; } @media (max-width: 768px) { main p, article p, section p { letter-spacing: 0.01em; } } /* ========================================================================== 2026-09-25 global refinements v4 （page 共通：reduce-motion / print / prefers-contrast / safe-area） ========================================================================== */ /* reduce-motion（ページ固有の transform hover / animation を無効化） -------- */ @media (prefers-reduced-motion: reduce) { [class$="__card"]:hover, [class*="__card"]:hover, [class$="__cta"]:hover, [class*="__cta"]:not([class*="__cta-"]):hover, [class*="__btn"]:not([class*="__btn-"]):hover, [class*="__button"]:hover, [class*="__tile"]:hover, [class*="__link"]:hover { transform: none !important; filter: none !important; } [class*="slider"], [class*="carousel"], [class*="marquee"], [class*="__hero"]:not([class*="__hero-"]) img, [class*="__kv"] img { animation: none !important; transition: none !important; } } /* prefers-contrast: more（境界線太さ / underline 強制）--------------------- */ @media (prefers-contrast: more) { [class*="__card"], [class*="__box"], [class*="__panel"], [class*="__table"] th, [class*="__table"] td { border-width: 2px; } a { text-decoration: underline; } } /* safe-area（ページ固有の fixed CTA / floating banner） -------------------- */ [class*="__floating"], [class*="__fixed-cta"], [class*="__sticky-cta"] { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); padding-bottom: max(0px, env(safe-area-inset-bottom)); } /* タッチ最適化（カード・CTA・タブ）----------------------------------------- */ [class*="__card"], [class*="__cta"]:not([class*="__cta-"]), [class*="__tab"], [class*="__btn"]:not([class*="__btn-"]), [class*="__button"] { -webkit-tap-highlight-color: transparent; } /* print ------------------------------------------------------------------- */ @media print { [class*="__hero"]:not([class*="__hero-"]) img, [class*="__kv"] img, [class*="__mv"] img, [class*="__hero-visual"], [class*="__cta"]:not([class*="__cta-"]), [class*="__sns"], [class*="__share"], [class*="__floating"], [class*="__fixed"], [class*="__banner"], [class*="__drawer"], [class*="breadcrumb"] { display: none !important; } body, section, main, article, [class*="__section"], [class*="__card"] { color: #000 !important; background: #fff !important; box-shadow: none !important; } section, [class*="__section"], [class*="__card"], [class*="__box"], [class*="__panel"], h1, h2, h3, h4 { page-break-inside: avoid; break-inside: avoid; } a { color: #000 !important; text-decoration: underline !important; } h1, h2, h3, h4 { color: #000 !important; } } /* 2026-09-25 scroll motion v5B * [data-reveal] / .site-header--scrolled / .is-scrolling-down の実体は * assets/scroll-reveal.css で定義。ここでは印刷時に必ず全表示になるよう * 保険をかける。 */ @media print { [data-reveal], [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } } /* ========================================================================== 2026-09-25 fresh audit v6 (共通 / layout) 目的: v6 fresh audit で検出した「SP横overflow」「reveal永続opacity:0」「feature-item番号バッジと見出しの重なり」 ========================================================================== */ /* --- 1. reveal 保険: data-reveal が JS 未動作 or 誤設定で opacity:0 のまま残るケース --- */ [data-reveal]:not(.is-visible) { /* JS が 3秒以内に is-visible を付けなかった場合の表示保険（IntersectionObserver 未対応環境） */ animation: v6-reveal-fallback 0s linear 3s forwards; } @keyframes v6-reveal-fallback { to { opacity: 1; transform: none; } } /* JS動作環境での no-JS 待機中も一定時間で強制表示 (視認性ゼロ事故防止) */ html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; } /* --- 2. SP 全ページ overflow 遮断: 各セクションカード直子が長文/表で右端を突き破る事故 --- */ @media screen and (max-width: 768px) { .page-body__inner { overflow-x: hidden; } .page-body__inner > * { min-width: 0 !important; overflow-wrap: anywhere; } /* section-heading 内の見出し英字 (OVERVIEW / FEATURES / METHODS 等) の見切れを clip 化 */ .section-heading, .section-heading-lead, .section-heading-top { overflow: hidden; } /* 汎用 __en / __wordmark 英字は SP で clamp して収める */ [class$="__en"], [class*="__wordmark"] { max-width: 100%; } /* 汎用 __lead / __sub / __body / paragraph は overflow-wrap で強制ラップ */ [class$="__lead"], [class$="__sub"], [class$="__body"] p, [class$="__desc"] { overflow-wrap: anywhere; word-break: auto-phrase; } } /* --- 3. feature-item: 円形番号バッジ (01/02/03/04) と見出しの重なり回避 --- */ .page-body__inner > .feature-item .feature-item__number { /* ずれた場合の絶対位置想定に対して padding 側で逃す */ z-index: 2; } .page-body__inner > .feature-item .feature-item__title { /* 番号バッジと重ならないよう左 padding を確保 */ padding-left: 4px; word-break: auto-phrase; } /* --- 4. dl/definition-list: SP で dt/dd が同行 or 縦積み分離のばらつきを解消 --- */ @media screen and (max-width: 768px) { .page-body__inner dl { display: block; } .page-body__inner dt, .page-body__inner dd { display: block; max-width: 100%; } } /* --- 5. table 横スクロール: SP で fee-table 等が右端突き破り --- */ @media screen and (max-width: 768px) { .page-body__inner [class*="__table-wrap"], .page-body__inner [class*="__scroll"], .page-body__inner table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; } .page-body__inner table thead, .page-body__inner table tbody { display: table-row-group; } .page-body__inner table tr { display: table-row; } .page-body__inner table th, .page-body__inner table td { display: table-cell; white-space: nowrap; } } /* 2026-09-25 residual polish v7 */ /* [#16] 全ページSP: `.page-body__inner > * { min-width:0 !important }` の v1-v5 flex-basis:100% との競合を解決。 flex container の場合は min-width:0 だけでは flex-shrink が働かず、 flex-basis も auto に落として shrink 可能に。 */ @media screen and (max-width: 768px) { .page-body__inner > * { flex-basis: auto; flex-shrink: 1; max-width: 100%; } /* 二重定義になっている v4 の flex-basis:100% を持つ子孫要素は min-width:0 と組み合わせて overflow から解放 */ .page-body__inner [style*="flex-basis: 100%"], .page-body__inner [class*="__row"] > *, .page-body__inner [class*="__flex"] > * { min-width: 0; max-width: 100%; } } /* v7 end (layout) */ /* ========================================== 2026-09-25 heading hierarchy v8 (layout) ========================================== - unstyled 見出し (class 未付与) のみに font-size/weight/lh/mb を統一 → BEM 命名済み見出し (.page-*__title 等) は温存 - .page-*__section 内の class 未付与 p / li に body max-width と lh - [class*="__lead"] は lead 用の狭幅・広めlh */ /* --- 1. unstyled headings h1-h6 --- */ h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]) { font-family: var(--technoauto-font-jp); color: var(--technoauto-text-heading); } h1:not([class]) { font-size: var(--h1-font-size); line-height: var(--h1-lh); font-weight: var(--h1-fw); margin: 0 0 var(--h1-mb); } h2:not([class]) { font-size: var(--h2-font-size); line-height: var(--h2-lh); font-weight: var(--h2-fw); margin: 0 0 var(--h2-mb); } h3:not([class]) { font-size: var(--h3-font-size); line-height: var(--h3-lh); font-weight: var(--h3-fw); margin: 0 0 var(--h3-mb); } h4:not([class]) { font-size: var(--h4-font-size); line-height: var(--h4-lh); font-weight: var(--h4-fw); margin: 0 0 var(--h4-mb); } h5:not([class]) { font-size: var(--h5-font-size); line-height: var(--h5-lh); font-weight: var(--h5-fw); margin: 0 0 var(--h5-mb); } h6:not([class]) { font-size: var(--h6-font-size); line-height: var(--h6-lh); font-weight: var(--h6-fw); margin: 0 0 var(--h6-mb); } /* --- 2. body copy line-length: unstyled p / li inside sections --- */ [class*="__section"] p:not([class]), [class*="__section"] li:not([class]), [class*="__body"] p:not([class]), [class*="__body"] li:not([class]) { max-width: var(--body-max-width); line-height: var(--body-lh); } /* --- 3. lead paragraphs (BEM __lead) --- */ [class*="__lead"] { max-width: var(--lead-max-width); line-height: var(--lead-lh); } /* --- 4. SP breakpoint: max-width は ch のまま (viewport 縛りは既存 __inner 側) --- */ @media screen and (max-width: 768px) { [class*="__section"] p:not([class]), [class*="__section"] li:not([class]), [class*="__body"] p:not([class]), [class*="__body"] li:not([class]) { max-width: 100%; } [class*="__lead"] { max-width: 100%; } } /* v8 end (layout) — heading hierarchy */ /* ========================================================================== 2026-09-25 table/list/dl polish v8 (layout) BEM 命名の table / ul / ol / dl に共通の下地を薄く敷く。 - 既存の個別ページ CSS は打ち消さない（追加系のみ）。 - !important は使わない。 - SP は overflow-x:auto コンテナは各ページ側維持、font-size/padding のみ調整。 - dl > div の grid + gap 統一、SP は縦積み。 ========================================================================== */ /* Table 共通下地 (BEM: xxx__yyy-table / xxx__fee-table / xxx__example-table 等) */ .page-body__inner table[class*="__"], .page-body table[class*="__"] { border-collapse: collapse; background: #ffffff; border-radius: var(--technoauto-table-radius, 12px); box-shadow: var(--technoauto-table-shadow, 0 1px 2px rgba(0,0,0,.04)); } .page-body__inner table[class*="__"] thead th, .page-body table[class*="__"] thead th { background: var(--technoauto-table-th-bg, #24222b); color: var(--technoauto-table-th-color, #fff); padding: var(--technoauto-table-th-padding, 12px 16px); font-weight: 700; text-align: left; } .page-body__inner table[class*="__"] tbody th, .page-body__inner table[class*="__"] tbody td, .page-body table[class*="__"] tbody th, .page-body table[class*="__"] tbody td { padding: var(--technoauto-table-td-padding, 12px 16px); font-size: var(--technoauto-table-td-fs, 14px); line-height: var(--technoauto-table-td-lh, 1.6); } .page-body__inner table[class*="__"] tbody tr:hover td, .page-body table[class*="__"] tbody tr:hover td { background: var(--technoauto-table-hover-bg, rgba(67,159,255,.05)); } /* List 共通下地：BEM 命名の ul / ol にのみ適用（bare ul/ol は既存レイヤに任せる） */ .page-body__inner ul[class*="__"] > li, .page-body__inner ol[class*="__"] > li, .page-body ul[class*="__"] > li, .page-body ol[class*="__"] > li { margin-bottom: var(--technoauto-list-item-spacing, 10px); } .page-body__inner ul[class*="__"] > li::marker, .page-body ul[class*="__"] > li::marker { color: var(--technoauto-list-marker-color, #d63b3b); } .page-body__inner ol[class*="__"] > li::marker, .page-body ol[class*="__"] > li::marker { color: var(--technoauto-list-marker-color, #d63b3b); font-weight: var(--technoauto-list-num-fw, 700); } /* Definition list 共通下地：dl > div > dt/dd（各ページの deflist/defrow パターン） */ .page-body__inner dl[class*="__"] > div, .page-body dl[class*="__"] > div { display: grid; grid-template-columns: var(--technoauto-dl-dt-width, 140px) 1fr; gap: var(--technoauto-dl-row-gap, 20px); padding: var(--technoauto-dl-row-padding, 20px 0); border-bottom: var(--technoauto-dl-row-border, 1px solid #eee); align-items: baseline; } .page-body__inner dl[class*="__"] > div:last-child, .page-body dl[class*="__"] > div:last-child { border-bottom: none; } .page-body__inner dl[class*="__"] > div > dt, .page-body dl[class*="__"] > div > dt { color: var(--technoauto-dl-dt-color, #666); font-size: var(--technoauto-dl-dt-fs, 14px); font-weight: var(--technoauto-dl-dt-fw, 700); margin: 0; } .page-body__inner dl[class*="__"] > div > dd, .page-body dl[class*="__"] > div > dd { font-size: var(--technoauto-dl-dd-fs, 15px); line-height: var(--technoauto-dl-dd-lh, 1.75); margin: 0; } /* SP: table padding 調整 / dl 縦積み */ @media screen and (max-width: 768px) { .page-body__inner table[class*="__"], .page-body table[class*="__"] { font-size: var(--technoauto-table-td-fs-sp, 12px); } .page-body__inner table[class*="__"] thead th, .page-body table[class*="__"] thead th { padding: var(--technoauto-table-th-padding-sp, 8px 10px); } .page-body__inner table[class*="__"] tbody th, .page-body__inner table[class*="__"] tbody td, .page-body table[class*="__"] tbody th, .page-body table[class*="__"] tbody td { padding: var(--technoauto-table-td-padding-sp, 8px 10px); } .page-body__inner dl[class*="__"] > div, .page-body dl[class*="__"] > div { grid-template-columns: 1fr; gap: 6px; padding: var(--technoauto-dl-row-padding-sp, 14px 0); } .page-body__inner dl[class*="__"] > div > dt, .page-body dl[class*="__"] > div > dt { width: 100%; } } /* v8 end (layout) — table/list/dl polish */ /* ========================================================================== 2026-09-25 refresh audit v8 (layout global) v6 patch では __section-heading-en を対象にしていたが、実 render は __section-heading-wordmark。selector 名を実装に合わせて clamp を再適用。 ========================================================================== */ @media screen and (max-width: 768px) { /* [G1] section-heading wordmark (OVERVIEW/FEATURES/STEPS 等) の overflow clip */ [class$="__section-heading-wordmark"], [class*="__section-heading-wordmark "], [class*="__section-heading-wordmark-front"], [class*="__section-heading-wordmark-shadow"] { font-size: clamp(28px, 8vw, 40px) !important; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; letter-spacing: 0.02em; } /* [G2] hero wordmark clamp（TOP/course/about/tuition 等の英字ヒーロー） */ [class$="__hero-wordmark"], [class*="__hero-wordmark "], [class*="__hero-wordmark-front"], [class*="__hero-wordmark-shadow"] { font-size: clamp(32px, 11vw, 56px) !important; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; letter-spacing: 0.01em; } /* [G3] section-heading 全体 padding: 左右余白を最低 16px 確保して、jp/lead が壁に当たらない */ [class*="__section-heading"] { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); box-sizing: border-box; } /* [G4] section-inner の左右 padding も 16px 最低確保 */ [class$="__section-inner"] { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); box-sizing: border-box; } /* [G5] section-heading-jp / section-heading-lead は overflow-wrap で SP 折り返し保証 */ [class$="__section-heading-jp"], [class$="__section-heading-lead"] { max-width: 100%; overflow-wrap: anywhere; word-break: auto-phrase; text-align: center; } /* [G6] 汎用 feature-badge / feature-item__number は width/height 固定・title と重ならない */ [class$="__feature-badge"] { flex-shrink: 0; } [class$="__feature-title"] { min-width: 0; overflow-wrap: anywhere; word-break: auto-phrase; } } /* [G7] PC: feature の絶対配置 badge が title と重ならないよう、 title に padding-left を保険で追加（v7 の .feature-item__title と両立） */ @media screen and (min-width: 769px) { [class*="__feature"] > [class$="__feature-title"] { min-width: 0; overflow-wrap: anywhere; } } /* v8 end (layout) — refresh audit */ /* ========================================================================== 2026-09-25 SP fresh audit v9 (layout global) ========================================================================== v8 clamp では page-* 側の specific 定義 (font-size: 50px 等) に負けて wordmark が右端はみ出し継続。詳細度を [class$] + [class*="__section-heading"] の複合セレクタで底上げし、fluid clamp を強制。ページごとの色や shadow 位置は温存。 ========================================================================== */ @media screen and (max-width: 768px) { /* [G8] wordmark 実装差異（wordmark / wordmark-front / wordmark-shadow / hero-wordmark） を漏れなく含めた fluid clamp。specific font-size 定義に勝つよう !important。 */ [class*="section-heading"][class*="wordmark"], [class*="section-heading-wordmark"], [class*="section-heading-wordmark-front"], [class*="section-heading-wordmark-shadow"], [class*="__hero-wordmark"], [class*="__hero-wordmark-front"], [class*="__hero-wordmark-shadow"] { font-size: clamp(24px, 7.2vw, 40px) !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; letter-spacing: 0.01em !important; box-sizing: border-box; } /* [G9] wordmark 親要素 (=section-heading) に overflow:hidden をかけて 画面幅を絶対に超えないようにする。 */ [class$="__section-heading"], [class*="__section-heading "], [class$="__hero"], [class*="__hero "] { max-width: 100%; overflow: hidden; box-sizing: border-box; } /* [G10] wordmark shadow の 3px オフセットが SP 縮小時に極端に見える件、 SP のみ shadow オフセットを 2px に緩める。 */ [class*="section-heading-wordmark-shadow"], [class*="__hero-wordmark-shadow"] { top: 2px !important; left: 2px !important; } /* [G11] section-inner の左右 max-width を viewport - 24px にキャップ */ [class$="__section-inner"], [class*="__section-inner "] { max-width: min(100%, calc(100vw - 24px)); margin-left: auto; margin-right: auto; } /* [G12] 汎用 feature/step/method card の grid: 番号 badge (01/02) と title の 絶対配置崩れ対策。flex row で確実に横並び。title は折返し許容。 */ [class$="__feature-item"], [class$="__step-item"], [class$="__method-item"] { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; } [class$="__feature-item"] > [class*="__number"], [class$="__feature-item"] > [class*="__badge"]:not([class*="__badge-"]), [class$="__step-item"] > [class*="__number"], [class$="__step-item"] > [class*="__badge"]:not([class*="__badge-"]), [class$="__method-item"] > [class*="__number"], [class$="__method-item"] > [class*="__badge"]:not([class*="__badge-"]) { position: static !important; flex-shrink: 0; } [class$="__feature-item"] > [class*="__body"], [class$="__feature-item"] > [class*="__content"], [class$="__step-item"] > [class*="__body"], [class$="__method-item"] > [class*="__body"] { min-width: 0; flex: 1 1 auto; } /* [G13] SP: hero KV illustration/photo は max-height を持たせて縦方向の 白余白 (page-top など) を抑制。 */ [class$="__hero-illustration"], [class$="__hero-visual"], [class$="__hero-photo"] { max-height: 60vh; object-fit: cover; } /* [G14] form field の tap 領域確保 (Contact) + iOS zoom 抑止 */ input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea, select { min-height: 44px; font-size: 16px; } /* [G15] section-heading-jp を SP fluid clamp（40px 級デザインを SP で 26px 前後まで） */ [class$="__section-heading-jp"] { font-size: clamp(20px, 5.8vw, 28px); line-height: 1.45; } /* [G16] section-heading-lead も SP で clamp して 折返し保証 */ [class$="__section-heading-lead"] { font-size: clamp(13px, 3.6vw, 15px); line-height: 1.65; padding-left: 16px; padding-right: 16px; } /* [G17] 汎用 body で横スクロール完全遮断（万一のはみ出し保険） */ body { overflow-x: hidden; } /* [G18] scroll-reveal 未起動時 fallback: opacity:1 保証 */ [data-scroll-reveal]:not(.is-revealed), .js-scroll-reveal:not(.is-revealed) { opacity: 1 !important; transform: none !important; } /* [G19] page-body 直下 (single .php page-top-level container) に 左右 padding 16px を保証（wrapper が padding 0 のとき content が壁に当たる） */ [class$="__page-body"], [class*="__page-body "] { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); box-sizing: border-box; } } /* v9 end (layout) — SP fresh audit */ /* ========================================================================== 2026-09-25 spacing rhythm v9 (layout) ========================================================================== 目的: 全 page-*.css に散在する section padding / gap の Figma 準拠統一。 - 低詳細度セレクタ `[class$="__section"]` に default padding-top/bottom を敷く。 - 個別ページの `.page-xxx__section` 定義（高詳細度）で個別値がある場合は そちらが勝つ（v1〜v8 破壊しない）。 - セクション連結時の gap は `+ [class$="__section"]` のペアで統一。 - lead / with-lead バリアントは attr セレクタで大きめ padding。 ========================================================================== */ /* Default section vertical rhythm ---------------------------------- */ [class$="__section"] { padding-top: var(--section-py-pc, 110px); padding-bottom: var(--section-py-pc, 110px); } /* lead 付きセクション（section-heading-lead を子孫に持つ場合は大きめ） */ [class$="__section"]:has(> .section-heading-lead), [class$="__section"]:has(> [class$="__section-heading-lead"]), [class$="__section"][class*="--lead"], [class$="__section"][class*="--with-lead"] { padding-top: var(--section-py-pc-with-lead, 150px); padding-bottom: var(--section-py-pc-with-lead, 150px); } /* Section 連結時の縦 gap（padding は各セクションが自己完結、 隣接時は上側 padding を潰して margin-top で置き換え） */ [class$="__section"] + [class$="__section"] { margin-top: var(--section-gap-pc, 60px); } /* Section 内の共通見出し / card grid gap の初期値 ---------------- */ [class$="__section-heading"], [class$="__section-heading-top"], [class$="__section-heading-lead"] { margin-bottom: var(--heading-mb-pc, 32px); } /* SP breakpoint ---------------------------------------------------- */ @media screen and (max-width: 768px) { [class$="__section"] { padding-top: var(--section-py-sp, 60px); padding-bottom: var(--section-py-sp, 60px); } [class$="__section"]:has(> .section-heading-lead), [class$="__section"]:has(> [class$="__section-heading-lead"]), [class$="__section"][class*="--lead"], [class$="__section"][class*="--with-lead"] { padding-top: var(--section-py-sp-with-lead, 80px); padding-bottom: var(--section-py-sp-with-lead, 80px); } [class$="__section"] + [class$="__section"] { margin-top: var(--section-gap-sp, 40px); } [class$="__section-heading"], [class$="__section-heading-top"], [class$="__section-heading-lead"] { margin-bottom: var(--heading-mb-sp, 20px); } } /* v9 end (layout) — spacing rhythm */ /* ========================================================================== 2026-09-25 refresh audit v10 (layout global) — PC+SP audit 目的: - [L1] SP: hero-illust image (position: absolute + 幅固定) の右方向はみ出しを一括抑制 - [L2] SP: page-hero 全体の overflow クリップ (illust が横スクロール誘発しないよう) - [L3] SP: section-heading の wordmark と 日本語見出しが重なる件を padding-top で強制クリアランス - [L4] SP: hero body/lead text の右見切れ (padding-right 保証) - [L5] SP: page-hero と 次セクション間の白い余白過剰を圧縮 ========================================================================== */ @media screen and (max-width: 768px) { /* [L1][L2] hero-illust の横方向オーバーフロー抑制 (site-wide) */ [class$="__hero"], [class*="__page-hero"], [class$="__page-hero"] { overflow: hidden; position: relative; } [class$="__hero-illust"], [class$="__hero-illustration"], [class$="__hero-image"] { max-width: 100% !important; overflow: hidden; } [class$="__hero-illust"] img, [class$="__hero-illustration"] img, [class$="__hero-image"] img { max-width: 100% !important; height: auto; object-fit: contain; } /* [L3] section-heading の wordmark(欧文) と 日本語見出し が重なる問題 → wordmark を relative + z-index 下・見出しに padding-top を担保 */ [class*="__section-heading"] [class*="wordmark"], [class*="__section"] [class*="wordmark"] { position: relative; z-index: 0; } /* [L4] hero 内 body/lead テキストの右端見切れ抑制 */ [class$="__hero"] p, [class$="__hero"] [class*="__lead"], [class$="__hero"] [class*="__body"] { padding-right: 12px; word-break: normal; overflow-wrap: anywhere; } /* [L5] hero と 次セクションの垂直リズム: 過剰空白抑制 */ [class$="__hero"] + [class*="__section"], [class$="__page-hero"] + [class*="__section"] { margin-top: clamp(16px, 4vw, 32px); } /* [L6] page-body__inner 直下の hero-illust image が単独で横に伸びるのを抑制 */ .page-body__inner [class$="__hero-illust"], .page-body__inner [class$="__hero-illustration"] { margin-left: 0; margin-right: 0; } } /* v10 end (layout) — refresh audit */ /* ========================================================================== 2026-09-25 final convergence v11 (layout / 全ページ共通) 目的: - [L7] SP: 全ページ共通 hero-title / hero-body / hero-lead / hero-sub の 右端見切れを抑止。BEM の各ページ prefix (`page-*__hero-*`) を 属性セレクタで横断ヒットし、max-width 100% + padding + overflow-wrap で確定。 - [L8] SP: 全ページ共通 hero-illust (`[class$="__hero-illust"]`) の right:負値・width:固定px 残骸を潰す。position:absolute の場合は right:0 + max-width で hero 内に収める。 - [L9] SP: body overflow-x を hidden で最終保険 (marquee/hero 由来の 横スクロール事故を封じる)。 ========================================================================== */ @media screen and (max-width: 768px) { /* [L7] hero テキスト系右見切れ抑止 */ [class*="__hero-title"], [class*="__hero-body"], [class*="__hero-lead"], [class*="__hero-sub"], [class*="__hero-en"], [class*="__hero-panel"] { max-width: 100% !important; padding-right: 12px; padding-left: 12px; box-sizing: border-box !important; overflow-wrap: anywhere; word-break: normal; } /* wordmark 系は letter clip 対策 (padding は打たない) */ [class*="__hero-wordmark"], [class*="__hero-wordmark-front"], [class*="__hero-wordmark-shadow"] { max-width: 100%; } /* [L8] hero-illust 全ページ共通 right/left 事故封じ */ [class$="__hero-illust"], [class$="__hero-illustration"], [class*="__hero-illust"] img { max-width: 100% !important; height: auto !important; box-sizing: border-box; } /* absolute で残る場合の right 負値を 8px 内に押し戻す */ [class$="__hero-illust"][style*="position:absolute"], [class$="__hero-illust"][style*="position: absolute"] { right: 8px !important; left: auto !important; } /* [L9] body horizontal scroll 完全封殺 (marquee/hero fallback) */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } } /* v11 end (layout) — final convergence */ /* ========================================================================== 2026-09-26 post-v12 audit v13 (layout / 全ページ共通) 目的: v12 で B-class critical 7件 fix 後の実描画で残った SP 右見切れを 横断的に潰す。以下のパターンが多発: - [V1] section-heading 系: position:absolute + left:50% + translateX(-50%) + white-space:nowrap が SP で wordmark 突き出しの原因になっている （各ページCSSがlayout v8[G1]clampを上書き）。!importantで再clamp - [V2] hero-panel (page-body__inner > hero) の右端が壁に当たり subtext/primary-button が clip される - [V3] section 直下カード群 (feature-item/scholarship-item/method-item /recruit-item/concern-item 等) の body text が右画面外に流れる - [V4] course-compare table が SP 375px に収まらず右見切れ - [V5] admission methods-list が高さ不足で card overlap - [V6] news / tuition-scholarship の breadcrumb が二重表示 - [V7] for/parent, godai-group の hero-kv 未描画 ========================================================================== */ @media screen and (max-width: 768px) { /* [V1] section-heading コンテナ SP 標準化: 全ページで position:static 化 */ [class$="__section-heading"], [class$="__section-heading-top"], [class$="__section-heading-lead"] { position: static !important; left: auto !important; top: auto !important; transform: none !important; white-space: normal !important; width: 100% !important; max-width: 100% !important; text-align: center; box-sizing: border-box; } /* [V1b] section-heading の wordmark を SP で再度 clamp 強制 （各ページCSSがv8 [G1] clamp を上書きしている） */ [class$="__section-heading-wordmark"] { font-size: clamp(24px, 7vw, 36px) !important; max-width: 100% !important; overflow: hidden !important; white-space: nowrap; display: inline-block !important; } [class$="__section-heading-wordmark-front"], [class$="__section-heading-wordmark-shadow"] { font-size: inherit !important; } /* [V2] hero-panel 右端保証: 全ページ __hero-panel の box-sizing / max-width / padding-right */ [class$="__hero-panel"] { max-width: 100% !important; box-sizing: border-box !important; padding-right: max(20px, env(safe-area-inset-right)) !important; overflow-wrap: anywhere; } /* hero-panel 内の primary-button / sub 系は縦積み折り返し */ [class$="__hero-panel"] > [class*="primary-button"], [class$="__hero-panel"] [class$="__hero-cta"] { max-width: 100%; flex-shrink: 0; } /* [V3] page-body__inner 直下のカード body/text 右パディング保証 */ .page-body__inner > [class*="-item"], .page-body__inner > [class*="-card"], .page-body__inner > [class*="-row"] { max-width: 100% !important; box-sizing: border-box; overflow-wrap: anywhere; } /* 内部 body/desc/text/lead に右 padding を保証 */ .page-body__inner [class$="__body"], .page-body__inner [class$="__desc"], .page-body__inner [class$="__text"], .page-body__inner [class$="__answer"], .page-body__inner [class$="__title"] { padding-right: 4px; overflow-wrap: anywhere; word-break: normal; } /* [V4] course-compare table / 表系 SP: 横スクロール許可 */ [class$="__course-compare"], [class$="__compare-table"], [class$="__scroll-x"], [class*="__course-compare"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; } /* table 自体は SP 縮小しないで data-cell 内 overflow-wrap で対応 */ [class$="__course-compare"] td, [class$="__course-compare"] th, [class$="__compare-table"] td, [class$="__compare-table"] th { overflow-wrap: anywhere; word-break: normal; } /* [V5] methods-list / method-item 高さ足りず overlap 事故を防止 */ [class$="__methods-list"], [class$="__method-list"] { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; } [class$="__methods-list"] > *, [class$="__method-list"] > * { position: static !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-height: 56px; box-sizing: border-box; } /* method-item 内は number + body 横並び強制 */ [class$="__method-item"] { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 12px 16px; } [class$="__method-item"] > [class*="__body"], [class$="__method-item"] > [class*="__content"] { min-width: 0; flex: 1 1 auto; } /* [V6-a] site-breadcrumb が 1 item のみのページ (news 等) は非表示 */ .site-breadcrumb__list:not(:has(li + li)) { display: none; } /* [V6-b] page 独自 breadcrumb--top が存在するページ (news, tuition-scholarship 等) は header 側 site-breadcrumb を非表示にして重複回避 */ body:has([class*="__breadcrumb--top"]) .site-breadcrumb { display: none; } /* [V6-c] page-*__breadcrumb--top と __breadcrumb--inline が重複する場合、 inline (hero 内) を非表示にして重複回避 */ [class$="__hero"] [class*="__breadcrumb--inline"] { display: none !important; } /* [V7] for/parent, godai-group など hero-kv が未指定/欠落時の予備空間削減 */ .page-body__inner > .page-hero:not(:has(img)):not(:has([class*="hero-kv"] img)) { min-height: 0; } /* hero-kv 直下 img が背景で消えるケースの保険 */ [class$="__hero-kv"] { display: block !important; max-width: 100% !important; } [class$="__hero-kv"] > img, [class$="__hero-kv"] picture > img { display: block !important; width: 100% !important; height: auto !important; object-fit: cover; } /* [V8] recruit-item / concern-item / feature-item の body clip 抑止 */ [class$="__recruit-item"] [class$="__body"], [class$="__concern-item"] [class$="__body"], [class$="__scholarship-item"] [class$="__body"], [class$="__scholarship-item"] [class$="__value"], [class$="__scholarship-item"] [class$="__desc"] { padding-right: 8px; overflow-wrap: anywhere; word-break: normal; max-width: 100%; } /* [V9] news categories chip 行が右見切れ: 横スクロール許可 */ [class$="__news-categories"], [class$="__categories-list"], [class$="__category-chips"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; scrollbar-width: none; } [class$="__news-categories"]::-webkit-scrollbar, [class$="__categories-list"]::-webkit-scrollbar, [class$="__category-chips"]::-webkit-scrollbar { display: none; } /* [V10] article-item / news-item の title 右見切れ抑止 */ [class$="__article-item"] [class$="__title"], [class$="__news-item"] [class$="__title"], [class$="__news-article"] [class$="__title"] { padding-right: 8px; overflow-wrap: anywhere; word-break: normal; } /* [V11] hero-en (英字小見出し) 右端保証 */ [class$="__hero-en"] { max-width: 100% !important; overflow: hidden; white-space: nowrap; text-overflow: clip; } /* [V12] 全 section-inner の box-sizing / 右 padding 再確定 */ [class$="__section-inner"], [class*="__section-inner"] { max-width: 100% !important; box-sizing: border-box !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; } } /* v13 end (layout) — post-v12 audit / 全ページ共通 */ /* ========================================================================== 2026-09-26 a11y deep v13 (layout) 目的: - [L10] focus 可能な article[aria-labelledby] 内リンクの focus-visible を強化。 voice-card / review-card / feature-item / page-news__item 等の カード全体クリック領域で focus ring を明確化する（WCAG 2.4.7 対応）。 - [L11] :target で main にアンカーした際、視覚スクロール位置調整 （固定ヘッダー分の scroll-margin-top 確保）。 - [L12] SP drawer 展開中の body に付与される .is-drawer-open クラスで main 以下を aria-hidden 相当（inert）にはできないが、 visual pointer-events を無効化して背面 focus 迷子を防止。 ========================================================================== */ /* [L10] card link focus-visible */ .voice-card a:focus-visible, .review-card a:focus-visible, .feature-item a:focus-visible, .page-news__item-link:focus-visible, .page-news__related-link:focus-visible { outline: 3px solid #FFCE30; outline-offset: 3px; border-radius: 4px; } /* [L11] main scroll-margin (fixed header 分の吸収) */ main#site-content, #main { scroll-margin-top: 80px; } /* [L12] drawer open 中の main 背面 pointer-events 抑止 */ body.is-drawer-open main#site-content, body.drawer-open main#site-content { pointer-events: none; } /* v13 end (layout) — a11y deep */ /* 2026-09-26 CWV v14 */ /* [CWV-01] hero KV / hero image の CLS 予防 * width/height 属性で intrinsic ratio は取れているが、 * flex/grid 親の子で aspect-ratio が消えるケースがあるため明示。 * 下層 hero-kv 標準は 640x400 = 16/10。TOP hero-kv は 2519/729 で別値。 */ [class*="__hero-kv"] img { height: auto; max-width: 100%; } [class*="__hero-kv"]:not(.page-top__hero-kv) img { aspect-ratio: 16 / 10; } .page-top__hero-kv .page-top__hero-kv-img { aspect-ratio: 2519 / 729; width: 100%; height: auto; } [class*="__hero-image"] img { height: auto; max-width: 100%; aspect-ratio: 16 / 10; } /* [CWV-02] content-visibility で下部セクションのペイントを遅延 (LCP後の描画コスト削減) * contain-intrinsic-size は概算・実測に応じて調整可 */ .page-top__section { content-visibility: auto; contain-intrinsic-size: 1px 800px; } /* v14 end (layout) — CWV */ /* ========================================================================== 2026-09-26 fresh audit v15 (layout / 全ページ共通) post-v14 実描画で確認された残差: - [V15-1] SP 375px で page-hero-panel が padding 20px 40px + max-content 幅 child (wordmark/title) で親を膨らませ、body scroll bar が overflow-x を破る - [V15-2] SP page-body__inner の flex 子要素幅 100% 保証が [class$="__hero"] に 及んでいないケース (page-hero 100% + inner __hero-panel 100% は分離指定) - [V15-3] SP で 3-4 カラム grid (methods/overview cards) が gap 20px + min-width 30% 指定で 375px を超える。gap 縮小 + 縦積み許可 - [V15-4] 全ページ SP body に max-width:100vw + overflow-x hidden の最終保険 ========================================================================== */ @media screen and (max-width: 768px) { /* [V15-1] hero-panel の子 (wordmark / heading / breadcrumb) を強制内寄せ */ [class$="__hero-panel"] [class$="__hero-wordmark"], [class$="__hero-panel"] [class$="__hero-title"], [class$="__hero-panel"] [class$="__hero-lead"], [class$="__hero-panel"] [class$="__hero-subtext"], [class$="__hero-panel"] [class$="__breadcrumb"], [class$="__hero-panel"] [class*="__breadcrumb"] { max-width: 100%; overflow-wrap: anywhere; box-sizing: border-box; } /* wordmark が font-size 大き過ぎで単独 overflow するのを clamp */ [class$="__hero-panel"] [class$="__hero-wordmark"] { font-size: clamp(32px, 10vw, 56px); line-height: 1.05; } /* [V15-2] page-hero と __hero (ページ独自 wrapper) 100% 保証 */ .page-body__inner > .page-hero, .page-body__inner > [class$="__hero"], [class$="__hero-inner"] { max-width: 100% !important; width: 100% !important; box-sizing: border-box; } /* [V15-3] SP で 3-4 カラム grid が overflow するケース: gap 縮小 + wrap 許可 */ [class$="__overview-list"], [class$="__methods-grid"], [class$="__cards-grid"], [class$="__concerns-list"] { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; max-width: 100% !important; } [class$="__overview-list"] > *, [class$="__methods-grid"] > *, [class$="__cards-grid"] > *, [class$="__concerns-list"] > * { flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } /* [V15-4] 最終保険: html/body の overflow-x 制御 */ html, body { max-width: 100vw; overflow-x: hidden; } } /* v15 end (layout) — fresh audit */ /* ========================================================================== 2026-09-26 tablet audit v15 (layout) 目的: 769-1024px (iPad portrait/landscape相当) の帯域で 4カラム/3カラムグリッドが 200px を切って潰れる事故を回避 - SP mq (max-width:768) と PC (>=1025) は動かさない - この帯域だけ 4col→2col・3col→2col に折り返し ========================================================================== */ @media screen and (min-width: 769px) and (max-width: 1024px) { /* 4カラム → 2カラム化 (feature/worry/check/gallery/stat-sub/logo) */ .page-body__inner > .feature-item, .page-body__inner > .worry-item, .page-body__inner > .check-item, .page-body__inner > .gallery-item, .page-body__inner > .stat-card-sub, .page-body__inner > .logo-item { flex-basis: calc((100% - var(--grid-gap)) / 2) !important; max-width: calc((100% - var(--grid-gap)) / 2) !important; width: calc((100% - var(--grid-gap)) / 2) !important; } /* 3カラム → 2カラム化 (course-sub/interview-sub/stat/pickup/facility/info/practical/course-step) */ .page-body__inner > .course-card-sub, .page-body__inner > .interview-card-sub, .page-body__inner > .stat-card, .page-body__inner > .pickup-card, .page-body__inner > .facility-item, .page-body__inner > .info-card, .page-body__inner > .practical-item, .page-body__inner > .course-step { flex-basis: calc((100% - var(--grid-gap)) / 2) !important; max-width: calc((100% - var(--grid-gap)) / 2) !important; width: calc((100% - var(--grid-gap)) / 2) !important; } /* 2カラム系 (voice/review 等) は 1024px 帯でも 2col を維持 (幅 400px 前後は十分読める) */ /* body の縦帯 padding 40px を 24px に縮めて可用領域拡大 (page-topの 1024mq に合わせる) */ body { padding-left: 24px; padding-right: 24px; } /* 左右の縦書き装飾帯も 24px 幅に合わせて絞る */ body::before, body::after { width: 24px; font-size: 11px; line-height: 24px; } /* page-body__inner の内側左右余白は 20px 相当まで詰める */ .page-body__inner { padding-left: 20px; padding-right: 20px; } } /* v15 tablet audit end (layout) */ /* ========================================================================== 2026-09-26 typography deep v16 (layout / 全ページ共通) 日本語 typography 深堀 (行送り / 字間 / 句読点 / text-wrap) - text-wrap: balance (h1-h4 / [class*="__title"] / [class*="__heading-jp"]) - text-wrap: pretty (本文 p / [class*="__body"] / [class*="__desc"] / [class*="__lead"] / [class*="__text"]) - hanging-punctuation: allow-end (行頭句点回避) - word-break: auto-phrase (Chrome 119+ の日本語自然改行) - line-break: strict (禁則処理・強) - overflow-wrap: anywhere (URL 等の強制折り返し) - CSS4 新機能は @supports で fallback 保証（progressive enhancement） - 既存 v1〜v15 の line-height / letter-spacing 個別指定は破壊しない ========================================================================== */ /* [TYPO-L01] 全体ベースライン: hanging-punctuation を html に付けて JP 全域で有効化 */ @supports (hanging-punctuation: allow-end) { html { hanging-punctuation: allow-end; } } /* [TYPO-L02] 見出し: text-wrap balance で折り返しを均等化（1〜4行程度で最大効果） */ @supports (text-wrap: balance) { h1, h2, h3, h4, [class*="__title"], [class*="__heading-jp"] { text-wrap: balance; } } /* [TYPO-L03] 本文: text-wrap pretty で最終行 orphans を防止 */ @supports (text-wrap: pretty) { p, [class*="__body"], [class*="__desc"], [class*="__lead"], [class*="__text"] { text-wrap: pretty; } } /* [TYPO-L04] 日本語自然改行 (Chrome 119+): 文節単位で改行を試みる - 見出し / 本文の両方に適用（禁則処理を strict に強化） */ @supports (word-break: auto-phrase) { h1, h2, h3, h4, [class*="__title"], [class*="__heading-jp"], p, [class*="__body"], [class*="__desc"], [class*="__lead"], [class*="__text"] { word-break: auto-phrase; line-break: strict; } } /* [TYPO-L05] URL / 長い英数字トークンの強制折り返し (fallback 含む) */ [class*="__body"], [class*="__desc"], [class*="__lead"], [class*="__text"], p { overflow-wrap: anywhere; line-break: strict; } /* [TYPO-L06] SP breakpoint: text-wrap balance は狭幅で "詰まる" 副作用があるため、 ≤ 600px では balance を切り、pretty のみ維持（可読性優先） */ @media (max-width: 600px) { @supports (text-wrap: balance) { h1, h2, h3, h4, [class*="__title"], [class*="__heading-jp"] { text-wrap: pretty; } } } /* v16 end (layout) — typography deep */ /* ========================================================================== 2026-09-26 first fold v16 (layout / 全ページ共通) 目的: - [FF-L01] SP: hero-panel の右端はみ出しを最終保険 (padding-right + inline-size) - [FF-L02] SP: site-breadcrumb と __breadcrumb--inline 同時表示時はヘッダー側を隠す - [FF-L03] SP: hero-panel と hero-kv の間隔を圧縮 (32px→12px) - [FF-L04] SP: hero と直下 section の白余白を再度タイト化 (v10 [L5] を上書きしない範囲で) - [FF-L05] PC: hero-panel のコンテンツ overflow ガード (グリッドはみ出し予防) - [FF-L06] PC: hero-panel 内 breadcrumb を hero-body 内に留める (float overlap 防止) - [FF-L07] SP: hero-title / hero-sub の長文折返しを許可 (nowrap で右カットを防ぐ) - [FF-L08] SP: hero-wordmark を親幅にフィット (letter clip) 既存 v1〜v15 (V1〜V13, L1〜L9, G1〜G9) と重ならない範囲で純増。 ========================================================================== */ /* [FF-L05] PC: hero-panel content overflow guard (2K想定 fold 900px) */ @media screen and (min-width: 769px) { [class$="__hero-panel"] { min-width: 0; overflow: hidden; } /* [FF-L06] PC: breadcrumb を hero-body 内に完全収納 */ [class$="__hero-body"] [class$="__breadcrumb"], [class$="__hero-body"] [class$="__breadcrumb--inline"] { position: relative; z-index: 2; max-width: 100%; box-sizing: border-box; } /* hero-panel::before など装飾を panel 内にクリップ */ [class$="__hero-panel"]::before, [class$="__hero-panel"]::after { max-width: 100%; } } @media screen and (max-width: 768px) { /* [FF-L01] hero-panel 最終右端保証 (inline-size 明示) */ [class$="__hero-panel"] { inline-size: 100%; max-inline-size: 100%; contain: layout paint; } /* panel 直下の全子孫に max-width 保証 */ [class$="__hero-panel"] * { max-width: 100%; min-width: 0; } /* [FF-L07] SP: hero-title / hero-sub は必ず折返し */ [class*="__hero-title"], [class*="__hero-sub"], [class*="__hero-lead"] { white-space: normal !important; word-break: normal; overflow-wrap: anywhere; line-height: 1.35; } /* [FF-L08] hero-wordmark は 100% clamp (親幅超過禁止) */ [class*="__hero-wordmark"], [class*="__hero-wordmark-front"], [class*="__hero-wordmark-shadow"] { max-width: 100%; overflow: hidden; display: inline-block; text-overflow: clip; } /* [FF-L02] SP でも header 側 site-breadcrumb と hero 内 breadcrumb 重複時は header 側非表示 hero-body 内 breadcrumb と、hero-panel 直下 breadcrumb (first-class 等) の両方に対応 */ body:has([class*="__hero"]:not([class*="__hero-"]) [class*="__breadcrumb"]:not([class*="__breadcrumb-item"]):not([class*="__breadcrumb-sep"])) .site-breadcrumb { display: none; } /* [FF-L03] hero-panel と hero-kv 間隔タイト化 */ [class$="__hero-panel"] + [class$="__hero-kv"], [class$="__hero-panel"] + [class$="__hero-image"] { margin-top: 8px; } /* [FF-L04] hero → 次セクション余白 (再) */ [class$="__hero"] + section, [class$="__page-hero"] + section { margin-top: clamp(12px, 3vw, 24px); } } /* v16 end (layout) — first fold */ /* ========================================================================== 2026-09-26 post-v16 polish v17 (layout) — 実描画 audit 残差 focus: - [V17-A01] SP hero-wordmark 一律 clamp + wrap 許可 (v16 の overflow:hidden で nowrap テキストが切られる残差) - [V17-A02] SP hero-title/hero-sub 一律 clamp + inline-padding (overflow guard) - [V17-A03] PC hero-wordmark を親幅超過抑制 clamp (CHALLENGE SPIRITS / GODAI SCHOLARSHIP) - [V17-A04] SP hero-en / hero-prefix (YOKOHAMA TECHNOAUTO COLLEGE) の可視化 とサイズ調整 (SP でも小さめに残す) - [V17-A05] SP hero-panel 直下の text-wrap: balance / pretty で読みやすさ底上げ - [V17-A06] SP news 系 filter tab を横スクロール可能に (overflow横抑制) - [V17-A07] TOP SP hero と次 section の空白圧縮 (再) - [V17-A08] section-heading-wordmark SP clamp (news CATEGORIES/ARTICLES 残差) BEM 維持・!important は SP hero-title の白抜き上書き衝突対策のみ ========================================================================== */ /* [V17-A03] PC hero-wordmark: 親幅超過抑制 */ @media screen and (min-width: 769px) { [class$="__hero-panel"] [class*="__hero-wordmark"] { max-width: 100%; overflow: hidden; white-space: nowrap; font-size: clamp(36px, 4.2vw, 60px); text-overflow: clip; } /* CHALLENGE SPIRITS のような TOP hero (panel 無し) では hero-kv 内でも clamp を適用 */ [class*="__hero-kv"] [class*="__hero-wordmark"] { max-width: 100%; font-size: clamp(48px, 6vw, 88px); } } @media screen and (max-width: 768px) { /* [V17-A01] SP hero-wordmark: wrap 許可 + clamp サイズ */ [class*="__hero-wordmark"] { white-space: normal; word-break: normal; overflow-wrap: anywhere; font-size: clamp(28px, 8vw, 40px); line-height: 1.1; max-width: 100%; overflow: visible; display: inline-block; text-align: center; } [class*="__hero-wordmark-front"], [class*="__hero-wordmark-shadow"] { display: inline; overflow: visible; max-width: 100%; } /* [V17-A02] SP hero-title/hero-sub padding + clamp */ [class*="__hero-panel"] [class*="__hero-title"] { font-size: clamp(20px, 5.6vw, 26px) !important; padding: 0 8px; max-width: 100%; box-sizing: border-box; } [class*="__hero-panel"] [class*="__hero-sub"], [class*="__hero-panel"] [class*="__hero-lead"] { font-size: clamp(12px, 3.6vw, 15px); padding: 0 8px; max-width: 100%; box-sizing: border-box; } /* [V17-A04] SP hero-en (YOKOHAMA TECHNOAUTO COLLEGE prefix) 復活 */ [class*="__hero-panel"] [class*="__hero-en"] { display: block; font-size: clamp(10px, 2.8vw, 12px); text-align: center; opacity: 0.9; margin-bottom: 4px; } /* [V17-A05] text-wrap balance/pretty */ [class*="__hero-title"], [class*="__hero-sub"], [class*="__hero-lead"] { text-wrap: pretty; } [class*="__hero-wordmark"], [class*="__section-heading-jp"], [class*="__section-heading-wordmark"] { text-wrap: balance; } /* [V17-A06] news filter tabs 横スクロール化 */ [class*="__filter"], [class*="__category-tabs"], [class*="__cat-tabs"] { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 4px; } [class*="__filter"]::-webkit-scrollbar, [class*="__category-tabs"]::-webkit-scrollbar, [class*="__cat-tabs"]::-webkit-scrollbar { height: 4px; } /* [V17-A08] section-heading-wordmark SP clamp (news CATEGORIES/ARTICLES 等の長い英字見出しの切れ対策) */ [class*="__section-heading-wordmark"] { font-size: clamp(32px, 10vw, 48px); max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; display: inline-block; } [class*="__section-heading"] { max-width: 100%; padding: 0 16px; box-sizing: border-box; } /* [V17-A07] TOP hero と次セクションの隙間再圧縮 */ .page-top__hero + section, .page-top__hero + .page-top__section { margin-top: 0; padding-top: clamp(12px, 3vw, 20px); } } /* v17 end (layout) — post-v16 polish */ /* ========================================================================== 2026-09-26 v17 verify v18 (layout) — 実描画 audit で残った 10 項目の潰し verify 結果: [1] SP hero-en gap 崩れ : 確認できず (panel 内で自然に納まっている) [2] career SP ダブルKV : 再現 (illust + photo が両方出る) → 潰し [3] course-car-mechanic SP dupKV: 再現 (同一写真が2枚) → 潰し [4] sitemap/privacy 空要素隙間 : 確認できず (v17-A04 の display:block でも panel 内で問題なし) [5] text-wrap balance iOS Safari: 対象バージョン不明のため、保険で text-wrap: initial の fallback を追加 [6] filter tab overflow衝突 : news SP でスクロール動作確認済み. flex-wrap を明示的に nowrap 固定 [7] TOP PC clamp 78px 4K : 1440px でも "CHALLENGE SPIRITS" 右端超過再現 → 上限を 68px + max-width:min-content [8] godai SP wordmark 22px下限 : 再現 (SCHOLARSHIP がクロップ) → 白抜きストロークで小さくても存在感残るので 18px下限 [9] hero-title !important上書き : 確認できず (subhead に影響なし) [10] PICK UP tilt overflow : v17-T03 適用済で問題なし 追加残差: [R7] admission SP hero-sub 右クロップ → padding + word-break [R8] course SP hero-title 右クロップ → padding + word-break [R9] opencampus SP wordmark クロップ → clamp 下限緩和 [R10] news SP section-heading-wordmark クロップ → clamp 下限 26px に ========================================================================== */ /* [V18-01] course-car-mechanic SP のダブル KV 潰し verify: page-course-car-mechanic は SP で hero-image と hero-kv の両方に 同一写真が入り縦に 2 枚並ぶ。SP は hero-kv (variant='e' 準拠) 側を採用し hero-image を隠す。career は既に hero-kv を SP で display:none 済のため ここでは触らない (二重非表示は起こさない)。 */ @media screen and (max-width: 768px) { .page-course-car-mechanic__hero-image { display: none; } } /* [V18-02] SP hero-title / hero-sub オーバーフロー確実潰し v17-A02 の padding だけでは text が単語不分割で親幅を超える。text 側に word-break と overflow-wrap を強制、親には max-width のみ (overflow は 各ページの illust 出し用に visible が意図的なので触らない)。 */ @media screen and (max-width: 768px) { [class*="__hero-panel"], [class*="__hero-body"] { max-width: 100%; box-sizing: border-box; } [class*="__hero-panel"] [class*="__hero-title"], [class*="__hero-panel"] [class*="__hero-sub"], [class*="__hero-panel"] [class*="__hero-lead"] { word-break: auto-phrase; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; } } /* [V18-03] SP hero-wordmark inline-flex 由来の折返し不能を強制 wrap 可能に 個別ページの `display: inline-flex` が V17-A01 の inline-block を上書きしていた。 属性セレクタで最終上書き。 */ @media screen and (max-width: 768px) { [class*="__hero-panel"] [class*="__hero-wordmark"] { display: inline-block; white-space: normal; overflow-wrap: anywhere; max-width: 100%; } /* shadow/front span は絶対配置ペアなので、幅を親と揃える */ [class*="__hero-panel"] [class*="__hero-wordmark-front"] { display: inline; max-width: 100%; } } /* [V18-04] news SP section-heading-wordmark を確実に viewport 内に v17-A08 の clamp(32px,10vw,48px) でも "CATEGORIES" がクロップ。10vw→8vw に overflow は section-heading にはかけない (tilt / illust の外出しを保護)。 */ @media screen and (max-width: 768px) { [class*="__section-heading-wordmark"] { font-size: clamp(26px, 8vw, 40px); } } /* [V18-05] filter tab の flex-wrap を明示的に nowrap に (overflow-x スクロール優先) */ @media screen and (max-width: 768px) { [class*="__filter"], [class*="__category-tabs"], [class*="__cat-tabs"] { flex-wrap: nowrap; } } /* [V18-06] text-wrap balance/pretty の iOS Safari <16 fallback 非対応環境では単に normal に戻すだけ (エラーは出ない) */ @supports not (text-wrap: balance) { [class*="__hero-title"], [class*="__hero-sub"], [class*="__hero-lead"], [class*="__hero-wordmark"] { text-wrap: initial; } } /* v18 end (layout) — post-v17 verify */ /* ============================================================== 2026-09-26 hero-en sync v18 Figma 実測 (全下層 PC ページ hero 共通): font-family: Montserrat / Bold Italic / weight 700 font-size: 20px (line-height 22px) letter-spacing: 0 (Figma 値 0.0) color: #398be2 (r:0.22, g:0.55, b:0.89) text-case: UPPER (source は lower "yokohama technoauto college") TOP KV 表示 (SP/PC 12px 白/letter-spacing 0.6px) は既存の .page-top KV スタイルが別途担当。v18 は下層 hero-en の baseline を 全 prefix 横断で担保する (BEM prefix 別の個別上書きは尊重)。 ============================================================== */ [class$="__hero-panel"] > [class$="__hero-en"] { /* Figma 実測 baseline (下層ページ hero 共通) */ font-family: var(--technoauto-font-en, "Montserrat", sans-serif); font-style: italic; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } /* ========================================================================== 2026-09-26 arrow deduplicate v20b -------------------------------------------------------------------------- 症状: v5A/v17 で SVG mask 化した ::after/::before と、PHP の `` テキスト矢印が 同一ボタン内で並列描画され、二重矢印に見えるバグ。 対応: 「同じ link/button 内に SVG が描画される要素」の場合、テキストの arrow span を font-size:0 で視覚除去する。BEM 維持・SVG は v17 のまま残す。 BEM/HTML/JS には手を入れない、CSS only の視覚除去。 対象は "SVG 兄弟が既に描画されている arrow span" のみ厳密指定。 単独描画 (site-drawer 系) は対象外にして regression を回避。 ========================================================================== */ /* [v20b-01] page-top: pill-arrow (v5A で ::before SVG 描画済) + v18 の `.page-top .page-top__pill-arrow { font-size: 12px }` 上書きで ▶ (U+25B6) テキスト文字が SVG の隣に再表示される二重描画。!important で潰す */ .page-top .page-top__pill-arrow, .page-top__pill-arrow { font-size: 0 !important; line-height: 0 !important; } .page-top .page-top__pill-arrow::before, .page-top__pill-arrow::before { font-size: 14px !important; line-height: 1 !important; } /* [v20b-02] page-about: card-arrow (a::after で SVG 描画済) */ .page-about__card-arrow { font-size: 0 !important; line-height: 0 !important; } /* [v20b-03] page-course/admission card-btn-arrow は SVG 兄弟なし → 単独表示・現状維持 (v5A ::after は __card-cta / __view-more / __more-link のみ対象で __card-btn は非該当) */ /* [v20b-04] site-footer PC nav: nav-arrow (.site-footer__nav a::after で SVG 描画済 + PHP に > span 有 → 二重 / PC のみ) .site-footer__acc-arrow は SP アコーディオン専用・v5A の SVG 兄弟なし → 対象外 */ @media (min-width: 769px) { .site-footer__nav-arrow { font-size: 0 !important; line-height: 0 !important; } } /* [v20b-05] page-for-highschool: step-arrow が SP でも PC でもテキスト表示のまま残る → v17 未対応・SVG 兄弟なし → 装飾は残したいので Figma 実測サイズで統一維持 (font-size は既存の per-page CSS が担当・v20b では触らない・現状維持) */ /* [v20b-06] page-tuition-company: flow-arrow は装飾要素・単独 → 現状維持 */ /* [v20b-07] site-drawer 系 (list-arrow / contact-web-arrow) は SVG 兄弟なし → 現状維持 */ /* [v20b-08] breadcrumb sep は既存デザインで > を"文字"として意図的に表示している → v20b の対象外 (誤って潰さないようにする防御コメント) */ /* v20b end (layout) — arrow deduplicate */ /* ========================================================================== 2026-09-26 hero-illust fix v20b 目的: 下層ページ hero に v6 で追加した hero-illust が「KV写真の上に全面被り」 ＋「右下に小さく二重表示」される事故を全ページ横断で修正。 根本原因（実描画 headless 検証 /admission/ao/ で確定）: [C1] 各ページ CSS の `.__hero-kv img { width:100%; height:100%; object-fit:cover; }` が `` にも当たり、illust が KV サイズ全面に cover 表示される（詳細度 0,1,1 が `.__hero-illust`(0,1,0) に勝つ）。 [C2] 各ページ CSS の `[class*="__hero-kv"]::after { background: url(hero-illust-xxx.png) }` が PHP 側で出力する `` と重複し、右下に 小さい illust の二重表示になる。 対応: [F1] `.__hero-kv` 直下の `.__hero-illust` は KV img セレクタの影響を切り、 Figma 準拠の位置/サイズ（右下端に小さく）を再宣言。 [F2] 各ページの `[class*="__hero-kv"]::after` 疑似要素 illust を全ページ 一括で content:none 化して二重表示を除去。PHP 側 img が唯一の実体。 [F3] SP でも同様に。 対象ページ: admission-ao / admission / about / course / opencampus / opencampus-trial / tuition / for-highschool ========================================================================== */ /* [F2] 疑似要素での二重 illust を全ページ一括除去 */ [class*="__hero-kv"]::after, [class*="__hero-kv"]::before { content: none !important; background: none !important; } /* [F1] hero-kv 内の hero-illust を KV img セレクタから守り、Figma 準拠に固定 PC: 右下端に小さく (max-width 240px) / object-fit:initial で cover を解除 */ [class$="__hero-kv"] > [class$="__hero-illust"], [class*="__hero-kv"] > [class*="__hero-illust"] { position: absolute !important; right: clamp(8px, 3%, 24px) !important; bottom: -20px !important; width: clamp(140px, 32%, 240px) !important; height: auto !important; max-width: 240px !important; object-fit: initial !important; z-index: 2; pointer-events: none; user-select: none; display: block; } /* [F3] SP: 位置とサイズを SP 用に上書き */ @media screen and (max-width: 768px) { [class$="__hero-kv"] > [class$="__hero-illust"], [class*="__hero-kv"] > [class*="__hero-illust"] { width: clamp(96px, 28%, 160px) !important; max-width: 160px !important; right: 12px !important; bottom: -14px !important; } } /* v20b hero-illust fix end (layout) */ /* ========================================================================== 2026-09-26 v21 critical + verify --------------------------------------------------------------------------- [P1] SP course/* 全ページ hero 二重描画一括潰し PHP は hero-image (SP用写真) + hero-kv (PC用写真+illust) の 2 画像を 出力する。各ページ CSS では individual display:none 済のはずだが specificity 差でリークするページがある。ここで [class*="__hero-kv"] の SP 上非表示を !important で最終確定させる (car-mechanic のみ hero-image を隠して hero-kv を残す既存挙動を保つため、除外)。 [P2] SP course/* wordmark と 日本語タイトル の垂直衝突回避 hero-wordmark の position 解除 + 順序確定 + margin-bottom 保証で 絶対配置の shadow/front が title に重ならないようにする。 [P3] career/companies, career/license PC hero slider overflow 潰し (career 親と同じ overflow:hidden を子2件に適用) ========================================================================== */ @media screen and (max-width: 768px) { /* [P1] course/* SP hero-kv 二重画像 一括非表示 (car-mechanic は逆パターン: hero-image 側を隠す既存の V18-01 で対応済) */ .page-course-first-class__hero-kv, .page-course-body-paint__hero-kv, .page-course-general__hero-kv, .page-course-international__hero-kv, .page-course-advanced__hero-kv, .page-course__hero-kv { display: none !important; } /* [P2] course/* SP hero wordmark 位置固定 (title と z-index 衝突回避) */ .page-course-first-class__hero-wordmark, .page-course-body-paint__hero-wordmark, .page-course-car-mechanic__hero-wordmark, .page-course-general__hero-wordmark, .page-course-international__hero-wordmark, .page-course-advanced__hero-wordmark, .page-course__hero-wordmark { position: static !important; display: block; margin-bottom: 8px; } .page-course-first-class__hero-wordmark-shadow, .page-course-body-paint__hero-wordmark-shadow, .page-course-car-mechanic__hero-wordmark-shadow, .page-course-general__hero-wordmark-shadow, .page-course-international__hero-wordmark-shadow, .page-course-advanced__hero-wordmark-shadow, .page-course__hero-wordmark-shadow { display: none !important; } } /* [P3] career/companies, career/license PC hero slider overflow */ @media (min-width: 768px) { .page-career-companies__hero, .page-career-license__hero { overflow: hidden !important; position: relative; } } /* [P4] PC 長い hero-wordmark クリップ回避 (for/highschool, for/graduate, disclosure/higher-education-support) Figma 表示: FOR HIGH SCHOOL / FOR CAREER CHANGE / SUPPORT PROGRAM のような 14文字級 wordmark が左パネル幅 (44%) を超えて右端でクリップ。 font-size を clamp(30px, 4.2vw, 60px) にしてパネル幅内に収める。 BEM 維持のため BEM class を維持しつつ既存 60px を上書き。 */ @media (min-width: 768px) { .page-for-highschool__hero-wordmark, .page-for-highschool__hero-wordmark-shadow, .page-for-highschool__hero-wordmark-front, .page-for-graduate__hero-wordmark, .page-for-graduate__hero-wordmark-shadow, .page-for-graduate__hero-wordmark-front, .page-disclosure-higher-education-support__hero-wordmark, .page-disclosure-higher-education-support__hero-wordmark-shadow, .page-disclosure-higher-education-support__hero-wordmark-front { font-size: clamp(30px, 4.2vw, 60px) !important; line-height: 1 !important; letter-spacing: 0 !important; } } /* v21 end (layout) — critical + verify */ /* ========================================================================== 2026-09-26 fresh audit v22 (layout) --------------------------------------------------------------------------- Live audit (headless 1440x1200 PC + 375x1200 SP × 15pages) 実測残差: [R1] career/* hero-kv img overflow (v21 P3 `>` 直下 selector が で無効化)。descendant selector で width/height 100% を確定させる。 [R2] SP career/companies, career/license hero-kv 二重描画 (v21 P1 は course/* だけを対象にしていた) [R3] SP admission-ao の hero-illust が全画面級に肥大 (position解除リーク)。 SP では非表示に確定させる (Figma: SP KV に illust 無し) [R4] SP course/* hero-title / hero-sub の右見切れ (hero-panel の overflow または padding-right 不足) [R5] SP page-* 共通で hero-sub の右見切れ (padding-right 12px以下) グローバルに hero-panel > * に padding-right を保証 [R6] SP top / course / senior-talk 等の hero-wordmark 折返し衝突 wordmark を白space:nowrap + overflow:hidden で1行内クリップに寄せる ========================================================================== */ /* [R1] career/* hero-kv img descendant selector (picture 対応) */ @media (min-width: 768px) { .page-career-companies [class*="__hero-kv"] img, .page-career-license [class*="__hero-kv"] img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .page-career-companies [class*="__hero-kv"] picture, .page-career-license [class*="__hero-kv"] picture { display: block; width: 100%; height: 100%; overflow: hidden; } } /* [R2] SP career/* hero-kv 二重描画 一括非表示 */ @media screen and (max-width: 768px) { .page-career-companies__hero-kv, .page-career-license__hero-kv, .page-career__hero-kv { display: none !important; } } /* [R3] SP admission-ao hero-illust 肥大化 抑止 */ @media screen and (max-width: 768px) { .page-admission-ao__hero-illust { display: none !important; } } /* [R4][R5] SP hero-panel 右見切れ 一括ガード (hero-title/hero-sub が hero-panel から溢れる残差の共通対策) BEM 維持のため属性セレクタ + overflow-wrap で単語跨ぎ折返しを許容 */ @media screen and (max-width: 768px) { [class*="__hero-panel"] { padding-right: 16px !important; overflow: hidden; box-sizing: border-box; } [class*="__hero-panel"] [class*="__hero-title"], [class*="__hero-panel"] [class*="__hero-sub"] { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } } /* [R6] SP hero-wordmark 折返し衝突 (senior-talk SENIOR/TALK 二段重なり等) wordmark を1行にし、コンテナ幅で clamp する ※ page-course/* の wordmark は v21 P2 で position:static 化済 */ @media screen and (max-width: 768px) { [class*="__hero-wordmark"] { white-space: nowrap; overflow: hidden; max-width: 100%; } [class*="__hero-wordmark-shadow"], [class*="__hero-wordmark-front"] { white-space: nowrap; } } /* [R7] PC TOP CHALLENGE SPIRITS wordmark 右端クリップ v18 の clamp(36px,5vw,68px) では 1440px で 72px(=5vw)>68px 上限だが "CHALLENGE SPIRITS" 17文字は 68px でも約 1080px を要し右にはみ出す。 さらに詰めて上限 60px + letter-spacing -0.02em で確実に納める。 */ @media screen and (min-width: 769px) { .page-top__hero-wordmark, .page-top__hero [class*="__hero-wordmark"] { font-size: clamp(32px, 4.4vw, 60px) !important; letter-spacing: -0.02em; } } /* [R8] PC for-highschool / for-graduate hero-wordmark クリップ再修正 v21 P4 の clamp(30px,4.2vw,60px) は "FOR HIGH SCHOOL" 15文字級で 1440px 4.2vw=60.48px なので上限にはりつき、左パネル44% (633px内側 padding 込) にわずかに超過。上限を 52px まで詰める。 */ @media (min-width: 768px) { .page-for-highschool__hero-wordmark, .page-for-highschool__hero-wordmark-shadow, .page-for-highschool__hero-wordmark-front, .page-for-graduate__hero-wordmark, .page-for-graduate__hero-wordmark-shadow, .page-for-graduate__hero-wordmark-front { font-size: clamp(28px, 3.8vw, 52px) !important; letter-spacing: -0.01em !important; } } /* [R9] PC for-highschool hero-illust が KV 右外側に飛び出す .__hero-illust の right:auto / left:auto を封じ、KV内側で右下配置固定 */ @media (min-width: 768px) { .page-for-highschool__hero-kv { position: relative; overflow: hidden; } .page-for-highschool__hero-illust { position: absolute !important; right: 12px !important; bottom: 12px !important; left: auto !important; top: auto !important; max-width: 30% !important; max-height: 45% !important; pointer-events: none; } } /* [R10] SP course/* hero-image / hero-kv 混在時の高さ確定 一部ページ (first-class) で hero-image + hero-panel 両方描画されて 縦に長くなる。hero-image に max-height を保証。 */ @media screen and (max-width: 768px) { .page-course-first-class__hero-image, .page-course-body-paint__hero-image, .page-course-car-mechanic__hero-image, .page-course-general__hero-image, .page-course-international__hero-image, .page-course-advanced__hero-image, .page-course__hero-image { max-height: 240px; overflow: hidden; } .page-course-first-class__hero-image img, .page-course-body-paint__hero-image img, .page-course-car-mechanic__hero-image img, .page-course-general__hero-image img, .page-course-international__hero-image img, .page-course-advanced__hero-image img, .page-course__hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } } /* [R11] SP course (親) hero 高さ肥大 & wordmark 見切れ緩和 親 course TOP は hero-image が無く hero-panel だけになる場合があり COURSES wordmark と 「夢を叶える6つの可能性」が同時にはみ出す。 panel の min-height と wordmark padding を最終調整。 */ @media screen and (max-width: 768px) { .page-course__hero-panel { padding: 32px 16px 24px !important; min-height: 180px; } .page-course__hero-title { font-size: clamp(20px, 5.4vw, 28px) !important; } } /* [R12] SP admission hero-panel + start card 右見切れ カードグリッド overflow-x 抑止と cell の min-width:0 で内容を折返させる */ @media screen and (max-width: 768px) { .page-admission__methods, .page-admission__cards, [class*="page-admission__grid"] { overflow-x: hidden; } .page-admission__method, .page-admission__card { min-width: 0; } .page-admission__method-title, .page-admission__card-title { overflow-wrap: anywhere; } } /* [R13] SP course COMPARE 表 (比較カード) header 色バリエ復元 PC は 1級/2級/鈴金 が Blue、5年高度/3年総合/1年国際 が Green (Figma)。 SP でも 4-6 番目 (nth-child) を Green に統一。 */ @media screen and (max-width: 768px) { .page-course__compare-card:nth-child(n+4) .page-course__compare-card-head, .page-course__compare-card:nth-child(n+4) [class*="__compare-card-head"] { background-color: var(--technoauto-bg-accent, #12b981) !important; } } /* v22 end (layout) — post-v21 fresh audit */ /* ========================================================================== 2026-09-26 fresh audit v23 (layout) — post-v22 実描画残差 --------------------------------------------------------------------------- Headless (1440x4000 PC + 375x4000 SP × 15pages, virtual-time-budget=10s) 実測残差 (visible above-fold only, scroll-reveal blocks below-fold): [V1] SP TOP hero-inner の grid item min-width:auto で hero-en (56px static) が横幅 1300px+ に膨張、hero 全体を viewport 外へ押し広げ → hero-title-jp / KV 画像 / sticky CTA まで右端クリップ [V2] SP TOP hero-title-jp 44px static で "横浜テクノオート専門学校" (12字) が 528px と 375viewport を超過 [V3] SP TOP hero-en 56px static で "YOKOHAMA TECHNOAUTO COLLEGE" (~25字) が 1400px 級で強制的に viewport はみ出し [V4] SP for-highschool の hero-kv が TOP KV 画像を継承表示している (page-specific KV 未定義時の fallback リーク) → 該当ページの hero-kv img を display:none で臨時抑止 [V5] SP 共通: sticky bottom red bar 「資料請求・オープンキャンパスの お申し込みはこ...」 右端クリップ → red bar 内テキストに padding-right + text-overflow:clip 保証 [V6] PC about の hero に YTC ロゴが二重出現 (page-header logo と hero 内 wordmark-logo が重畳)。hero 内 logo は page-header logo と 同 SVG source を参照しているため、about 系ヒーローの左上 logo は隠す。 [V7] PC TOP hero 内 KV illustration が中央上部で見切れ (object-fit:contain で letterbox 表示、横方向充満しない) → PC hero-kv-img は object-fit:cover を明示 (v9 SP contain と分離) [V8] SP course parent / admission-ao / godai-group / opencampus 等 「hero-panel 内が空」に見える件は scroll-reveal.css の [data-reveal] 1.4s fallback が実測 headless で発火しない事による表示遅延であり 実ブラウザでは発火する為、CSS 側での修正は不要 (計測ノイズ) [V9] SP admission hero-panel 内 en-title と title-jp の縦間隔が詰まる (v22 R12 で overflow-x:hidden 追加後の副作用) → hero-panel 内直下 h1/h2 に margin-block: 8px の下限を保証 [V10] SP 全体: [class*="__hero-panel"] の overflow:hidden (v22 R4/R5) で wordmark-shadow のオフセット部分がクリップされる副作用 → hero-wordmark-shadow が overflow を突破できるよう z-index と pointer-events を明示、shadow-front と shadow-behind は残す BEM 維持・v1〜v22 破壊しない・末尾追加のみ・!important 最小 ========================================================================== */ /* [V1][V2][V3] SP TOP hero 内タイポ overflow の一括抑止 */ @media screen and (max-width: 768px) { .page-top__hero-inner { /* grid item の min-width:auto を封じ、コンテンツで縦横膨張しない */ min-width: 0; max-width: 100%; overflow: hidden; } .page-top__hero-inner > * { min-width: 0; max-width: 100%; } .page-top__hero-en { /* v22 R6 の nowrap は wordmark 用。ここは折返し許容で clamp 圧縮 */ font-size: clamp(28px, 8.5vw, 56px) !important; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; word-break: break-word; } .page-top__hero-title-jp { font-size: clamp(22px, 6.4vw, 40px) !important; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; word-break: break-word; } } /* [V4] SP for-highschool hero-kv fallback リーク抑止 */ @media screen and (max-width: 768px) { .page-for-highschool__hero-kv img, .page-for-highschool__hero-kv picture { /* TOP KV 画像が意図せず表示される回避策 (page-specific KV 支給待ち・v22 R2 は career/* のみ対象) */ display: none !important; } .page-for-highschool__hero-kv { background: var(--technoauto-brand-blue, #0a2a55); min-height: 120px; } } /* [V5] SP sticky bottom red bar 右端クリップ抑止 */ @media screen and (max-width: 768px) { .sp-bottom-cta, .page-cta-bottom, [class*="__sp-bottom-cta"], [class*="__sticky-cta"] { max-width: 100vw; box-sizing: border-box; padding-left: 12px; padding-right: 12px; } .sp-bottom-cta *, .page-cta-bottom *, [class*="__sp-bottom-cta"] *, [class*="__sticky-cta"] * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } } /* [V6] PC about 系 hero 内二重ロゴ抑止 (site-header と重畳している場合) */ @media (min-width: 769px) { .page-about__hero-logo, .page-about-senior-talk__hero-logo, .page-about-girls-talk__hero-logo, .page-about-campus-life__hero-logo, .page-about-facility__hero-logo, .page-about-access__hero-logo, .page-about-route__hero-logo { /* page-header の .site-header__logo が既に固定表示されており hero 内の左上 logo と視覚衝突する。hero 内は非表示化。 */ display: none !important; } } /* [V7] PC TOP hero-kv-img は cover 明示 (v9 SP contain と分離) */ @media (min-width: 769px) { .page-top__hero-kv-img { object-fit: cover !important; object-position: center center; } } /* [V9] SP hero-panel 内 h1/h2 縦間隔の下限保証 */ @media screen and (max-width: 768px) { [class*="__hero-panel"] > h1, [class*="__hero-panel"] > h2, [class*="__hero-panel"] [class*="__hero-title"], [class*="__hero-panel"] [class*="__hero-sub"] { margin-block: 8px; } } /* [V10] SP hero-wordmark-shadow 突破 (v22 R4/R5 overflow:hidden 副作用対策) wordmark 系は hero-panel より 1 階層上げて visible にする */ @media screen and (max-width: 768px) { [class*="__hero-wordmark"], [class*="__hero-wordmark-shadow"], [class*="__hero-wordmark-front"] { position: relative; z-index: 2; pointer-events: none; } /* wordmark を包む親は overflow:visible で shadow をクリップしない (hero-panel の overflow:hidden は body/title 用、wordmark 用ではない) */ [class*="__hero-wordmark-wrap"], [class*="__hero-title-wrap"] { overflow: visible !important; } } /* v23 end (layout) — post-v22 fresh audit */ /* ========================================================================== 2026-09-26 v24 verify + fix (layout) ========================================================================== V23 の N1-N10 を実描画で再検証し、以下の追加残差を修正。 BEM 維持・!important 最終手段・v1〜v23 破壊しない・末尾追加のみ・ header 白ロック絶対保護 (`.site-header` 系は全て :not() 除外)。 [N1-extra] SP course/godai/admission-ao/opencampus hero-panel 空白は scroll-reveal 1.4s fallback で救済済みだが、CWV bot / headless 計測時に "opacity:0 のまま LCP 計測" される事故を避けるため、 hero-panel/wordmark 直下は data-reveal 対象でも初期 opacity:1 を保証（アニメ発火時のみ transform を残す）。 [N2] SP TOP KV "Challenge Spirit" 右端 cut → hero-kv object-position を "left center" にし、hero-inner overflow 抑止。 [N3] PC floating CTA と hero 干渉 → hero .page-top__hero-inner の 右 padding を 40px 確保（floating CTA 幅ぶん）。 [N5] SP course parent wordmark COURSES 右端 cut → [class*="__hero-wordmark"] の SP 側 letter-spacing を詰め、 max-width:100% で強制収束。 [N-extra1] SP TOP "PICK UP" wordmark oversized cut → [class*="__pickup-wordmark"] / [class*="__section-en"] の SP clamp を統一。 [N-extra2] SP godai / opencampus hero-illust 領域が空白のまま拡大 する副作用（aspect-ratio + empty illust）→ empty 検出時に min-height を 0 に潰す。 [N-extra3] SP 全ページ hero-panel 内で "英字 wordmark + 日本語 title + 日本語 sub" のガイド線右端が 15px overflow するのを overflow-x:hidden で container に閉じ込める（wordmark shadow は V10 の z-index+visible で救済済み）。 ========================================================================== */ /* [N1-extra] SP hero-panel 直下は初期表示保証 (bot LCP 事故防止) */ @media screen and (max-width: 768px) { [class*="__hero-panel"][data-reveal], [class*="__hero-panel"] > [data-reveal], [class*="__hero-wordmark"][data-reveal], [class*="__hero-title"][data-reveal], [class*="__hero-sub"][data-reveal] { /* opacity は最初から 1、transform だけをアニメで戻す */ opacity: 1; } /* .is-visible 付与時も上書きしない */ [class*="__hero-panel"][data-reveal].is-visible, [class*="__hero-panel"] > [data-reveal].is-visible, [class*="__hero-wordmark"][data-reveal].is-visible, [class*="__hero-title"][data-reveal].is-visible, [class*="__hero-sub"][data-reveal].is-visible { opacity: 1; } } /* [N2] SP TOP KV Challenge Spirit 右端 cut 抑止 */ @media screen and (max-width: 768px) { .page-top__hero { overflow-x: hidden; } .page-top__hero-kv, .page-top__hero-kv-img, .page-top__hero-kv img, .page-top__hero-kv picture, .page-top__hero-kv picture img { max-width: 100%; } .page-top__hero-kv-img, .page-top__hero-kv img { object-fit: cover; /* Figma 実測: KV 右側の "整備士＋クルマ" 主題を左寄せ SP でも保持 */ object-position: left center; } } /* [N3] PC floating CTA と hero 干渉抑止 (hero 内右 40px 確保) */ @media (min-width: 769px) { .page-top__hero-inner { padding-right: max(var(--section-px-pc, 40px), 40px); box-sizing: border-box; } } /* [N5] SP hero-wordmark 右端 cut 抑止 (全 page 横断 - COURSES / GRANT 等) */ @media screen and (max-width: 768px) { [class*="__hero-wordmark"] { max-width: 100%; letter-spacing: -0.01em; overflow-wrap: normal; word-break: keep-all; } /* wordmark を包む hero-body / hero-panel は overflow を container に閉じ込め */ [class*="__hero-body"], [class*="__hero-panel"] > [class*="__hero-body"] { max-width: 100%; min-width: 0; } } /* [N-extra1] SP "PICK UP" / section-en wordmark cut 抑止 */ @media screen and (max-width: 768px) { [class*="__pickup-wordmark"], [class*="__section-en"], [class*="__section-wordmark"] { max-width: 100%; font-size: clamp(28px, 9vw, 56px); line-height: 1; letter-spacing: -0.01em; overflow-wrap: normal; word-break: keep-all; } /* wordmark を包む section-heading 側で container 幅を保証 */ [class*="__section-heading"] { max-width: 100%; min-width: 0; overflow-x: clip; } } /* [N-extra2] SP godai / opencampus hero 空 illust 領域の縮退 */ @media screen and (max-width: 768px) { [class*="__hero-illust"]:empty, [class*="__hero-image"]:empty { min-height: 0; height: auto; } /* 画像が visible=false / display:none の場合、親の aspect-ratio を無効化 */ .page-godai-group__hero-kv:not(:has(img:not([style*="display: none"]))), .page-opencampus__hero-kv:not(:has(img:not([style*="display: none"]))) { aspect-ratio: auto; min-height: 0; } } /* [N-extra3] SP 全ページ hero-panel overflow-x 抑止 (wordmark shadow は V10 の z-index+visible で個別救済済み・本ルールは title/sub のみ縛る) */ @media screen and (max-width: 768px) { [class*="__hero-panel"] { overflow-x: clip; } [class*="__hero-panel"] [class*="__hero-title"], [class*="__hero-panel"] [class*="__hero-sub"], [class*="__hero-panel"] [class*="__hero-lead"] { max-width: 100%; overflow-wrap: anywhere; word-break: auto-phrase; } } /* v24 end (layout) — N1-N10 verify + additional residual fix */ /* ========================================================================== 2026-09-26 v25 critical + SP KV batch [SP KV 英字タイトル横見切れ 9ページ一括fix] 対象: /course/, /tuition/godai-scholarship/, /opencampus/, /opencampus/trial/, /career/companies/, /for/parent/, /for/highschool/, /godai-group/, /news/ 共通根因: SP 375px 幅で __hero-wordmark / __hero-title-en 系 wordmark が letter-spacing / white-space:nowrap で右端見切れ。 fix : clamp() で font-size を viewport 追従・letter-spacing 圧縮・ overflow:hidden で clip・text-overflow:clip で "…" 抑止。 ========================================================================== */ @media screen and (max-width: 768px) { [class*="__hero-wordmark"], [class*="__hero-title-en"], [class*="__title-en"] { overflow: hidden !important; max-width: 100% !important; font-size: clamp(22px, 6.5vw, 40px) !important; white-space: nowrap !important; letter-spacing: 0 !important; text-overflow: clip; } /* wordmark 内の shadow / front (span 二重) も同 font-size を継承させる */ [class*="__hero-wordmark"] > [class*="-shadow"], [class*="__hero-wordmark"] > [class*="-front"] { font-size: inherit !important; letter-spacing: inherit !important; } /* サブコピー左右 padding: 端カット防止 */ [class*="__hero-panel"] [class*="__hero-sub"], [class*="__hero-panel"] [class*="__hero-lead"] { padding-inline: 8px; } } /* v25 end (layout) — SP KV batch */ /* ========================================================================== 2026-09-26 v26 B-batch fix v25 の SP KV batch で font-size:clamp() 上限 40px は残り 9 ページで なお不足 (GODAI SCHOLARSHIP / FOR HIGH SCHOOL STUDENTS / FOR GUARDIANS / OPENCAMPUS / COMPANIES / GODAI GROUP 等 8-15 字の長ワードマーク) だった。 v26 では: 1) SP wordmark を最大 30px + letter-spacing:-0.02em に圧縮 2) hero-panel 全体に padding-inline:12px を付与し右端に呼吸を確保 3) __section-heading 系 wordmark (CATEGORIES / CONCERNS / OVERVIEW / WHY / BASIC / ARTICLES / COMPARE / REQUEST) にも同 overflow:hidden + clamp() ガードを掛ける 4) __body / __text / __desc / __lead 系の SP 右端カットを padding-inline で緩和 5) hero-image が hero-panel に被る変種 (career-companies SP) は 個別に order/flex 調整 header 白ロックには一切触れない (site-header セレクタ除外)。 BEM 維持 · !important は overflow/max-width 等の元指定を上書きする最小限。 ========================================================================== */ @media screen and (max-width: 768px) { /* [1] hero wordmark サイズ再圧縮 */ [class*="__hero-wordmark"]:not([class*="site-header"]), [class*="__hero-title-en"]:not([class*="site-header"]), [class*="__title-en"]:not([class*="site-header"]), [class*="__hero-en"]:not([class*="site-header"]) { font-size: clamp(18px, 5.4vw, 30px) !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; } /* [2] hero-panel 全体に呼吸パディング */ [class*="__hero-panel"]:not([class*="site-header"]) { padding-inline: 12px; box-sizing: border-box; } /* [3] section-heading wordmark 系にも同ガード */ [class*="__section-heading"] [class*="-en"], [class*="__section-title-en"], [class*="__section-wordmark"], [class*="__wordmark"]:not([class*="__hero"]:not([class*="__hero-"])) { overflow: hidden !important; max-width: 100% !important; font-size: clamp(22px, 6vw, 34px) !important; letter-spacing: -0.01em !important; white-space: nowrap !important; text-overflow: clip; display: inline-block; } [class*="__section-heading"] [class*="-en"] > [class*="-shadow"], [class*="__section-heading"] [class*="-en"] > [class*="-front"] { font-size: inherit !important; letter-spacing: inherit !important; } /* [4] 本文系 SP 右端カット対策 */ .page-body__inner [class*="__body"], .page-body__inner [class*="__text"]:not([class*="__hero"]:not([class*="__hero-"])):not([class*="site-header"]), .page-body__inner [class*="__desc"]:not([class*="site-header"]), .page-body__inner [class*="__lead"]:not([class*="__hero"]:not([class*="__hero-"])):not([class*="site-header"]) { max-width: 100%; overflow-wrap: anywhere; padding-inline: 4px; box-sizing: border-box; } /* [5] career-companies SP: hero-image が KV wordmark に被る問題 */ .page-career-companies__hero { flex-direction: column; } .page-career-companies__hero-image { order: -1; max-width: 100%; } .page-career-companies__hero-panel { width: 100%; } /* [6] news SP: category chip / articles wordmark の右クリップ緩和 */ .page-news__section-inner, .page-news__category-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* [7] PC 1440px以下で for-highschool wordmark "FOR HIGH SCHOOL STUDENTS" が hero-panel width を超える件: font-size に clamp を掛けて縮退 */ @media screen and (min-width: 769px) and (max-width: 1439px) { .page-for-highschool__hero-wordmark, .page-for-highschool__hero-title-en { font-size: clamp(32px, 3.6vw, 56px) !important; letter-spacing: -0.01em !important; white-space: nowrap; overflow: hidden; max-width: 100%; } .page-for-highschool__hero-wordmark > [class*="-shadow"], .page-for-highschool__hero-wordmark > [class*="-front"] { font-size: inherit !important; } } /* v26 end (layout) — B-batch fix */ /* ========================================================================== 2026-09-27 v31 SP section 右カット 一括fix v30 で判定した残 B 6件 (TOP / course / opencampus / career / godai-group / recruit) はすべて「SP breakpoint で section 内側の見出し・本文が 右端でクリップされる」同質バグ。個別ページCSSではなく、layout.css の 共通 SP ルールで一括解消する。 単一ルール方針: - [class*="__section-inner"] に padding-inline:20px + max-width:100% + overflow-wrap:anywhere を強制 (header の site-header 系は除外) - section 直下の子要素にも max-width:100% を掛けて溢れを防止 - __section-heading-jp/en 系は auto-phrase で日本語自然折返し - p / li 系にも overflow-wrap:anywhere を伝播 header 白ロック絶対保護: - .site-header は :not() で除外 - longhand + !important の白背景は無干渉 BEM 維持 · !important は SP override 打消し最小限。 ========================================================================== */ @media screen and (max-width: 768px) { /* [1] section-inner 一括: 内寸確保 + はみ出し防止 */ [class*="__section-inner"]:not([class*="site-header"]) { padding-inline: 20px !important; box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; word-break: auto-phrase; } /* [2] section-inner 直下の子要素: 幅超過をブロック */ [class*="__section-inner"]:not([class*="site-header"]) > *:not([class*="site-header"]) { max-width: 100%; overflow-wrap: anywhere; } /* [3] section-heading-jp / -en の日本語見出し右クリップ対策 */ [class*="__section-heading-jp"]:not([class*="site-header"]), [class*="__section-heading-en"]:not([class*="site-header"]) { max-width: 100%; word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; } /* [4] section 内の p / li 右端保護 */ [class*="__section"] p:not([class*="site-header"]), [class*="__section"] li:not([class*="site-header"]) { max-width: 100%; overflow-wrap: anywhere; word-break: auto-phrase; } /* [5] TOP SP「CHALLENGE SPIRITS」右カット (KV) — v30 A→S 昇格: page-top KV wordmark に clamp 追加緩和 */ .page-top__hero-wordmark, .page-top__hero-title-en, [class*="page-top__"][class*="__hero"]:not([class*="__hero-"])[class*="-en"] { font-size: clamp(18px, 5.2vw, 28px) !important; letter-spacing: -0.02em !important; white-space: nowrap; overflow: hidden; max-width: 100%; } /* [6] course SP KV「夢を叶える6つの可能性」 — 日本語見出し auto-phrase + padding-inline */ .page-course__hero-title-ja, .page-course__hero-lead, [class*="page-course__hero"] [class*="-ja"] { max-width: 100%; word-break: auto-phrase; overflow-wrap: anywhere; padding-inline: 4px; box-sizing: border-box; } /* [7] for/highschool SP KV下 空白ブロック 完全折り畳み — v29 で :empty / :not(:has(img)) を掛けたが空白継続。 whitespace-only テキストノード対策で min-height:0 + 内側空判定強化 */ .page-for-highschool__hero-image:not(:has(img)):not(:has(picture)):not(:has(svg)), .page-for-highschool [class*="__hero-image"]:not(:has(img)):not(:has(picture)):not(:has(svg)) { display: none !important; min-height: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } } /* v31 end (layout) — SP section 右カット 一括fix */ /* ========================================================================== 2026-09-27 v33 DOM-verified SP fix v31/v32 では [class*="__section-inner"] 経由の一括 fix を試したが、 実測すると SP で見切れが起きているのは主に「Hero パネル内」だった （hero-wordmark = white-space:nowrap + 大 font-size / hero-title の flex 中央）。 DOM dump で以下を確認: - page-{course,opencampus,career,godai-group,for-highschool}__hero-panel page-*__hero-body / page-*__hero-wordmark / page-*__hero-title - page-*__section / page-*__section-inner / page-*__section-heading-jp - page-for-highschool__hero-kv (display:none 効いているが、legacy :empty fallback / aspect-ratio 16:10 の残滓で空白 320px 出現) 実 class 名に基づいて個別具体 selector で強制 clamp する。 header 白ロック絶対保護: - .site-header 系は全 selector で除外 (BEM 名前が根本的に別なので自然に触らない) - longhand + !important の白背景は無干渉 ========================================================================== */ @media screen and (max-width: 768px) { /* [v33-1] Hero パネル自体を viewport 内に固定 -------------------------------------------------------------- */ .page-course__hero, .page-course__hero-panel, .page-opencampus__hero, .page-opencampus__hero-panel, .page-career__hero, .page-career__hero-panel, .page-godai-group__hero, .page-godai-group__hero-panel, .page-for-highschool__hero, .page-for-highschool__hero-panel { max-width: 100vw !important; box-sizing: border-box !important; overflow: hidden !important; } /* [v33-2] Hero body 内側にも内寸を再確保 hero-panel が padding: 30px 35px の場合、body 幅 = 375-70 = 305px。 hero-wordmark を clamp して "nowrap のまま centered" にする。 */ .page-course__hero-body, .page-opencampus__hero-body, .page-career__hero-body, .page-godai-group__hero-body, .page-for-highschool__hero-body { max-width: 100% !important; box-sizing: border-box !important; align-items: center !important; text-align: center !important; } /* [v33-3] Hero wordmark: nowrap の large-EN を viewport に押し込む。 DOM:
TXTTXT
shadow は position:absolute, front は relative。両方に max-width。 font-size を clamp して物理的にはみ出さないサイズに落とす。 */ .page-course__hero-wordmark, .page-opencampus__hero-wordmark, .page-career__hero-wordmark, .page-godai-group__hero-wordmark, .page-for-highschool__hero-wordmark { max-width: 100% !important; overflow: hidden !important; display: inline-flex !important; justify-content: center !important; font-size: clamp(24px, 8.5vw, 44px) !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; } .page-course__hero-wordmark-front, .page-course__hero-wordmark-shadow, .page-opencampus__hero-wordmark-front, .page-opencampus__hero-wordmark-shadow, .page-career__hero-wordmark-front, .page-career__hero-wordmark-shadow, .page-godai-group__hero-wordmark-front, .page-godai-group__hero-wordmark-shadow, .page-for-highschool__hero-wordmark-front, .page-for-highschool__hero-wordmark-shadow { max-width: 100% !important; white-space: nowrap; } /* [v33-4] Hero title (jp) / sub の 右端保護 DOM:

/

auto-phrase + overflow-wrap で自然折返し */ .page-course__hero-title, .page-course__hero-sub, .page-opencampus__hero-title, .page-opencampus__hero-sub, .page-career__hero-title, .page-career__hero-sub, .page-godai-group__hero-title, .page-godai-group__hero-sub, .page-for-highschool__hero-title, .page-for-highschool__hero-sub { max-width: 100% !important; overflow-wrap: anywhere; word-break: auto-phrase; text-align: center; padding-inline: 4px; box-sizing: border-box; } /* [v33-5] Section 全体 (SP): viewport 内に完全収納 (v31 の inner だけでは parent の負 margin/1240px 幅が効くケースがあるため親側も封じる) */ .page-course__section, .page-opencampus__section, .page-career__section, .page-godai-group__section, .page-for-highschool__section { max-width: 100vw !important; box-sizing: border-box !important; overflow: hidden; } /* [v33-6] Section-inner: v31 の一括 rule に加えて具体 class 名で強制。 過去の per-page rule (padding: 40px 20px) を override するため !important。 */ .page-course__section-inner, .page-opencampus__section-inner, .page-career__section-inner, .page-godai-group__section-inner, .page-for-highschool__section-inner { padding-inline: 20px !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: anywhere; } /* [v33-7] Section-heading-jp: 実 class 名で確定 fix (v31 は auto-phrase のみ) */ .page-course__section-heading-jp, .page-opencampus__section-heading-jp, .page-career__section-heading-jp, .page-godai-group__section-heading-jp, .page-for-highschool__section-heading-jp { max-width: 100% !important; word-break: auto-phrase; overflow-wrap: anywhere; padding-inline: 4px; box-sizing: border-box; } .page-course__section-heading-lead, .page-opencampus__section-heading-lead, .page-career__section-heading-lead, .page-godai-group__section-heading-lead, .page-for-highschool__section-heading-lead { max-width: 100% !important; overflow-wrap: anywhere; word-break: auto-phrase; padding-inline: 4px; box-sizing: border-box; } /* [v33-8] for/highschool SP KV下 空白ブロック 決定打 DOM:

- v31 の :empty / :has 系は whitespace text node があるため空判定に失敗 - v33: aria-hidden="true" が付いているので確定で display:none。 - 内側の hero-illust (position:absolute; bottom:-14px) の脱走も封じる。 */ .page-for-highschool__hero-kv, .page-for-highschool__hero-kv[aria-hidden="true"], .page-for-highschool [class*="__hero-kv"] { display: none !important; height: 0 !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } .page-for-highschool__hero-kv::before, .page-for-highschool__hero-kv::after, .page-for-highschool [class*="__hero-kv"]::before, .page-for-highschool [class*="__hero-kv"]::after { display: none !important; content: none !important; } .page-for-highschool__hero-illust, .page-for-highschool [class*="__hero-illust"] { display: none !important; } /* hero-panel::after (v6 で追加された絵) は SP では封じる */ .page-for-highschool [class*="__hero-panel"]::after { display: none !important; content: none !important; } /* [v33-9] TOP SP KV "CHALLENGE SPIRITS" wordmark 右カット緩和 DOM:
TOP は PNG 内テキストなので object-fit/position で調整済。 ただし wordmark 系（section 見出し英字）が overflow するケースは clamp で確定。 */ .page-top__hero-wordmark, .page-top__hero-title-en, .page-top__hero-en, .page-top__section-heading-wordmark, .page-top__section-heading-en { max-width: 100% !important; padding-inline: 12px !important; box-sizing: border-box !important; font-size: clamp(20px, 6.5vw, 42px) !important; letter-spacing: -0.01em !important; overflow: hidden; } /* KV 画像自体は既存 v6/v7 の object-position を尊重 */ } /* v33 end (layout) — DOM-verified SP fix */ /* ========================================================================== 2026-09-27 v37 SP lead text 右カット 最終潰し ========================================================================== 実描画で確認: godai/course/opencampus/career/recruit の SP で .__hero-sub / .__hero-lead / .__section-heading-lead の右カット残存 pixel-level で BEM 直指定 + !important で確実に適用 ========================================================================== */ @media screen and (max-width: 768px) { /* SP hero-sub 右カット: hero-body 全ページ */ body [class*="page-"] [class*="__hero-sub"], body [class*="page-"] [class*="__hero-lead"] { max-width: 100% !important; padding-right: 16px !important; padding-left: 0 !important; overflow-wrap: anywhere !important; word-break: auto-phrase !important; box-sizing: border-box !important; } /* section-heading-lead も同様に */ body [class*="page-"] [class*="__section-heading-lead"], body [class*="page-"] [class*="__section-heading-jp"] { max-width: 100% !important; padding-inline: 4px !important; overflow-wrap: anywhere !important; word-break: auto-phrase !important; line-break: strict !important; box-sizing: border-box !important; } /* deflist の値・カード内テキストの overflow 保険 */ body [class*="page-"] [class*="__defrow-value"], body [class*="page-"] [class*="__body"], body [class*="page-"] [class*="__desc"], body [class*="page-"] [class*="__lead"] { max-width: 100%; overflow-wrap: anywhere; word-break: auto-phrase; } }