/* -------------------------------------------------------------------------
   Forms and fixed pages

   No contact form design was supplied in the client package — the homepage
   contact section is a mailto link and the only form markup is the employee
   login. This styling is therefore derived from the site's existing visual
   language rather than copied: card treatment from .hrPrice, field rhythm
   from .companyGrid dl, buttons from .navContact and .lineButton, and the
   same --blue / --line / --muted tokens throughout.

   Selectors cover Snow Monkey Forms' classes and fall back to plain element
   selectors scoped to .lsForm, so the layout survives a change of plugin.
   ---------------------------------------------------------------------- */

/* --------------------------------------------------------------- Page shell */

.pageHero {
	padding: 150px 8vw 0;
}

.pageHero .micro {
	margin-bottom: 18px;
}

.pageHero h1 {
	font-size: clamp(36px, 4.2vw, 62px);
	line-height: 1.4;
	letter-spacing: -.05em;
	font-weight: 600;
	margin: 0 0 20px;
}

.pageHero > p {
	color: var(--muted);
	font-size: 14px;
	line-height: 2.1;
	max-width: 640px;
}

.pageBody {
	padding: 70px 8vw 120px;
}

/* ------------------------------------------------------- Policy / long text */

.policyDoc {
	max-width: 780px;
	font-size: 14px;
	line-height: 2.1;
	color: #3d5060;
}

.policyDoc h2 {
	font-size: 22px;
	line-height: 1.7;
	letter-spacing: -.02em;
	margin: 62px 0 18px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	font-weight: 600;
}

.policyDoc h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.policyDoc h3 {
	font-size: 16px;
	line-height: 1.8;
	margin: 34px 0 12px;
	color: var(--blue);
}

.policyDoc p {
	margin: 0 0 20px;
}

.policyDoc ul,
.policyDoc ol {
	margin: 0 0 22px;
	padding-left: 1.4em;
}

.policyDoc li {
	margin-bottom: 9px;
}

.policyDoc a {
	color: var(--blue);
	border-bottom: 1px solid rgba(23, 104, 229, .3);
}

.policyDoc a:hover {
	border-bottom-color: var(--blue);
}

.policyMeta {
	margin-top: 60px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--muted);
	line-height: 2;
}

/* ------------------------------------------------------------------- Layout */

.contactLayout {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 6vw;
	align-items: start;
}

.contactAside dl {
	margin: 0;
	border-top: 1px solid var(--line);
}

.contactAside dl > div {
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}

.contactAside dt {
	font: 700 9px var(--font-en);
	letter-spacing: .16em;
	color: var(--blue);
	margin-bottom: 8px;
}

.contactAside dd {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
}

/* --------------------------------------------------------------- Form card */

.lsForm {
	background: #fff;
	border: 1px solid #d7e6ef;
	box-shadow: 0 28px 70px rgba(16, 66, 120, .1);
	padding: 46px 44px;
}

/* Field block — Snow Monkey Forms wraps each in .smf-item */
.lsForm .smf-item,
.lsForm .lsField {
	margin-bottom: 30px;
}

.lsForm .smf-item__label,
.lsForm .lsField > label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--ink);
}

/* Required / optional markers */
.lsForm .smf-item__label__text[data-require="1"]::after,
.lsForm .lsRequired::after {
	content: "必須";
	display: inline-block;
	margin-left: 10px;
	padding: 3px 8px;
	font: 700 9px var(--font-en);
	letter-spacing: .08em;
	color: #fff;
	background: var(--blue);
	vertical-align: 2px;
}

.lsForm .lsOptional::after {
	content: "任意";
	display: inline-block;
	margin-left: 10px;
	padding: 3px 8px;
	font: 700 9px var(--font-en);
	letter-spacing: .08em;
	color: var(--muted);
	background: var(--soft);
	border: 1px solid var(--line);
	vertical-align: 2px;
}

/* Controls */
.lsForm input[type="text"],
.lsForm input[type="email"],
.lsForm input[type="tel"],
.lsForm input[type="url"],
.lsForm select,
.lsForm textarea,
.lsForm .smf-text-control__control,
.lsForm .smf-email-control__control,
.lsForm .smf-tel-control__control,
.lsForm .smf-select-control__control,
.lsForm .smf-textarea-control__control {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--font-jp), sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink);
	background: #fcfdfe;
	border: 1px solid var(--line);
	border-radius: 2px;
	transition: border-color .25s, box-shadow .25s, background .25s;
	-webkit-appearance: none;
	appearance: none;
}

.lsForm textarea,
.lsForm .smf-textarea-control__control {
	min-height: 190px;
	resize: vertical;
}

.lsForm select,
.lsForm .smf-select-control__control {
	background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%),
		linear-gradient(135deg, var(--blue) 50%, transparent 50%);
	background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}

.lsForm input:focus,
.lsForm select:focus,
.lsForm textarea:focus,
.lsForm .smf-text-control__control:focus,
.lsForm .smf-email-control__control:focus,
.lsForm .smf-tel-control__control:focus,
.lsForm .smf-select-control__control:focus,
.lsForm .smf-textarea-control__control:focus {
	outline: none;
	background: #fff;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(23, 104, 229, .12);
}

/* Keyboard focus must stay visible for anything focusable */
.lsForm :focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* Consent checkbox */
.lsConsent {
	margin: 34px 0 8px;
	padding: 22px 24px;
	background: var(--soft);
	border-left: 3px solid var(--cyan);
	font-size: 13px;
	line-height: 1.9;
}

.lsConsent a {
	color: var(--blue);
	border-bottom: 1px solid rgba(23, 104, 229, .35);
}

.lsForm input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin-right: 9px;
	accent-color: var(--blue);
	vertical-align: -3px;
}

/* Actions */
.lsForm .smf-action,
.lsForm .lsActions {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 36px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}

.lsForm button,
.lsForm input[type="submit"],
.lsForm .smf-button-control__control,
.lsForm .smf-forward-button-control__control,
.lsForm .smf-submit-button-control__control {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 46px;
	min-width: 236px;
	padding: 18px 26px;
	font-family: var(--font-jp), sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--blue);
	border: 1px solid var(--blue);
	border-radius: 0;
	cursor: pointer;
	transition: background .25s, transform .25s;
}

.lsForm button:hover,
.lsForm input[type="submit"]:hover,
.lsForm .smf-button-control__control:hover,
.lsForm .smf-forward-button-control__control:hover,
.lsForm .smf-submit-button-control__control:hover {
	background: #0f57c9;
	transform: translateY(-2px);
}

/* Back button on the confirmation screen — secondary treatment */
.lsForm .smf-back-button-control__control {
	min-width: auto;
	gap: 0;
	color: var(--ink);
	background: transparent;
	border-color: var(--line);
}

.lsForm .smf-back-button-control__control:hover {
	background: var(--soft);
	color: var(--ink);
	transform: none;
}

/* Validation messages */
.lsForm .smf-error-messages,
.lsForm .lsError {
	margin-top: 9px;
	font-size: 12px;
	line-height: 1.8;
	color: #c0392b;
}

/* Confirmation screen: values shown as read-only text */
.lsForm [data-screen="confirm"] .smf-item__controls {
	font-size: 15px;
	line-height: 1.9;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}

/* Completion screen */
.lsComplete {
	max-width: 620px;
	margin: 0 auto;
	padding: 90px 0 40px;
	text-align: center;
}

.lsComplete .lsCompleteMark {
	width: 74px;
	height: 74px;
	margin: 0 auto 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 30px;
	color: #fff;
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	box-shadow: 0 16px 38px rgba(23, 104, 229, .26);
}

.lsComplete h1 {
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.5;
	letter-spacing: -.04em;
	font-weight: 600;
	margin-bottom: 20px;
}

.lsComplete p {
	color: var(--muted);
	font-size: 14px;
	line-height: 2.1;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
	.pageHero {
		padding: 120px 6vw 0;
	}

	.pageBody {
		padding: 50px 6vw 85px;
	}

	.contactLayout {
		grid-template-columns: 1fr;
		gap: 46px;
	}

	.lsForm {
		padding: 34px 26px;
	}
}

@media (max-width: 560px) {
	.pageHero h1 {
		font-size: 31px;
	}

	.lsForm {
		padding: 26px 18px;
		box-shadow: 0 16px 40px rgba(16, 66, 120, .08);
	}

	/* 16px minimum stops iOS Safari zooming the page on focus */
	.lsForm input[type="text"],
	.lsForm input[type="email"],
	.lsForm input[type="tel"],
	.lsForm select,
	.lsForm textarea,
	.lsForm .smf-text-control__control,
	.lsForm .smf-email-control__control,
	.lsForm .smf-tel-control__control,
	.lsForm .smf-select-control__control,
	.lsForm .smf-textarea-control__control {
		font-size: 16px;
	}

	.lsForm .smf-action,
	.lsForm .lsActions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.lsForm button,
	.lsForm input[type="submit"],
	.lsForm .smf-button-control__control,
	.lsForm .smf-forward-button-control__control,
	.lsForm .smf-submit-button-control__control {
		width: 100%;
		min-width: 0;
		gap: 0;
		justify-content: center;
	}

	.policyDoc {
		font-size: 13.5px;
	}
}

/* -------------------------------------------------------------------------
   News list and history table

   No design was supplied for either — the client package covers the homepage
   only. Both reuse existing tokens and rhythm: row treatment from
   .serviceRow, borders and label styling from .companyGrid dl.
   ---------------------------------------------------------------------- */

/* ------------------------------------------------------------------- News */

.newsList{border-top:1px solid var(--line)}

.newsRow a{
	display:grid;
	grid-template-columns:130px 1fr 40px;
	gap:26px;
	align-items:start;
	padding:30px 4px;
	border-bottom:1px solid var(--line);
	transition:background .25s,padding-left .25s;
}

.newsRow a:hover{
	background:var(--soft);
	padding-left:16px;
}

.newsRow time{
	font:600 12px var(--font-en);
	letter-spacing:.1em;
	color:var(--blue);
	padding-top:4px;
}

.newsRow h2{
	font-size:17px;
	line-height:1.7;
	letter-spacing:-.02em;
	font-weight:600;
	margin:0;
}

.newsRow p{
	margin:9px 0 0;
	font-size:13px;
	line-height:1.95;
	color:#4e6577;
}

.newsRow .circleArrow{
	justify-self:end;
	margin-top:2px;
	opacity:.35;
	transition:opacity .25s,transform .25s;
}

.newsRow a:hover .circleArrow{
	opacity:1;
	transform:translate(2px,-2px);
}

.newsEmpty{
	padding:60px 0;
	color:var(--muted);
	font-size:14px;
}

/* Single */

.newsDate{
	display:block;
	font:600 12px var(--font-en);
	letter-spacing:.12em;
	color:var(--blue);
	margin-bottom:14px;
}

.newsThumb{
	margin:0 0 46px;
	max-width:780px;
}

.newsThumb img{
	width:100%;
	height:auto;
	display:block;
}

.newsNav{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	align-items:center;
	justify-content:space-between;
	max-width:780px;
	margin-top:70px;
	padding-top:28px;
	border-top:1px solid var(--line);
}

.newsNav a{
	font-size:12.5px;
	line-height:1.7;
	transition:color .25s;
}

.newsNav a:hover{color:var(--blue)}

.newsNav span{
	display:block;
	font:700 9px var(--font-en);
	letter-spacing:.16em;
	color:var(--muted);
	margin-bottom:5px;
}

.newsNavNext{text-align:right}

.newsNavIndex{
	padding:11px 20px;
	border:1px solid var(--line);
	font-weight:600;
	white-space:nowrap;
}

.newsNavIndex:hover{
	border-color:var(--blue);
	color:var(--blue);
}

/* Pagination */

.pagination{
	display:flex;
	gap:8px;
	justify-content:center;
	margin-top:52px;
}

.pagination .page-numbers{
	min-width:40px;
	height:40px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0 12px;
	font:600 13px var(--font-en);
	border:1px solid var(--line);
	transition:border-color .25s,color .25s,background .25s;
}

.pagination .page-numbers:hover{
	border-color:var(--blue);
	color:var(--blue);
}

.pagination .page-numbers.current{
	background:var(--blue);
	border-color:var(--blue);
	color:#fff;
}

/* ---------------------------------------------------------------- History */

/* Full width of its section container. The section itself provides the
   horizontal inset (6vw), so the rows span the whole measure and line up
   with the OUR JOURNEY heading at both edges. */
.historyList{
	width:100%;
	max-width:none;
	margin:0;
	border-top:1px solid var(--line);
}

.historyList > div{
	display:grid;
	grid-template-columns:160px 1fr;
	gap:26px;
	padding:24px 4px;
	border-bottom:1px solid var(--line);
}

.historyList dt{
	font:700 13px var(--font-en);
	letter-spacing:.06em;
	color:var(--blue);
	margin:0;
}

.historyList dd{
	margin:0;
	font-size:14px;
	line-height:1.95;
	color:#3d5060;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width:700px){
	.newsRow a{
		grid-template-columns:1fr 32px;
		gap:6px 16px;
		padding:22px 2px;
	}

	.newsRow time{
		grid-column:1/-1;
		padding-top:0;
		margin-bottom:2px;
	}

	.newsRow h2{font-size:15.5px}

	.newsNav{
		flex-direction:column;
		align-items:stretch;
		text-align:left;
	}

	.newsNavNext{text-align:left}

	.newsNavIndex{text-align:center}

	.historyList > div{
		grid-template-columns:1fr;
		gap:6px;
		padding:18px 2px;
	}
}

/* Link from the homepage company section through to the fuller page. */
.companyMore{
	margin:44px 0 0;
	padding-left:0;
}

@media (min-width:901px){
	.companyMore{
		display:flex;
		justify-content:flex-end;
	}
}

/* -------------------------------------------------------------------------
   認証・登録

   Same row treatment as the timeline above it: a label column, a bottom rule,
   and the circleArrow used elsewhere for outbound links.

   Exactly one element carries the grid — .certRow. An earlier version put it
   on both the row and the anchor inside it, so the anchor was placed in the
   160px label column and its Japanese text wrapped after every character.
   ---------------------------------------------------------------------- */

.certBlock{
	margin-top:64px;
	padding-top:48px;
	border-top:1px solid var(--line);
}

.certHead{margin-bottom:26px}

.certHead h3{
	font-size:19px;
	line-height:1.6;
	font-weight:600;
	letter-spacing:-.02em;
	margin:10px 0 0;
}

.certList{border-top:1px solid var(--line)}

.certList > div{
	border-bottom:1px solid var(--line);
	transition:background .32s cubic-bezier(.22,.61,.36,1);
}

.certList > div.hasFile:hover{background:var(--soft)}

/* The only grid in this block. */
/* The issuer column sizes to its longest entry rather than a fixed width.
   160px was borrowed from the timeline's year column, but a year is 7
   characters and 全国健康保険協会 北海道支部 is 13 — the same width does not
   serve both. `auto` takes the widest issuer across all rows, so every row
   still aligns, and nowrap guarantees no mid-name break. If the client later
   adds a very long issuer the title column absorbs it, because minmax(0,1fr)
   allows it to shrink. */
.certRow{
	display:grid;
	grid-template-columns:auto minmax(0,1fr) 46px;
	gap:26px;
	align-items:center;
	padding:24px 4px;
}

/* minmax(0,1fr) above and min-width:0 here stop the text column resolving to
   min-content, which is what collapses CJK to one character per line. */
.certBody{
	min-width:0;
	display:block;
}

.certIssuer{
	font-size:12px;
	font-weight:600;
	letter-spacing:.02em;
	color:var(--blue);
	line-height:1.6;
	align-self:center;
	white-space:nowrap;
}

.certTitle{
	display:block;
	font-size:14.5px;
	font-weight:600;
	line-height:1.7;
	color:var(--ink);
	word-break:keep-all;      /* no breaking mid-phrase in Japanese */
	overflow-wrap:anywhere;   /* but still wrap if a line genuinely cannot fit */
}

.certNote{
	display:block;
	margin-top:4px;
	font-size:12px;
	line-height:1.75;
	color:var(--muted);
	word-break:keep-all;
	overflow-wrap:anywhere;
}

.certRow .circleArrow{
	justify-self:end;
	opacity:.3;
	transition:opacity .32s cubic-bezier(.22,.61,.36,1),border-color .32s cubic-bezier(.22,.61,.36,1),background .32s cubic-bezier(.22,.61,.36,1),color .32s cubic-bezier(.22,.61,.36,1);
}

a.certRow:hover .circleArrow{
	opacity:1;
	border-color:var(--blue);
	background:var(--blue);
	color:#fff;
}

/* Rows without a file read as quieter, not broken. */
.certList > div:not(.hasFile){opacity:.72}
.certList > div:not(.hasFile) .certTitle{color:#54697b}

@media (max-width:700px){
	.certBlock{margin-top:46px;padding-top:34px}

	.certRow{
		grid-template-columns:minmax(0,1fr) 34px;
		gap:6px 14px;
		padding:18px 2px;
	}

	.certIssuer{grid-column:1;grid-row:1;white-space:normal}
	.certBody{grid-column:1;grid-row:2}
	.certRow .circleArrow{grid-column:2;grid-row:1/3;align-self:center}
}

/* A 54-row timeline is long enough that the year column needs to stay pinned
   while reading, and the rows need tighter vertical rhythm than a ten-row
   summary did. */
.historyList > div{
	padding:18px 4px;
	align-items:baseline;
}

.historyList dt{
	position:sticky;
	top:88px;
	font-size:12.5px;
	white-space:nowrap;
}

.historyList dd{font-size:13.5px}

@media (max-width:700px){
	.historyList dt{position:static;top:auto}
}



/* Timeline rows with a supporting document: the event text itself is the
   link. An underline marks it as one without adding a separate control to a
   54-row list. */
.historyList .historyLink{
	color:inherit;
	border-bottom:1px solid rgba(23,104,229,.35);
	transition:color .32s cubic-bezier(.22,.61,.36,1),border-color .32s cubic-bezier(.22,.61,.36,1);
}

.historyList .historyLink:hover{
	color:var(--blue);
	border-bottom-color:var(--blue);
}

.historyList .historyLink i{
	font-style:normal;
	margin-left:7px;
	font-size:11px;
	color:var(--blue);
	vertical-align:1px;
}