/*
Theme Name: 笑顔のリアン｜株式会社リアン 採用サイト
Theme URI: https://www.ailv5.com/
Author: AI経営本部
Author URI: https://www.ailv5.com/
Description: 日本語サイト向けのシンプルなブロックテーマ雛形。配色とタイポグラフィは theme.json に集約しています。外部CDN・Webフォントは読み込みません。
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lien-recruit
Tags: full-site-editing, block-patterns, one-column, blog, editor-style
*/

/*
 * 見た目の指定は theme.json に集約しています。
 * このファイルには、theme.json では表現できないものだけを書いてください。
 */

/* リンクの下線を、読みやすい位置に下げる */
a {
	text-underline-offset: 0.2em;
}

/* キーボード操作時のフォーカスを見えるようにする */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* 印刷時は背景色を落とす */
@media print {
	body {
		background: #fff;
		color: #000;
	}
}

/* ===== 見学・相談フォーム ===== */
.lien-form__lead {
	background: var(--wp--preset--color--subtle);
	border-radius: 10px;
	padding: 1em 1.2em;
	margin: 0 0 2em;
	font-weight: 700;
}
.lien-field { margin: 0 0 2em; }
.lien-form fieldset { border: 0; padding: 0; margin: 0 0 2em; }
.lien-form label,
.lien-form legend {
	display: block;
	font-weight: 700;
	margin: 0 0 0.5em;
	font-size: 1.05rem;
}
.lien-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.15em 0.6em;
	border-radius: 99px;
	margin-left: 0.5em;
	vertical-align: middle;
	letter-spacing: 0.04em;
}
.lien-badge--req {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.lien-badge--opt {
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}
.lien-help {
	display: block;
	font-size: 0.875rem;
	color: #4a6b5e;
	margin: 0.25em 0 0.6em;
	font-weight: 400;
}
.lien-form input[type="text"],
.lien-form input[type="tel"],
.lien-form textarea {
	width: 100%;
	padding: 0.85em 1em;
	font-size: 1.05rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: #fff;
	line-height: 1.6;
}
.lien-form input[type="text"]:focus,
.lien-form input[type="tel"]:focus,
.lien-form textarea:focus {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.lien-form .wpcf7-radio,
.lien-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}
.lien-form .wpcf7-list-item { margin: 0; }
.lien-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 500;
	margin: 0;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 99px;
	padding: 0.6em 1.2em;
	cursor: pointer;
	background: #fff;
}
.lien-form .wpcf7-list-item label:hover {
	border-color: var(--wp--preset--color--secondary);
}
.lien-form .wpcf7-list-item input {
	width: 1.15em;
	height: 1.15em;
	accent-color: var(--wp--preset--color--primary);
}
.lien-form .wpcf7-list-item:has(input:checked) label {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--subtle);
	font-weight: 700;
}
.lien-submit { text-align: center; margin-top: 2.5em; }
.lien-form input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 1.15rem;
	font-weight: 700;
	padding: 1em 2.5em;
	cursor: pointer;
	width: 100%;
	max-width: 420px;
}
.lien-form input[type="submit"]:hover {
	background: var(--wp--preset--color--secondary);
}
.wpcf7-not-valid-tip {
	color: #b3261e;
	font-weight: 700;
	font-size: 0.9rem;
	margin-top: 0.4em;
}
.wpcf7-response-output {
	border-radius: 8px;
	padding: 1em 1.2em !important;
	margin: 1.5em 0 0 !important;
	font-weight: 700;
}
.lien-tel {
	display: block;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-decoration: none;
}
@media (max-width: 600px) {
	.lien-form .wpcf7-radio,
	.lien-form .wpcf7-checkbox { flex-direction: column; }
	.lien-form .wpcf7-list-item label { width: 100%; }
}

/* ヘッダーの申し込みボタン（スマホでは見出しの下に回り込ませる） */
.lien-headcta .wp-block-button__link { white-space: nowrap; }
@media (max-width: 480px) {
	.lien-headcta .wp-block-button__link { font-size: 0.85rem; padding: 0.6em 1em; }
}

/* ==========================================================================
   採用LPレイアウト（rollie.jp の骨組みを参考にした構成）
   .lien-lp 配下＝ページ内。:is(.page-id-9, .page-id-55) ＝プレビュー限定の固定要素。
   本採用のときは :is(.page-id-9, .page-id-55) の限定を外してください。
   ========================================================================== */

/* ---- 1. ヒーロー（全画面・メディア背景＋オーバーレイ） ---- */
.lien-hero {
	position: relative;
	min-height: min(88vh, 760px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}
.lien-hero__media,
.lien-hero__media img,
.lien-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	z-index: -2;
}
.lien-hero__media figcaption { display: none; }
.lien-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(22, 53, 44, 0.15) 0%, rgba(22, 53, 44, 0.72) 100%);
}
.lien-hero__inner { width: 100%; padding-bottom: var(--wp--preset--spacing--60); }
.lien-hero :is(h1, h2, p) { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.lien-hero h1 { line-height: 1.35; }
.lien-hero__eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 0.8em;
}
.lien-scroll {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	writing-mode: vertical-rl;
	padding-bottom: 46px;
}
.lien-scroll::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 38px;
	background: #fff;
	animation: lien-scroll 2s ease-in-out infinite;
	transform-origin: top;
}
@keyframes lien-scroll {
	0%   { transform: scaleY(0); opacity: 0; }
	40%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
	.lien-scroll::after { animation: none; }
}

/* ---- 2. セクション見出しユニット（英字ラベル＋見出し＋罫線） ---- */
.lien-sechead { text-align: center; margin-bottom: var(--wp--preset--spacing--50); }
.lien-sechead__en {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.6em;
}
.lien-sechead h2 { margin: 0; }
.lien-sechead__rule {
	display: block;
	width: 44px;
	height: 3px;
	background: var(--wp--preset--color--accent);
	margin: 1em auto 0;
	border-radius: 2px;
}

/* ---- 3. 交互2カラム（画像／テキスト） ---- */
.lien-split { align-items: center; }
.lien-split .wp-block-image img { border-radius: 14px; width: 100%; }
@media (max-width: 781px) {
	.lien-split.is-reversed { flex-direction: column; }
}
@media (min-width: 782px) {
	.lien-split.is-reversed { flex-direction: row-reverse; }
}

/* ---- 4. 番号つき3カラムカード ---- */
.lien-cards .wp-block-column {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	position: relative;
}
.lien-cards .wp-block-column h3 { margin-top: 0.4em; }
.lien-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}

/* ---- 5. 画像ホバーカード（採用情報・事業所） ---- */
.lien-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	text-decoration: none;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--primary);
}
.lien-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.lien-tile:hover img,
.lien-tile:focus-visible img { transform: scale(1.06); }
.lien-tile__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.4em 1.1em 1.1em;
	background: linear-gradient(180deg, rgba(22, 53, 44, 0) 0%, rgba(22, 53, 44, 0.85) 65%);
	color: #fff;
}
.lien-tile__label b { display: block; font-size: 1.1rem; line-height: 1.4; }
.lien-tile__label span { display: block; font-size: 0.8rem; opacity: 0.9; margin-top: 0.3em; }

/* ---- 6. 記事グリッド（ブログ・お知らせ） ---- */
.lien-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
}
@media (max-width: 1024px) { .lien-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lien-grid { grid-template-columns: 1fr; } }
.lien-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}
.lien-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lien-card__body { padding: 1.1em 1.1em 1.3em; }
.lien-card__meta {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
}
.lien-card__body h3 { font-size: 1.02rem; margin: 0.4em 0 0; line-height: 1.6; }

/* ---- 7. 定義リスト（募集要項・会社概要） ---- */
.lien-dl { border-top: 1px solid var(--wp--preset--color--border); }
.lien-dl > div {
	display: grid;
	grid-template-columns: 12em 1fr;
	gap: 0 var(--wp--preset--spacing--30);
	padding: 1.1em 0.2em;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.lien-dl dt { font-weight: 700; color: var(--wp--preset--color--primary); margin: 0; }
.lien-dl dd { margin: 0; }
@media (max-width: 600px) {
	.lien-dl > div { grid-template-columns: 1fr; gap: 0.35em; }
}

/* ---- 8. 帯CTA ---- */
.lien-band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.lien-band__media,
.lien-band__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	z-index: -2;
}
.lien-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(31, 92, 77, 0.86);
}
.lien-band :is(h2, p) { color: #fff; }

/* ---- 9. ヘッダー右端のカラーCTA（2つ並び） ---- */
.lien-hdbtns { display: none; }
:is(.page-id-9, .page-id-55) .lien-headcta { display: none; }
:is(.page-id-9, .page-id-55) .lien-hdbtns {
	display: flex;
	gap: 0;
	align-self: stretch;
}
:is(.page-id-9, .page-id-55) .lien-hdbtns a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	min-width: 116px;
	padding: 0.7em 1em;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	color: #fff;
}
:is(.page-id-9, .page-id-55) .lien-hdbtns a:first-child { background: var(--wp--preset--color--primary); }
:is(.page-id-9, .page-id-55) .lien-hdbtns a:last-child  { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }
:is(.page-id-9, .page-id-55) .lien-hdbtns a:hover { filter: brightness(1.08); }
@media (max-width: 781px) { :is(.page-id-9, .page-id-55) .lien-hdbtns { display: none; } }

/* ---- 10. スマホ下部固定ナビ ---- */
.lien-spnav { display: none; }
@media (max-width: 781px) {
	:is(.page-id-9, .page-id-55) .lien-spnav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		position: fixed;
		inset: auto 0 0 0;
		z-index: 999;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.14);
	}
	:is(.page-id-9, .page-id-55) .lien-spnav a {
		padding: 0.85em 0.4em;
		text-align: center;
		font-size: 0.75rem;
		font-weight: 700;
		text-decoration: none;
		color: #fff;
		background: var(--wp--preset--color--primary);
		border-right: 1px solid rgba(255, 255, 255, 0.18);
	}
	:is(.page-id-9, .page-id-55) .lien-spnav a:last-child {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--contrast);
		border-right: 0;
	}
		body:is(.page-id-9, .page-id-55) { padding-bottom: 3.4em; }
}

/* ---- 11. スクロールで浮かび上がる ---- */
.lien-lp .lien-fade {
	opacity: 0;
	transform: translateY(18px);
	animation: lien-fade linear both;
	animation-timeline: view();
	animation-range: entry 8% cover 26%;
}
@keyframes lien-fade {
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lien-lp .lien-fade { opacity: 1; transform: none; animation: none; }
}
@supports not (animation-timeline: view()) {
	.lien-lp .lien-fade { opacity: 1; transform: none; animation: none; }
}

/* ---- 12. 幅の制御（ブロックレイアウトに依存せず確実に効かせる） ---- */
.lien-lp > .alignfull,
.lien-lp .lien-hero,
.lien-lp .lien-band {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.lien-lp .lien-grid,
.lien-lp .lien-dl,
.lien-lp .lien-sechead {
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin-inline: auto;
	width: 100%;
}
.lien-lp .lien-dl { max-width: 900px; }

/* 固定ヘッダーぶんの余白を作らないための微調整 */
.lien-lp .lien-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

/* ---- 13. 幅の再指定（コアのレイアウトCSSより後に効かせる） ---- */
.lien-lp .lien-grid.lien-grid,
.lien-lp .lien-sechead.lien-sechead,
.lien-lp .lien-split.lien-split,
.lien-lp .lien-hero__inner.lien-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin-inline: auto;
	width: 100%;
}
.lien-lp .lien-dl.lien-dl { max-width: 900px; margin-inline: auto; width: 100%; }

/* SCROLL の位置を本文と重ねない */
.lien-hero .lien-scroll { left: auto; right: 20px; transform: none; }
@media (max-width: 600px) { .lien-hero .lien-scroll { display: none; } }

/* ---- 14. 幅の最終指定（コアの :not() 連鎖と同特異度で負けないよう1段上げる） ---- */
.lien-lp .lien-grid.lien-grid.lien-grid,
.lien-lp .lien-sechead.lien-sechead.lien-sechead,
.lien-lp .lien-split.lien-split.lien-split,
.lien-lp .lien-hero__inner.lien-hero__inner.lien-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin-inline: auto;
	width: 100%;
}
.lien-lp .lien-dl.lien-dl.lien-dl {
	max-width: 900px;
	margin-inline: auto;
	width: 100%;
}

/* ---- 15. 帯CTAの背景画像がレイアウト幅で切られないようにする ---- */
.lien-lp .lien-band .lien-band__media.lien-band__media {
	max-width: none;
	width: 100%;
}

/* ---- 16. マンガの見開き ---- */
.lien-manga__page img {
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	width: 100%;
}
.lien-manga .wp-block-column { align-self: center; }

/* ---- 17. バナー（クリックできる帯） ---- */
.lien-ctabanner {
	display: block;
	margin: var(--wp--preset--spacing--50) auto;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(22, 53, 44, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lien-ctabanner img { width: 100%; height: auto; display: block; }
.lien-ctabanner:hover,
.lien-ctabanner:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(22, 53, 44, 0.2);
}
@media (prefers-reduced-motion: reduce) {
	.lien-ctabanner { transition: none; }
	.lien-ctabanner:hover { transform: none; }
}