/**
 * Renewal共通CSS（/fit, /event, /youtube 共通）
 *
 * 移植元: tmp/mock/styles.css
 * tmp/front_layout_unification_plan.md 5章のCSSスコープ規約に従い、
 * 新規セレクタは原則 [data-renewal-layout] 配下にスコープする。
 * 例外は html 等の画面全体レイアウト成立に必要なベース指定のみ。
 */

/* ベース指定の例外（画面全体レイアウト成立に必要なため .renewal-layout 配下に限定しない） */
html {
	scroll-behavior: smooth;
}

[data-renewal-layout] #nav-title .nav-title-break {
	display: none;
}

[data-renewal-layout] .renewal-nav-submenu {
	padding-left: 12px;
}

@media (min-width: 768px) {
	[data-renewal-layout] #nav-title .nav-title-break {
		display: inline;
	}
}

@keyframes renewal-nav-button-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * Font Awesomeのwebfont読み込みが間に合う前にこの演出を開始すると、
 * ボタン本体（背景・テキスト）はせり上がるが、アイコングリフだけが
 * フォント読み込み完了後に遅れてポップインして見える
 * （ユーザー指摘: 2026-09-16「アニメーション後にパラパラ後から表示される感じ」）。
 * webroot/js/renewal/common/app.js の setupNavCtaReveal() が
 * document.fonts.ready（またはフォールバックのタイムアウト）を待ってから
 * #footer-buttons-container に renewal-nav-cta-ready を付与するため、
 * 初期状態はボタンを非表示のまま保持し、このクラスが付いた時点で
 * せり上がりアニメーションを開始する。
 */
[data-renewal-layout] #footer-buttons-container .nav-cta-btn {
	opacity: 0;
	transform: translateY(18px);
}

[data-renewal-layout] #footer-buttons-container.renewal-nav-cta-ready .nav-cta-btn {
	animation: renewal-nav-button-rise 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-renewal-layout] #footer-buttons-container.renewal-nav-cta-ready .nav-cta-btn:nth-child(1) {
	animation-delay: 60ms;
}

[data-renewal-layout] #footer-buttons-container.renewal-nav-cta-ready .nav-cta-btn:nth-child(2) {
	animation-delay: 110ms;
}

@media (prefers-reduced-motion: reduce) {
	[data-renewal-layout] #footer-buttons-container .nav-cta-btn {
		opacity: 1;
		transform: translateY(0);
	}

	[data-renewal-layout] #footer-buttons-container.renewal-nav-cta-ready .nav-cta-btn {
		animation: none;
	}
}

/*
 * サブナビ「メニュー」項目の初回表示演出。
 * 上（ホーム）から下へ順番に、左からスライドしながらフェードインする。
 * CTAボタンと同様にFont Awesomeのwebfont読み込み（またはフォールバックの
 * タイムアウト）を待ってから開始し、アイコングリフだけ遅れて表示される
 * ことを防ぐ（webroot/js/renewal/common/app.js の setupNavMenuReveal() 参照）。
 * 対象は #menu-items-container の直接の子要素（.renewal-menu-entry）のみで、
 * 子メニュー（data-nav-panel配下、初期状態は非表示）はここでは対象にしない。
 * 各項目の順番（上から何番目か）に応じたanimation-delayはJS側で
 * インラインstyleとして付与する。
 */
@keyframes renewal-nav-menu-entry {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

[data-renewal-layout] #menu-items-container .renewal-menu-entry {
	opacity: 0;
	transform: translateX(-16px);
}

[data-renewal-layout] #menu-items-container.renewal-menu-ready .renewal-menu-entry {
	animation: renewal-nav-menu-entry 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-renewal-layout] #menu-items-container .renewal-menu-entry.renewal-section-nav-active,
[data-renewal-layout] #menu-items-container .renewal-menu-entry.renewal-section-nav-active:hover {
	background-color: #eff6ff;
	color: #1d4ed8;
	font-weight: 800;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

[data-renewal-layout][data-renewal-mode="event"] #menu-items-container .renewal-menu-entry.renewal-section-nav-active,
[data-renewal-layout][data-renewal-mode="event"] #menu-items-container .renewal-menu-entry.renewal-section-nav-active:hover {
	background-color: rgba(220, 252, 231, 0.8);
	color: #052e16;
	font-weight: 900;
}

[data-renewal-layout][data-renewal-mode="youtube"] #menu-items-container .renewal-menu-entry.renewal-section-nav-active,
[data-renewal-layout][data-renewal-mode="youtube"] #menu-items-container .renewal-menu-entry.renewal-section-nav-active:hover {
	background-color: #fef2f2;
	color: #b91c1c;
	font-weight: 800;
}

[data-renewal-layout] #menu-items-container .renewal-menu-entry.renewal-section-nav-suppressed,
[data-renewal-layout] #menu-items-container .renewal-menu-entry.renewal-section-nav-suppressed:hover {
	background-color: transparent;
	color: #475569;
	font-weight: 600;
	box-shadow: none;
}

/*
 * 子メニュー（優良企業を探す 等の子カテゴリ一覧）を開いたときの表示演出。
 * 初期状態（閉じている間）はopacity:0のまま待機し、
 * webroot/js/renewal/common/app.js の toggleNavPanel() がパネルを開く際に
 * data-nav-panel要素へ renewal-menu-panel-open を付与するタイミングで
 * トップレベルのメニュー項目と同じキーフレーム（左からのフェードイン）を
 * 上から順に再生する。ページ初期表示時から開いている場合（現在地が子メニュー内に
 * ある場合）は setupNavMenuReveal() がトップレベル項目と同様にFont Awesome読込を
 * 待ってから同じクラスを付与する。
 */
[data-renewal-layout] [data-nav-panel] .renewal-menu-subentry {
	opacity: 0;
	transform: translateX(-16px);
}

[data-renewal-layout] [data-nav-panel].renewal-menu-panel-open .renewal-menu-subentry {
	animation: renewal-nav-menu-entry 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	[data-renewal-layout] #menu-items-container .renewal-menu-entry {
		opacity: 1;
		transform: translateX(0);
	}

	[data-renewal-layout] #menu-items-container.renewal-menu-ready .renewal-menu-entry {
		animation: none;
	}

	[data-renewal-layout] [data-nav-panel] .renewal-menu-subentry {
		opacity: 1;
		transform: translateX(0);
	}

	[data-renewal-layout] [data-nav-panel].renewal-menu-panel-open .renewal-menu-subentry {
		animation: none;
	}
}

/*
 * /fit のみ webroot/v2/css/common.css が読み込まれ、`@media (max-width: 920px){
 * body{height:100vh;margin-top:50px !important}}` が残っている。これは旧固定ヘッダー
 * （position:fixed の header）の高さ分だけ本文を押し下げるための指定だが、Renewalレイアウトは
 * この旧固定ヘッダーを持たないため、モバイル幅で最上部に不要な余白が生まれ、
 * header_bar（パンくず）が画面最上部に来ない原因になっていた（ユーザー指摘: 2026-09-10）。
 * body[data-renewal-layout] は要素セレクタ+属性セレクタで詳細度が単純な body{} より高いため、
 * !important 同士でもこちらが優先される。
 */
body[data-renewal-layout] {
	margin-top: 0 !important;
}

/*
 * 既存Front CSS（reset.css/base.css等）は全モード共通で読み込まれるため、
 * モックにはないグローバル指定（bodyの旧行間、a iの左右余白）がRenewal
 * のaside/navへ漏れないよう、モックのTailwind相当値へ戻す。
 */
/*
 * font-weight / letter-spacing も同様に、legacy CSS
 * （reset.css の html,body{font-weight:200}、v2/css/common.css の
 * body{letter-spacing:0.1em} 等）がbodyへ直接指定しているため継承されてしまう。
 * [data-renewal-layout] は<body>要素そのものに付与された属性セレクタで、
 * legacyの要素セレクタ（body / html,body）より詳細度が高いため、ここで
 * Tailwindの既定値（400 / normal）へ明示的に戻す。個々の要素に付与された
 * Tailwindユーティリティ（font-black, tracking-wide等）は要素自身の指定として
 * 優先されるため、この上書きによって影響を受けない。
 */
[data-renewal-layout] {
	font-family: Inter, "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	text-align: left;
}
[data-renewal-layout] a i {
	padding-left: 0;
	padding-right: 0;
}
[data-renewal-layout] #renewal-header-bar {
	min-width: 0;
	overflow: hidden;
}
[data-renewal-layout] #header-path {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}
[data-renewal-layout] #header-path > * {
	flex: 0 0 auto;
}
/*
 * reset.css が HTML5セマンティック要素（aside, nav, header, footer, mark等）や
 * a タグを含む巨大なセレクタリストで、font-weight:200・border:0（=border-style:none
 * 込み）を「要素自身」に直接指定しているため、[data-renewal-layout]（bodyへの属性
 * セレクタ）からの継承よりも優先されてしまう（CSSは継承値より要素自身にマッチした
 * 指定を常に優先するため、詳細度に関わらずこの直接指定が勝つ）。
 * 特にborder-styleは、Tailwindのpreflightが `*{border-style:solid}` という
 * 詳細度0のユニバーサルセレクタでしか設定しないため、reset.cssの直接指定(詳細度0,0,1)
 * に負けてborder-style:noneのままになり、md:border-r等でwidthを1pxにしても
 * 線が見えない（style:none）事象が起きる。
 * :where() で対象タグ側の詳細度を0にすることで、
 *   - legacyの単純タグセレクタ（詳細度0,0,1）には確実に勝ち（0,1,0 > 0,0,1）
 *   - Tailwindユーティリティクラス（例: font-black、md:border-r等、詳細度0,1,0）
 *     とは同詳細度になるが、Tailwindの生成<style>はページ内で最後に読み込まれる
 *     ため、そちらが最終的に勝つ
 * という狙い通りの優先順位になる。
 *
 * 【2026-09-11追記】当初はaside/nav/header/footer/mark等、新レイアウトの見た目に
 * 直接影響する一部の要素のみを対象にしていたが、それ以外の要素
 * （p, form, li, table 等、reset.cssの元のセレクタリストに含まれる全要素）でも
 * 同種の問題が見つかった。reset.cssのfont-weight:200は本来「フォールバック的な
 * 薄い指定」のつもりだったと思われるが、Renewalレイアウトが独自に読み込む
 * Google Fonts（Noto Sans JP: 300/400/500/700/900）には旧ページが読み込んでいた
 * フォント（400/700のみ）より軽いweight 300が含まれるため、ブラウザのフォント
 * マッチングにより「font-weight:200」が旧ページ（400にフォールバック）とは異なり
 * weight 300（Light）に解決されてしまい、reCAPTCHA告知文等の文字が本番より
 * 細く見える不具合が発生していた（本番はNoto Sans JPの400/700しか読み込んでいない
 * ため200はfont-matchingアルゴリズムにより400へフォールバックする）。
 * reset.cssの元のセレクタリストをそのまま踏襲し、font-weight:400（本番での
 * 実際の解決結果と同じ値）へ明示的に戻す。
 *
 * 【2026-09-11追記】iタグはFont Awesomeのアイコン（<i class="fa-solid fa-bars">等）
 * にも使われる。`[data-renewal-layout] :where(...)`は:where()により対象タグ
 * 自体の詳細度は0だが、`[data-renewal-layout]`という属性セレクタ分の詳細度
 * (0,1,0)を持つため、Font Awesomeの`.fa-solid, .fas{font-weight:900}`
 * （同じく詳細度0,1,0）と完全に同点になり、後から読み込まれるこのstyles.css側が
 * 詳細度同点時のソース順優先で勝ってしまい、アイコン用フォント（900のみに
 * グリフを収録）のグリフが消えて表示されない不具合が起きていた。
 * `i:not([class*="fa-"])`として、fa-*クラスを持つiタグ（=アイコン）だけを
 * このリセット対象から除外し、Font Awesome側のfont-weight:900を活かす。
 */
[data-renewal-layout] :where(
	applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, img, ins, kbd, q, s, samp,
	small, strike, tt, var,
	b, u, i:not([class*="fa-"]), center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video
) {
	font-weight: 400;
	border-style: solid;
}

/*
 * 【2026-09-14追記】上記の`i:not([class*="fa-"])`はこのstyles.css内の
 * 手動セーフティネットには適用済みだが、Company/Featuresページ等が読み込む
 * webroot/v3/css/style.css由来の自動生成レガシーCSSバンドル（company.css,
 * features.css等。postcss-prefixwrapで`#main-content-core .legacy-front-content
 * <tag>`という形に変換される）は元のEric Meyer reset準拠のセレクタリストを
 * そのまま踏襲しており、fa-*クラスの除外が無い。かつ、このバンドル側のセレクタは
 * IDセレクタ(#main-content-core)を含むため詳細度(1,3,1)となり、Font Awesomeの
 * `.fas,.far,.fa-solid,...{font-weight:900}`（詳細度0,1,0）だけでなく前段の
 * `[data-renewal-layout] :where(...)`による復旧（:where()で詳細度0扱いのため
 * 実質(0,1,0)）よりも詳細度が高く上書きしてしまう。この結果`font:inherit`
 * ショートハンドにより font-family/font-weight が継承値に戻され、
 * チェックボックスの✓（fa-check）等のFont Awesomeグリフが表示されなくなる
 * 不具合がCompany（business-system）・Features（features/list/*）の両方で
 * 発生していた。IDセレクタ込みの(1,3,1)を確実に上回るよう、同じ
 * `#main-content-core .legacy-front-content`配下でクラスセレクタ階層を1段
 * 増やし(1,4,0)として、Font Awesomeのfont-family/font-weightを再度明示する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .fa,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .fas,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .fa-solid {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .far,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .fa-regular {
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .fab,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .fa-brands {
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
}

/*
 * 【2026-09-15追記】フッター（#footer）は .legacy-front-content の外側
 * （#main-scroll-container直下）に配置されているため、上記
 * `.legacy-front-content .fab` 等の修正は適用されない。フッター自体は
 * webroot/css/renewal/legacy/footer_fit.css（`#footer *{...}`という
 * 詳細度(1,2,0)の汎用フォントリセットを含む）でスコープ変換されており、
 * これがFont Awesomeのfont-family（`.fab,.fa-brands{...}`詳細度(0,1,0)）を
 * 上書きしてしまい、フッターのSNSアイコン（Twitter/Facebook等）が表示され
 * ない不具合が発生していた。`.legacy-front-content`向けと同じ考え方で、
 * `#footer`配下にも同様のFont Awesome復旧ルールを追加する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #footer .fa,
[data-renewal-layout][data-renewal-mode="fit"] #footer .fas,
[data-renewal-layout][data-renewal-mode="fit"] #footer .fa-solid {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}
[data-renewal-layout][data-renewal-mode="fit"] #footer .far,
[data-renewal-layout][data-renewal-mode="fit"] #footer .fa-regular {
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
}
[data-renewal-layout][data-renewal-mode="fit"] #footer .fab,
[data-renewal-layout][data-renewal-mode="fit"] #footer .fa-brands {
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
}

/*
 * 新レイアウトの中へ既存Front本文を差し込むページは、本文の外側に
 * .legacy-front-content を置き、その配下だけ旧ページの基本文字組みへ戻す。
 * Renewalシェル（aside/nav/header_bar）とは境界を分け、旧コンテンツの見た目を
 * 既存ページと一致させる。
 *
 * 【暫定の安全網】以下のh1〜h6・フォーム・画像等の上書きは、旧ページが
 * 実際に読み込んでいたCSSファイル一式から手動で値を転記したものであり、
 * ページ種別（body.toppage/body.subpage等）依存のセレクタは再現できていない
 * （tmp/tools/generate-legacy-css.js 参照）。
 * /fit トップページはこの手動転記をやめ、旧ページが読み込むCSS一式を
 * postcss-prefixwrapで.legacy-front-content配下へ機械的にスコープ変換した
 * 専用バンドル（webroot/css/renewal/legacy/top.css、
 * $renewal_legacy_css_bundle='top'）に置き換え済み。バンドル側のセレクタは
 * このファイルと同じ詳細度の土台（[data-renewal-layout][data-renewal-mode="fit"]
 * #main-content-core .legacy-front-content）を使っているため、より具体的な
 * バンドル側のルールが確実にこちらを上書きする。
 * ここに残っている下記ルールは、まだ専用バンドルに移行していないページ
 * （例: /fit/supportdesk）のための暫定フォールバックであり、対象ページを
 * バンドル化した時点で当該ルールは削除してよい。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content {
	color: #1d1d1f;
	font-family: "Noto Sans JP", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: left;
}

/*
 * Tailwind CDNのpreflightが `img, svg, video, canvas, audio, iframe, embed,
 * object { display: block }` をグローバルに設定するため、旧ページ側で
 * displayを指定していなかった img（例: FITTINGセクションのカテゴリ
 * アイコン .cate_ico）がブラウザ既定値のinlineではなくblockになり、
 * テキストの前で改行されてしまう（本番はUA既定値のinlineのまま）。
 * .legacy-front-content配下のimgのみ、旧ページと同じ挙動（inline）に戻す。
 * 詳細度(0,1,1)はTailwind側のimg単体セレクタ(0,0,1)より高いため確実に勝つ。
 */
.legacy-front-content img {
	display: inline;
}

/* 企業PR共通ヘッダーはロゴ領域を固定し、会社名をロゴの右側で左寄せする。 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .com_header .left_wrap {
	width: 100%;
	flex-wrap: nowrap;
	align-items: flex-start;
}

[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .com_header .left_wrap .com_logo {
	flex: 0 0 100px;
}

[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .com_header .left_wrap .tx_wrap {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .com_header .left_wrap .tx_wrap h3 {
	text-align: left;
}

/*
 * reset.css / Tailwind preflight が h1-h6 自身の font-size/font-weight/margin を
 * リセットするため、旧 supportdesk が v2/css/common.css のタグ見出し指定に
 * 依存していた箇所だけ本番相当に戻す。Renewalシェルのnav見出し等へ漏れないよう
 * #main-content-core 配下に限定する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h1 {
	font-weight: 700;
	line-height: 1.4;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h2,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h3,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h4,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h5,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h6 {
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-bottom: 0.3em;
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h2 {
	font-size: 30px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h3,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h4 {
	font-size: 22px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h5 {
	font-size: 20px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #contact h2,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #contact3 h2 {
	font-size: 34px;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-bottom: 30px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #contact h2 .ico img,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #contact3 h2 .ico img {
	display: inline;
	vertical-align: middle;
}
@media screen and (max-width: 896px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h2 {
		font-size: 18px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content h3 {
		font-size: 18px;
		line-height: 1.3;
	}
}
@media screen and (max-width: 640px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #contact h2,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #contact3 h2 {
		font-size: 22px;
	}
}

/*
 * Tailwind CSSは既存CSSより後に読み込むため、webroot/v2/css/common.cssの
 * `textarea,select,input{border:1px solid #ccc;padding:0.8em 0.8em;border-radius:5px}`
 * と詳細度が同じ（要素セレクタのみ）padding指定がTailwindのPreflight
 * （button,input,...,textarea{margin:0;padding:0}）に上書きされて
 * しまう（問い合わせフォームの入力欄が本番よりかなり小さくなる原因）。
 * ここで詳細度を上げてcommon.css相当のpaddingを明示的に復元する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content input,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content textarea,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content select {
	letter-spacing: normal;
	padding: 0.8em 0.8em;
}

/*
 * /login（default_v2）の旧CSSには `body.login main .btn:not(.number)` があり、
 * ボタン幅100%・padding・font-sizeをこのセレクタで与えている。
 * Renewal/default では本文を <main> で囲まないためこの規則だけ一致しなくなり、
 * ボタン幅が縮む。loginページ時のみ同等指定を補完する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.login .btn:not(.number),
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.login a.btn:not(.number),
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.login button.btn:not(.number) {
	width: 100%;
	padding: 0.8em 1em;
	font-size: 20px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.login .btn_wrap .small a {
	text-decoration: underline;
}

[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .subHeader {
	position: static;
	top: auto;
	left: auto;
	margin-top: 0 !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .subHeader .header_wrap {
	border-bottom: 0 !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .subHeader .header_breadcrumb {
	display: none !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .subHeader .header_search {
	margin-bottom: 35px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .header_search form ul li.search_submit {
	padding-left: 20px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .header_search form ul li.search_clear {
	flex: 0 0 48px;
	padding-left: 8px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .btn_search_clear {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid #64748b;
	border-radius: 100px;
	background: #FFFFFF;
	box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
	color: #64748b;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .btn_search_clear:hover {
	background: #64748b;
	color: #FFFFFF;
	animation: pulse 0.5s;
}
@media (max-width: 1024px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .header_search form ul li:nth-of-type(2),
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .header_search form ul li:nth-of-type(3) {
		width: 32%;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .header_search form ul li.search_submit {
		width: 26%;
		padding-left: 0;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .header_search form ul li.search_clear {
		flex: none;
		width: 10%;
		padding-left: 5px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .btn_search_clear {
		width: 100%;
		height: 32px;
		font-size: 14px;
	}
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .container {
	padding-top: 0 !important;
}

/*
 * default_2020_p1の最終body指定（style.css/style_sp.css）は、スコープ変換後の
 * .legacy-front-content bodyではDOMに一致しないため、企業PRページのルートへ移す。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper {
	position: relative;
	font-size: 14px;
	line-height: 1.9em;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper .com_header .name h3 {
	text-align: left;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #contact .title_area .cta-btn {
	margin-right: auto;
	margin-left: auto;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #contact .title_area .cta-text {
	font-size: 24px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #article .swiper-button-next.swiper-custom-button,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #article .swiper-button-prev.swiper-custom-button {
	top: calc(50% - 20px);
	transform: translateY(-50%);
}
@media (max-width: 768px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #contact .title_area .cta-text {
		font-size: 18px;
	}
}

@media (min-width: 641px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .legacy_company_detail #content {
		max-width: none;
		padding-left: 20px;
		padding-right: 20px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .legacy_company_detail .com_content_wrap {
		flex-basis: 100%;
		width: 100%;
		max-width: none;
		margin-left: 0;
		box-sizing: border-box;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #contact .contact-tel {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #contact .contact-tel__text,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #contact .contact-tel__number,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper #contact .contact-tel__time {
		flex-shrink: 0;
		white-space: nowrap !important;
	}
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr {
	margin-top: 24px !important;
}
@media (min-width: 741px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.company_contact #top_area,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.contact_bulk #top_area {
		padding-top: 24px !important;
	}
}
@media (max-width: 740px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr {
		margin-top: 16px !important;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper {
		font-size: 12px;
		line-height: 1.8em;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper .com_header .left_wrap {
		align-items: flex-start;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper .com_header .com_logo + .tx_wrap {
		box-sizing: border-box;
		min-width: 0;
		width: calc(100% - 115px);
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper .com_menu ul li {
		flex-basis: 25%;
		margin-right: 0;
		margin-bottom: 0;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper .com_menu ul li + li a {
		border-left: 0;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper .com_menu ul li:nth-child(4n + 1) a {
		border-left: 1px solid #0680ca;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal_company_pr .pr_wrapper .com_menu ul li:nth-child(n + 5) a {
		border-top: 0;
	}
}

[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .list_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .list_header_title {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex: 1 1 auto;
	min-width: 0;
}
/*
 * .about_link は元CSSで固定 width:170px のため、タイトルが短く右側に
 * 余白がある場合でも「〜とは」の文言が170px幅で強制的に折り返され、
 * 右の空きスペースが活用されていなかった（ユーザー指摘: 折り返した分の
 * 余白が広げられていない）。固定幅をやめてflex:1 1 autoで.list_header_title
 * 内の残り幅いっぱいに広がるようにし、折り返しを減らす。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .list_header_title .about_link {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	display: inline-flex;
	align-items: center;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.2;
	text-align: left;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .list_header_title .about_link span {
	white-space: normal;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .list_header_title .about_link img {
	flex: 0 0 auto;
	/*
	 * Tailwind Preflightが全imgに `max-width:100%;height:auto` を
	 * 適用しており、SP幅でタイトル文言が長い場合に.about_linkボタンのflexレイアウト上の
	 * 割当幅がアイコンの本来サイズ(20x21px)より狭くなり、アイコンごと縮小して表示されて
	 * いた（ユーザー指摘: SP版の?アイコンが小さくなる）。widthを明示してmax-width:100%由来の
	 * 縮小を無効化し、常に本来のサイズで表示する。
	 */
	width: 20px;
	height: 21px;
	max-width: none;
}

/*
 * Features::index（旧default_v3 layout）の subHeader は breadcrumb のみで
 * companies_wrapper の .header_search のような表示すべき内容を持たないため、
 * companies_wrapperの部分非表示（position解除＋breadcrumbのみ非表示）とは異なり
 * 全体を非表示にする。
 * .container の上余白は元layoutのheader分（112px）をそのまま打ち消すと
 * breadcrumbの直下に本文がぴったり付いてしまい窮屈になる（ユーザー指摘:
 * 上部の余白がなくなっている）ため、business-system(Company)ページで
 * .header_search が確保している余白（breadcrumb下端〜本文上端で約37px）と
 * 同程度になるよう32pxの余白を残す。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .subHeader {
	display: none !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .container {
	padding-top: 32px !important;
}
/*
 * Company一覧の「.about_link」はモーダル起動のため<button>タグで実装されて
 * おり（data-modal-open="company-about"）、Renewal共通モーダル機構
 * （webroot/js/renewal/common/app.js の company-about ハンドラ）と連携する。
 * Features::indexの「テストタイトル1とは」も同じ仕組みに合わせて<button>化した
 * （旧default_v3.ctpの `$('.about_link').click(...)` はRenewalで読み込まれず
 * タップしても反応しなかったため）。ボタン化に伴うUAデフォルトスタイル
 * （border/padding/background等）とTailwind Preflightの`img{display:block}`
 * を打ち消し、companies_wrapperと同じ横並びレイアウトに揃える。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .list_header_title {
	flex: 1 1 auto;
	min-width: 0;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .list_header_title .about_link {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	display: inline-flex;
	align-items: center;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.2;
	text-align: left;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .list_header_title .about_link span {
	white-space: normal;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .list_header_title .about_link img {
	flex: 0 0 auto;
	width: 20px;
	height: 21px;
	max-width: none;
	margin-left: 6px;
}
/*
 * .contact_footer は元CSSで position:fixed; left:0; right:0; width:100% と
 * ビューポート全幅基準のため、Renewalの固定幅aside/navの下に潜り込んでしまう
 * （ユーザー指摘: contact_footer_wrapの左側がnavの下にもぐる）。
 * #main-scroll-container は overflow-y:auto な最も近いスクロールコンテナのため、
 * position:stickyに変更することでコンテンツ領域（aside/navを除いた幅）に自動的に
 * 収まるようにする。幅は90%・中央寄せとし、ドロップシャドウも付与する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer {
	position: sticky;
	left: auto;
	right: auto;
	width: 100%;
	padding: 0;
	margin-bottom: 24px;
	transition: opacity 0.2s ease;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap {
	width: 85%;
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 4px 12px rgba(67, 118, 144, 0.35);
}
/*
 * .btn_disabled 系は本来 default_v3.ctp レイアウトの<style>ブロックに定義されて
 * いるが、RenewalではこのレイアウトのCSSを読み込まないため「選択した企業に
 * 問い合わせる」ボタン（無効状態）のデザインが欠落していた。本番HTMLの実装を
 * 移植して復旧するが、Tailwind Preflight由来のborderリセットを打ち消すために
 * 上で定義済みの `.legacy-front-content div, ... a, ...{border:0}` という
 * 汎用セーフティネット（IDセレクタ+タグセレクタ）よりも詳細度を上げる必要が
 * あるため、同じ `#main-content-core .legacy-front-content.features_wrapper`
 * プレフィックス配下のクラスセレクタとして定義する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_disabled {
	border: 2px #959FA5 solid;
	background: #959FA5;
	box-shadow: 0px 4px 8px rgb(0 0 0 / 25%);
	border-radius: 86px;
	font-weight: 700;
	font-size: 14px;
	color: #FFFFFF;
	height: 44px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	box-sizing: border-box;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_disabled span {
	margin-left: 8px;
	background: #FFFFFF;
	border-radius: 2px;
	font-weight: 700;
	font-size: 11px;
	color: #959FA5;
	padding: 7px 6px;
}
/*モーダルSP*/
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_disabled_sp_modal {
	border: 2px #959FA5 solid;
	background: #959FA5;
	box-shadow: 0px 4px 8px rgb(0 0 0 / 25%);
	border-radius: 86px;
	font-weight: 700;
	font-size: 13px;
	color: #FFFFFF;
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	box-sizing: border-box;
	justify-content: space-between;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_disabled_sp_modal .free {
	width: 56px;
	margin-left: 8px;
	background: #FFFFFF;
	border-radius: 2px;
	font-weight: 700;
	font-size: 11px;
	color: #959FA5;
	padding: 7px 6px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_disabled_sp_modal:hover span {
	background: #959FA5;
	color: #FFFFFF;
}
/*
 * 選択企業の件数（0件⇔1件以上）に応じて `.btn_contact_bulk`（および
 * SP版 `.btn_contact_bulk_sp` / `.btn_contact_bulk_sp_modal`）へ活性クラス
 * （`.btn_list_contact` / `.btn_list_contact_sp` / `.btn_modal_sp_contact`。
 * レガシーCSS側の既定はオレンジ）と `.btn_disabled` 系（グレー）クラスが
 * 付け替わる（webroot/js/front/Features/index.js）。
 * 「色味は変更しない・活性状態は従来のグレーのまま・非活性は透過率で表現」
 * との指示のため、活性クラスが付いた場合でもレガシーCSSのオレンジ配色を
 * 採用せず、常に `.btn_disabled` と同じグレー配色に固定した上で、
 * 活性(opacity:1)/非活性(opacity:0.5)をopacityの差だけで表現し、
 * その切り替えをtransitionでフェードさせる。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_list_contact {
	border: 2px #959FA5 solid;
	background: #959FA5;
	box-shadow: 0px 4px 8px rgb(0 0 0 / 25%);
	border-radius: 86px;
	font-weight: 700;
	font-size: 14px;
	color: #FFFFFF;
	height: 44px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	box-sizing: border-box;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_list_contact span {
	margin-left: 8px;
	background: #FFFFFF;
	border-radius: 2px;
	font-weight: 700;
	font-size: 11px;
	color: #959FA5;
	padding: 7px 6px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_list_contact_sp {
	border: 2px #959FA5 solid;
	background: #959FA5;
	box-shadow: 0px 4px 8px rgb(0 0 0 / 25%);
	border-radius: 86px;
	font-weight: 700;
	font-size: 14px;
	color: #FFFFFF;
	height: 44px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	box-sizing: border-box;
	justify-content: center;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_list_contact_sp .free {
	margin-left: 8px;
	background: #FFFFFF;
	border-radius: 2px;
	font-weight: 700;
	font-size: 11px;
	color: #959FA5;
	padding: 7px 6px;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_modal_sp_contact {
	border: 2px #959FA5 solid;
	background: #959FA5;
	box-shadow: 0px 4px 8px rgb(0 0 0 / 25%);
	border-radius: 86px;
	font-weight: 700;
	font-size: 13px;
	color: #FFFFFF;
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	box-sizing: border-box;
	justify-content: space-between;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_modal_sp_contact .free {
	flex: 0 0 auto;
	width: auto;
	min-width: 56px;
	margin-left: 8px;
	background: #FFFFFF;
	border-radius: 2px;
	font-weight: 700;
	font-size: 11px;
	color: #959FA5;
	padding: 7px 6px;
	white-space: nowrap;
}
/* hoverでもオレンジへ配色が変わらないよう、レガシーCSSのhover配色・pulseアニメーションを打ち消す */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_list_contact:hover,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_list_contact_sp:hover {
	background: #959FA5;
	color: #FFFFFF;
	animation: pulse 0.5s;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_list_contact:hover span,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_list_contact_sp:hover .free {
	background: #FFFFFF;
	color: #959FA5;
}
/*
 * PC版の活性ボタンは、右側の相談ボタンと同じ白抜き反転＋pulseに揃える。
 * 通常時のグレー配色は維持し、hover時のみ白背景・グレー文字へ反転する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap .btn_contact_bulk.btn_list_contact:hover {
	background: #FFFFFF;
	color: #959FA5;
	animation: pulse 0.5s;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap .btn_contact_bulk.btn_list_contact:hover span {
	background: #959FA5;
	color: #FFFFFF;
}
/*
 * SP問い合わせリストモーダルのボタンは、PC版と同じpulse＋配色反転を使う。
 * 旧CSSの`.btn_modal_sp_contact:hover span`は本文用`.tx`にも背景色を付けるため、
 * 本文と「完全無料」バッジを個別に上書きする。選択企業向けボタンは
 * 指定済みのグレー配色を維持したまま、同じアニメーションだけ適用する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .btn_modal_sp_contact .free {
	flex: 0 0 auto;
	width: auto;
	min-width: 56px;
	white-space: nowrap;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .btn_modal_sp_contact:hover .tx {
	background: transparent;
	color: #EF8200;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .btn_modal_sp_contact:hover .free {
	background: #EF8200;
	color: #FFFFFF;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .btn_contact_bulk_sp_modal.btn_modal_sp_contact:not(.btn_disabled_sp_modal):hover {
	background: #FFFFFF;
	color: #959FA5;
	animation: pulse 0.5s;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .btn_contact_bulk_sp_modal.btn_modal_sp_contact:not(.btn_disabled_sp_modal):hover .tx {
	background: transparent;
	color: #959FA5;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .btn_contact_bulk_sp_modal.btn_modal_sp_contact:not(.btn_disabled_sp_modal):hover .free {
	background: #959FA5;
	color: #FFFFFF;
}
/*
 * 非活性ボタンは活性時と同じレイアウト・配色を保ち、opacityだけを下げる。
 * レガシーの`.btn_disabled span`が件数表示まで白いバッジに変え、本文を左寄せ
 * にするため、SP固定バーの件数表示だけボタンと同色へ戻して中央配置する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_disabled {
	border: 2px #959FA5 solid;
	background: #959FA5;
	box-shadow: 0px 4px 8px rgb(0 0 0 / 25%);
	border-radius: 86px;
	font-weight: 700;
	font-size: 14px;
	color: #FFFFFF;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	box-sizing: border-box;
	text-align: center;
	cursor: default;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_disabled .number {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp {
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp {
	height: 96px;
	overflow: hidden;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp_content {
	position: relative;
	height: 96px;
	overflow: hidden;
	contain: layout paint;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp_content > ul {
	position: relative;
	height: 100%;
	overflow: hidden;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp_content > ul > li:first-child {
	padding: 0;
	box-sizing: border-box;
	/* pulse最大時（44px × 1.1 = 48.4px）を内側で吸収する固定領域 */
	height: 52px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	overflow: visible;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp_content > ul > li:last-child {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 16px;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp .btn_list_contact_sp_text {
	display: inline-block;
	line-height: 19px;
}
/*
 * SP問い合わせ企業リストの開閉をRenewalハンバーガーメニューと同じ
 * opacity + translateY(1rem)、300ms ease-in-outで表示する。
 * display:noneのままではtransitionできないため、is-mountedで描画へ載せ、
 * 次フレームのis-open付与で開くアニメーションを開始する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-category,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-tag,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .modal-category,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .modal-tag {
	display: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(1rem);
	transition:
		opacity 0.3s ease-in-out,
		transform 0.3s ease-in-out,
		visibility 0.3s ease-in-out;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list.is-mounted,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-category.is-mounted,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-tag.is-mounted,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .modal-category.is-mounted,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .modal-tag.is-mounted {
	display: block;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list.is-open,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-category.is-open,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-tag.is-open,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .modal-category.is-open,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .modal-tag.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
/*
 * 企業カードの社名は、Features一覧・企業一覧とも本番同様PC/SPで左寄せにする。
 * Renewal用の見出し復元指定がh2を中央寄せにするため、カード内だけ打ち消す。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .card_article_content .company_info h2,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .card_article_content .company_info h2 {
	text-align: left;
}
@media (max-width: 740px) {
	/*
	 * SPのレガシーCSSは企業画像を絶対配置し、企業名がh3である前提で左余白を
	 * 確保している。現在の一覧はh2を使用するため、画像の有無にかかわらず
	 * 画像領域を避けて企業名を配置する。
	 */
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .card_article_content .company_info h2,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.companies_wrapper .card_article_content .company_info h2 {
		box-sizing: border-box;
		min-height: 48px;
		padding-left: 60px;
	}
}
/*
 * 問い合わせ企業リスト内の企業名も、PCサイドリスト・SPモーダルとも
 * 行の左端へ揃える。親のtext-align設定を継承しないようli/a双方へ明示する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .side_contact_list .contact_list li,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .side_contact_list .contact_list li a,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .contact_list li,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .modal-contact-list .contact_list li a {
	text-align: left;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp .btn_contact_bulk_sp {
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	top: auto;
	right: 2%;
	bottom: -4px;
	left: 2%;
	width: 96%;
	max-width: 96%;
	transition: opacity 0.3s ease;
	transform-origin: center bottom;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp .btn_contact_bulk_sp.btn_list_contact_sp:hover {
	background: #FFFFFF;
	color: #959FA5;
	animation: pulse 0.5s;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer_wrap_sp .btn_contact_bulk_sp.btn_list_contact_sp:hover .free {
	background: #959FA5;
	color: #FFFFFF;
}
@media (max-width: 740px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer {
		width: 100%;
		bottom: -16px;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 0;
	}
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp .number,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp:hover .number {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}
/*
 * PC/SPとも非活性時はhoverによる配色変更・pulseを行わず、
 * リンク操作ができないことを示す通常カーソルにする。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_disabled,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_disabled,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_disabled_sp_modal {
	cursor: default;
	animation: none;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_disabled:hover,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_disabled:hover,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_disabled_sp_modal:hover {
	background: #959FA5;
	color: #FFFFFF;
	animation: none;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_disabled:hover span,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_disabled_sp_modal:hover .free {
	background: #FFFFFF;
	color: #959FA5;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_disabled_sp_modal:hover .tx {
	background: transparent;
	color: #FFFFFF;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_disabled:hover .number {
	background: transparent;
	color: inherit;
}

/* Features一覧: 本番の「はじめての方へ」案内とPC用サポート相談窓口 */
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal {
	position: fixed;
	inset: 0;
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal[hidden],
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup[hidden] {
	display: none;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal.is-open {
	opacity: 1;
	visibility: visible;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__window {
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: 1040px;
	padding: 20px 50px;
	border: 2px solid #0680ca;
	border-radius: 5px;
	background: #FFFFFF;
	color: #333333;
	transform: translate(-50%, -50%);
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 10px auto;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__title img {
	width: 35px;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__title h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__intro {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 570px;
	margin: 10px auto;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__intro p {
	width: 65%;
	margin: 10px auto;
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__intro strong,
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__intro mark {
	background: none;
	color: #0680ca;
	font-weight: 700;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__intro img {
	width: 170px;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px;
	background: #eaf0f6;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features > div {
	flex-basis: 58%;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features > img {
	flex-basis: 40%;
	width: 40%;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features h4 {
	margin: 0 auto 20px;
	padding: 5px;
	background: #0680ca;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features li {
	margin: 10px 0;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1.7;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features li::before {
	margin-right: 4px;
	color: #0680ca;
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features p {
	display: inline;
	background: linear-gradient(transparent 60%, #ffe400 60%);
	color: #0680ca;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__actions {
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__actions > button {
	display: block;
	width: 200px;
	margin: 16px auto 10px;
	padding: 0.4em 1em;
	border: 2px solid #0680ca;
	border-radius: 100px;
	background: #0680ca;
	box-shadow: 0 0 10px rgb(0 0 0 / 20%);
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__actions label {
	letter-spacing: 0.1em;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__actions input {
	margin-right: 0.5em;
	appearance: auto;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__icon-close {
	position: absolute;
	top: 10px;
	right: 10px;
	border: 0;
	background: transparent;
	color: #0680ca;
	font-size: 30px;
	line-height: 1;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup {
	position: fixed;
	right: 0;
	bottom: 100px;
	z-index: 5000;
	width: 240px;
	max-width: 300px;
	max-height: 350px;
	border: 1px solid #aaaaaa;
	background: #FFFFFF url("/v2/image/support_desk.png") no-repeat 125px 34px / contain;
	box-sizing: content-box;
	color: #1d1d1f;
	font-family: "Noto Sans JP", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	font-size: 13px;
	line-height: 1;
	letter-spacing: normal;
	overflow: visible;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__title {
	padding: 3px;
	background: #0680ca;
	box-sizing: content-box;
	color: #FFFFFF;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__title span {
	font-size: 11px;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__title strong {
	color: #ffe400;
	font-size: 14px;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__content {
	box-sizing: content-box;
	position: relative;
	width: 190px;
	max-width: 1200px;
	padding: 7px;
	margin: 0;
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__tel {
	box-sizing: content-box;
	width: 100%;
	margin-bottom: 5px;
	padding: 3px 0 1px;
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__tel > span {
	box-sizing: content-box;
	display: block;
	line-height: 1;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__tel-label {
	margin-bottom: 3px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__phone {
	margin: 0 0 3px -18px;
	color: #0680ca;
	font-family: Oswald, sans-serif;
	font-size: 20px;
	line-height: 1;
	white-space: nowrap;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__phone i {
	margin-right: 3px;
	font-size: 80%;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__phone a {
	display: inline-block;
	color: #0680ca;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__hours {
	margin: 0 10px 0 5px;
	font-size: 10px;
	line-height: 1.2 !important;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__web {
	display: block;
	width: 100%;
	box-sizing: content-box;
	margin: 0;
	padding: 5px;
	border: 2px solid #EF8200;
	border-radius: 100px;
	background: #EF8200;
	box-shadow: 0 0 10px rgb(0 0 0 / 17%);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup > p {
	box-sizing: content-box;
	margin: 0;
	padding: 0.3em;
	background: #F6F8FA;
	font-size: 10px;
	line-height: 1.2;
	text-align: center;
}
[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup__close {
	position: absolute;
	top: -20px;
	right: 2px;
	border: 0;
	background: transparent;
	color: #1d1d1f;
	font-size: 18px;
	line-height: 1;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.article_rekaiezn_wrapper .foot_form {
	display: none;
}
@media (max-width: 480px) {
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__window {
		width: 95%;
		height: 85%;
		overflow-y: auto;
		padding: 15px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__title img {
		width: 20px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__title h3 {
		font-size: 18px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__intro p {
		width: 100%;
		font-size: 12px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__intro img {
		display: none;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features {
		display: block;
		font-size: 13px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features > img {
		display: block;
		width: 100%;
		margin-top: 10px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features h4 {
		font-size: 16px;
		text-align: center;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-howto-modal__features p {
		display: inline;
		text-align: center;
	}
	[data-renewal-layout][data-renewal-mode="fit"] .renewal-support-popup {
		display: none !important;
	}
}
/* 活性/非活性はopacityのみで表現し、フェードで切り替える（色味は変えない） */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal {
	transition: opacity 0.3s ease;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_list_contact,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_list_contact_sp,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_modal_sp_contact {
	opacity: 1;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk.btn_disabled,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp.btn_disabled,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .btn_contact_bulk_sp_modal.btn_disabled_sp_modal {
	opacity: 0.5;
}

/*
 * 「問い合わせ企業リスト」(.side_contact_list) のスクロール追従・フッター接近時の
 * フェードアウト/イン。本番(v3/css/style.css)では
 * `.container .side dl.fixed{z-index:2;position:fixed;top:152px}` という
 * ルールで実現しているが、本番はwindow自体がスクロールする前提のtop値
 * （固定ヘッダー分を含む152px）のため、Renewalのレイアウト（#main-scroll-container
 * 内でスクロールし、window自体はスクロールしない）にそのまま持ち込むと
 * 画面上端に近すぎる。
 * 【2026-09-15追記】固定値24pxのままだと、#main-scroll-container内で
 * sticky top-0 表示されるパンくずバー（ホーム等、高さ可変・z-index:20）と
 * 上下位置が重なり、本リストのz-index:5の方が低いためバーの下へ潜り込んで
 * 見えてしまう不具合があった。ロジック（webroot/js/renewal/features/
 * side-contact-list.js）側でパンくずバーの実高さを都度計測し、その高さ＋
 * 余白ぶんだけ top を下げて重ならないようにしている。
 * 【2026-09-15追記2】JSによるstatic/fixed切替は、旧windowスクロール処理との
 * 競合でクラスが一度外れてから次フレームに付け直されるため、固定開始時に
 * 瞬間移動が発生していた。追従はブラウザがスクロール量から連続計算する
 * position:stickyへ変更し、JSはパンくず高さをCSS変数で渡すだけにする。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .side_contact_list,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .side_contact_list.fixed {
	position: sticky;
	top: var(--side-contact-sticky-top, 65px);
	z-index: 5;
	box-sizing: border-box;
}
/*
 * フェードアウト/インは opacity の transition で表現し、JSからは
 * `.is-hidden` クラスの付け外しのみ行う（本番のjQuery fadeOut(200)/fadeIn(200)相当）。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .side_contact_list {
	transition: opacity 0.2s ease;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .side_contact_list.is-hidden {
	opacity: 0;
	pointer-events: none;
}
/*
 * 【2026-09-15追記】画面下部に固定表示される「選択した企業に問い合わせる」
 * バー(.contact_footer)は本番CSS上z-indexの指定が無く(auto)、position:fixedの
 * .side_contact_list.fixed（z-index:5）と比べて詳細度・優先順位が低いため、
 * このままだと.side_contact_listがスクロールで画面下部まで来た際に
 * .contact_footerの上に重なって表示されてしまう（本番はそもそも
 * .side_contact_listの高さ的に.contact_footerと重ならない配置のため
 * 表面化しないが、Renewalではビューポート幅次第で重なりうる）。
 * .contact_footerを確実に手前に表示させるため、.side_contact_list.fixedより
 * 高いz-indexを明示する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer {
	z-index: 6;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.features_wrapper .contact_footer.is-hidden-near-footer {
	opacity: 0;
	pointer-events: none;
}

[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] {
	align-items: center;
	padding: 0;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-content {
	height: 97.5vh;
	max-height: 97.5vh;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body {
	padding: 0 !important;
	background: transparent;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body #main-content-core.renewal-material-request-modal-scope #contact3.popup_form {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 0 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body #contact3.popup_form > .sec_cont {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body #contact3 .title_area h2 {
	display: none;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body #contact3 .title_area {
	margin: 50px auto !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body #contact3 .title_area p.read {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body .lity-content {
	width: 100% !important;
	max-width: none !important;
	background: transparent;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
}
[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body .lity-content:after {
	display: none;
}
@media screen and (max-width: 740px) {
	[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] {
		padding: 0 8px;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-content {
		height: 97.5vh;
		max-height: 97.5vh;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #modal-container[data-modal-type="material-request-contact"] #modal-body #contact3.popup_form > .sec_cont {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-bottom: 4px !important;
	}
}

/*
 * 共通モーダル部品（src/Template/Element/Renewal/Common/modal.ctp）向けの
 * SP高さ制限（ユーザー指摘: 2026-09-14）。
 * material-request-contact（出展問い合わせフォーム）以外の種別（company-about /
 * video-play / profile / speaker-apply / search-partner 等）は #modal-content に
 * 高さ指定が無く、内容が長い場合はモーダル全体が画面外へはみ出し、
 * 外側の #modal-container（overflow-y-auto）ごとスクロールする挙動になっていた。
 * SP幅では表示領域の98%を上限とし、ヘッダー（タイトル/閉じるボタン）は固定したまま
 * 本文（#modal-body）のみが内部スクロールするようflex化する。
 */
@media screen and (max-width: 740px) {
	[data-renewal-layout] #modal-container:not([data-modal-type="material-request-contact"]) #modal-content {
		max-height: 98vh;
		display: flex;
		flex-direction: column;
	}
	[data-renewal-layout] #modal-container:not([data-modal-type="material-request-contact"]) #modal-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/*
 * 同様にTailwind preflightの `img,svg,video,canvas{display:block}` が、
 * 既存CSS側の「imgはinline」前提で書かれた text-align:center によるセンタリング
 * を無効化してしまう箇所がある（例: #verified .verified_image 配下のロゴ画像が
 * 中央寄せされず左寄せに見える）。該当箇所はwidth/height等の明示的な指定を
 * 持たずtext-align:centerのみに依存しているため、imgをブロックのまま
 * margin:autoで中央寄せし直す（.beatlive-card__thumbnail imgのように明示的な
 * width/height/object-fitを持つ画像はブロック表示のままで問題ないため対象外）。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .verified_image img {
	margin-left: auto;
	margin-right: auto;
}

/*
 * v2/css/common.css の body.toppage header/h2 規則は旧グローバルヘッダーを
 * 対象にしたものだが、Renewalシェルにも一致する。新ヘッダーとサブナビ見出しは
 * モックのユーティリティ指定を維持する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-scroll-container > header {
	position: sticky;
	top: 0;
	width: auto;
	min-width: 0;
	height: auto;
	overflow: visible;
	z-index: 20;
}
[data-renewal-layout][data-renewal-mode="fit"] #nav-title {
	margin-bottom: 0;
	font-size: 0.875rem;
}

/* スクロールバー装飾。renewal-layout 配下のスクロール領域にのみ適用する */
[data-renewal-layout] ::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}
[data-renewal-layout] ::-webkit-scrollbar-track {
	background: #f1f5f9;
}
[data-renewal-layout] ::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}
[data-renewal-layout] ::-webkit-scrollbar-thumb:hover {
	background: #3b82f6;
}
[data-renewal-layout] .no-scrollbar::-webkit-scrollbar {
	display: none;
}
[data-renewal-layout] .no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Dynamic scroll reveal animations */
[data-renewal-layout] .scroll-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
[data-renewal-layout] .scroll-reveal.reveal-active {
	opacity: 1;
	transform: translateY(0);
}

/*
 * /fit 配下の旧Frontコンテンツ（legacy-front-content）で使われる data-aos 要素に、
 * トップページと同等の「下からせり上がる」演出を共通適用する。
 * 既存のAOS属性（data-aos-delay / data-aos-duration）はJS側でCSS変数へ転写し、
 * 個別ページでの遅延・速度差は維持する。
 *
 * 注意: is-visible（アニメーション完了後）の transform は translateY(0) ではなく
 * 明示的に none にすること。CSSの仕様上、transform に none 以外の値
 * （translateY(0) を含む）が指定された要素は、position: fixed な子孫要素の
 * containing block になってしまう。旧デザインの中には画面下部に固定表示する
 * 前提の position: fixed 要素（例: .contact_footer、Features/Company一覧の
 * 「選択した企業に問い合わせる」バー）が legacy-front-content の中に存在し、
 * translateY(0) のままだとこれらがビューポート基準ではなく
 * legacy-front-content 基準で配置されてしまい、長いページの途中に
 * 埋もれて実質見えない状態になっていた
 * （ユーザー指摘: 2026-09-15「本番にあるcontact_footer_wrapが表示されない」）。
 * translateY(0) と none は見た目上のスタイル（静止状態の位置）としては
 * 同一であり、transition の開始値（translateY(30px)）から none への
 * アニメーションも問題なく動作するため、見た目のデザイン・アニメーション自体に
 * 影響を与えずにこの副作用だけを解消できる。
 *
 * 同様の理由で will-change: transform も（実際の transform 値に関わらず）
 * position: fixed の containing block を作ってしまうため、is-animating に
 * 永続的に付与したままにはできない。JS側（app.js の setupInitialLoadReveal）は
 * is-animating クラスを一度付与した後、二度と外さない実装のため、
 * will-change を含むルールは「アニメーション中かつまだis-visibleが付与される前」
 * （:not(.is-visible)）に限定し、is-visible 付与後は will-change 自体が
 * 効かなくなるようにする。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal-initial-reveal {
	opacity: 0;
	transform: translateY(30px);
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal-initial-reveal.is-animating {
	transition: opacity 0.3s ease, transform 0.3s ease;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal-initial-reveal.is-animating:not(.is-visible) {
	will-change: opacity, transform;
}
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.renewal-initial-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Gradient text enhancement */
[data-renewal-layout] .text-gradient-blue {
	background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
[data-renewal-layout] .text-gradient-teal {
	background: linear-gradient(135deg, #0d9488 0%, #10b981 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
[data-renewal-layout] .text-gradient-coral {
	background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*
 * .pagetop は既存 footer_front.ctp のホワイトリストに含まれない新規の
 * 独立部品（Renewal/Common/pagetop.ctp）のため、renewal-layout 配下に
 * スコープしたうえでここで新規定義する。
 *
 * 配置: 画面右下に固定する（ユーザー指摘: 2026-09-10。当初モバイルで
 * ハンバーガーメニューボタンと重なったため一時的に左下へ変更していたが、
 * 右下配置を維持したまま重なりを解消する方針に修正）。
 * モバイルは aside が画面下部に高さ4remで固定表示され、その右側に
 * ハンバーガーメニューボタンが配置されているため、bottomオフセットを
 * aside の高さ分確保することで重なりを避ける。
 */
[data-renewal-layout] .pagetop {
	position: fixed;
	right: 1.25rem;
	left: auto;
	bottom: calc(4rem + 1rem);
	z-index: 40;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: rgba(15, 23, 42, 0.85);
	color: #fff;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
@media (min-width: 768px) {
	[data-renewal-layout] .pagetop {
		right: 1.25rem;
		bottom: 1.25rem;
	}
}
/*
 * モバイルでサブナビ（ハンバーガーメニュー）を開いた際、サブナビ下部のCTAボタンと
 * pagetopボタンが重なって表示されるため、開いている間はpagetopを隠す
 * （webroot/js/renewal/common/app.js の toggleMobileMenu() からトグルされる。
 * ユーザー指摘: 2026-09-10）。.pagetop自体の display:flex（詳細度0,2,0）より
 * 高い詳細度（0,3,0）にして確実に上書きする。
 */
[data-renewal-layout] .pagetop.pagetop-hidden {
	display: none !important;
}
[data-renewal-layout] .pagetop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
[data-renewal-layout] .pagetop:hover {
	background-color: rgba(15, 23, 42, 1);
}
/*
 * /fit のみ webroot/v2/css/common.css が読み込まれ、`.pagetop a{color:#ffe400 !important;
 * opacity:.7; font-size:30px}` が !important 付きで残っているため、アイコンの色・不透明度・
 * サイズが /event, /youtube と異なって見える。詳細度をlegacyの `.pagetop a`（0,2,0）より
 * 高くした上で !important を付け、legacyの !important を確実に上書きする。
 */
[data-renewal-layout] .pagetop a {
	color: #fff !important;
	opacity: 1 !important;
	font-size: 1rem !important;
	text-decoration: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
[data-renewal-layout] .pagetop a i {
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 900;
	line-height: 1;
}

/*
 * サブナビ下部のCTAボタン（front_nav_items type=button 由来）の共通ベース。
 * outline はモード共通の中立色とし、primary/secondaryのみ theme/{mode}.css で
 * モード別に配色する（design 3値の役割分担は
 * tmp/front_layout_unification_plan.md 85-95行の対応表を参照）。
 */
[data-renewal-layout] .nav-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	transition: all 0.2s ease;
}
[data-renewal-layout] .nav-cta-btn[data-design="outline"] {
	background-color: #fff;
	color: #334155;
	border: 1px solid #e2e8f0;
}
[data-renewal-layout] .nav-cta-btn[data-design="outline"]:hover {
	background-color: #f1f5f9;
}

/*
 * reCAPTCHA v3 バッジ（右下固定の「保護されています」アイコン）を非表示にする。
 * 旧デザインのcommon.css（webroot/v2/css/common.scss）には元々
 * `.grecaptcha-badge { visibility: hidden; }` があったが、この要素は
 * grecaptcha.js によって <body> 直下に直接挿入されるため、
 * .legacy-front-content / #footer 配下にスコープ変換されたバンドルCSS
 * （webroot/css/renewal/legacy/*.css）内のルールは効かない。
 * バッジを隠す場合はGoogleの利用規約により reCAPTCHA の告知文言を
 * フォーム付近に表示する必要があるが、各種お問い合わせフォーム
 * （contact_form_v2〜v5.ctp等）には既に「本サイトは、reCAPTCHAとGoogleに
 * より保護されています。」の告知文言が含まれているため、非表示にしても問題ない。
 */
.grecaptcha-badge {
	visibility: hidden;
}

/*
 * 旧デザインの `.widthFix` / `.widthFixPC`（webroot/css/base.css, webroot/css/style.css）は
 * 「ブラウザウィンドウ全体の横幅」に対する画面幅ブレークポイント（例:
 * ウィンドウ幅1201px以上で`width:1200px`固定センタリング）を前提にした
 * コンテンツ幅指定である。Renewalの3ペインレイアウトではaside/navが
 * 横幅を占有するため、実際にコンテンツへ使える幅（#main-content-core）は
 * ウィンドウ幅より常に狭く、typicalなデスクトップ解像度（ウィンドウ幅1280px等）
 * では `width:1200px`固定ルールがそのまま適用されてしまい、
 * ペイン幅（例: 896px）を超えてコンテンツが右にはみ出し横スクロールが
 * 発生していた（/fit/faq, /fit/terms, /fit/privacy 等で確認）。
 * ウィンドウ幅ではなく実際に使えるペイン幅へ常にフィットさせるため、
 * 旧CSS側のブレークポイントに関わらず width:100%（旧CSSの741〜1200px時と
 * 同じ挙動）に統一する。full HD等ペイン自体が広い場合の見た目を保つため
 * max-widthで元の1200pxを上限として残す。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .widthFix,
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .widthFixPC {
	width: 100% !important;
	max-width: 1200px !important;
	padding: 0 10px !important;
	box-sizing: border-box !important;
}

/*
 * /fit/faq（#FaqSec1等）で使われている `.tabBtns.A .btns li`（webroot/css/style.css）は
 * `float:left` + `a`要素への固定padding（25px 25px）のみでタブ幅を決めており、
 * 旧デザインの1200px前提の広いコンテンツ幅では4つのタブが1行に収まっていたが、
 * Renewalの3ペインレイアウトでは実際のペイン幅が狭くなるため、
 * floatしたタブの合計幅がペイン幅を超え、最後のタブだけ次の行へ折り返り
 * レイアウトが崩れていた。
 * ペイン幅に収まるよう `.btns` をflexコンテナ化し、各タブ（li）を
 * `flex:1 1 0`で均等割りにして折り返りを防止する。
 * 均等割りで幅が狭くなった分、タブ内テキストは1行に収まらなくなるため、
 * `white-space:normal`でテキスト側の折り返しを許可する
 * （`<br class="devSP">`はSP専用の強制改行のため、PCでは元々テキストは
 * 折り返さない前提だったが、均等割りに変更した以上はテキストの自然な
 * 折り返しを許可しないと文字がはみ出してしまう）。
 * SP（webroot/css/style_sp.css、max-width:740px）側は元々
 * `li{width:50%}`の2カラムグリッド + テキストの絶対配置中央寄せで
 * 崩れておらず変更不要のため、min-width:741px（旧CSSのPC/TB用
 * ブレークポイントと同じ）でPC/TB幅のみに適用範囲を限定する。
 */
@media screen and (min-width: 741px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .tabBtns.A .btns {
		display: flex !important;
		align-items: flex-end !important;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .tabBtns.A .btns li {
		float: none !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .tabBtns.A .btns li a {
		white-space: normal !important;
		text-align: center !important;
	}
}

/*
 * #FrontFaq .allSlideBtn（「すべて開く／すべて閉じる」）はwebroot/css/style.cssで
 * `margin-top:-57px`が指定されており、旧デザインの広いコンテンツ幅では
 * 見出し（#Front .htxA）と同じ行の右側に来るよう意図された配置だった。
 * Renewalのペイン幅では見出しテキストが折り返りやすく、負のmargin-topで
 * 引き上げられたボタンが見出しへ重なって表示が崩れていた。
 * 見出しの次の行（1段下）へ、かつ中央揃えで配置されるよう、PC/TB幅
 * （min-width:741px、SP用style_sp.cssのmargin-top:-10pxは対象外＝変更不要）で
 * margin-topを打ち消し、`.allSlideBtn.A{text-align:right}`（webroot/css/style.css）を
 * text-align:centerで上書きする。
 * SP幅（max-width:740px）はmargin-topは元のまま（-10px）で問題ないが、
 * 同様にtext-align:rightのままだと右寄せになるため、中央揃えのみ追加で上書きする。
 */
@media screen and (min-width: 741px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .allSlideBtn {
		margin-top: 0 !important;
		text-align: center !important;
	}
}
@media screen and (max-width: 740px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .allSlideBtn {
		text-align: center !important;
	}
}

/*
 * h2.htxA.fc1（各セクション最初の見出し「ビートライブフィットに関するご質問」等の
 * うち先頭のfc1修飾クラス付き要素）は #Front .htxA の margin-bottom:20px
 * （webroot/css/style.css）をそのまま継承しているが、直下の
 * #FrontFaq .allSlideBtn の margin-top を0にした関係で、PC幅では
 * 見出しとボタン行の間隔が広く見えるため、PC/TB幅（min-width:741px）に限り
 * margin-bottomを半分の10pxに詰める。
 */
@media screen and (min-width: 741px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content .htxA.fc1 {
		margin-bottom: 10px !important;
	}
}

/*
 * FAQのアコーディオン開閉ボタン内「OPEN」/「CLOSE」テキスト（.btn .cl / .btn .op）は
 * src/Template/Front/Faq/index.ctp のJS（webroot/js/base.js FuncSlideOpen3相当の移植）が
 * jQueryの.toggle()でdisplay:none/blockを瞬時に切り替えているだけで、クロスフェードにできない
 * （移植元がそもそも瞬時切替のため）。
 * クロスフェードさせるには、.cl/.opを同じ位置に重ねてabsolute配置し、displayではなく
 * opacityで表示状態を切り替える必要がある。
 * 元々 .btn はdisplay:inline-blockで可視の子（.clまたは.op）の幅にshrink-wrapしていたが、
 * 子を全てposition:absoluteにすると子が.btnの幅計算に寄与しなくなるため、
 * .btnに「CLOSE」（より長い文言）が収まる幅を明示指定し、text-align:rightで
 * 右端（webroot/css/style.cssの.btn{right:40px}で固定される右端）に揃える。
 * これにより.btn自体の右端位置は変わらず、OPEN/CLOSE切替時の幅差（105.8px/116.6px）による
 * 見た目のガタつきも発生しない。
 * SP（style_sp.css）は.tx em{display:none}でテキスト自体を非表示にしアイコンのみ表示する
 * デザインのため、テキストのクロスフェードは対象外（PC/TB幅=min-width:741pxのみ適用）。
 * .is-hidden クラスの付け外しは src/Template/Front/Faq/index.ctp のJSで行う
 * （.toggle()ではなく.toggleClass('is-hidden')に変更）。
 */
@media screen and (min-width: 741px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn {
		width: 130px !important;
		text-align: right !important;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn .cl,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn .op {
		position: absolute !important;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		display: inline-block !important;
		transition: opacity 0.25s ease;
	}
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn .cl.is-hidden,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn .op.is-hidden {
		opacity: 0;
		pointer-events: none;
	}
}

/*
 * .cl/.opの表示切替を .toggle()（display）から .toggleClass('is-hidden')（opacity）に
 * 変更したことで、SP（style_sp.css、max-width:740px）でも同じJSが動くため、
 * is-hiddenが付いてもopacity:0にするCSS（上のmin-width:741pxブロック）が
 * 適用されず、.cl/.opが両方とも常に表示状態のまま重なって見えてしまう
 * （SPは.tx em{display:none}でテキスト自体は非表示のため、重なって見えるのは
 * .tx:after のアイコン部分）。
 * SPはテキストのクロスフェードが不要（そもそもテキストが非表示のため）なので、
 * 元の.toggle()と同じdisplay:noneでの排他表示に戻す。
 */
@media screen and (max-width: 740px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn .cl.is-hidden,
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn .op.is-hidden {
		display: none !important;
	}
}

/*
 * SP版でOPEN/CLOSEアイコンにマウスオーバーすると矢印が下にずれる不具合の原因は、
 * webroot/v2/css/common.css の汎用 `.btn:hover, a.btn:hover{animation:pulse 0.5s; ...}`
 * （汎用ボタンのパルス演出、@keyframes pulse は transform:scale3d(...)のみを指定）が、
 * FAQのOPEN/CLOSEラベル用要素（`<span class="btn">`、webroot/css/style_re.css/style.css側で
 * `position:absolute;top:50%;transform:translateY(-50%)`により中央揃えされている）と
 * クラス名「btn」が偶然衝突しているため。
 * ホバー中は`animation:pulse`がtransformの算出値を一時的に`scale3d(...)`へ置き換え、
 * 本来の`translateY(-50%)`による中央揃えが失われて矢印アイコンが下にずれて見える
 * （このパルス演出自体はFAQのOPEN/CLOSEラベルには全く不要な流用のため副作用のみ発生）。
 * 該当要素にのみ`animation:none`で打ち消し、他ページの本来の`.btn`パルス演出には影響しない
 * よう`#FrontFaq .item .question .btn`まで絞ったセレクタで上書きする。
 * PC/SPどちらの幅でも起こりうる不具合のためメディアクエリなしで常時適用する。
 */
[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content #FrontFaq .item .question .btn:hover {
	animation: none !important;
}
@media screen and (min-width: 768px) {
	[data-renewal-layout][data-renewal-mode="fit"] #main-content-core .legacy-front-content.users #top_area {
		padding-top: 32px !important;
	}
}