:root {
	--ss-cream: #ffe6b1;
	--ss-pink: #ffa9a9;
	--ss-gray-bg: #eeeeee;
	--ss-gray-outline: #e3e3e3;
	--ss-gray-text: #808080;
	--ss-badge-text: #231815;
	--ss-gap: 18px;
}

html {
	scroll-behavior: smooth;
	/* Site-wide home for horizontal-bleed containment (the .ss-main
	   triangle, .ss-company's squiggle, etc.). Kept here instead of on
	   each section because overflow-x:hidden on any element forces its
	   own overflow-y to compute as auto per spec -- even when overflow-y
	   is explicitly set to visible -- which turns that element into an
	   unwanted second vertical scroll container once its content is a
	   hair taller than its box. The root element's own overflow doesn't
	   have anywhere "outside" it to nest against, so it's the one place
	   this can live safely. */
	overflow-x: hidden;
	/* ハンバーガーメニューを開くとJS側でoverflow-yをhiddenにしてスクロール
	   バーを消すが、その瞬間だけ実効ビューポート幅(vw基準値)がスクロール
	   バー分広がり、サイト随所のvw基準clamp計算による配置がわずかにズレる
	   (メニュー開閉で背景が少し動いて見える不具合の原因)。スクロールバーの
	   表示有無に関わらず常に同じ幅を確保し、この幅変動自体を無くす。 */
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

@media (min-width: 768px) {
	/* the PC frame reference is 1920px wide; every px value inside a
	   min-width:768px block below is expressed as clamp(V*0.4px, (V/19.2)vw, Vpx)
	   so the whole desktop layout scales down proportionally as the
	   viewport narrows from 1920px to the 768px handoff to the SP layout,
	   instead of holding a flat px size and breaking/overflowing. */
	:root {
		--ss-gap: clamp(16px, 2.08vw, 40px);
	}
}

a {
	color: inherit;
	text-decoration: none;
}

/* WordPressコア側が<main>にmargin-top(24px)を自動付与している。通常時は
   直前のheader(position:sticky、文書内配置)の下端とこのmarginが相殺され
   ちょうど24pxの隙間に見えるが、ハンバーガーメニューを開いた際にmain.jsが
   <main>へpadding-topを足すと、親(<main>)に非ゼロのpaddingが生まれて
   このmarginの相殺(子から親を飛び越えての相殺)が効かなくなり、24px分
   余計に下がって見えてしまう(マージン相殺の仕様による副作用)。marginを
   使わず、相殺の起きないpaddingへ置き換えることで開閉どちらでも同じ
   見た目になるようにする。main.jsのopenMenu側もこの24pxを加味している。 */
main {
	margin-top: 0;
	padding-top: 24px;
}

/* ---------- Header ---------- */
/* position:sticky is set on the auto-generated wp-block-template-part
   wrapper, not .ss-header itself: that wrapper is .ss-header's direct
   containing block, and since it hugs .ss-header at an identical height,
   sticky positioning on .ss-header alone has no room to stick and the
   header just scrolls away with the page. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* メニューを開く処理(main.jsのopenMenu)はページ裏側のスクロールを止める
   ためdocumentElement/bodyのoverflowをhiddenにしているが、スクロール済み
   の状態でこれを行うと、position:stickyのヘッダーがその瞬間に「固定中」
   から通常の文書内配置に戻り、スクロール済み分だけ画面外へ消えてしまう。
   メニュー表示中はstickyの計算に頼らず、強制的に画面最上部へ固定する
   ことで回避する。.ss-menu(z-index:100000)より確実に上に出す必要がある
   ため、z-indexも引き上げている(ヘッダーがメニューの陰に隠れないように)。
   なお、position:fixedへの切り替えでヘッダーが文書の流れから外れる分、
   後に続く<main>が詰めて上にずれてしまうため、main.jsのopenMenu側で
   その高さぶんのpadding-topを<main>に足して穴埋めしている(marginだと
   隣接する要素のマージンと相殺されて意図した分だけ効かないことがある
   ため、相殺の起きないpaddingを使っている)。 */
body.ss-menu-is-open header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100002;
}

.ss-header {
	background: rgba(255, 255, 255, 0.5);
	padding: 16px var(--ss-gap) !important;
}

@media (min-width: 768px) {
	.ss-header {
		/* the header reference frame is 1920px wide: logo starts at x=170 (8.854%),
		   hamburger's right edge sits at x=1680 (87.5%). 単純な%指定だと768px幅
		   でも8.854%/12.5%がそのまま適用され68px/96pxとなり、SP側の--ss-gap
		   (18px)から一気に跳ね上がって見えるため、768px→18px/18px、
		   1920px→170px/240px(Figma実測値)を線形に繋ぐ計算式にしている。 */
		padding-left: clamp(18px, calc(13.1944vw - 83.333px), 170px) !important;
		padding-right: clamp(18px, calc(19.2708vw - 130px), 240px) !important;
	}
}

.ss-header__brand {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	text-decoration: none;
}

.ss-header__logo {
	margin: 0;
}

.ss-header__logo img {
	width: 160px;
	height: auto;
}

.ss-header__name {
	font-size: 14px;
	letter-spacing: 0.1em;
	font-weight: 500;
	margin: 0;
}

@media (min-width: 768px) {
	/* Reference frame: logo width 240px, company-name font-size 20px.
	   ロゴ画像は画面幅が狭まっても縮めず、常に240px固定で表示する。 */
	.ss-header__logo img {
		width: 240px;
	}

	.ss-header__name {
		font-size: 20px;
	}
}

/* ---------- ハンバーガーメニュー ---------- */
/* 書き出し済みの実アセット(ハンバーガー.svg / ハンバーガークローズ.svg)を
   そのまま使用。どちらも同じ82x42のviewBoxで作られているので、ボタンの
   大きさを揃えれば見た目もぴったり一致する。
   Figma実測: ×アイコンの位置はヘッダーのハンバーガーアイコンの位置と
   画面上で完全に一致している(PC版、x=1600〜1680pxで同一)。そのため別の
   ボタンを別の場所に重ねて位置合わせするのではなく、同じボタン1つの中で
   アイコンだけ開閉状態に応じて差し替える設計にしている(メニューパネル側に
   あった別の×ボタンは廃止)。
   またメニューを開く際、main.jsのopenMenuがこのボタン自身の座標を実測し
   position:fixedで固定する(pinToggleInPlace)。スクロール済みの状態で
   メニューを開くと、ヘッダーのposition:stickyがoverflow:hiddenの影響で
   「固定中」の状態を保てず、ヘッダーごと画面外へ戻ってしまうことがある
   ため。ヘッダー側のレイアウトを変更して対処すると、今度はヘッダーが
   文書の流れから外れて<main>が詰めて上にずれる副作用が出たため、
   ヘッダーには一切触れず、ボタン単体だけをその場に固定する方式にした。 */
.ss-menu-toggle {
	display: block;
	position: relative;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	/* SP実測値(Figma): ハンバーガーの実アイコンサイズは40x20px。開閉で
	   アイコン自体の寸法がわずかに異なる(×は35.952x17.535px)ため、ボタンの
	   当たり判定はハンバーガー側の40x20pxを基準にし、各アイコンは自身の
	   実寸のまま中央配置する(下の.ss-menu-toggle__icon--sp参照)。 */
	width: 40px;
	height: 20px;
	flex: 0 0 auto;
	/* .ss-menu(z-index:100000)の上に常に出し、メニュー展開中も
	   クリックできる状態を保つ。 */
	z-index: 100001;
}

.ss-menu-toggle__icon {
	display: block;
	position: absolute;
}

/* SP: PC版(82x42)を縮小表示すると線が中途半端な縮小率でぼやける/太さが
   不揃いになる問題があったため、Figmaから別途SP専用に書き出された小寸の
   アセット(menu-hamburger-sp.svg/menu-close-sp.svg、ほぼ等倍で描画される
   よう最初から小さく作られている)を使い、CSSでは拡大縮小せず実寸(SVG自身の
   width/height属性)のまま中央配置する。 */
.ss-menu-toggle__icon--sp {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ss-menu-toggle__icon--pc {
	inset: 0;
	width: 100%;
	height: 100%;
}

.ss-menu-toggle[aria-expanded="true"] .ss-menu-toggle__icon--open {
	display: none;
}

.ss-menu-toggle[aria-expanded="false"] .ss-menu-toggle__icon--close {
	display: none;
}

.ss-menu-toggle__icon--pc {
	display: none;
}

@media (min-width: 768px) {
	.ss-menu-toggle__icon--sp {
		display: none;
	}

	.ss-menu-toggle__icon--pc {
		display: block;
	}

	/* Figma実測のPC基準サイズ(80x40px)で固定し、82x42アセットの縮小によるぼやけを
	   解消する。以前はclamp(56px,4.17vw,80px)で画面幅に応じて縮めており、
	   その状態で固定化を試した際は「狭いPC幅で×が大きく見える/ホームとの
	   間隔が詰まる」という問題が出て一旦元に戻した。だが、その後パネル自体
	   (.ss-menu__panel)の余白・幅もウィンドウ幅で変えない固定仕様に変更した
	   ため、周りのパネル側も常に同じ大きさになっており、ボタンだけ固定しても
	   当時ほど窮屈には見えないはず。 */
	.ss-menu-toggle {
		width: 80px;
		height: 40px;
	}
}

/* 全画面メニュー。SPは丸ごと画面全体をクリーム色パネルが占め、
   PCは右側だけ870px(=45.3125vw)のパネルで、左側は半透明の白ごしに
   元のページがうっすら見える。 */
.ss-menu {
	position: fixed;
	inset: 0;
	/* WordPressの管理バー(#wpadminbar)はz-index:99999の固定表示なので、
	   ログイン中に少しスクロールした状態でメニューを開くと、それより低い
	   z-indexでは管理バーの下に隠れてしまう(特に×ボタンがその帯の高さと
	   重なる位置に来た場合)。管理バーより確実に上に出るようにしている。 */
	z-index: 100000;
	background: rgba(255, 255, 255, 0.5);
}

.ss-menu[hidden] {
	display: none;
}

.ss-menu__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: 100%;
	background: #fff3df;
	/* overflow-yだけ指定すると、CSS仕様上overflow-xが自動的に"auto"に
	   なり、横方向を意図せずクリップ/スクロールしてしまうことがあるため、
	   両軸を明示的に揃えている。 */
	overflow: auto;
	/* SPはメニュー本体がtop:188px/left:49pxから開始。 */
	padding: 188px 49px 60px;
	box-sizing: border-box;
}

/* メニューパネルの中身(この下4ブロック)だけ、サイト全体のSP/PC境界
   (768px)より早い600pxでPC表示に切り替える。768pxのままだと、SPスタイル
   (左寄せ275px固定の細い列)のまま767pxまで引っ張られてしまい、768px手前の
   幅(タブレット縦持ち等)でパネル右側に大きな空白ができてバランスが悪く
   見えるため。ヘッダー側のハンバーガーボタン自体は他のヘッダー要素と
   揃えて768pxのまま切り替える。 */
@media (min-width: 600px) {
	.ss-menu__panel {
		/* PC表示中はウィンドウ幅によってメニューの大きさを変えない方針に
		   したため、Figma実測(1920px基準)の固定値にする。.ss-menuは
		   position:fixed; inset:0 なので、万一870pxがビューポート幅を
		   超える極端に狭いケースでもmin()で実画面幅に収める。 */
		width: min(870px, 100%);
		padding: 201px 110px 60px;
	}
}

/* SP実測: メニュー列自体もパネルの余白を除いた幅いっぱいではなく274px
   固定("SP_menu_W375px_最新"フレームの実測値、下線の275pxとほぼ同じ)。
   これが無いと、行自体(width:100%)は画面幅に応じて伸び続けるのに下線は
   275px固定のままなので、事業案内/採用情報の開閉アイコン(chevron、行の
   右端に配置)が下線の右端より右にはみ出してしまう(375pxより広いSP幅で
   顕著)。狭い端末幅(274px未満)では画面に収まるよう、max-widthで上限に
   とどめ、widthそのものは下限を付けない。 */
.ss-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 25px;
	max-width: 275px;
}

@media (min-width: 600px) {
	.ss-menu__nav {
		gap: 39px;
		/* PC表示中はウィンドウ幅によってメニューの大きさを変えない方針に
		   したため、Figma実測(1920px基準、"PC_menu_W1920px_最新"フレーム)の
		   350px固定にする。以前はclamp(280px,18.23vw,350px)で画面幅に応じて
		   縮めていた。 */
		width: 350px;
		/* SP用のmax-width:275pxがそのままだとPCの350pxを上書きして
		   しまうため解除する。 */
		max-width: none;
	}
}

.ss-menu__link,
.ss-menu__accordion-toggle {
	display: flex;
	position: relative;
	width: 100%;
	padding: 0 0 10px;
	border: none;
	background: none;
	font-size: 16px;
	font-family: inherit;
	color: #000;
	text-align: left;
	cursor: pointer;
	text-decoration: none;
}

.ss-menu__accordion-toggle {
	justify-content: space-between;
	align-items: center;
}

/* SP実測: 下線は行全体の幅(width:100%、項目によって249px〜293pxとバラバラ)
   には連動させず、常に275px固定(Figma "SP_menu_W375px_最新"フレームの
   実測値、どの項目も下線の右端がx=324pxで揃っている)。そのため
   border-bottomではなく、行の幅から独立した::afterの固定幅ラインにしている。 */
.ss-menu__link::after,
.ss-menu__accordion-toggle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 275px;
	height: 2px;
	background: #000;
}

/* ホバー仕様: 下線のあるリンクは太字になり下線が赤くなる、
   下線のないリンクは文字が赤くなる。開閉ボタン（.ss-menu__accordion-toggle）
   はリンクではないので対象外。 */
.ss-menu__link::after {
	transition: background-color 0.2s ease;
}

.ss-menu__link:hover {
	font-weight: 700;
}

.ss-menu__link:hover::after {
	background-color: #ff0204;
}

@media (min-width: 600px) {
	.ss-menu__link,
	.ss-menu__accordion-toggle {
		font-size: 20px;
	}

	/* PC表示は従来通り行幅いっぱいの下線のまま(Figma実測値はSP版のみ
	   確認済みのため、PC側はこれまでの挙動を維持)。 */
	.ss-menu__link::after,
	.ss-menu__accordion-toggle::after {
		width: 100%;
	}
}

.ss-menu__chevron {
	width: 14px;
	height: auto;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.ss-menu__accordion-toggle[aria-expanded="true"] .ss-menu__chevron {
	transform: rotate(0deg);
}

.ss-menu__accordion-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 25px 0 0 20px;
}

.ss-menu__accordion-panel[hidden] {
	display: none;
}

.ss-menu__subhead {
	margin: 0;
	font-size: 14px;
	color: #000;
}

.ss-menu__sublink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	font-size: 14px;
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ss-menu__sublink:hover {
	color: #ff0204;
}

.ss-menu__sublink--indent {
	padding-left: 8px;
}

@media (min-width: 600px) {
	.ss-menu__subhead,
	.ss-menu__sublink {
		font-size: 16px;
	}
}

/* ---------- Footer ---------- */
.ss-footer {
	background: var(--ss-gray-bg);
	padding: 60px var(--ss-gap) 30px !important;
	font-size: 14px;
}

/* WP coreが「会社情報」列内の各ブロック(ロゴ、本社/石橋オフィス、区切り線
   +電話番号、認証バッジ)の間に自動でmargin-block-start(既定の
   block-gap、約2em)を足しており、下の.ss-footer__office/.ss-footer__divider
   自体のmargin-bottomと二重に効いて電話番号の上の余白が想定より
   かなり大きくなっていた。他ページ(company.css等)と同じく、この列の
   直接の子要素については自前のmarginだけで制御する。 */
.ss-footer__company > * {
	margin-block-start: 0;
}

/* 同じWP core block-gapの問題が、.ss-footer__office(住所+Google Map)の
   中の子ブロック（見出し／住所／Google Mapリンク）の間にも効いており、
   .ss-footer__office-addressのmargin-bottomと二重になってGoogle Mapと
   その上の住所との間隔が想定より広くなっていた。SP/PC共通の問題。 */
.ss-footer__office > * {
	margin-block-start: 0;
}

.ss-footer__columns.wp-block-columns {
	gap: 20px;
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	/* 左側(会社情報)の文字サイズ等は768px以上で常に固定値のため、
	   WP coreの既定(左右均等に伸縮)のままだと、狭いPC幅で左側の幅が
	   実際の文字量より狭くなり、住所等が意図せず折り返してしまう。
	   左側はFigma実測(1920px基準)の501px固定・縮めない指定にし、
	   収まりきらない分は右側(SITE MAP)側を下に折り返す。 */
	/* WP coreがmin-width:782pxで flex-wrap:nowrap !important を
	   強制してくる(wp-includes/blocks/columns/style.css)ため、
	   こちらも !important で上書きする必要がある。 */
	.ss-footer__columns.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ss-footer__columns.wp-block-columns > .ss-footer__company {
		flex: 0 0 501px !important;
	}

	.ss-footer__columns.wp-block-columns > .ss-footer__sitemap {
		flex: 1 1 400px !important;
	}
}

.ss-footer__brand {
	/* The SP footer stacks the wordmark logo above the company name
	   (same arrangement as desktop, just smaller), not side-by-side. */
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	margin-bottom: 24px;
}

.ss-footer__logo img {
	width: 148px;
	/* imgはデフォルトdisplay:inlineのため、ベースライン基準の行送り分の
	   余白が画像の下に隠れて乗り、flexのgap指定より間隔が広く見えてしまう。
	   それを無くすための指定。 */
	display: block;
}

.ss-footer__brand-name {
	font-size: 15px;
	letter-spacing: 0.1em;
	margin: 0;
	/* サイト全体のデフォルト行高(theme.jsonでline-height:2)のままだと
	   行box内でテキストが上下中央寄せされ、見た目上ロゴとの間隔が
	   実際より広がってしまう。Figma実測(28px/20px=1.4)に合わせる。 */
	line-height: 1.4;
}

.ss-footer__office {
	margin-bottom: 20px;
}

.ss-footer__office-title {
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 8px;
}

.ss-footer__office-address {
	margin: 0 0 4px;
	line-height: 1.8;
}

.ss-footer__office-links {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 0;
}

.ss-footer__office-links a,
.ss-footer__tel-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ss-footer__logo {
	display: block;
}

.ss-footer__divider {
	/* Top spacing already comes from .ss-footer__office's own margin-bottom
	   above -- adding margin-top here on top of that doubled the gap. */
	height: 1px;
	background: #000;
	margin: 0 0 20px;
}

.ss-footer__tel-link {
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ss-footer__map-link {
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ss-footer__map-link:hover,
.ss-footer__tel-link:hover {
	color: #ff0204;
	font-weight: 700;
}

.ss-footer__badge {
	/* The SP layout moves this badge to the very end of the footer
	   (after SITE MAP, before the copyright line) instead of stacking it
	   under the office info -- so the in-column instance is hidden here
	   and a separate .ss-footer__badge--mobile copy after the columns
	   block (see below) takes its place; desktop restores this one.
	   !important beats WP core's same-specificity .is-layout-flex rule. */
	display: none !important;
	gap: 10px;
	margin-top: 28px;
	align-items: center;
}

.ss-footer__badge-img img {
	width: 70px;
}

.ss-footer__badge-text {
	font-size: 12px;
	color: var(--ss-badge-text);
	margin: 0;
}

.ss-footer__badge--mobile {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin: 0 auto;
	margin-block-start: 37px !important;
}

.ss-footer__badge--mobile .ss-footer__badge-img img {
	width: 234px;
}

.ss-footer__badge--mobile .ss-footer__badge-text {
	margin-bottom: 65px;
}

.ss-footer__tel-icon {
	width: 22px;
	height: 22px;
}

/* 左カラムの「【本社】」と右カラムの「ホーム」の高さを合わせるため、
   右カラム全体を少し下げる。 */
.ss-footer__sitemap {
	padding-top: 30px;
}

/* .ss-footer__companyと同じWP core block-gap(既定でmargin-block-start
   約2em)の問題が、.ss-footer__sitemap-title直後の.ss-footer__sitemap
   -columnsにも効いており、SITE MAPのmargin-bottomをいくら詰めても
   その分の余白が隠れて見た目に反映されていなかった。 */
.ss-footer__sitemap > * {
	margin-block-start: 0;
}

.ss-footer__sitemap-title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: #fff;
	margin-bottom: 3px;
	/* サイト全体のデフォルト行高(theme.jsonでline-height:2)のままだと、
	   行box内でテキストが上下中央寄せされ、文字の上に見えない余白が
	   乗ってしまう。Figmaのテキストスタイル実測値(leading-1.25)に合わせる。 */
	line-height: 1.25;
}

.ss-footer__sitemap-title::after {
	content: "";
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: #fff;
}

.ss-footer__sitemap-columns.wp-block-columns {
	/* row-gap: vertical spacing once the row wraps to a stacked single
	   column (also the SP gap, which always stacks). column-gap: only
	   applies between items sharing the same row, so it's what actually
	   separates 主(main)/副(sub) side-by-side on PC -- and it naturally
	   contributes nothing once they wrap, so お問い合わせ lands flush
	   under ホーム with no leftover indent (see .ss-footer__sitemap-col
	   --sub below for why a margin-left approach couldn't do this). */
	row-gap: 16px;
	column-gap: clamp(32px, 10%, 60px);
	/* WP core forces flex-wrap:nowrap!important on .wp-block-columns at
	   >=782px (wp-includes/blocks/columns/style.css). Our sub column
	   (お問い合わせ等) is deliberately fixed-width/nowrap so its longest
	   line never wraps internally, but with nowrap on the row itself it
	   had nowhere to go but overflow past the viewport's right edge once
	   the PC width narrowed toward ~900px, causing page-wide horizontal
	   scroll. Re-allow the row to wrap so the sub column drops to its own
	   line instead of overflowing when space runs out. */
	flex-wrap: wrap !important;
}

.ss-footer__nav-list {
	/* WordPress's core list-block CSS (ul.wp-block-list) adds its own
	   margin-bottom at a higher specificity than a single class, which
	   otherwise leaks extra space after this list (e.g. between 会社案内
	   and the 事業案内 group that follows it) beyond the item padding below. */
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.ss-footer__nav-list a {
	display: block;
	padding: 10px 0;
	font-weight: 700;
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ss-footer__nav-list--small a {
	font-weight: 400;
	font-size: 13px;
}

.ss-footer__nav-group {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 12px;
	margin: 0;
}

.ss-footer__nav-group-label {
	display: block;
	flex-shrink: 0;
	padding: 10px 0;
	font-weight: 700;
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ss-footer__nav-sublist {
	flex: 1;
	min-width: 0;
}

/* 「業務内容/業務実績」(リンク)と「中途採用/経験者採用/未経験者採用」
   (テキストのみ表示のss-footer__nav-heading)が同じ子リストの中に混在
   していても、行間・余白が完全に同じになるようそろえる。 */
.ss-footer__nav-sublist a,
.ss-footer__nav-sublist .ss-footer__nav-heading {
	margin: 0;
	line-height: 1.4;
}

.ss-footer__external-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}

.ss-footer__nav-list a:hover,
.ss-footer__nav-group-label:hover {
	color: #ff0204;
}

/* 見出しリンクは横並び(ラベル＋字下げした子リスト)では
   なく、ラベルの下に子リストを積む縦積みになっており、各トップレベル
   項目(子を持つものも持たないものも)の下に区切り線が入る。子項目自体
   には線が付かない。PCでは区切り線が無いので、この見た目はSP専用。 */
@media (max-width: 767px) {
	.ss-footer__nav-group {
		flex-direction: column;
		/* ラベル・子リストとも列いっぱいの幅にする。下のグループ用の線を
		   ラベル側で幅100%引くのに必要（flex-start だと文字幅ぶんしか
		   線が伸びない）。 */
		align-items: stretch;
		gap: 0;
	}

	.ss-footer__nav-list:not(.ss-footer__nav-sublist) > li {
		border-bottom: 2px solid var(--ss-gray-outline);
	}

	/* 事業案内・採用情報のような子を持つ項目は、<li>自体がラベル＋子リスト
	   をまとめて包んでいる。<li>に線を引くと、子リストの一番下（未経験者
	   採用など）の下に線が来てしまい、本来ラベル直下に必要な線が消えて
	   見える。<li>側の線は消し、ラベル側に付け替える。 */
	.ss-footer__nav-list:not(.ss-footer__nav-sublist) > li.ss-footer__nav-group {
		border-bottom: none;
	}

	.ss-footer__nav-group > .ss-footer__nav-group-label,
	.ss-footer__nav-group > .ss-footer__nav-heading {
		border-bottom: 2px solid var(--ss-gray-outline);
	}

	/* 「ホーム」等のテキストと、その真下の区切り線との間隔を詰める
	   （上の行との間隔はpadding-topのまま維持し、下だけ詰める）。 */
	.ss-footer__nav-list:not(.ss-footer__nav-sublist) > li > a,
	.ss-footer__nav-list:not(.ss-footer__nav-sublist) > li > .ss-footer__nav-heading,
	.ss-footer__nav-group > .ss-footer__nav-group-label,
	.ss-footer__nav-group > .ss-footer__nav-heading {
		padding-bottom: 4px;
	}

	/* 業務内容・業務実績のような子項目は親ラベルより
	   一段字下げされている。 */
	.ss-footer__nav-sublist {
		padding-left: 16px;
	}

	/* 電話アイコンはPC版と同じ比率で、現状の22pxより
	   一回り大きい。 */
	.ss-footer__tel-icon {
		width: 28px;
		height: 28px;
	}
}

/* リンク先未定の項目をCSSクラス「ss-heading」でテキストのみ表示にした
   場合の見た目。リンクの.ss-footer__nav-list a / --small aと同じ文字組みだが、
   クリックできないためhover色変化やtext-decorationは付けない。 */
.ss-footer__nav-heading {
	display: block;
	/* .ss-footer__nav-group（display:flexの行）の中で使われた場合に
	   縮まないようにする。flexコンテナ外では単に無視される。 */
	flex-shrink: 0;
	padding: 10px 0;
	font-weight: 700;
	color: #000;
}

.ss-footer__nav-list--small .ss-footer__nav-heading {
	font-weight: 400;
	font-size: 13px;
}

.ss-footer__copyright {
	font-size: 12px;
	letter-spacing: 0.05em;
	color: #333;
	margin: 0;
}

/* ---------- Footer: PC (768px以上) ----------
   フッターはサイトの他の箇所と違い、文字サイズ・アイコンサイズ・内部の
   間隔は768px以上であれば常にFigma実測値(1920px基準)の固定値とし、
   画面幅に応じて比例縮小させない方針にしている(「内容は固定、外側の
   余白だけが縮む」方式)。実際に縮むのは.ss-footer自体の左右padding
   (var(--ss-gap)、サイト共通)のみ。 */
@media (min-width: 768px) {
	/* Figma実測: Footer_最新(1920px基準)フレーム上端から「左」列
	   (会社情報)上端までtop-[87px]。現状の60pxは実測に基づかない値
	   だったため、Figmaに合わせて87pxに修正。 */
	.ss-footer {
		padding-top: 87px !important;
	}

	.ss-footer__sitemap-title {
		font-size: 30px;
		/* 「ホーム」(最初のSITE MAP項目)の文字開始位置を、左側「【本社】」
		   の文字開始位置に合わせるための値(Figmaのスクリーンショットの
		   ピクセル解析で、左右とも文字の間隔が約43-44pxと判明したため、
		   その実測値を踏まえて再計算)。
		   左側: ロゴ高42px + gap15.4px + 会社名行box27.9px + margin-bottom43px
		     = 128.3px (列上端から【本社】box上端まで)
		   右側: padding-top57.4px + タイトル行box37.5px(line-height:1.25) +
		     margin-bottom + liのpadding-top6px = 128.3pxになるよう逆算
		     → margin-bottom27.4px */
		margin-bottom: 27.4px;
	}

	.ss-footer__sitemap {
		/* 左側「株式会社ソリッドスター」の開始位置(ロゴ高42px + gap15.4px
		   =57.4px、列上端から)に、SITE MAPの文字開始位置をそろえる。
		   Figmaデータ上は「左」列と「右」列の上端が87px/95pxとズレており
		   49pxのままだとその差がそのまま残っていたため修正。 */
		padding-top: 57.4px;
	}

	.ss-footer__brand {
		flex-direction: column;
		align-items: flex-start;
		/* Figma実測(1920px基準)の固定値。768px以上は幅によらず常にこの値。 */
		gap: 15.4px;
		/* 枠のtop/height数値だけから計算した24.6pxでは、Figma上の実際の
		   文字(インク)の余白を再現できていなかった。Figmaのスクリーン
		   ショットをピクセル解析し、「株式会社ソリッドスター」の文字下端
		   から「【本社】」の文字上端までの実際の見た目の間隔(43px)を
		   直接測定して採用。 */
		margin-bottom: 43px;
	}

	/* ロゴ画像は画面幅が狭まっても縮めず、常に260px固定で表示する。 */
	.ss-footer__logo img {
		width: 260px;
	}

	.ss-footer__badge {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		width: fit-content;
		gap: 8px;
		margin-top: 52px;
	}

	.ss-footer__badge--mobile {
		display: none !important;
	}

	.ss-footer__badge-img img {
		width: 234px;
	}

	.ss-footer__tel-icon {
		width: 30px;
		height: 30px;
	}

	.ss-footer__brand-name {
		/* Figma実測: 20pxではなく18px、line-heightは1.4ではなく1.55。 */
		font-size: 18px;
		line-height: 1.55;
	}

	.ss-footer__office-title {
		font-size: 18px;
		/* Figma実測: タイトル(left-40px)は住所(left-50px)より10px左にずれて
		   配置されている。全角括弧「【」の字形自体に左側の余白(サイド
		   ベアリング)があるため、ボックスの左端をそろえただけだと見た目の
		   文字開始位置が住所より右にずれて(=一段下がって)見えてしまう。 */
		margin-left: -10px;
	}

	.ss-footer__office-address {
		font-size: 16px;
	}

	.ss-footer__office-links a,
	.ss-footer__tel-link {
		font-size: 17px;
	}

	.ss-footer__divider {
		margin: 0 0 20px;
		/* 線の幅は住所ブロックと同じ400px(1920px基準)まで。
		   幅指定がないとこの列の幅いっぱいに広がり、想定よりかなり
		   長い線になっていた（SPでは列の幅自体がほぼ400px以下なので
		   このmax-widthは実質PCだけに効く）。 */
		max-width: 400px;
	}

	.ss-footer__badge-text {
		font-size: 15px;
	}

	.ss-footer__nav-list a,
	.ss-footer__nav-group-label,
	.ss-footer__nav-heading {
		font-size: 18px;
	}

	.ss-footer__nav-list--small a,
	.ss-footer__nav-list--small .ss-footer__nav-heading {
		font-size: 16px;
	}

	/* 「ホーム」「会社案内」等トップレベル項目の間隔は
	   ベースのpadding:10px 0(SP由来)ではPCで広すぎる。 */
	.ss-footer__nav-list:not(.ss-footer__nav-sublist) > li > a,
	.ss-footer__nav-list:not(.ss-footer__nav-sublist) > li > .ss-footer__nav-group-label,
	.ss-footer__nav-list:not(.ss-footer__nav-sublist) > li > .ss-footer__nav-heading {
		padding: 6px 0;
	}

	.ss-footer__nav-sublist {
		/* Guarantees the longest line (リクナビ／インターン＆キャリア) never
		   wraps -- the sublist is sized to its own content instead of being
		   allowed to shrink, so the sub column (お問い合わせ 等) is the one
		   that gives up space and shifts right. */
		flex: 0 0 auto;
	}

	.ss-footer__nav-sublist a,
	.ss-footer__nav-sublist .ss-footer__nav-heading {
		/* 「テキストのみ表示」に切り替えた項目(中途採用等)は
		   .ss-footer__nav-headingのpadding:10px 0が生きたままだと、
		   このpadding:0で詰めたリンク(業務内容等)より20px背が高くなり、
		   項目間隔がそこだけ広がって見えていた（左右で高さをそろえる
		   ためpadding:0を基準にし、詰まりすぎないよう少しだけ広げる）。 */
		padding: 3px 0;
		white-space: nowrap;
	}

	.ss-footer__sitemap-col--main {
		/* Give the main column all the space it needs -- its longest line
		   (リクナビ／インターン＆キャリア) must stay on one line -- and let
		   the sub column size to its own content and hug the right edge,
		   instead of splitting the row by a fixed ratio. flex-shrink:0
		   matters here too: without it the column's own box could be
		   squeezed narrower than that unwrapped line, so the line would
		   visually overflow past the column's right edge and the sub
		   column (positioned from that shrunk box, not the overflow)
		   would start to its left instead of after it.
		   !important: WP core's columns CSS forces flex-basis:0;flex-grow:1
		   on every .wp-block-column at this same breakpoint via a higher-
		   specificity selector (.wp-block-columns:not(.is-not-stacked-on-mobile)
		   > .wp-block-column), which was silently overriding this rule and
		   making both columns equal width regardless of what was set here. */
		flex: 0 0 auto !important;
	}

	.ss-footer__sitemap-col--sub {
		/* 1920px基準では左列との間隔が約137pxだが、それは
		   7.13vw(=ブラウザビューポート全体基準)で計算した値だった。実際
		   にはこの行の親(.ss-footer__sitemap)がページ全体のブロック幅制限
		   (alignwide相当)でビューポートより先に頭打ちになり、1184px以上
		   では530px前後で固定される。vwはビューポート基準のまま伸び続ける
		   ため、広い画面ほど「実際に使える幅」を大きく超える余白を要求し
		   続け、常にflex-wrapで折り返される(＝137pxの余白が可視化された
		   ことは一度もなかった)原因になっていた。間隔は margin-left では
		   なく親のcolumn-gapで持たせるようにした(下記参照)。折り返された
		   (縦積みの)ときにmargin-leftだと余白が残って「お問い合わせ」が
		   「ホーム」と揃わなくなるが、column-gapは同じ行の要素間にしか
		   効かないため、折り返し後は自動でmargin-left:0相当になる。 */
		flex: 0 0 auto !important;
	}

	/* 768〜781pxの狭い帯域だけ、WP coreが.wp-block-columns:not(.is-not-
	   stacked-on-mobile) > .wp-block-column にflex-basis:100%!important
	   を強制する(:not()の引数もクラス扱いなので詳細度0,3,0)。上の単一
	   クラス指定(0,1,0)は!important同士でも詳細度で負けてしまい、この
	   帯域だけサブ列が100%幅に戻って右にはみ出す(横スクロールの原因に
	   なる)。詳細度0,4,0の指定で確実に上書きする。 */
	.ss-footer__sitemap-columns.wp-block-columns > .wp-block-column.ss-footer__sitemap-col--main {
		flex: 0 0 auto !important;
	}

	.ss-footer__sitemap-columns.wp-block-columns > .wp-block-column.ss-footer__sitemap-col--sub {
		flex: 0 0 auto !important;
	}

	.ss-footer__sitemap-col--sub .ss-footer__nav-list a {
		padding: 6px 0;
		white-space: nowrap;
	}
}

/* ---------- Back to top ---------- */
/* 他のPC要素と同じclamp(V*0.4px, (V/19.2)vw, Vpx)の規約で、768〜1920px
   の間はウィンドウ幅に応じてサイズ・位置が連続的に変化するようにする
   （以前は768px以上なら常に固定サイズ/位置で、幅を変えても追従しなかった）。 */
.ss-to-top {
	position: fixed;
	right: clamp(40px, 5.21vw, 100px);
	bottom: clamp(52px, 6.77vw, 130px);
	width: clamp(24px, 3.13vw, 60px);
	height: clamp(24px, 3.13vw, 60px);
	display: block;
	z-index: 90;
}

.ss-to-top img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ss-to-top__ring {
	animation: ss-spin 12s linear infinite;
	transition: opacity 0.35s ease;
}

/* 60x60キャンバス基準: 矢印はtop 38.32% / left 26.37% /
   幅47.27%・高さ23.63%。
   width/height:auto + 4方向instetの組み合わせは、<img>が置換要素のため
   auto側は画像の実サイズ(px)がそのまま使われてしまい、ボタン本体を
   60px→33pxに縮小してもこの矢印だけ実寸のまま縮まらずズレていた。
   width/height を%指定にし、right/bottomは使わずtop/leftだけで位置決め
   することで、ボタンのサイズに関わらず矢印も相似形で追従するようにした。 */
.ss-to-top__arrow {
	width: 47.27% !important;
	height: 23.63% !important;
	top: 38.32% !important;
	left: 26.37% !important;
	right: auto !important;
	bottom: auto !important;
}

/* ホバー時のバリアント（白背景→黒、矢印→白）を、新しい画像を用意せず
   既存のSVGにフィルターをかけて再現している。背景円は白色なので
   invert(1)だけで黒に反転できるが、矢印は中間グレー(#B5B5B6)なので
   invert(1)だけでは白にならず、先にbrightness(0)で一旦黒く潰してから
   反転させることで確実に白にしている。 */
.ss-to-top__bg {
	transition: filter 0.35s ease;
}

.ss-to-top__arrow {
	transition: filter 0.35s ease, transform 0.35s ease;
}

.ss-to-top:hover .ss-to-top__bg {
	filter: invert(1);
}

.ss-to-top:hover .ss-to-top__ring {
	opacity: 0;
}

.ss-to-top:hover .ss-to-top__arrow {
	filter: brightness(0) invert(1);
	/* 60x60キャンバスで矢印のY座標が22.99px→12.99pxへ
	   (10px上に移動、サイズは不変)。ボタン本体が768〜1920pxで24〜60pxに
	   連続的にスケールするので、この移動量も同じ比率で追従させる。 */
	transform: translateY(clamp(-10px, -0.5208vw, -4px));
}

@keyframes ss-spin {
	to {
		transform: rotate(360deg);
	}
}

/* SP版は33x33px。
   .ss-to-top__arrow は%指定のため、ボタン本体のサイズに合わせて自動で
   縮小される（別途上書き不要）。ホバー時のtranslateYだけは60px基準の
   固定px値なので、33/60の比率で縮小して合わせる。 */
@media (max-width: 767px) {
	.ss-to-top {
		/* SP実測: x=326, width=33, ページ幅375
		   → 右端からの余白 = 375-(326+33) = 16px。 */
		right: 16px;
		bottom: 70px;
		width: 33px;
		height: 33px;
	}

	.ss-to-top:hover .ss-to-top__arrow {
		transform: translateY(-5.5px);
	}
}

/* トップへ戻るボタンは最初の1画面分はまだ戻る必要がないため隠しておき、
   2画面目にスクロールしてから（main.jsでscrollYが画面高さを超えた時点で
   .is-visibleを付与）フェードで表示する。 */
.ss-to-top {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.ss-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ============ スクロール出現アニメーション（サイト共通） ============ */
/* Elements already in view at page load still get this -- IntersectionObserver
   fires immediately for anything already intersecting when observe() is
   called, so they fade/slide in on load instead of waiting for a scroll that
   may never happen. */
.ss-reveal {
	opacity: 0;
	/* translate3d (not translateY) keeps this on the same GPU-composited
	   layer for the whole transition. A plain translateY can get promoted
	   to its own layer only while actively animating and demoted back to
	   normal painting the instant the transition ends -- that demotion
	   forces a repaint snapped to the device pixel grid, which on a
	   non-integer OS display scale (e.g. Windows 125%/150%) can land a
	   px or so off from where the GPU layer had it, reading as the
	   element hopping sideways right as the slide-in finishes. */
	transform: translate3d(0, 40px, 0);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

.ss-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.ss-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ss-to-top {
		transition: none;
	}
}

/* ============================================================
   デフォルトページテンプレート (templates/index.html) の左右余白
   (固定ページ→新規追加で作った通常ページ全般が対象。company/contact等の
   専用テンプレートは各ページの.ss-company__container等でこのvar(--ss-gap)を
   使っているが、こちらの汎用テンプレートには何も指定が無く、SPだと本文が
   画面端にぴったり付いてしまっていたため、同じ変数を当てて揃える。 */
.ss-page {
	padding: 0 var(--ss-gap);
	box-sizing: border-box;
}

/* ============================================================
   デフォルトページテンプレート (templates/index.html) の見出し
   (固定ページ→新規追加で作った通常ページ全般が対象。post-title/h2とも
   theme.json側にサイズ指定が無く、本文と同じくらいの大きさで表示されて
   いたため、プリセットの見出しサイズを明示的に当てている。 */
.wp-block-post-title {
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 24px;
}

/* h3(「一括設定」等、H2セクション内の小見出し)には付けず、H2(「アクセス設定」
   「エントリーシート」等の大きな区切り)だけに赤線を入れる。 */
.ss-page h2.wp-block-heading {
	font-size: clamp(1.2rem, 2.6vw, 1.6rem);
	font-weight: 700;
	margin-top: 8px;
	padding-top: 16px;
	/* assets/images/logo-footer.svg の「STAR」側下線(#E7211A)と同じ
	   SOLID STARのブランドレッド。エディタの「赤(ビビッド)」(#cf2e2e)とは
	   別の色なので、このロゴの色を直接指定している。 */
	border-top: 2px solid #e7211a;
}

/* ============================================================
   新卒採用 限定コンテンツ 認証フォーム
   (inc/legacy-lightning-shortcodes.php が出力するプレーンなHTMLに、
   お問い合わせフォーム(contact-form.css)と同じ配色・角丸・ボタンの
   ホバー挙動を合わせている。site-wide load: これらのフォームは
   固定ページ本文にショートコードとして貼るだけの通常ページで、
   business/company/service/contactのような専用テンプレートを
   持たないため、条件付き読み込みの対象にしにくく main.css に置く。 */
.ss-fresh-auth-form {
	max-width: 400px;
	margin: 0;
	padding: 40px 0 8px;
}

.ss-fresh-auth-form__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ss-fresh-auth-form__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: #eee;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 10px;
	padding: 0 16px;
	height: 44px;
	font-size: 14px;
	font-family: inherit;
	color: #000;
}

.ss-fresh-auth-form__input:focus {
	background-color: #fff;
	border: 1px solid #898989;
	outline: none;
	box-shadow: none;
}

.ss-fresh-auth-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: auto;
	min-width: 120px;
	height: 36px;
	background-color: #666;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	border: none;
	border-radius: 12px;
	padding: 0 20px;
	cursor: pointer;
}

.ss-fresh-auth-form__submit:hover {
	/* ダウンロードボタン(.ss-fresh-download-btn)・見出しの区切り線と同じ
	   SOLID STARロゴの「STAR」側下線(#E7211A)。 */
	background-color: #e7211a;
	color: #fff;
}

/* fresh-contents-selection-main のエントリーシートダウンロードボタン。
   お問い合わせフォームの送信ボタン(.wpforms-submit)・新卒採用限定コンテンツの
   認証送信ボタン(.ss-fresh-auth-form__submit)と同じ配色/形状に揃える。 */
.ss-fresh-download-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 160px;
	height: 40px;
	background-color: #666;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	border: none;
	border-radius: 12px;
	padding: 0 24px;
}

.ss-fresh-download-btn .wp-block-button__link:hover {
	/* 見出しの区切り線と同じ SOLID STARロゴの「STAR」側下線(#E7211A)。 */
	background-color: #e7211a;
	color: #fff;
}

/* 新卒採用 限定コンテンツ「設定・ログ確認」ページ用。一括設定/ID一覧/
   アクセスログの3つのtextareaはrows/colsだけで幅指定が無く、ブラウザの
   初期サイズ(colsの既定値20〜30文字ぶん)のまま表示されていたため、
   ページ内で共通して幅いっぱいに広げる。 */
.ss-fresh-admin-textarea {
	display: block;
	width: 100%;
	max-width: 900px;
	box-sizing: border-box;
	background-color: #eee;
	border: none;
	border-radius: 10px;
	padding: 16px;
	font-size: 13px;
	font-family: monospace;
	line-height: 1.6;
	color: #000;
	resize: vertical;
}

.ss-fresh-admin-textarea:focus {
	background-color: #fff;
	border: 1px solid #898989;
	outline: none;
}

.ss-fresh-admin-textarea[disabled] {
	background-color: #f5f5f5;
	color: #666;
}

.ss-fresh-admin-form {
	max-width: 900px;
}

.ss-fresh-admin-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	min-width: 120px;
	height: 36px;
	background-color: #666;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	padding: 0 20px;
	cursor: pointer;
}

.ss-fresh-admin-submit:hover {
	/* ダウンロードボタン・認証フォーム送信ボタンと同じ
	   SOLID STARロゴの「STAR」側下線(#E7211A)。 */
	background-color: #e7211a;
	color: #fff;
}

/* WordPress標準のパスワード保護フォーム(get_the_password_form()の出力)。
   solidstar_enforce_page_password()が表示する5テンプレート(business/
   company/service/contact/front-page)用。他のフォームと同じ配色に揃える。 */
.post-password-form p:first-of-type {
	margin: 0 0 24px;
}

.post-password-form label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: #000;
}

.post-password-form input[type="password"] {
	display: block;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
	background-color: #eee;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 10px;
	padding: 0 16px;
	height: 44px;
	font-size: 14px;
	font-family: inherit;
	color: #000;
}

.post-password-form input[type="password"]:focus {
	background-color: #fff;
	border: 1px solid #898989;
	outline: none;
	box-shadow: none;
}

.post-password-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	min-width: 120px;
	height: 36px;
	background-color: #666;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border: none;
	border-radius: 12px;
	padding: 0 20px;
	cursor: pointer;
}

.post-password-form input[type="submit"]:hover {
	/* 他の送信/更新ボタンと同じ SOLID STARロゴの「STAR」側下線(#E7211A)。 */
	background-color: #e7211a;
	color: #fff;
}