/*
Theme Name: cre-p
Description: Custom theme for 株式会社クリープ (Cre-p Co., Ltd.) corporate site.
Author: mkh
Version: 0.1.0
Text Domain: cre-p
*/

:root {
	--color-black: #1a1a1a;
	--color-yellow: rgb(247, 229, 83);
	--color-gray-dark: #3d3d3d;
	--color-gray-light: #f5f5f5;
	--color-white: #ffffff;
	--font-base: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--header-height: 89px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-black);
	background: var(--color-white);
	line-height: 1.7;
	/* overflow-x:clip (not hidden) so this never forces overflow-y to auto --
	   per spec, overflow-x:hidden + unset overflow-y computes overflow-y as
	   auto, which would show a spurious vertical scrollbar on any
	   transform:scale canvas here (scrollHeight always exceeds clientHeight
	   for those, by design). clip has no such side effect. */
	overflow-x: clip;
}

a {
	color: inherit;
	transition: opacity 0.15s ease;
}

/* Generic link hover, sitewide. Opacity (not a color swap) on purpose --
   plain links here sit on all kinds of backgrounds (white sections, gray
   .message blocks, full-bleed photos, the yellow CTA band), and a fixed
   hover color would be illegible or invisible on some of them. Opacity
   always reads as "hovering" regardless of what's underneath. Buttons
   (.button) and the primary nav (already pill-highlighted on hover) opt out
   -- they have their own dedicated hover treatment above. */
a:not(.button):not(.primary-nav a):hover {
	opacity: 0.7;
}

img {
	max-width: 100%;
	display: block;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
}

.site-logo {
	display: block;
	line-height: 0;
}

.primary-nav ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* Contact is a persistent CTA-style pill -- always yellow, not just on
   hover or when it's the current page like the rest of the menu.
   Targeted by href since wp_nav_menu's default item classes aren't
   reliably slug-based. Excluded from the opacity hover below so it stays
   solid on hover too, matching "fixed". */
/* Contactだけ黄色のCTA表示 */
.primary-nav a[href$="/contact/"] {
	background-color: var(--color-yellow);
}


/* Every other item: subtle opacity on hover instead of the yellow pill
   (that's now reserved for Contact + whichever page is current). */
/* Contact以外は通常のホバー表示 */
.primary-nav a:not([href$="/contact/"]):hover {
	opacity: 0.7;
}

/* Mobile menu toggle -- hidden on desktop, shown as a fixed circle below the
   breakpoint. Same nav markup is reused for both; only position/display change. */

.menu-toggle {
	display: none;
	position: fixed;
	top: 16px;
	right: 16px;
	width: 74px;
	height: 74px;
	border: none;
	border-radius: 50%;
	background-color: var(--color-yellow);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	padding: 0;
}

.menu-toggle__line {
	display: block;
	width: 28px;
	height: 2px;
	background-color: var(--color-black);
	transition: transform 0.2s ease;
}

/* Hamburger -> X when open. main.js only ever toggles aria-expanded on the
   button itself (not a class), so that attribute doubles as the CSS hook --
   no JS change needed. translateY brings each line's center to the
   midpoint of the two-line stack (half of gap + own thickness) before
   rotating, so they cross exactly in the middle instead of off-center. */
.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child {
	transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 1023px) {
	.site-logo img {
		width: min(107px, calc(100vw * 107 / 750));
		height: auto;
	}

	.menu-toggle {
		display: flex;
		top: min(16px, calc(100vw * 16 / 750));
		right: min(16px, calc(100vw * 16 / 750));
		width: min(74px, calc(100vw * 74 / 750));
		height: min(74px, calc(100vw * 74 / 750));
		gap: min(6px, calc(100vw * 6 / 750));
	}

	.menu-toggle__line {
		width: min(28px, calc(100vw * 28 / 750));
		height: min(2px, calc(100vw * 2 / 750));
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child {
		transform: translateY(min(4px, calc(100vw * 4 / 750))) rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child {
		transform: translateY(max(-4px, calc(100vw * -4 / 750))) rotate(-45deg);
	}

	.primary-nav {
		display: none;
	}

	.primary-nav.is-open {
		display: block;
		position: fixed;
		inset: 0;
		/* rgba, not opacity -- opacity would also fade the menu links
		   themselves; this keeps the text crisp and only lets the page
		   behind show through the background a little. */
		background: rgba(255, 255, 255, 0.9);
		padding-top: var(--header-height);
		z-index: 999;
		overflow-y: auto;
	}

	.primary-nav.is-open ul {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding: 32px 24px;
	}

	.primary-nav.is-open a {
		display: block;
		text-align: center;
		font-size: 1.25rem;
	}
}

/* Intro video -- fullscreen overlay shown on home page load (see
   front-page.php). z-index above everything else in the theme (site-header
   is 2000) since it needs to sit on top of the header too. object-fit:contain
   (not cover) so the 16:9 source is never cropped on tall/narrow SP screens
   -- letterboxed on black instead of losing content off the sides. */

.intro-video {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(0, 0, 0);
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.intro-video.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.intro-video__video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.intro-video__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	cursor: pointer;
}

.intro-video__close-line {
	position: absolute;
	width: 20px;
	height: 2px;
	background-color: rgb(255, 255, 255);
}

.intro-video__close-line:first-child {
	transform: rotate(45deg);
}

.intro-video__close-line:last-child {
	transform: rotate(-45deg);
}

/* Hero */

.hero {
	padding: 64px 24px;
	text-align: center;
}

.hero__tagline {
	max-width: 640px;
	margin: 24px auto;
}

.hero__ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Rich hero (MV) -- matches docs/imgs/MV/MV.png, a 1920x1636 reference
   canvas centered in a max-width:1920 wrapper with visible overflow, so
   content positioned outside 0-1920 (negative left, etc.) simply shows in
   the extra space on wider screens instead of being clipped. Below 1920px
   the canvas scales down proportionally via transform: scale(). Shown from
   1024px up only -- .hero--simple covers the smaller range until a
   dedicated SP version of this block is designed. The header overlays this
   hero transparently on the home page (see .home .site-header below), so
   the hero itself starts at the very top of the page, behind the header. */

.hero-mv {
	display: none;
}

/* SP hero (mobile) -- separate composition from the PC one, reference
   canvas 750px wide. Same "scale down below reference, reveal more above
   it" technique as .hero-mv, just with 750 instead of 1920. Shown below
   1024px; hidden once .hero-mv takes over. */

.hero-mv-sp {
	position: relative;
	overflow-x: clip;
}

.hero-mv-sp__wrapper {
	position: relative;
	max-width: 750px;
	margin: 0 auto;
	overflow: visible;
	/* CTA content ends at ~1961px on the 750px canvas; retain bottom clearance. */
	height: min(2000px, calc(100vw * 2000 / 750));
}

.hero-mv-sp__canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	height: 2000px;
	transform: scale(min(1, calc(100vw / 750px)));
	transform-origin: top left;
}

.hero-mv-sp__ring {
	position: absolute;
	box-sizing: content-box;
	border-style: solid;
	border-radius: 50%;
	pointer-events: none;
}

.hero-mv-sp__photo {
	position: absolute;
	border-radius: 50%;
	object-fit: cover;
}

.hero-mv-sp__text {
	position: absolute;
}

/* SP play button -- same role/wiring as .hero-mv__play (PC). Lives inside
   .hero-mv-sp__canvas, which already scales as a whole via
   transform:scale() -- plain fixed px here (no min()/calc()), same as
   every other child of that canvas (rings/photos/text in front-page.php).
   Using the fluid min()/calc() pattern here double-scaled it (shrunk much
   faster than the rest of the canvas and drifted off-center below 750px --
   caught and fixed). No SP design reference for this control existed;
   162px diameter given directly by the user. */
.hero-mv-sp__play {
	position: absolute;
	width: 162px;
	height: 162px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	z-index: 785;
}

.hero-mv-sp__play-circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: rgb(255, 255, 255);
	opacity: 0.38;
}

.hero-mv-sp__play-triangle {
	position: relative;
	width: 0;
	height: 0;
	margin-top: 8px;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 15px solid rgb(255, 255, 255);
}

.hero-mv-sp__play-label {
	position: relative;
	font-size: 25px;
	font-family: "Montserrat", var(--font-base);
	color: rgb(255, 255, 255);
	line-height: 1.231;
	text-align: center;
}

.hero-mv-sp__bottom {
	position: absolute;
	top: 1565px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	z-index: 1800;
}

.hero-mv-sp__tagline {
	width: 600px;
	max-width: 150vw;
	margin: 0;
	text-align: center;
	font-size: 28px;
}

.hero-mv-sp__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.hero-mv-sp__ctas .button {
	width: 330px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: rgb(0, 0, 0);
}

.hero-mv-sp__ctas .button--accent {
	background-color: rgb(247, 229, 83);
}

/* "Our Services" -- ONE structure for every width. Mobile-first base here
   (750px reference canvas, rows stacked in a column, image+content
   side-by-side per row); the >=1024px override below swaps the reference
   to 1920px and turns the grid into a 3-column row via display:contents
   (see .services-mv__content), not a second copy of this markup. */

.services-mv {
	position: relative;
	overflow-x: clip;
	background-image: url("assets/images/our-services-bg.jpg");
	background-size: cover;
	background-position: center;
}

/* Simple native parallax: background-attachment:fixed pins the cover photo
   to the viewport while the section's own content scrolls over it, no JS
   needed. Desktop only (>=1024px) -- mobile browsers render fixed
   backgrounds inconsistently/janky, so it's safer to just not apply it
   there; falls back to a normal static cover photo on SP. */
@media (min-width: 1024px) {
	.services-mv {
		background-attachment: fixed;
	}
}

.services-mv__wrapper {
	position: relative;
	max-width: 750px;
	margin: 0 auto;
	overflow: visible;
	/* Real content height (measured via canvas.scrollHeight at 375px
	   viewport, in the unscaled 750-reference coordinate space) is 1749px
	   after the SP font-size bumps -- was a stale 1500px, which cut ~249px
	   of content off the bottom into the next section. This canvas+scale
	   technique needs this number kept in sync by hand whenever font-size/
	   gap/content here changes (same failure mode already hit and fixed on
	   the About page -- see [[feedback-cre-p-css-html-methodology]] gotcha
	   #9/#10); a full flow-based rewrite like Value/Message/Profile would
	   remove this category of bug entirely, but wasn't done here. */
	height: min(1760px, calc(100vw * 1760 / 750));
}

.services-mv__canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	height: 1760px;
	transform: scale(min(1, calc(100vw / 750px)));
	transform-origin: top left;
	padding: 65px 24px 100px;
}

.services-mv__header {
	position: relative;
	text-align: center;
}

.services-mv__header-ring {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	height: 150px;
	border: 30px solid rgb(238, 238, 238);
	border-radius: 50%;
	opacity: 1;
	pointer-events: none;
}

.services-mv__title-en {
	position: relative;
	margin: 0;
	font-size: 62px;
	font-family: "Montserrat", var(--font-base);
	color: rgb(0, 0, 0);
	line-height: 1.224;
	font-weight: 400;
}

.services-mv__title-ja {
    position: relative;
    display: inline-block;
    margin: 16px 0 0;
    padding: 4px 14px;
    font-size: 28px;
    color: rgb(0, 0, 0);
    line-height: 1.443;

}

.services-mv__grid {
	list-style: none;
	margin: 96px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.services-mv__item {
	display: flex;
	flex-direction: row;
	gap: 24px;
}

.services-mv__media {
	flex-shrink: 0;
	width: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.services-mv__card {
	position: relative;
	width: 360px;
	height: 270px;
	border-radius: 12px;
	overflow: hidden;
	background-color: #999;
}

.services-mv__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.services-mv__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.services-mv__bullets {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.services-mv__bullet {
	width: 8px;
	height: 8px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

.services-mv__bullet.is-active {
	background-color: var(--color-yellow);
}

.services-mv__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.services-mv__card-title {
	margin: 0;
	font-size: 28px;
	color: rgb(0, 0, 0);
	line-height: 1.5;

	background: rgb(238, 238, 238);
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.services-mv__card-body {
	margin: 16px 0 0;
	font-size: 20px;
	color: rgb(0, 0, 0);
	line-height: 1.8;
	text-align: justify;

	background: rgb(238, 238, 238);
	padding: 10px 14px;
	border-radius: 8px;
}




.services-mv__more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 16px;
	text-decoration: none;
	color: inherit;
}

.services-mv__more-text {
	font-size: 16px;
	font-family: "Montserrat", var(--font-base);
	color: var(--color-black);
	line-height: 1;
}
.services-mv__more-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgb(238, 238, 238);
}

/* Home Service: font and hit-area floors are expressed in rendered pixels,
   then compensated for the existing reference-canvas scale. */
.home .services-mv {
	--services-scale: min(1, calc(100vw / 750px));
}

.home .services-mv__canvas {
	height: auto;
	min-height: 1760px;
}

.home .services-mv__card-title {
	font-size: max(28px, calc(15px / var(--services-scale)));
}

.home .services-mv__card-body {
	font-size: max(20px, calc(13px / var(--services-scale)));
}

.home .services-mv__more {
	position: relative;
	margin-top: max(16px, calc(12px / var(--services-scale)));
}

.home .services-mv__more::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: calc(44px / var(--services-scale));
	transform: translateY(-50%);
}

.home .services-mv__more-text {
	font-size: max(16px, calc(12px / var(--services-scale)));
}

.home .services-mv__bullets {
	gap: 0;
}

.home .services-mv__bullet {
	display: grid;
	place-items: center;
	flex: 0 0 calc(32px / var(--services-scale));
	width: calc(32px / var(--services-scale));
	height: calc(32px / var(--services-scale));
	border-radius: 0;
	background-color: transparent;
}

.home .services-mv__bullet::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .4);
}

.home .services-mv__bullet.is-active::before {
	background-color: var(--color-yellow);
}

@media (max-width: 599px) {
	.home .services-mv__card-body {
		text-align: left;
	}
}

@media (min-width: 1024px) {
	.home .services-mv {
		--services-scale: min(.8125, calc(100vw / 1920px));
	}

	.home .services-mv__canvas {
		min-height: 1064px;
		/* Match the original visible clearance below the fixed PC canvas. */
		padding-bottom: 60px;
	}

	.home .services-mv__grid {
		display: grid;
		grid-template-columns: repeat(3, 360px);
		column-gap: 60px;
		row-gap: 0;
	}

	.home .services-mv__item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
	}

	.home .services-mv__card-title {
		height: auto;
		min-height: 120px;
		font-size: max(26px, calc(16px / var(--services-scale)));
		overflow: visible;
	}

	.home .services-mv__card-body {
		height: auto;
		min-height: 270px;
		font-size: max(19px, calc(14px / var(--services-scale)));
		overflow: visible;
	}

	.home .services-mv__more {
		margin-top: max(8px, calc(12px / var(--services-scale)));
	}
}

.home .site-header,
.has-page-header .site-header,
body:has(.page-header) .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	z-index: 2000;
}


/* Home "News" teaser -- same title+ring pattern as "Our Services", just with
   a yellow ring and a black title on a light section background. Mobile-first
   base here; the >=1024px override below only adjusts spacing/sizes. */

.news-teaser {
	position: relative;
	background-color: rgb(247, 247, 247);
	padding: 64px 0;
}

.news-teaser__header {
	position: relative;
	text-align: center;
}

.news-teaser__header-ring {
	position: absolute;
	top: max(-25px, calc(100vw * -25 / 750));
	left: 50%;
	transform: translateX(-50%);
	width: min(150px, calc(100vw * 150 / 750));
	height: min(150px, calc(100vw * 150 / 750));
	border: min(30px, calc(100vw * 30 / 750)) solid var(--color-yellow);
	border-radius: 50%;
	pointer-events: none;
}

/* Same 62px/26.05px as .services-mv__title-en/ja (Our Services), but as the
   fluid min()/calc() formula instead of the flat number Services uses --
   Services' text sits inside a transform:scale() canvas that already does
   the shrinking for it, so its flat number is correct there. This section
   has no such canvas, so the flat number alone doesn't shrink at all below
   750px -- it rendered huge on SP (caught, twice). The formula below
   reproduces the exact same visual result Services gets from its canvas
   scale, just computed directly instead of inherited from an ancestor
   transform. Shared with .recruit-cta__title-en (same rule, grouped) so
   the two can't drift from each other again -- only .color differs, kept
   in .news-teaser__title-en/.recruit-cta__title-en below. */
.news-teaser__title-en,
.recruit-cta__title-en {
	position: relative;
	margin: 0;
	font-size: min(62px, calc(100vw * 62 / 750));
	font-family: "Montserrat", var(--font-base);
	line-height: 1.224;
	font-weight: 400;
}

.news-teaser__title-ja,
.recruit-cta__title-ja {
	position: relative;
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	font-size: min(26.05px, calc(100vw * 26.05 / 750));
	line-height: 1.443;
}

.news-teaser__title-en {
	color: rgb(0, 0, 0);
}

.news-teaser__title-ja {
	color: rgb(0, 0, 0);
}

.news-teaser__panel {
	/* Vertical padding is 60px MINUS the row's own vertical padding, so the
	   gap from the panel edge to the first/last item's text totals 60px
	   (panel padding + row padding stack, not 60px on top of another 60px).
	   margin-top is tuned so the gap from the RING's bottom edge (not the
	   header's flow height) to the panel is 75px. */
	max-width: 100%;
	margin: 71px auto 0;
	padding: 20px 30px;
	border-radius: 32px;
	background-color: rgb(255, 255, 255);
}

.news-teaser__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.news-teaser__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	text-decoration: none;
	color: inherit;
}

.news-teaser__item:not(:last-child) .news-teaser__link {
	border-bottom: 1px solid rgb(212, 212, 212);
}

.news-teaser__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.news-teaser__date {
	font-size: 14px;
	color: rgb(0, 0, 0);
}

.news-teaser__item-title {
	flex: 1;
	font-size: 15px;
	line-height: 1.6;
	color: rgb(0, 0, 0);
}

.news-teaser__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgb(212, 212, 212);
}

.news-teaser__empty {
	text-align: center;
}

.news-teaser__more {
	margin: 35px 0 0;
	text-align: center;
}

.news-teaser__more-link {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	text-decoration: none;
}

.news-teaser__more-text {
	font-size: 16px;
	color: rgb(0, 0, 0);
	line-height: 2.25;
}

/* Home "Recruit" CTA -- same title+ring pattern as "Our Services"/"News"
   (see [[feedback-cre-p-css-html-methodology]]), just with a white Japanese
   subtitle on a fixed-height cover photo. Mobile-first base here; the
   >=1024px override below only adjusts spacing/sizes. */

.recruit-cta {
	position: relative;
	height: 460px;
	width: 100%;
	background-image: url("assets/images/recruit-bg.jpg");
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 1024px) {
	.recruit-cta {
		background-attachment: fixed;
	}
}

.recruit-cta__header {
	position: relative;
	text-align: center;
}

.recruit-cta__header-ring {
	position: absolute;
	top: max(-25px, calc(100vw * -25 / 750));
	left: 50%;
	transform: translateX(-50%);
	width: min(150px, calc(100vw * 150 / 750));
	height: min(150px, calc(100vw * 150 / 750));
	border: min(30px, calc(100vw * 30 / 750)) solid rgb(190, 190, 190);
	border-radius: 50%;
	opacity: 0.6;
	pointer-events: none;
}

/* Shared font-size/line-height/margin come from the grouped rule with
   .news-teaser__title-en/ja above -- only the color differs here. */
.recruit-cta__title-en {
	color: rgb(255, 255, 255);
}

.recruit-cta__title-ja {
	color: rgb(255, 255, 255);
}

.recruit-cta__text {
	margin: 32px 0 0;
	font-size: 20px;
	color: rgb(255, 255, 255);
	line-height: 1.34;
	text-align: center;
}

.recruit-cta__cta {
	margin: 32px 0 0;
	text-align: center;
}

.recruit-cta__cta .button {
	line-height: 2;
}

@media (min-width: 1024px) {
	.hero-mv-sp {
		display: none;
	}

	.hero-mv {
		display: block;
		position: relative;
		overflow-x: clip;
	}

	.hero-mv__wrapper {
	position: relative;
	max-width: 1560px;
	margin: 0 auto;
	overflow: visible;
	height: min(1329.25px, calc(100vw * 1636 / 1920));
}

.hero-mv__canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 1636px;
	transform: scale(min(0.8125, calc(100vw / 1920px)));
	transform-origin: top left;
}

	.hero-mv__ring {
		position: absolute;
		box-sizing: content-box;
		border-style: solid;
		border-radius: 50%;
		pointer-events: none;
	}

	.hero-mv__photo {
		position: absolute;
		border-radius: 50%;
		object-fit: cover;
		z-index: 1700;
	}

	/* Play button overlay, centered on the video-poster photo. Sits above the
	   photos (z-index 1700) but below the headline text (1800). */

	.hero-mv__play {
		position: absolute;
		width: 169px;
		height: 169px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 0;
		padding: 0;
		background: none;
		cursor: pointer;
		z-index: 1750;
	}

	.hero-mv__play-circle {
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background-color: rgb(255, 255, 255);
		opacity: 0.38;
	}

	.hero-mv__play-triangle {
		position: relative;
		width: 0;
		height: 0;
		margin-top: 8px;
		border-top: 9px solid transparent;
		border-bottom: 9px solid transparent;
		border-left: 16px solid rgb(255, 255, 255);
	}

	.hero-mv__play-label {
		position: relative;
		font-size: 26px;
		font-family: "Montserrat", var(--font-base);
		color: rgb(255, 255, 255);
		line-height: 1.231;
		text-align: center;
	}

	.hero-mv__text {
		position: absolute;
	}

	.hero-mv__bottom {
		position: absolute;
		bottom: 60px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		z-index: 1800;
	}

	.hero-mv__tagline {
		width: 840px;
		max-width: 90vw;
		margin: 0;
		text-align: center;
		font-size: 20px
	}

	.hero-mv__ctas {
		display: flex;
		gap: 16px;
	}

	.hero-mv__ctas .button {
		width: 330px;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background-color: rgb(0, 0, 0);
	}

	.hero-mv__ctas .button--accent {
		background-color: rgb(247, 229, 83);
	}

	/* "Our Services" desktop override -- same markup as the mobile base
	   above; this only swaps the reference canvas to 1920px and turns the
	   stacked rows into a 3-column grid. display:contents regroups
	   .services-mv__content's children back into the flex row started by
	   .services-mv__item, so no markup is duplicated for this breakpoint. */

	.services-mv__wrapper {
	max-width: 1560px;
	height: min(864.5px, calc(100vw * 1064 / 1920));
}

.services-mv__canvas {
	width: 1920px;
	height: 1064px;
	transform: scale(min(0.8125, calc(100vw / 1920px)));
}

	.services-mv__header {
		margin-bottom: 90px;
	}

	.services-mv__header-ring {
		top: -7px;
		width: 106px;
		height: 100px;
		border-width: 20px;
	}

	.services-mv__title-en {
		font-size: 51px;
		line-height: 1.063;
	}

	.services-mv__title-ja {
		margin-top: 12px;
		font-size: 18px;
		line-height: 1.489;
	}

	.services-mv__grid {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 0;
	}

	.services-mv__item {
		flex-direction: column;
		gap: 0;
		width: 360px;
	}

	.services-mv__content {
		display: contents;
	}

	.services-mv__card-title {
		margin-top: 10px;
		height: 120px;
		font-size: 26px;
		text-align: center;
		overflow: hidden;
	}

	.services-mv__card-body {
		margin-top: 8px;
		height: 270px;
		font-size: 19px;
		line-height: 2;
		overflow: hidden;
	}

	.services-mv__more {
		margin-top: 8px;
	}

	/* "News" teaser desktop override -- exact values from the PC design
	   (1920 reference). Panel reuses .container's centering, so only its own
	   spacing/typography change here. */

	.news-teaser__header-ring {
		top: -7px;
		width: 106px;
		height: 106px;
		border-width: 20px;
	}

	.news-teaser__title-en,
	.recruit-cta__title-en {
		font-size: min(51px, calc(100vw * 51 / 1920));
		line-height: 1.063;
	}

	.news-teaser__title-ja,
	.recruit-cta__title-ja {
		margin-top: min(12px, calc(100vw * 12 / 1920));
		font-size: min(18px, calc(100vw * 18 / 1920));
		line-height: 1.489;
	}

	.news-teaser__panel {
		max-width: 1200px;
		margin-top: 65px;
		padding-top: 36px;
		padding-bottom: 36px;
		border-radius: 60px;
	}

	.news-teaser__link {
		gap: 0;
		padding: 24px 0;
	}

	/* Pops date+title back out as direct flex children of .news-teaser__link
	   (matching .services-mv__content) so the row becomes a flat
	   date | title | arrow layout instead of the mobile text-stack. */
	.news-teaser__text {
		display: contents;
	}

	.news-teaser__date {
		flex-shrink: 0;
		width: 140px;
		font-size: 16px;
		line-height: 2;
	}

	.news-teaser__item-title {
		margin-right: 80px;
		font-size: 16px;
		line-height: 2;
	}

	.recruit-cta__header-ring {
		top: -7px;
		width: 106px;
		height: 106px;
		border-width: 20px;
	}
}

/* Hover = invert fg/bg via custom properties, so every variant (base,
   --accent, and any future one) gets a correct inversion from one rule
   instead of a hover override per variant. The border always matches the
   button's own (non-hover) bg color, so on hover -- when the fill becomes
   whatever the page background already is -- the button still reads as a
   distinct shape instead of disappearing into it. */

.button {
	--button-bg: var(--color-black);
	--button-fg: var(--color-white);
	display: inline-block;
	appearance: none;
	padding: 12px 32px;
	border: 1px solid var(--button-bg);
	border-radius: 999px;
	font-family: inherit;
	font-size: 18px;
	text-decoration: none;
	background: var(--button-bg);
	color: var(--button-fg);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover {
	background: var(--button-fg);
	color: var(--button-bg);
}

.button--accent {
	--button-bg: var(--color-yellow);
	--button-fg: var(--color-black);
}

/* A literal invert would put yellow text on the hover's black fill --
   legible but not the intent (yellow-on-black reads as a warning/muted
   state here, not a CTA). Force white text instead; the black fill itself
   (from the generic .button:hover rule above) and the arrow icon (already
   flips to white via the filter:invert(1) rule below) stay as they are. */
.button--accent:hover {
	color: var(--color-white);
}

/* Right-aligned arrow overlaid inside the button's own padding -- doesn't
   affect the button's box size or the text's centering. Arrow color follows
   the button's text color (white on the black variant, black on --accent). */

.button--arrow {
	/* Extra right padding so the arrow (30px inset + 14px wide = 44px) has
	   room without overlapping the text on auto-width buttons. Irrelevant on
	   desktop, where .button becomes a fixed 330px flex box with padding:0. */
	position: relative;
	padding-right: 56px;
}

.button--arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background: url("assets/images/arrow-white.svg") no-repeat center / contain;
}

.button--accent.button--arrow::after {
	background-image: url("assets/images/arrow-black.svg");
}

/* The arrow is a flat-color SVG file, not inline/currentColor, so it can't
   just inherit the text color swap on hover -- filter:invert(1) flips
   white<->black on the rendered icon instead, which stays correct for
   either starting variant without needing separate hover background-image
   rules per combination. */
.button:hover.button--arrow::after,
.button:hover.button--arrow-left::before {
	filter: invert(1);
}

/* Same technique as .button--arrow, mirrored to the left ("back" links). */
.button--arrow-left {
	position: relative;
	padding-left: 56px;
}

.button--arrow-left::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 30px;
	transform: translateY(-50%) scaleX(-1);
	width: 14px;
	height: 14px;
	background: url("assets/images/arrow-white.svg") no-repeat center / contain;
}

.button--accent.button--arrow-left::before {
	background-image: url("assets/images/arrow-black.svg");
}

@media (min-width: 1024px) {
	.button {
		width: 330px;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		padding: 0;
	}
}

/* Section titles */

.section-title {
	/* position:relative (not absolute) so this paints above the
	   position:absolute decorative circles it sits after in the DOM,
	   per normal stacking rules -- it does not move anything. */
	position: relative;
	text-align: center;
}

/* News list -- docs/imgs/news/top_bg2.png (PC) + sample-sp.png (SP), one
   card per post. Only PC measurements came from the client's CSS export
   (".base" card / "._2025_12_16" date / ".長方形_882" category pill /
   ".年末年始休業のお知らせ" title / the excerpt paragraph / arrow circle
   ".楕円形_5") -- SP has a reference screenshot but no exact numbers yet,
   so the base/mobile-first rules below are a functional placeholder sized
   by eye, not pixel-matched; revisit once the client gives SP values. */

/* Same dead-space correction as .contact-points (page-header reserves a
   flat min-height regardless of content; pages with no nav_items, like
   News, need a negative margin-top to close the gap down to the real
   75px the client wants below the subtitle). Measured raw gap (margin:0)
   was 224.09px at the 750 SP reference -- 224.09-149.09=75. */
.news-list-section {
	/* Same reasoning/fix as .privacy-policy-section: .page-header is
	   position:relative (no z-index), which by CSS stacking rules paints
	   above static (non-positioned) siblings regardless of DOM order --
	   without being positioned itself with a higher z-index, this section
	   let the header's decorative circles show in FRONT of its own text
	   wherever the negative margin below makes them overlap. */
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: max(-149.09px, calc(100vw * -149.09 / 750));
	padding: min(60px, calc(100vw * 60 / 750)) min(20px, calc(100vw * 20 / 750));
	background-color: rgb(247, 247, 247);
}

.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.news-list__card {
	width: 100%;
	padding: 28px 24px;
	border-radius: 24px;
	background-color: rgb(255, 255, 255);
}

.news-list__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.news-list__date {
	font-size: min(24px, calc(100vw * 24 / 750));
	color: rgb(0, 0, 0);
}

/* ".長方形_882" -- pill-shaped in the reference screenshots despite the
   generic "rectangle" layer name (a Photoshop rounded-rect shape). */
.news-list__category {
	padding: min(7px, calc(100vw * 7 / 750)) min(20px, calc(100vw * 20 / 750));
	border-radius: 999px;
	background-color: var(--color-yellow);
	font-size: 12px;
	font-weight: bold;
}

.news-list__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.455;
	color: rgb(0, 0, 0);
}

.news-list__excerpt {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.8;
	text-align: left;
	color: rgb(0, 0, 0);
}

.news-list__more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.news-list__more-text {
	font-size: 16px;
	color: rgb(0, 0, 0);
}

/* Same treatment as .news-teaser__arrow (home page) -- ".楕円形_5". */
.news-list__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgb(212, 212, 212);
}

.news-list__empty {
	text-align: center;
}

/* News detail (single.php) -- same card as the list (.news-list__card),
   full content instead of an excerpt. */
.news-detail__title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.455;
	color: rgb(0, 0, 0);
}

.news-detail__content {
	font-size: 16px;
	line-height: 1.8;
	color: rgb(0, 0, 0);
}

.news-detail__content p {
	margin: 0 0 1em;
}

.news-detail__content p:last-child {
	margin-bottom: 0;
}

/* Prev/next row -- reuses .news-list__arrow (same circle+icon as the
   card's "続きを読む" arrow) for the direction icons. */
.news-detail-nav {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: min(40px, calc(100vw * 40 / 750));
}

.news-detail-nav__item {
	flex: 1;
	min-width: 0;
}

.news-detail-nav__item a {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.news-detail-nav__item--next a {
	justify-content: flex-end;
}

.news-detail-nav__arrow {
	flex-shrink: 0;
}

.news-detail-nav__arrow--prev img {
	transform: scaleX(-1);
}

.news-detail-nav__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.news-detail-nav__date {
	font-size: 14px;
	color: rgb(0, 0, 0);
}

/* Ellipsis once the title is wider than the column has room for --
   min-width:0 above the chain is required for this to take effect inside
   flex items (they default to min-width:auto, which ignores overflow). */
.news-detail-nav__title {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 15px;
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.news-detail-back-wrap {
	margin-top: min(60px, calc(100vw * 60 / 750));
	text-align: center;
}

@media (min-width: 1024px) {
	.news-detail__title {
		font-size: min(32.603px, calc(100vw * 32.603 / 1920));
	}

	.news-detail__content {
		font-size: 16px;
		line-height: 2;
	}

	.news-detail-nav {
		margin-top: min(40px, calc(100vw * 40 / 1920));
	}

	.news-detail-back-wrap {
		margin-top: min(60px, calc(100vw * 60 / 1920));
	}
}

/* Pagination -- the_posts_pagination() default markup
   (nav.pagination > div.nav-links > a/span.page-numbers). ".楕円形_5"
   again for the circles (yellow = current page, gray = other pages). */
.news-list-section .pagination {
	margin-top: min(100px, calc(100vw * 100 / 750));
}

.news-list-section .pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: min(16px, calc(100vw * 16 / 750));
}

.news-list-section .pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(71px, calc(100vw * 71 / 750));
	height: min(71px, calc(100vw * 71 / 750));
	border-radius: 50%;
	background-color: rgb(212, 212, 212);
	color: rgb(255, 255, 255);
	font-family: "Montserrat", var(--font-base);
	font-size: min(18.667px, calc(100vw * 18.667 / 750));
	text-decoration: none;
}

.news-list-section .pagination .page-numbers.dots {
	background-color: transparent;
	color: rgb(0, 0, 0);
}

.news-list-section .pagination .page-numbers.current {
	background-color: var(--color-yellow);
	color: rgb(0, 0, 0);
}

/* Prev/next use the same arrow icon as everywhere else on the site
   (.news-list__arrow, .news-teaser__arrow) instead of literal </> text --
   flex-centered on .page-numbers already, no separate alignment needed. */
.news-list__pagination-arrow {
	display: block;
	width: 14px;
	height: 14px;
	background: url("assets/images/arrow-white.svg") no-repeat center / contain;
}

.news-list__pagination-arrow--prev {
	transform: scaleX(-1);
}

@media (min-width: 1024px) {
	.news-list-section .pagination {
		margin-top: min(70px, calc(100vw * 70 / 1920));
	}

	.news-list-section .pagination .page-numbers {
		width: min(47px, calc(100vw * 47 / 1920));
		height: min(47px, calc(100vw * 47 / 1920));
		font-size: min(18px, calc(100vw * 18 / 1920));
	}

	.news-list-section {
		padding: min(60px, calc(100vw * 60 / 1920)) min(30px, calc(100vw * 30 / 1920));
	}

	.news-list {
		gap: min(30px, calc(100vw * 30 / 1920));
	}

	.news-list__card {
		padding: min(40px, calc(100vw * 40 / 1920)) min(80px, calc(100vw * 80 / 1920));
		border-radius: min(60px, calc(100vw * 60 / 1920));
	}

	.news-list__meta {
		margin-bottom: min(20px, calc(100vw * 20 / 1920));
	}

	.news-list__date {
		font-size: min(16px, calc(100vw * 16 / 1920));
	}

	.news-list__category {
		padding: min(6px, calc(100vw * 6 / 1920)) min(15px, calc(100vw * 15 / 1920));
	}

	.news-list__title {
		font-size: 22px;
	}

	.news-list__excerpt,
	.news-list__more-text {
		font-size: 16px;
		line-height: 2;
	}
}

/* About -- intro background block. Background photo is full-bleed (100%
   width, not part of the reference canvas). ONE shared structure for every
   width (see [[feedback-avoid-duplicate-html-responsive]]) -- the circles
   are genuinely regular content (WORLD alone on its own row, OEKAKI +
   FACTORY centered on the row below, on mobile; all 3 in one row on
   desktop), so this is flex/flow only, no position:absolute anywhere
   except the tiny decorative ::before circle-backdrop behind each word
   (the one narrow exception in
   [[feedback-cre-p-css-html-methodology]]). Wrapper/canvas keep the
   reference-canvas + transform:scale technique (750 mobile / 1920 desktop)
   so the title image/circles/text shrink proportionally with viewport
   width, matching the page-header. Wrapper height is measured from real
   rendered content (not guessed) to avoid any mismatch/scroll glitch. */

.about-intro-bg {
	position: relative;
	overflow-x: clip;
	background-image: url("assets/images/about/world-oekaki-factory-bg.jpg");
	background-size: cover;
	background-position: center;
}


/* About / WORLD OEKAKI FACTORY
   背景画像を暗くして白系テキストの視認性を上げる */
.about-intro-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.42);
	pointer-events: none;
	z-index: 0;
}


@media (min-width: 1024px) {
	.about-intro-bg {
		background-attachment: fixed;
	}
}

.about-intro-bg__wrapper {
	position: relative;
	z-index: 1;
	max-width: 750px;
	margin: 0 auto;
	height: min(933px, calc(100vw * 933 / 750));
}

.about-intro-bg__canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	padding: 95px 30px 60px;
	transform: scale(min(1, calc(100vw / 750px)));
	transform-origin: top left;
}

.about-intro-bg__title {
	display: block;
	margin: 0;
}

.about-intro-bg__circles {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 40px 0 0;
}

.about-intro-bg__circles-row {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.about-intro-bg__circle {
	position: relative;
	width: 255px;
	height: 255px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.about-intro-bg__circle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: rgb(255, 255, 255);
	opacity: 0.8;
}

.about-intro-bg__circle-word {
	position: relative;
	font-size: 36px;
	font-family: "Montserrat", var(--font-base);
	color: rgb(0, 0, 0);
	font-weight: bold;
	line-height: 1;
}

.about-intro-bg__circle-caption {
	position: relative;
	margin-top: 8px;
	font-size: 18px;
	color: rgb(0, 0, 0);
	line-height: 1.778;
}

.about-intro-bg__text {
	max-width: 420px;
	margin: 40px auto 0;
	font-size: 18px;
	color: rgb(255, 255, 255);
	text-align: center;
	line-height: 1.778;
}

@media (min-width: 1024px) {
	.about-intro-bg__wrapper {
		max-width: 1920px;
		height: min(606px, calc(100vw * 606 / 1920));
	}

	.about-intro-bg__canvas {
		width: 1920px;
		padding: 60px 0;
		transform: scale(min(1, calc(100vw / 1920px)));
	}

	.about-intro-bg__title {
		margin: 0 auto;
	}

	.about-intro-bg__circles {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
		margin-top: 71px;
	}

	.about-intro-bg__circles-row {
		display: contents;
	}

	.about-intro-bg__circle {
		width: 240px;
		height: 240px;
	}

	.about-intro-bg__text {
		max-width: 900px;
		margin-top: 71px;
		font-size: max(18px, calc(14px * (1920px / 100vw)));
	}
}

/* The intro canvas is absolutely positioned. Its explanatory copy gains a
   larger declared size below 1680px so that the transformed result stays
   readable; its wrapping therefore needs a slightly taller reservation in
   these PC ranges. Keep the background wrapper at least as tall as the
   transformed canvas rather than clipping the extra lines. */
@media (min-width: 1024px) and (max-width: 1100px) {
	.about-intro-bg__wrapper {
		height: min(682px, calc(100vw * 682 / 1920));
	}
}

@media (min-width: 1101px) and (max-width: 1240px) {
	.about-intro-bg__wrapper {
		height: min(630px, calc(100vw * 630 / 1920));
	}
}

@media (min-width: 1241px) and (max-width: 1400px) {
	.about-intro-bg__wrapper {
		height: min(620px, calc(100vw * 620 / 1920));
	}
}

@media (min-width: 1401px) and (max-width: 1499px) {
	.about-intro-bg__wrapper {
		height: min(610px, calc(100vw * 610 / 1920));
	}
}

/* Section label -- small reusable ring + JA/EN title used for the About
   page's バリュー/代表挨拶/会社概要/沿革 sub-sections
   (template-parts/section-label.php).

   FLUID SCALING RULE used throughout this file from here on (2026-08-05,
   replacing an earlier position:absolute + transform:scale "canvas"
   approach): every pixel value taken from the Photoshop export is written
   as `min(REFpx, calc(100vw * REF / REFWIDTH))` (REFWIDTH is 750 for SP,
   1920 for PC) so it shrinks proportionally below its reference width and
   holds flat at REFpx above it -- in normal document flow, no
   position:absolute, no transform, no manually-measured wrapper height.
   For a NEGATIVE value (e.g. a negative top offset) use `max()` instead of
   `min()`, since for negatives "smaller number" means "more negative":
   `max(-25px, calc(100vw * -25 / 1920))` shrinks the offset toward 0 below
   1920px and caps its magnitude at -25px above it. This replaced the
   canvas/transform technique because it made every wrapper's height a
   number that had to be re-measured by hand after any content change --
   real overlap bugs happened repeatedly from a stale height. Fluid
   min()/max() values need no such bookkeeping; normal flow sizes itself. */

.section-label {
	display: flex;
	align-items: center;
	gap: 16px;
}

.section-label__ring {
	flex-shrink: 0;
	width: min(50px, calc(100vw * 50 / 750));
	height: min(50px, calc(100vw * 50 / 750));
	border: min(10px, calc(100vw * 10 / 750)) solid var(--color-yellow);
	border-radius: 50%;
}

.section-label__text {
	display: flex;
	flex-direction: column;
}

.section-label__ja {
	margin: 0;
	font-size: min(44px, calc(100vw * 44 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
	line-height: 1.2;
}

.section-label__en {
	margin: 0;
	font-size: min(21px, calc(100vw * 21 / 750));
	color: rgb(149, 149, 149);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

@media (min-width: 1024px) {
	.section-label {
		width: min(270px, calc(100vw * 270 / 1920));
	}

	.section-label__ring {
		width: min(40px, calc(100vw * 40 / 1920));
		height: min(40px, calc(100vw * 40 / 1920));
		border-width: min(10px, calc(100vw * 10 / 1920));
	}

	.section-label__ja {
		font-size: min(34px, calc(100vw * 34 / 1920));
		text-align: left;
	}

	.section-label__en {
		font-size: min(16px, calc(100vw * 16 / 1920));
		text-align: left;
	}
}

/* About -- "Value" block. value__grid uses CSS Grid so the SAME 3 layout
   elements (label, text, list) reflow between breakpoints without
   duplicating markup: mobile is "label row / text row / list row" (label
   NOT a sidebar); desktop is a genuine 2-column layout where "label" is
   its own left column spanning the full height of the text+list column to
   its right.

   The puzzle image is NOT a grid layout element -- it's a purely decorative
   accent that overlaps the yellow list card diagonally, so it's positioned
   absolutely inside .value__grid (the one narrow position:absolute
   exception for decoration overlapping flow content, see the CSS/HTML
   methodology notes -- this is the ONLY position:absolute left in this
   whole block; everything else is normal flow). It renders IN FRONT of the
   yellow box (z-index above .value-list). */

.value {
	padding: min(60px, calc(100vw * 60 / 750)) 0;
}

.value__wrapper {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 min(30px, calc(100vw * 30 / 750));
}

.value__grid {
	/* position:relative -- NOT for a grid item, but so .value-intro__image
	   (position:absolute, see below) anchors to the grid as a whole rather
	   than to .value-list-wrap. Absolutely positioned children of a grid
	   container are removed from grid layout entirely per spec, so the
	   image plays no part in grid-template-areas below. */
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"label"
		"text"
		"list";
	align-items: start;
	row-gap: min(20px, calc(100vw * 20 / 750));
}

.value__grid .section-label {
	grid-area: label;
}

.value-intro__text {
	grid-area: text;
	/* margin-top (2026-08-05, from the Photoshop layer panel): text Y:2017
	   vs the section-label ring Y:1796 = 221px gap -- much bigger than the
	   label's own natural height + row-gap, because the puzzle image
	   (height 190px, see .value-intro__image) floats over that gap and
	   the text needs to clear it. Reset to 0 on PC below -- image/label/
	   text relate differently there (see .value-intro__image's PC
	   override). */
	margin: min(117px, calc(100vw * 117 / 750)) 0 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	color: rgb(0, 0, 0);
	line-height: 1.6;
}

.value-list-wrap {
	grid-area: list;
}

.value-intro__image {
	/* Anchored to .value__grid as a whole, NOT to .value-list-wrap/the
	   yellow box -- checked directly against the Photoshop layer panel
	   (2026-08-05): the image's own top (Y:1795) lands almost exactly on
	   the section-label ring's top (Y:1796, 1px apart = rounding), i.e.
	   the image starts level with the LABEL, not floating some arbitrary
	   distance above the box. On SP the image's right edge also lands
	   exactly on the grid's own right edge (424+296=720, box spans the
	   same 0..720 on SP since it has no max-width there), so top:0;
	   right:0 here is the whole story for SP. PC needs a small -25px top
	   delta -- see the override below. */
	width: min(296px, calc(100vw * 296 / 750));
	height: min(190px, calc(100vw * 190 / 750));
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	pointer-events: none;
}

.value-list {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: min(32px, calc(100vw * 32 / 750)) min(28px, calc(100vw * 28 / 750));
	background-color: var(--color-yellow);
	border-radius: min(40px, calc(100vw * 40 / 750));
	display: flex;
	flex-direction: column;
	gap: min(16px, calc(100vw * 16 / 750));
}

.value-list__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.value-list__number {
	flex-shrink: 0;
	font-size: min(42px, calc(100vw * 42 / 750));
	font-weight: bold;
	font-family: "Montserrat", var(--font-base);
	color: rgb(0, 0, 0);
	line-height: 1;
}

.value-list__body {
	font-size: min(29px, calc(100vw * 29 / 750));
	color: rgb(0, 0, 0);
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.value {
		padding: min(160px, calc(100vw * 160 / 1920)) 0;
	}

	.value__wrapper {
	padding: 0 clamp(80px, calc((100vw - 1200px) / 2), 360px);
}

	.value__grid {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"label text"
			"label list";
		/* 65px (user-specified, 2026-08-05): vertical gap between the intro
		   text and the top of the yellow box on PC. */
		row-gap: min(65px, calc(100vw * 65 / 1920));
	}

	.value-intro__text {
		align-self: start;
		margin-top: 0;
		font-size: min(18px, calc(100vw * 18 / 1920));
	}

	.value-list {
		max-width: min(720px, calc(100vw * 720 / 1920));
		border-radius: min(60px, calc(100vw * 60 / 1920));
		padding: min(48px, calc(100vw * 48 / 1920)) min(56px, calc(100vw * 56 / 1920));
		gap: min(20px, calc(100vw * 20 / 1920));
	}

	.value-list-wrap {
		/* The box itself still needs this cap -- grid items stretch to
		   fill their column by default, and the "1fr" column is wider
		   than the box. */
		max-width: min(720px, calc(100vw * 720 / 1920));
	}

	.value-intro__image {
		/* From the Photoshop layer panel: PC image Y:1216, section-label
		   ring Y:1241 (this block's own local y:0) -- image sits
		   1241-1216=25px ABOVE the grid/label top, unlike SP where it's
		   flush (top:0). right:0 still holds: image right edge
		   (X:1314+246=1560) lands exactly on the grid's own right edge
		   (content spans 360..1560, i.e. 1200px wide within the 1920
		   canvas -- see .value__wrapper's 360px padding above). */
		width: min(246px, calc(100vw * 246 / 1920));
		height: min(158px, calc(100vw * 158 / 1920));
		top: max(-25px, calc(100vw * -25 / 1920));
	}

	.value-list__number {
		font-size: min(28px, calc(100vw * 28 / 1920));
	}

	.value-list__body {
		font-size: min(19px, calc(100vw * 19 / 1920));
	}
}

/* About -- "Message" block (代表挨拶). Fluid min()/max() scaling throughout,
   same rule as .value above -- no position:absolute/transform anywhere in
   this block. Confirmed against the Photoshop export (2026-08-05): PC
   paragraph text is font-size:16px with NO transform:matrix (i.e. literal,
   not scaled from a larger declared size) -- unlike most other text in
   this design. */

.message {
	background-color: rgb(247, 247, 247);
	padding: min(130px, calc(100vw * 130 / 750)) 0;
}

.message__wrapper {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 min(30px, calc(100vw * 30 / 750));
}

.message__grid {
	/* align-items:start -- without it, the default "stretch" makes
	   .section-label's grid cell stretch to the full row height (which on
	   PC is the height of the ENTIRE long message paragraph, since label
	   and content share one row there), vertically centering the label
	   way down the block instead of pinning it to the top. Bug hit and
	   fixed 2026-08-05. */
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"label"
		"content";
	align-items: start;
	row-gap: min(40px, calc(100vw * 40 / 750));
}

.message__grid .section-label {
	grid-area: label;
}

.message__content {
	grid-area: content;
}

.message__text {
	margin: 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	color: rgb(0, 0, 0);
	line-height: 1.9;
}

.message__signature-name {
	/* <img> of the client's own signature graphic (docs/imgs/パーツsvg/茂木
	   賢.svg, 2026-08-05). margin-left:auto right-aligns it since it's a
	   block-level element (img is display:block globally in this theme)
	   -- text-align:right wouldn't affect a block image. */
	display: block;
	width: min(223px, calc(100vw * 223 / 750));
	margin: min(40px, calc(100vw * 40 / 750)) 0 0 auto;
}

.message__signature-title {
	margin: 8px 0 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	color: rgb(0, 0, 0);
	text-align: right;
}

@media (min-width: 1024px) {
	.message {
		padding: min(140px, calc(100vw * 140 / 1920)) 0;
	}

	.message__wrapper {
	padding: 0 clamp(80px, calc((100vw - 1200px) / 2), 360px);
}

	.message__grid {
		grid-template-columns: auto 1fr;
		grid-template-areas: "label content";
		/* No column-gap -- matches .value__grid, which relies only on the
		   fixed 270px .section-label width for the label-to-content gap.
		   This block used to add 65px on top of that, making its gap
		   visibly wider than Value's -- caught and removed. */
	}

	.message__text {
		font-size: clamp(14px, calc(100vw * 16 / 1920), 16px);
		line-height: 2.687;
	}

	.message__signature-name {
		width: min(160px, calc(100vw * 160 / 1920));
	}

	.message__signature-title {
		font-size: clamp(14px, calc(100vw * 16 / 1920), 16px);
	}
}

/* About -- "Profile" block (会社概要). Fluid min()/max() scaling throughout,
   same rule as .value/.message above -- no position:absolute/transform
   anywhere. Label sits left of the table on PC, stacked above it on SP --
   same label-left/content-right pattern as .value/.message (corrected
   2026-08-05: an earlier version put the label above the table on PC too,
   which didn't match the other two blocks -- user caught it). */

.profile {
	padding: min(60px, calc(100vw * 60 / 750)) 0;
}

.profile__wrapper {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 min(30px, calc(100vw * 30 / 750));
}

.profile__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"label"
		"content";
	align-items: start;
	row-gap: min(40px, calc(100vw * 40 / 750));
}

.profile__grid .section-label {
	grid-area: label;
}

/* Table wrapper carries the rounded border + white fill (2026-08-05, from
   the Photoshop panel: border-radius:60px, border:1px solid rgb(212,212,212),
   background:#fff) and clips the header cells' gray fill to match the
   rounded corners via overflow:hidden. */
.profile-table-wrap {
	/* --profile-radius drives both the wrap's own corner rounding and the
	   th/td ::before overlays' corner rounding below (a few px larger, so
	   the inset white margin reads as a consistent-width ring following
	   the curve instead of a gray corner poking past it). */
	--profile-radius: min(60px, calc(100vw * 60 / 750));
	grid-area: content;
	border: 1px solid rgb(212, 212, 212);
	border-radius: var(--profile-radius);
	background-color: rgb(255, 255, 255);
	overflow: hidden;
}

.profile-table {
	/* table-layout:fixed forces the browser to honor the widths set below
	   instead of sizing columns off content -- without it the table did
	   NOT shrink proportionally on SP (bug caught 2026-08-05): content
	   width, not the vw-based min() formulas, was driving column sizing.
	   border-collapse:separate (not collapse) so th/td can use
	   position:relative + a z-index'd ::before cleanly -- collapsed table
	   cells have known cross-browser quirks with z-index/stacking. */
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
}

.profile-table th,
.profile-table td {
	/* position:relative alone does NOT create a new stacking context --
	   that only happens with an explicit z-index too. Without z-index:0
	   here, the ::before's z-index:-1 below escaped past this cell
	   entirely and painted behind the table-wrap's own white background,
	   making the gray fill invisible (bug caught 2026-08-05). */
	position: relative;
	z-index: 0;
	text-align: left;
	vertical-align: top;
	padding: min(24px, calc(100vw * 24 / 750)) min(28px, calc(100vw * 28 / 750));
	font-size: min(28px, calc(100vw * 28 / 750));
	color: rgb(0, 0, 0);
	font-weight: normal;
	border-bottom: 1px solid rgb(212, 212, 212);
}

.profile-table tr:last-child th,
.profile-table tr:last-child td {
	border-bottom: none;
}

.profile-table th {
	/* width (2026-08-05, user-specified): 303px SP / 184px PC below. */
	width: min(303px, calc(100vw * 303 / 750));
}

/* The gray (th) / white (td) fill is a REAL element behind the text
   (::before, z-index:-1), inset 4px from the outer edges -- not a
   box-shadow. User's call (2026-08-05): a box-shadow inset doesn't
   "occupy" real box space, so th and td ended up with subtly different
   effective content boxes; a real bordered/inset element makes both
   columns structurally identical (the td version is just invisible,
   white-on-white). th only insets top/bottom/left (its right edge
   borders the td internally, not the outer rounded border); td only
   insets top/bottom/right (mirror image, its left edge borders th
   internally). Corner radius on the two OUTER corners each cell actually
   touches (th: top-left/bottom-left; td: top-right/bottom-right) uses
   --profile-radius + 4px, per the user's suggestion to round the inset
   shape slightly MORE than the parent so it safely clears the curve
   instead of matching it exactly. */
.profile-table th::before,
.profile-table td::before {
	content: "";
	position: absolute;
	z-index: -1;
}

.profile-table th::before {
	inset: 4px 0 4px 4px;
	background-color: rgb(247, 247, 247);
}

.profile-table td::before {
	inset: 4px 4px 4px 0;
	background-color: rgb(255, 255, 255);
}

.profile-table tr:first-child th::before {
	/* +-3px (user-specified, 2026-08-06) -- previously +4px, which rounded
	   the inset shape MORE than the outer wrap; the user wants it slightly
	   TIGHTER (smaller radius) instead, i.e. var(--profile-radius) - 3px. */
	border-top-left-radius: calc(var(--profile-radius) + -3px);
}

.profile-table tr:last-child th::before {
	border-bottom-left-radius: calc(var(--profile-radius) + -3px);
}

.profile-table tr:first-child td::before {
	border-top-right-radius: calc(var(--profile-radius) + -3px);
}

.profile-table tr:last-child td::before {
	border-bottom-right-radius: calc(var(--profile-radius) + -3px);
}

.profile-table__list {
	margin: 0;
	padding-left: 1.1em;
}

.profile-table__list li + li {
	margin-top: 4px;
}

@media (min-width: 1024px) {
	.profile {
		padding: min(60px, calc(100vw * 60 / 1920)) 0;
	}

	.profile__wrapper {
	padding: 0 clamp(80px, calc((100vw - 1200px) / 2), 360px);
}

	.profile__grid {
		grid-template-columns: auto 1fr;
		grid-template-areas: "label content";
		/* No column-gap -- same reasoning as .message__grid above, matches
		   .value__grid's spacing. */
	}

	.profile-table-wrap {
		--profile-radius: min(60px, calc(100vw * 60 / 1920));
	}

	.profile-table th,
	.profile-table td {
		padding: min(24px, calc(100vw * 24 / 1920)) min(28px, calc(100vw * 28 / 1920));
		font-size: clamp(14px, calc(100vw * 16 / 1920), 16px);
	}

	.profile-table th {
		width: min(184px, calc(100vw * 184 / 1920));
	}
}

/* About -- "History" block (沿革). Same fluid min()/max() scaling and
   label-left/content-right pattern as .value/.message/.profile above --
   no position:absolute/transform/measured-height anywhere here either.
   Timeline is a table: col 1 (th) is the year, col 2 (td) is just the
   dot+line, col 3 (td) is the list of that year's entries (month left,
   text right) -- per the user's own suggested structure (2026-08-06).
   Font sizes/spacing here are NOT measured from a Photoshop export (none
   was given for this block) -- estimated to match the sizing pattern
   already established elsewhere in this page (year ~ section-label__ja
   size, entries ~ body-text size). Flag for the user if real values
   become available. */

.history {
	background-color: rgb(247, 247, 247);
	padding: min(60px, calc(100vw * 60 / 750)) 0;
}

.history__wrapper {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 min(30px, calc(100vw * 30 / 750));
}

.history__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"label"
		"content";
	align-items: start;
	row-gap: min(40px, calc(100vw * 40 / 750));
}

.history__grid .section-label {
	grid-area: label;
}

.history__content {
	grid-area: content;
}

.history-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.history-table tr {
	/* Shared by .history-table__year (font-size) and .history-table__dot/
	   ::before (vertical position) below, so the dot always stays in sync
	   with however big the year text is -- half of the year's own
	   font-size, since line-height:1 on the year makes its line-box
	   height exactly equal to font-size (dot center = vertical center of
	   that line-box = font-size/2 from the row's top). */
	--history-year-size: min(34px, calc(100vw * 34 / 750));
	/* Shared by .history-table__entry's font-size and
	   .history-table__entries' alignment margin below. */
	--history-entry-size: min(28px, calc(100vw * 28 / 750));
}

.history-table__year {
	vertical-align: top;
	text-align: left;
	font-family: "Montserrat", var(--font-base);
	font-weight: bold;
	color: rgb(0, 0, 0);
	font-size: var(--history-year-size);
	line-height: 1;
	padding: 0 0 min(40px, calc(100vw * 40 / 750)) 0;
}

.history-table__line {
	/* 40px (user-specified, 2026-08-06) is the FULL gap from the yellow
	   line to the year on its left AND to the entry text on its right --
	   implemented as this cell's own padding (not extra spacing on the
	   neighboring cells too, which would stack past 40px) so the
	   absolutely positioned line/dot below, centered at left:50% of this
	   cell's padding box, ends up exactly 40px from each neighbor. */
	position: relative;
	padding: 0 min(40px, calc(100vw * 40 / 750));
	vertical-align: top;
}

.history-table__line::before {
	/* Default (middle rows): full height, top:0 to bottom:0 -- connects
	   the PREVIOUS row's dot (line enters from the top) through to THIS
	   row's own dot and onward to the NEXT row's dot (line exits at the
	   bottom). Every dot except the first must have line above it (user,
	   2026-08-06); every dot except the last must have line below it. */
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background-color: var(--color-yellow);
	transform: translateX(-50%);
}

.history-table tr:first-child .history-table__line::before {
	/* First dot: no line above it (nothing to connect to up there) --
	   start the line AT the dot's own vertical center instead of the
	   row's top. */
	top: calc(var(--history-year-size) / 2);
}

.history-table tr:last-child .history-table__line::before {
	/* Last dot: no line below it -- stop the line AT the dot's own
	   vertical center instead of running to the row's bottom. (An
	   earlier version used display:none here, which wrongly hid the
	   line ABOVE the last dot too -- bug caught 2026-08-06.) */
	bottom: calc(100% - (var(--history-year-size) / 2));
}

.history-table__dot {
	position: absolute;
	/* Vertically centered on the year text's own line-box (see
	   --history-year-size above) -- "on the same line as the year"
	   (user, 2026-08-06), not at a fixed offset independent of font-size. */
	top: calc(var(--history-year-size) / 2);
	left: 50%;
	width: min(20px, calc(100vw * 20 / 750));
	height: min(20px, calc(100vw * 20 / 750));
	background-color: var(--color-yellow);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.history-table__content {
	vertical-align: top;
	padding: 0 0 min(40px, calc(100vw * 40 / 750));
}

.history-table__entries {
	/* margin-top compensates for the entry text's line-height:1.6 leading
	   (half-leading = (1.6-1)/2 = 0.3 of the font-size) so its first
	   line's glyph-top aligns with the year's glyph-top (year uses
	   line-height:1, i.e. zero leading) -- "a primeira linha também tem
	   que estar alinhada com o ano" (user, 2026-08-06). */
	list-style: none;
	margin: calc(var(--history-entry-size) * -0.3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: min(16px, calc(100vw * 16 / 750));
}

.history-table__entry {
	display: flex;
	gap: min(16px, calc(100vw * 16 / 750));
	font-size: var(--history-entry-size);
	color: rgb(0, 0, 0);
	line-height: 1.6;
}

.history-table__month {
	flex-shrink: 0;
	font-weight: bold;
	white-space: nowrap;
}

.history-chart-card {
	margin-top: min(60px, calc(100vw * 60 / 750));
	background-color: rgb(255, 255, 255);
	border-radius: min(40px, calc(100vw * 40 / 750));
	padding: min(32px, calc(100vw * 32 / 750));
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	}



.history-chart-card__canvas-wrap {
	/* 1360px (user-specified, 2026-08-06) -- SP is the horizontal-bar
	   orientation (19 year-rows stacked vertically, see history-chart.js),
	   needs far more height than the PC vertical-bar version below. */
	position: relative;
	height: min(1360px, calc(100vw * 1360 / 750));
}

.history-chart-card__canvas {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.history-chart-card__labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.history-chart-card__milestone {
	/* Default: vertical bars (PC) -- chip centered above the bar's tip. */
	position: absolute;
	transform: translate(-50%, calc(-100% - 8px));
	background-color: rgb(238, 238, 238);
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	white-space: nowrap;
	color: rgb(0, 0, 0);
}

.history-chart-card__milestone--horizontal {
	/* Horizontal bars (SP) -- chip sits just past the bar's tip (to the
	   right), vertically centered on the bar's own row instead of above
	   it. */
	transform: translate(8px, -50%);
}

@media (min-width: 1024px) {
	.history {
		padding: min(160px, calc(100vw * 160 / 1920)) 0;
	}

	.history__wrapper {
	padding: 0 clamp(80px, calc((100vw - 1200px) / 2), 360px);
}

	.history__grid {
		grid-template-columns: auto 1fr;
		grid-template-areas: "label content";
		column-gap: min(65px, calc(100vw * 65 / 1920));
	}

	.history-table tr {
		--history-year-size: min(28px, calc(100vw * 28 / 1920));
		--history-entry-size: min(16px, calc(100vw * 16 / 1920));
	}

	.history-table__year {
		padding-bottom: min(40px, calc(100vw * 40 / 1920));
	}

	.history-table__line {
		padding: 0 min(40px, calc(100vw * 40 / 1920));
	}

	.history-table__dot {
		top: min(16px, calc(100vw * 16 / 1920));
		width: min(16px, calc(100vw * 16 / 1920));
		height: min(16px, calc(100vw * 16 / 1920));
	}

	.history-table__content {
		padding-bottom: min(40px, calc(100vw * 40 / 1920));
	}

	.history-table__entries {
		gap: min(16px, calc(100vw * 16 / 1920));
	}

	.history-table__entry {
		gap: min(16px, calc(100vw * 16 / 1920));
	}


	.history-chart-card {
	margin-top: min(60px, calc(100vw * 60 / 1920));
	border-radius: min(40px, calc(100vw * 40 / 1920));
	padding: min(40px, calc(100vw * 40 / 1920));

	width: calc(100% - 60px);
	justify-self: center;
}

	.history-chart-card__canvas-wrap {
		height: min(420px, calc(100vw * 420 / 1920));
	}

.history-chart-title,
.history-chart-card {
	grid-column: 1 / -1;
}

}

/* Contact points (docs/imgs/contact/title.png + titlesp.png) -- 3 icon
   circles (phone/email/address) below the page title. Icons are inline
   Feather-style SVGs, not the client's mockup PNGs -- those bake the
   phone number/email/address text into the raster image itself, which
   needs to stay real, selectable HTML (and phone/email need to stay
   tel:/mailto: links). Same 150px width on SP and PC, per spec. */

/* Target is 50px (SP) / 115px (PC) below the page-header's JA subtitle --
   same dead-space correction as .Service-intro (see that rule's comment):
   the shared page-header wrapper reserves a flat min-height:500px, leaving
   ~224px (SP ref 750) / ~231px (PC ref 1920) of empty space below the
   subtitle on pages (like Contact) with no nav_items. */
.contact-points {
	/* Same fix as .privacy-policy-section/.news-list-section -- without
	   being positioned + a z-index above the (unpositioned) page-header,
	   this section's negative margin let the header's circles show in
	   front of its own content instead of tucked behind it. */
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: max(-174.09px, calc(100vw * -174.09 / 750));
	padding: 0 0 min(75px, calc(100vw * 75 / 750));
}

/* Fixed-width columns (= icon width) keep the gap between icon 1/2 exactly
   equal to icon 2/3 -- a flex row would let the widest label (address)
   grow its own item wider than the others, silently eating into the gap
   on one side. The label itself must NOT be limited to the icon's 150px
   though (that produced 4-5 line wrapping for no reason) -- .contact-
   points__item centers its children instead of stretching them, so
   .contact-points__label's own max-width (icon width + gap, see below)
   can overflow the 150px column symmetrically without touching the
   neighboring item, and without changing the icon-to-icon distance. */
.contact-points__list {
	display: grid;
	grid-template-columns: repeat(3, min(150px, calc(100vw * 150 / 750)));
	justify-content: center;
	gap: min(80px, calc(100vw * 80 / 750));
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-points__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.contact-points__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(150px, calc(100vw * 150 / 750));
	height: min(150px, calc(100vw * 150 / 750));
	background-color: rgb(0, 0, 0);
	border-radius: 50%;
}

.contact-points__icon svg {
	width: 40%;
	height: 40%;
	color: rgb(255, 255, 255);
}

/* max-width = icon width (150px) + the full gap, so the label can spill
   evenly into the empty gap space on both sides of its icon without ever
   reaching the neighboring item's center -- the farthest two adjacent
   labels' edges can get is touching exactly at the midpoint between the
   two icons. Both terms share the same 750 reference width, so this scales
   as one continuous fluid value together with the icon/gap it's derived
   from (no separate breakpoint math needed). */
.contact-points__label {
	display: block;
	width: max-content;
	max-width: min(230px, calc(100vw * 230 / 750));
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	font-size: min(22px, calc(100vw * 22 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
	text-decoration: none;
	line-height: 1.6;
	/* Each line is a manual <br> break authored to match the client's exact
	   wrap points (address especially) -- nowrap stops the browser from
	   adding its OWN extra wraps inside one of those lines when it's wider
	   than max-width (that cap is a soft anti-overlap guide, not a hard
	   wrap boundary). */
	white-space: nowrap;
}

/* Address label only -- client asked for a smaller font here than
   phone/email (its 4 lines on SP / 3 on PC are already the tallest item). */
.contact-points__item:last-child .contact-points__label {
	font-size: min(18px, calc(100vw * 18 / 750));
}

@media (min-width: 1024px) {
	.contact-points {
		margin-top: max(-116.16px, calc(100vw * -116.16 / 1920));
		padding-bottom: min(75px, calc(100vw * 75 / 1920));
	}

	.contact-points__list {
		grid-template-columns: repeat(3, min(150px, calc(100vw * 150 / 1920)));
		gap: min(195px, calc(100vw * 195 / 1920));
	}

	.contact-points__icon {
		width: min(150px, calc(100vw * 150 / 1920));
		height: min(150px, calc(100vw * 150 / 1920));
	}

	.contact-points__break--sp {
		display: none;
	}

	/* 345 = icon 150 + gap 195, same derivation as the SP value above but
	   against the 1920 PC reference width. */
	.contact-points__label {
		max-width: min(345px, calc(100vw * 345 / 1920));
	}
}

/* Contact form section -- ".bg" in the client's CSS. */
.contact-form-section {
	width: 100%;
	padding: min(100px, calc(100vw * 100 / 750)) min(30px, calc(100vw * 30 / 750));
	background-color: rgb(247, 247, 247);
}

@media (min-width: 1024px) {
	.contact-form-section {
		padding: min(71px, calc(100vw * 71 / 1920))
			 clamp(80px, calc((100vw - 1200px) / 2), 360px);
	}
}

/* Form white card -- ".長方形_873" in the client's CSS. */
.contact-form-card {
	background-color: rgb(255, 255, 255);
	border-radius: min(60px, calc(100vw * 60 / 750));
	padding: min(81px, calc(100vw * 81 / 750)) min(50px, calc(100vw * 50 / 750));
}

@media (min-width: 1024px) {
	.contact-form-card {
		border-radius: min(60px, calc(100vw * 60 / 1920));
		padding: min(62px, calc(100vw * 62 / 1920)) min(80px, calc(100vw * 80 / 1920));
	}
}

.contact-form {
	width: 100%;
}

/* The grid (and its gap, field-to-field spacing) has to target the actual
   <form>, not .contact-form itself -- CF7 wraps its whole output in a
   .wpcf7 div, so .contact-form only ever has that one div as a child;
   .wpcf7-form is the real parent of each .contact-form__field. */
.contact-form .wpcf7-form {
	display: grid;
	gap: min(70px, calc(100vw * 70 / 750));
}

@media (min-width: 1024px) {
	.contact-form .wpcf7-form {
		gap: min(50px, calc(100vw * 50 / 1920));
	}
}

.contact-form label {
	display: flex;
	align-items: center;
	margin-bottom: min(27px, calc(100vw * 27 / 750));
	font-weight: bold;
}

@media (min-width: 1024px) {
	.contact-form label {
		margin-bottom: min(15px, calc(100vw * 15 / 1920));
	}
}

/* ".長方形_878" in the client's CSS export. */
.contact-form input,
.contact-form textarea,
.contact-form select {
	box-sizing: border-box;
	width: 100%;
	height: min(87px, calc(100vw * 87 / 750));
	padding: 0 min(24px, calc(100vw * 24 / 750));
	border: min(2px, calc(100vw * 2 / 750)) solid rgb(212, 212, 212);
	border-radius: min(15px, calc(100vw * 15 / 750));
	font-family: var(--font-base);
	font-size: 16px;
}

/* Not a single-line control -- same border/radius language as the rest,
   but tall enough to actually write a message in (no height given for
   this one in the client's CSS, only the single-line box above). */
.contact-form textarea {
	height: min(280px, calc(100vw * 280 / 750));
	padding-top: min(20px, calc(100vw * 20 / 750));
	resize: vertical;
}

@media (min-width: 1024px) {
	.contact-form input,
	.contact-form select {
		height: min(48px, calc(100vw * 48 / 1920));
		padding: 0 min(16px, calc(100vw * 16 / 1920));
		border-width: min(1px, calc(100vw * 1 / 1920));
		border-radius: min(10px, calc(100vw * 10 / 1920));
	}

	.contact-form textarea {
		height: min(180px, calc(100vw * 180 / 1920));
		padding: min(12px, calc(100vw * 12 / 1920)) min(16px, calc(100vw * 16 / 1920));
		border-width: min(1px, calc(100vw * 1 / 1920));
		border-radius: min(10px, calc(100vw * 10 / 1920));
	}

	/* 郵便番号/都道府県/電話番号/FAX番号 -- narrower fixed width on PC instead
	   of stretching full-width like the rest of the form (SP stays 100%,
	   untouched). Field IDs come straight from the CF7 form's own field
	   names (wp_postmeta _form on post 24), not markup in this repo. */
	#postal-code,
	#prefecture,
	#phone,
	#fax {
		width: 310px;
	}
}

.contact-form select {
	background-color: rgb(255, 255, 255);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

/* 必須/任意 pills next to each label -- yellow for required (matches the
   button/accent color), gray for optional. Sizes are estimated (not in the
   client's CSS export, only visible in the formpc/formsp mockups) to sit
   comfortably next to the ~16px label text. */
.contact-form__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: bold;
	vertical-align: middle;
}

.contact-form__badge--required {
	background-color: var(--color-yellow);
	color: rgb(0, 0, 0);
}

.contact-form__badge--optional {
	background-color: rgb(230, 230, 230);
	color: rgb(90, 90, 90);
}

/* お客様情報 / ご意見・ご質問 -- section headings inside the form itself
   (separate from .contact-form-heading__text, the card's own big title). */
.contact-form__section-title {
	margin: 8px 0 4px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.contact-form__section-title--second {
	margin-top: 24px;
}

/* Submit button reuses the site's shared .button/.button--accent/
   .button--arrow classes (same as the hero and Recruit CTAs) instead of a
   bespoke style, so it looks consistent with every other yellow button on
   the site. It's a plain <button> in the form template (not CF7's
   [submit] tag) specifically so :.button--arrow's ::after arrow can
   render -- generated content doesn't apply to replaced elements like
   <input>. */
.contact-form__submit-wrap {
	margin-top: min(16px, calc(100vw * 16 / 750));
	text-align: center;
}

.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	color: rgb(200, 0, 0);
	font-size: 0.85rem;
}

.contact-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 8px;
}

.contact-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--color-yellow);
}

.contact-form__notice {
	padding: 16px;
	background: var(--color-gray-light);
}

.contact-form__note {
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	font-size: min(24px, calc(100vw * 24 / 750));
	color: rgb(149, 149, 149);
	text-align: center;
}

@media (min-width: 1024px) {
	.contact-form__note {
		font-size: min(14px, calc(100vw * 14 / 1920));
	}
}

/* Shared "small title + decorative ring" pattern used above both the
   お問い合わせフォーム form and the アクセス map (docs/imgs/contact/
   formpc.png + formsp.png). The ring is a normal-flow element (not an
   absolutely-positioned overlay on the title) specifically so the card's
   own top padding is measured to the RING's top edge, not the text's --
   the title then overlaps the ring's lower portion via a negative
   margin-top, pulling it up. box-sizing:border-box here (unlike the
   page-header circles above) because the client explicitly gave these
   numbers as the ring's outer diameter (150px SP / 106px PC), border
   included, not a content size with the border added on top. Ring and
   text share the same grid cell (both centered by
   default align-items/justify-items:center) so the text sits exactly on
   the ring's center on both axes, and -- since the ring is the taller of
   the two -- it alone determines the row height, so the card's top
   padding still lands exactly on the ring's own top edge. */
.contact-form-heading {
	display: grid;
	justify-items: center;
	align-items: center;
	margin: 0 0 min(38px, calc(100vw * 38 / 750));
}

.contact-form-heading__ring {
	grid-area: 1 / 1;
	box-sizing: border-box;
	width: min(150px, calc(100vw * 150 / 750));
	height: min(150px, calc(100vw * 150 / 750));
	border: min(30px, calc(100vw * 30 / 750)) solid var(--color-yellow);
	border-radius: 50%;
}

.contact-form-heading__text {
	grid-area: 1 / 1;
	margin: 0;
	font-size: min(32px, calc(100vw * 32 / 750));
	font-weight: bold;
	text-align: center;
}

@media (min-width: 1024px) {
	.contact-form-heading__ring {
		width: min(106px, calc(100vw * 106 / 1920));
		height: min(106px, calc(100vw * 106 / 1920));
		border-width: min(20px, calc(100vw * 20 / 1920));
	}

	.contact-form-heading__text {
		font-size: min(28px, calc(100vw * 28 / 1920));
	}
}

.contact-form-heading__desc {
	margin: 0 0 min(40px, calc(100vw * 40 / 750));
	font-size: min(24px, calc(100vw * 24 / 750));
	color: rgb(90, 90, 90);
	text-align: center;
	line-height: 1.7;
}

@media (min-width: 1024px) {
	.contact-form-heading__desc {
		margin-bottom: min(48px, calc(100vw * 48 / 1920));
		font-size: min(16px, calc(100vw * 16 / 1920));
	}
}

/* アクセス -- map + address, below the form card. ".長方形_833" (PC) /
   ".base" (SP) in the client's CSS export. */
.contact-access {
	width: 100%;
	padding: min(100px, calc(100vw * 100 / 750)) min(30px, calc(100vw * 30 / 750));
	text-align: center;
}

/* Map + address share one wrapper sized exactly to the map's own width and
   centered as a unit (margin:0 auto) -- the address text-aligns left
   *within that wrapper*, so it starts at the map's left edge without
   pulling the map itself off-center. */
.contact-access__inner {
	width: min(690px, calc(100vw * 690 / 750));
	margin: 0 auto;
}

.contact-access__map {
	width: 100%;
	height: min(440px, calc(100vw * 440 / 750));
	border-radius: min(60px, calc(100vw * 60 / 750));
	overflow: hidden;
	background-color: rgb(147, 147, 147);
}

.contact-access__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact-access__address {
	margin: min(24px, calc(100vw * 24 / 750)) 0 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
}

@media (min-width: 1024px) {
	.contact-access {
		padding: min(100px, calc(100vw * 100 / 1920))
			 clamp(80px, calc((100vw - 1200px) / 2), 360px);
}

	.contact-access__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

	.contact-access__map {
		height: min(600px, calc(100vw * 600 / 1920));
		border-radius: min(60px, calc(100vw * 60 / 1920));
	}

	.contact-access__address {
		font-size: min(16px, calc(100vw * 16 / 1920));
	}

	.contact-access__break--sp {
		display: none;
	}
}

/* Privacy Policy -- gray section like .news-list-section, plain WP editor
   content (the default privacy-policy template's <h2> section headings).
   Small ring accent before each heading, same side-by-side ring+text
   pattern as .section-label, just sized differently for this page. */
.privacy-policy-section {
	/* .page-header is position:relative (needed for its own children) --
	   per CSS stacking rules, ANY positioned element paints above static
	   (non-positioned) content, regardless of DOM order or a non-negative
	   z-index on the positioned one. That silently put the header's
	   decorative circles in front of this section instead of tucked behind
	   it wherever the negative margin below makes them overlap. Making
	   this section positioned too, with a z-index above the header's
	   (which has none/auto), puts the real z-index comparison back in our
	   control -- confirmed this is the actual mechanism, not guessed. */
	position: relative;
	z-index: 2;
	width: 100%;
	/* Same page-header dead-space correction as .news-list-section/
	   .contact-points -- raw gap measured 224px at the 750 SP reference /
	   231px at the 1920 PC reference, closed down to the site's standard
	   75px gap below the subtitle. */
	margin-top: max(-149.09px, calc(100vw * -149.09 / 750));
	padding: min(60px, calc(100vw * 60 / 750)) min(20px, calc(100vw * 20 / 750));
	background-color: rgb(247, 247, 247);
	font-size: min(28px, calc(100vw * 28 / 750));
	line-height: 1.8;
	color: rgb(0, 0, 0);
}

.privacy-policy-content h2 {
	display: flex;
	align-items: center;
	gap: min(16px, calc(100vw * 16 / 750));
	margin: min(60px, calc(100vw * 60 / 750)) 0 min(24px, calc(100vw * 24 / 750));
	font-size: min(34px, calc(100vw * 34 / 750));
	font-weight: bold;
}

.privacy-policy-content h2:first-child {
	margin-top: 0;
}

.privacy-policy-content h2::before {
	content: "";
	flex-shrink: 0;
	box-sizing: border-box;
	width: min(44px, calc(100vw * 44 / 750));
	height: min(44px, calc(100vw * 44 / 750));
	border: min(9px, calc(100vw * 9 / 750)) solid var(--color-yellow);
	border-radius: 50%;
}

/* "・" prefix instead of a native disc bullet, matching the reference. */
.privacy-policy-content .privacy-policy-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.privacy-policy-content .privacy-policy-list li::before {
	content: "・";
}

/* White contact-details card inside the 開示・訂正・削除 section
   (docs/imgs/privacy/sample.png). */
.privacy-policy-content .privacy-policy-box {
	margin: min(24px, calc(100vw * 24 / 750)) 0 0;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 30px;
	border-radius: min(60px, calc(100vw * 60 / 750));
	background-color: rgb(255, 255, 255);
}

.privacy-policy-content .privacy-policy-box p {
	margin: 0;
	line-height: 1.8;
}

.privacy-policy-content .privacy-policy-divider {
	margin: min(40px, calc(100vw * 40 / 750)) 0;
	border: none;
	border-top: 1px solid rgb(212, 212, 212);
}

.privacy-policy-content .privacy-policy-signature {
	margin: 0;
	text-align: right;
}

@media (min-width: 1024px) {
	.privacy-policy-section {
		margin-top: max(-156.15px, calc(100vw * -156.15 / 1920));
		padding: min(100px, calc(100vw * 100 / 1920))
			 clamp(80px, calc((100vw - 1200px) / 2), 360px);
		font-size: min(16px, calc(100vw * 16 / 1920));
	}

	.privacy-policy-content h2 {
		gap: min(16px, calc(100vw * 16 / 1920));
		margin: min(60px, calc(100vw * 60 / 1920)) 0 min(24px, calc(100vw * 24 / 1920));
		font-size: min(22px, calc(100vw * 22 / 1920));
	}

	.privacy-policy-content h2::before {
		width: min(32px, calc(100vw * 32 / 1920));
		height: min(32px, calc(100vw * 32 / 1920));
		border-width: min(7px, calc(100vw * 7 / 1920));
	}
}

/* Recruit -- "block 01" (docs/imgs/recruit/title.png + title-sp.png for
   the tagline, block-01.png + block-01-sp.png for the rest). */
.recruit-tagline {
	/* Same page-header dead-space correction pattern as .news-list-section
	   etc. -- raw gap measured 224px at the 750 SP reference, closed down
	   to the client's requested 60px. Positioned + z-index above the
	   (unpositioned) page-header for the same reason as those: without it,
	   the header's circles paint in front of this text instead of behind
	   it wherever the negative margin makes them overlap. */
	position: relative;
	z-index: 2;
	margin: max(-164.09px, calc(100vw * -164.09 / 750)) 0 0;
	padding: 0 min(20px, calc(100vw * 20 / 750)) min(70px, calc(100vw * 70 / 750));
	/* Same size as the page-header's own JA subtitle (.section-title__ja,
	   28px flat at the SP reference) -- client wants them visually
	   matching. */
	font-size: min(28px, calc(100vw * 28 / 750));
	line-height: 2.071;
	text-align: center;
	color: rgb(0, 0, 0);
}

.recruit-block-01 {
	/* The page-header's circles are tall enough to extend past
	   .recruit-tagline (which already has this same fix) into this
	   section too -- same reasoning, needs its own position+z-index or the
	   circles paint in front of ITS opaque background as well. */
	position: relative;
	z-index: 2;
	width: 100%;
	padding: min(85px, calc(100vw * 85 / 750)) min(30px, calc(100vw * 30 / 750));
	background-color: rgb(247, 247, 247);
}

.recruit-challenge {
	padding: 0 min(15px, calc(100vw * 15 / 750));
}

.recruit-challenge__img {
	display: block;
	width: min(567px, calc(100vw * 567 / 750));
	height: auto;
}

.recruit-challenge__text {
	margin: min(55px, calc(100vw * 55 / 750)) 0 0;
	font-size: min(37.622px, calc(100vw * 37.622 / 750));
	font-weight: bold;
	line-height: 2.071;
	text-align: left;
	color: rgb(0, 0, 0);
}

.recruit-buttons {
	display: flex;
	justify-content: center;
	gap: min(20px, calc(100vw * 20 / 750));
	margin-top: min(85px, calc(100vw * 85 / 750));
}

/* Reference-canvas + transform:scale technique (same as .hero-mv/
   .page-header-pc/sp) instead of tweaking font-size/arrow-inset on the
   button individually: the wrap reserves the correctly-shrunk LAYOUT
   space (so flex/gap sizing stays right), and the button inside keeps its
   true fixed 335x100 design size -- text, padding and the arrow's own
   30px/14px inset all scale together as one unit, automatically, instead
   of needing their own separate fluid formulas. */
.recruit-button-wrap {
	position: relative;
	width: min(335px, calc(100vw * 335 / 750));
	height: min(100px, calc(100vw * 100 / 750));
}

.recruit-button-wrap .button {
	position: absolute;
	top: 0;
	left: 0;
	width: 335px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	/* Flat value (not calc/min) -- the wrap's transform:scale above already
	   handles the responsive shrink, so this is just the size at the 750
	   reference width. */
	font-size: 28px;
	transform: scale(min(1, calc(100vw / 750px)));
	transform-origin: top left;
}

.recruit-challenge2 {
	display: block;
	margin: min(115px, calc(100vw * 115 / 750)) auto 0;
	width: min(336px, calc(100vw * 336 / 750));
	height: auto;
}

.recruit-block-01__lead {
	/* SP margin-top value was cut off in the client's spec message (just
	   "5") -- estimated at 50px pending the real number. */
	margin: min(50px, calc(100vw * 50 / 750)) 0 0;
	font-size: min(25px, calc(100vw * 25 / 750));
	line-height: 1.857;
	text-align: center;
	color: rgb(0, 0, 0);
}

.recruit-block-01__heading {
	margin: min(70px, calc(100vw * 70 / 750)) 0 0;
	font-size: min(34px, calc(100vw * 34 / 750));
	font-weight: bold;
	line-height: 1.658;
	text-align: center;
	color: rgb(0, 0, 0);
}

/* Columns are sized to the circle's own diameter (not 1fr) and centered
   as a group with justify-content -- same fixed-column technique as
   .contact-points__list, so `gap` is the real, exact visual gap between
   circles instead of `gap` plus whatever slack was left over from a wider
   1fr column not fully filled by the (smaller) circle. */
.recruit-skills {
	display: grid;
	grid-template-columns: repeat(2, min(255px, calc(100vw * 255 / 750)));
	justify-content: center;
	/* SP margin-top wasn't given for the circles block, only column/row
	   gap -- estimated to match the rhythm of the surrounding spacing. */
	margin: min(40px, calc(100vw * 40 / 750)) 0 0;
	padding: 0;
	gap: min(30px, calc(100vw * 30 / 750));
	list-style: none;
}

.recruit-skills li {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: min(255px, calc(100vw * 255 / 750));
	height: min(255px, calc(100vw * 255 / 750));
	padding: min(10px, calc(100vw * 10 / 750));
	border: min(20px, calc(100vw * 20 / 750)) solid rgb(255, 255, 255);
	border-radius: 50%;
}

.recruit-skills li span {
	font-size: clamp(13px, calc(100vw * 24 / 750), 24px);
	font-weight: bold;
	line-height: 1.667;
	text-align: center;
	color: rgb(0, 0, 0);
}

@media (min-width: 1024px) {
	.recruit-tagline {
		/* Raw gap measured 231px at the 1920 PC reference, closed to the
		   client's requested 55px. */
		margin-top: max(-176.13px, calc(100vw * -176.13 / 1920));
		font-size: clamp(14px, calc(100vw * 24 / 1920), 24px);
		line-height: normal;
	}

	.recruit-block-01 {
		padding: min(110px, calc(100vw * 110 / 1920)) min(360px, calc(100vw * 360 / 1920));
	}

	.recruit-challenge {
		display: flex;
		align-items: flex-end;
		padding: 0;
	}

	.recruit-challenge__img {
		width: min(670px, calc(100vw * 670 / 1920));
		flex-shrink: 0;
	}

	.recruit-challenge__text {
		margin: 0 0 0 min(80px, calc(100vw * 80 / 1920));
		font-size: 20px;
		line-height: 2.1;
	}

	.recruit-buttons {
		gap: min(20px, calc(100vw * 20 / 1920));
		margin-top: min(90px, calc(100vw * 90 / 1920));
	}

	.recruit-button-wrap {
		width: 330px;
		height: 70px;
	}

	.recruit-button-wrap .button {
		width: 330px;
		height: 70px;
		font-size: 18px;
		transform: none;
	}

	.recruit-challenge2 {
		margin: min(90px, calc(100vw * 90 / 1920)) auto 0;
		width: min(245px, calc(100vw * 245 / 1920));
	}

	.recruit-block-01__lead {
		margin-top: min(30px, calc(100vw * 30 / 1920));
		font-size: min(24px, calc(100vw * 24 / 1920));
		line-height: 2.333;
	}

	.recruit-block-01__heading {
		margin-top: min(48px, calc(100vw * 48 / 1920));
		font-size: min(35px, calc(100vw * 35 / 1920));
		line-height: 1.615;
	}

	.recruit-skills {
		grid-template-columns: repeat(4, clamp(128px, calc(100vw * 170 / 1920), 170px));
		margin-top: min(30px, calc(100vw * 30 / 1920));
		gap: clamp(12px, calc(100vw * 18 / 1920), 18px);
	}

	.recruit-skills li {
		width: clamp(128px, calc(100vw * 170 / 1920), 170px);
		height: clamp(128px, calc(100vw * 170 / 1920), 170px);
		padding: clamp(3px, calc(100vw * 5 / 1920), 5px);
		border-width: clamp(10px, calc(100vw * 14 / 1920), 14px);
	}

	.recruit-skills li span {
		font-size: clamp(13px, calc(100vw * 16 / 1920), 16px);
		line-height: 1.695;
	}
}

/* 募集職種 (job openings) -- white section, .field-showcase__heading/
   __ring/__title reused as-is from the Entertainment page for the title.
   Card layout genuinely differs PC vs SP (icon top-right + left-aligned
   title vs icon centered below a centered title), so the icon is
   position:absolute on PC and normal-flow-centered on SP, same element,
   no markup duplication. */
.job-openings {
	width: 100%;
	padding: min(85px, calc(100vw * 85 / 750)) min(30px, calc(100vw * 30 / 750));
	background-color: rgb(255, 255, 255);
	/* .field-showcase__title has no text-align of its own -- on the
	   Entertainment page it inherits center from .field-showcase__item.
	   Needed here explicitly since this section's own parent isn't
	   centered. */
	text-align: center;
}

.job-openings__subtitle {
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	font-size: min(24px, calc(100vw * 24 / 750));
	text-align: center;
	color: rgb(90, 90, 90);
}

.job-openings__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: min(30px, calc(100vw * 30 / 750));
	margin: min(60px, calc(100vw * 60 / 750)) 0 0;
	padding: 0;
	list-style: none;
}

.job-card {
	position: relative;
	box-sizing: border-box;
	padding: min(60px, calc(100vw * 60 / 750)) min(40px, calc(100vw * 40 / 750));
	border: min(2px, calc(100vw * 2 / 750)) solid rgb(212, 212, 212);
	border-radius: min(50px, calc(100vw * 50 / 750));
	background-color: rgb(255, 255, 255);
}

.job-card__category {
	display: inline-block;
	padding: min(4px, calc(100vw * 4 / 750)) min(15px, calc(100vw * 15 / 750));
	border-radius: 999px;
	background-color: var(--color-yellow);
	font-size: clamp(10px, calc(100vw * 18 / 750), 18px);
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.job-card__icon {
	display: block;
	width: min(90px, calc(100vw * 90 / 750));
	height: auto;
	margin: min(24px, calc(100vw * 24 / 750)) auto 0;
}

.job-card__title {
	margin: min(24px, calc(100vw * 24 / 750)) 0 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	font-weight: bold;
	text-align: center;
	color: rgb(0, 0, 0);
}

.job-card__desc {
	margin: min(24px, calc(100vw * 24 / 750)) 0 0;
	font-size: clamp(13px, calc(100vw * 24 / 750), 24px);
	line-height: 1.833;
	text-align: left;
	color: rgb(0, 0, 0);
}

.job-card__more {
	/* display:flex (not inline-flex) on purpose: an inline-flex box is
	   positioned by its PARENT's text-align (inherited center from
	   .job-openings), not its own -- setting text-align:left on itself did
	   nothing, since that property only controls how a box aligns its own
	   inline-level children, not how the box itself sits in its parent's
	   line (caught: it stayed centered despite that). A block-level flex
	   container isn't affected by text-align at all -- it just starts at
	   the left edge of .job-card like any other block. */
	display: flex;
	align-items: center;
	gap: min(12px, calc(100vw * 12 / 750));
	margin: min(24px, calc(100vw * 24 / 750)) 0 0;
	width: fit-content;
	text-decoration: none;
	color: rgb(0, 0, 0);
	font-size: clamp(13px, calc(100vw * 24 / 750), 24px);
}

.job-card__more .news-list__arrow {
	width: min(44px, calc(100vw * 44 / 750));
	height: min(44px, calc(100vw * 44 / 750));
}

/* The arrow icon's own size comes from the <img>'s width/height HTML
   attributes (14px, shared markup with .news-list__more elsewhere) --
   CSS here overrides that down just a little so it doesn't fill most of
   the bigger circle above. Flat px on purpose (not the usual min()/calc()
   fluid formula) -- that formula shrinks below the 750px reference, which
   at real phone widths (~375px) made a "12px" icon render at ~6px and
   disappear. A tiny fixed icon staying legible matters more here than
   scaling perfectly in step with the circle around it. */
.job-card__more .news-list__arrow img {
	width: 12px;
	height: 12px;
}

/* SPの2列カードは高さを保ったまま、詳細ボタンだけ44pxのタップ領域を確保する。 */
@media (max-width: 599px) {
	.job-card__more {
		position: relative;
	}

	.job-card__more::before {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 44px;
		content: "";
		transform: translateY(-50%);
	}
}

@media (min-width: 1024px) {
	.job-openings {
		padding: min(110px, calc(100vw * 110 / 1920)) min(360px, calc(100vw * 360 / 1920));
	}

	.job-openings__subtitle {
		font-size: min(16px, calc(100vw * 16 / 1920));
	}

	.job-openings__list {
		grid-template-columns: repeat(2, 1fr);
		gap: min(44px, calc(100vw * 44 / 1920));
		margin-top: min(60px, calc(100vw * 60 / 1920));
	}

	.job-card {
		padding: min(48px, calc(100vw * 48 / 1920)) min(50px, calc(100vw * 50 / 1920));
		border-width: min(1px, calc(100vw * 1 / 1920));
		border-radius: min(50px, calc(100vw * 50 / 1920));
	}

	.job-card__category {
		font-size: clamp(10px, calc(100vw * 12 / 1920), 12px);
	}

	.job-card__icon {
		position: absolute;
		top: min(40px, calc(100vw * 40 / 1920));
		right: min(50px, calc(100vw * 50 / 1920));
		margin: 0;
		width: min(64px, calc(100vw * 64 / 1920));
	}

	.job-card__title {
		max-width: 70%;
		font-size: clamp(16px, calc(100vw * 20.1 / 1920), 20.1px);
		text-align: left;
	}

	.job-card__desc {
		font-size: clamp(14px, calc(100vw * 16 / 1920), 16px);
		line-height: 1.875;
	}

	.job-card__more {
		font-size: clamp(12px, calc(100vw * 16 / 1920), 16px);
	}

	.job-card__more .news-list__arrow {
		width: min(30px, calc(100vw * 30 / 1920));
		height: min(30px, calc(100vw * 30 / 1920));
	}
}

/* 募集職種 detail cards (docs/imgs/recruit/part2.png [actually SP, 750w
   despite the plain name] + part2sp.png [actually PC, 1920w -- the
   client's file names are swapped from what they say, verified by actual
   pixel dimensions]). Always one card per row on both breakpoints; within
   each card, title+description+divider+skills sit in a column with the
   circular photo (img1.png..img5.png, one per job, in the same order as
   the cards above) beside it via flex, at any width -- only the sizes
   change PC vs SP, not the arrangement. */
.job-details {
	width: 100%;
	padding: 0 min(30px, calc(100vw * 30 / 750)) min(85px, calc(100vw * 85 / 750));
	background-color: rgb(255, 255, 255);
}

/* SP: title/desc/divider are full-width rows; skills + photo share the
   last row (photo beside the skills text only, per the original design --
   see .job-detail-card__photo below). PC: photo becomes its own column
   spanning every row, beside the whole text column (client correction:
   "a imagem [...] fica a direita [da linha divisória]. Como se fosse todo
   o conteúdo numa coluna e a imagem outra."). Named grid-template-areas
   let the same markup produce both without duplicating elements. */
.job-detail-card {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title title"
		"desc desc"
		"divider divider"
		"skills photo"
		"guideline guideline";
	align-items: start;
	column-gap: min(30px, calc(100vw * 30 / 750));
	row-gap: 0;
	box-sizing: border-box;
	padding: min(50px, calc(100vw * 50 / 750));
	border: min(2px, calc(100vw * 2 / 750)) solid rgb(212, 212, 212);
	border-radius: min(60px, calc(100vw * 60 / 750));
}

.job-detail-card + .job-detail-card {
	margin-top: min(40px, calc(100vw * 40 / 750));
}

.job-detail-card__title {
	grid-area: title;
	min-width: 0;
	margin: 0;
	font-size: min(38px, calc(100vw * 38 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.job-detail-card__desc {
	grid-area: desc;
	min-width: 0;
	margin: min(12px, calc(100vw * 12 / 750)) 0 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	line-height: 1.857;
	color: rgb(0, 0, 0);
}

.job-detail-card__divider {
	grid-area: divider;
	margin: min(30px, calc(100vw * 30 / 750)) 0;
	border: none;
	border-top: 1px solid rgb(212, 212, 212);
}

.job-detail-card__skills {
	grid-area: skills;
	min-width: 0;
}

.job-detail-card__skills h4 {
	margin: 0 0 min(16px, calc(100vw * 16 / 750));
	font-size: min(28px, calc(100vw * 28 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.job-detail-card__skills ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.job-detail-card__skills li {
	font-size: min(28px, calc(100vw * 28 / 750));
	line-height: 1.857;
	color: rgb(0, 0, 0);
}

.job-detail-card__skills li::before {
	content: "・";
}

.job-detail-card__photo {
	grid-area: photo;
	flex-shrink: 0;
	display: block;
	width: min(254px, calc(100vw * 254 / 750));
	height: min(254px, calc(100vw * 254 / 750));
	border-radius: 50%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.job-details {
		padding: 0 min(360px, calc(100vw * 360 / 1920)) min(110px, calc(100vw * 110 / 1920));
	}

	.job-detail-card {
		grid-template-areas:
			"title photo"
			"desc photo"
			"divider photo"
			"skills photo"
			"guideline guideline";
		align-items: center;
		column-gap: min(40px, calc(100vw * 40 / 1920));
		padding: min(48px, calc(100vw * 48 / 1920)) min(50px, calc(100vw * 50 / 1920));
		border-width: min(1px, calc(100vw * 1 / 1920));
		border-radius: min(60px, calc(100vw * 60 / 1920));
	}

	.job-detail-card + .job-detail-card {
		margin-top: min(40px, calc(100vw * 40 / 1920));
	}

	.job-detail-card__title {
		font-size: clamp(18px, calc(100vw * 26 / 1920), 26px);
	}

	.job-detail-card__desc {
		font-size: clamp(14px, calc(100vw * 16 / 1920), 16px);
		line-height: 1.875;
	}

	.job-detail-card__skills h4 {
		font-size: clamp(16px, calc(100vw * 18 / 1920), 18px);
	}

	.job-detail-card__skills li {
		font-size: clamp(14px, calc(100vw * 18 / 1920), 18px);
		line-height: 1.667;
	}

	.job-detail-card__photo {
		width: min(220px, calc(100vw * 220 / 1920));
		height: min(220px, calc(100vw * 220 / 1920));
	}
}


/* Recruit: 募集要項。既存の職種カードは触らず、詳細モーダル内だけ拡張する。 */
.job-detail-card__guideline {
	grid-area: guideline;
	min-width: 0;
	margin-top: min(36px, calc(100vw * 36 / 750));
	padding-top: min(30px, calc(100vw * 30 / 750));
	border-top: 1px solid rgb(212, 212, 212);
	text-align: left;
}

.job-detail-card__guideline-title {
	margin: 0 0 min(20px, calc(100vw * 20 / 750));
	font-size: clamp(18px, calc(100vw * 30 / 750), 30px);
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.job-guideline {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgb(224, 224, 224);
}

.job-guideline__row {
	display: grid;
	grid-template-columns: minmax(90px, 28%) minmax(0, 1fr);
	border-top: 1px solid rgb(224, 224, 224);
}

.job-guideline__row dt,
.job-guideline__row dd {
	min-width: 0;
	margin: 0;
	padding: min(16px, calc(100vw * 16 / 750)) min(14px, calc(100vw * 14 / 750));
	font-size: clamp(13px, calc(100vw * 24 / 750), 24px);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.job-guideline__row dt {
	background-color: rgb(247, 247, 247);
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.job-guideline__row dd {
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}

/* 募集要項追加でモーダルが縦長になっても上端が画面外へ逃げないようにする。
   dialog の margin:auto は維持するため、内容が短い場合は従来どおり自然に中央へ寄る。 */
.job-modal {
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.job-detail-card__guideline {
		margin-top: min(34px, calc(100vw * 34 / 1920));
		padding-top: min(28px, calc(100vw * 28 / 1920));
	}

	.job-detail-card__guideline-title {
		margin-bottom: min(18px, calc(100vw * 18 / 1920));
		font-size: clamp(18px, calc(100vw * 22 / 1920), 22px);
	}

	.job-guideline__row {
		grid-template-columns: minmax(150px, 22%) minmax(0, 1fr);
	}

	.job-guideline__row dt,
	.job-guideline__row dd {
		padding: min(14px, calc(100vw * 14 / 1920)) min(18px, calc(100vw * 18 / 1920));
		font-size: clamp(14px, calc(100vw * 16 / 1920), 16px);
		line-height: 1.8;
	}
}

/* 募集職種 modal */
.job-modal[hidden] {
	display: none;
}

.job-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(0, 0, 0, 0.65);
	overflow-y: auto;
}

.job-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: auto;
}

.job-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-yellow);
	color: rgb(0, 0, 0);
	font-size: 32px;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
}

.job-modal__close:hover {
	opacity: 0.75;
}

.job-modal .job-detail-card {
	width: 100%;
	background-color: rgb(255, 255, 255);
}

@media (max-width: 1023px) {
	.job-modal {
		align-items: flex-start;
		padding: 60px 20px 20px;
	}

	.job-modal__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
		font-size: 28px;
	}
}





/* 社員インタビュー */
.employee-interviews {
	width: 100%;
	padding:
		min(85px, calc(100vw * 85 / 750))
		min(30px, calc(100vw * 30 / 750));
	background-color: rgb(247, 247, 247);
	text-align: center;
}

.employee-interviews__subtitle {
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	font-size: min(24px, calc(100vw * 24 / 750));
	color: rgb(90, 90, 90);
}

.employee-interviews__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: min(30px, calc(100vw * 30 / 750));
	margin: min(60px, calc(100vw * 60 / 750)) 0 0;
	padding: 0;
	list-style: none;
}

.interview-card {
	overflow: hidden;
	border-radius: min(40px, calc(100vw * 40 / 750));
	background-color: rgb(255, 255, 255);
	text-align: left;
}

.interview-card__photo-wrap {
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: rgb(230, 230, 230);
}

.interview-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.interview-card__content {
	padding:
		min(24px, calc(100vw * 24 / 750))
		min(20px, calc(100vw * 20 / 750))
		min(30px, calc(100vw * 30 / 750));
}

.interview-card__year {
	display: inline-block;
	padding:
		min(5px, calc(100vw * 5 / 750))
		min(14px, calc(100vw * 14 / 750));
	border-radius: 999px;
	background-color: var(--color-yellow);
	font-size: clamp(10px, calc(100vw * 18 / 750), 18px);
	font-weight: bold;
	line-height: 1.4;
	color: rgb(0, 0, 0);
}

.interview-card__position {
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	font-size: min(25px, calc(100vw * 25 / 750));
	font-weight: bold;
	line-height: 1.5;
	color: rgb(0, 0, 0);
}

@media (min-width: 1024px) {
	.employee-interviews {
		padding:
			min(110px, calc(100vw * 110 / 1920))
			min(250px, calc(100vw * 250 / 1920));
	}

	.employee-interviews__subtitle {
		font-size: min(16px, calc(100vw * 16 / 1920));
	}

	.employee-interviews__list {
		grid-template-columns: repeat(4, 1fr);
		gap: min(24px, calc(100vw * 24 / 1920));
		margin-top: min(60px, calc(100vw * 60 / 1920));
	}

	.interview-card {
		border-radius: min(30px, calc(100vw * 30 / 1920));
	}

	.interview-card__content {
		padding:
			min(22px, calc(100vw * 22 / 1920))
			min(20px, calc(100vw * 20 / 1920))
			min(28px, calc(100vw * 28 / 1920));
	}

	.interview-card__year {
		padding:
			min(4px, calc(100vw * 4 / 1920))
			min(12px, calc(100vw * 12 / 1920));
		font-size: clamp(10px, calc(100vw * 12 / 1920), 12px);
	}

	.interview-card__position {
		margin-top: min(14px, calc(100vw * 14 / 1920));
		font-size: clamp(14px, calc(100vw * 18 / 1920), 18px);
	}
}




/* 福利厚生 (benefits) -- gray section, 5 white cards in a 2-column grid on
   both breakpoints (2+2+1, last card left-aligned via normal grid flow).
   Title/ring reuse .field-showcase__heading/__ring/__title as-is (same
   component as 募集職種 above it on this page) -- client wanted this ring
   pixel-identical to the other one on the page rather than its own sizing.
   PC cards are a fixed 260px tall
   (client spec) but SP card heights are NOT uniform row-to-row in the
   reference (396/515/515/559/559) -- grid align-items:start on the SP
   base rule so content-driven height doesn't stretch to match a row-mate.
   Icon size and card/grid gap weren't in the client's CSS export
   (only genuine element sizes were usable from it, see the note atop
   page-recruit.php) -- estimated from the reference images. */



.benefits {
	width: 100%;
	padding: min(85px, calc(100vw * 85 / 750)) min(30px, calc(100vw * 30 / 750));
	background-color: rgb(255, 255, 255);
	/* .field-showcase__title has no text-align of its own -- see the same
	   note on .job-openings, which reuses the same heading/ring/title. */
	text-align: center;
}

.benefits__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: min(30px, calc(100vw * 30 / 750));
	margin: min(60px, calc(100vw * 60 / 750)) 0 0;
	padding: 0;
	list-style: none;
}

.benefit-card {
	box-sizing: border-box;
	padding: min(40px, calc(100vw * 40 / 750));
	border-radius: min(50px, calc(100vw * 50 / 750));
	background-color: rgb(247, 247, 247);
}

.benefit-card__head {
	display: flex;
	align-items: center;
	gap: min(16px, calc(100vw * 16 / 750));
}

.benefit-card__icon {
	display: block;
	width: min(60px, calc(100vw * 60 / 750));
	height: auto;
	flex-shrink: 0;
}

.benefit-card__title {
	margin: 0;
	font-size: min(26px, calc(100vw * 26 / 750));
	font-weight: bold;
	text-align: left;
	color: rgb(0, 0, 0);
}

.benefit-card__desc {
	margin: min(20px, calc(100vw * 20 / 750)) 0 0;
	font-size: min(24px, calc(100vw * 24 / 750));
	line-height: 1.833;
	text-align: left;
	color: rgb(0, 0, 0);
}

@media (min-width: 1024px) {
	.benefits {
		padding: min(110px, calc(100vw * 110 / 1920)) min(360px, calc(100vw * 360 / 1920));
	}

	.benefits__list {
		align-items: stretch;
		gap: min(40px, calc(100vw * 40 / 1920));
		margin-top: min(50px, calc(100vw * 50 / 1920));
	}

	.benefit-card {
		min-height: min(260px, calc(100vw * 260 / 1920));
		padding: min(40px, calc(100vw * 40 / 1920));
		border-radius: min(50px, calc(100vw * 50 / 1920));
	}

	.benefit-card__head {
		gap: min(14px, calc(100vw * 14 / 1920));
	}

	.benefit-card__icon {
		width: min(44px, calc(100vw * 44 / 1920));
	}

	.benefit-card__title {
		font-size: min(20.1px, calc(100vw * 20.1 / 1920));
	}

	.benefit-card__desc {
		margin-top: min(16px, calc(100vw * 16 / 1920));
		font-size: 16px;
		line-height: 1.875;
	}
}

/* 職場環境 (workplace environment) -- white section, 4 animated Chart.js
   pie cards in a 2-column grid (docs/imgs/recruit/block05-pc.png +
   block05-sp.png). Title/ring reuse .field-showcase__heading/__ring/__title
   again, same as 募集職種/福利厚生 above it.
   Card size (578x568 PC / 326x631 SP) and grid gap (42px both axes PC /
   34px row+25px col SP) came from the *deltas* between sibling "base" card
   layers in the client's CSS export -- individually their left/top are
   giant-master-canvas noise per the standing rule, but a difference
   between two siblings in the same local group cancels that shared offset
   out and is real, and cross-checked against the actual content width
   (1920 - 2*360 = 1200 ~= 578+42+578). Explicit min()-sized grid columns
   (not 1fr) so the real gap renders instead of the 1fr-track leftover-space
   bug already hit elsewhere on this page (.recruit-skills etc).
   Two chart "kinds" share one markup: 年齢層/各職種の割合 are decorative
   placeholders (identical generic 4-slice pie, ~37/28/20/15%, pixel-sampled
   from the reference PNGs -- 各職種の割合 is explicitly dummy content in
   the client's own design, "テキストテキスト"/"00.0%") with a number below;
   男女比/新卒と中途割合 are real 2-slice ratios with an icon+label+value
   legend. Card padding, chart diameter, and legend/sparkle gaps weren't in
   the client's CSS export (only genuine element sizes were usable from it)
   -- estimated from the reference images. */
.workplace-env {
	width: 100%;
	padding: min(85px, calc(100vw * 85 / 750)) min(30px, calc(100vw * 30 / 750));
	background-color: rgb(247, 247, 247);
	text-align: center;
}

.workenv-list {
	display: grid;
	grid-template-columns: repeat(2, min(326px, calc(100vw * 326 / 750)));
	justify-content: center;
	gap: min(34px, calc(100vw * 34 / 750)) min(25px, calc(100vw * 25 / 750));
	margin: min(60px, calc(100vw * 60 / 750)) 0 0;
	padding: 0;
	list-style: none;
}

.workenv-card {
	box-sizing: border-box;
	padding: min(35px, calc(100vw * 35 / 750)) min(20px, calc(100vw * 20 / 750));
	border: min(2px, calc(100vw * 2 / 750)) solid rgb(212, 212, 212);
	border-radius: min(50px, calc(100vw * 50 / 750));
	background-color: rgb(255, 255, 255);
}

.workenv-card__title {
	margin: 0;
	font-size: min(34px, calc(100vw * 34 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.workenv-card__chart-wrap {
	width: min(286px, 100%);
	aspect-ratio: 1 / 1;
	height: auto;
	margin: min(18px, calc(100vw * 18 / 750)) auto 0;
}

/* 職種別だけCanvasを縦長にし、円の直径は変えずに少し下へ配置。
   上側の余白を14%/5%/3%の引き出しラベルに使う。 */
.workenv-card--jobs .workenv-card__chart-wrap {
	aspect-ratio: 1 / 1.3;
	margin-top: min(24px, calc(100vw * 24 / 750));
}

.workenv-card__chart {
	width: 100% !important;
	height: 100% !important;
}

/* 4つの円グラフは同じJS radiusを使用。大きい扇形は円内へ直接表示し、
   小さい扇形だけ引き出し線を使う。 */

.workenv-card__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: min(10px, calc(100vw * 10 / 750));
	margin-top: min(20px, calc(100vw * 20 / 750));
}

.workenv-card__sparkle {
	display: block;
	width: min(47px, calc(100vw * 47 / 750));
	height: auto;
	flex-shrink: 0;
}

.workenv-card__note-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	gap: min(8px, calc(100vw * 8 / 750));
}

.workenv-card__note-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: min(40px, calc(100vw * 40 / 750));
	padding: 0 min(20px, calc(100vw * 20 / 750));
	border-radius: 999px;
	background-color: var(--color-yellow);
	font-size: min(22px, calc(100vw * 22 / 750));
	color: rgb(0, 0, 0);
	white-space: nowrap;
}

.workenv-card__note-value {
	font-family: 'Montserrat', sans-serif;
	font-size: min(65px, calc(100vw * 65 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
	white-space: nowrap;
}

.workenv-card__note-unit {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: min(30px, calc(100vw * 30 / 750));
	font-weight: normal;
}

/* SP: the 2 legend items (icon+label+value) don't fit side by side in the
   narrow card column, so they stack as 2 full-width rows instead -- PC has
   the room to go back to side by side (see media query below). */
.workenv-card__legend {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: min(14px, calc(100vw * 14 / 750));
	margin: min(20px, calc(100vw * 20 / 750)) 0 0;
	padding: 0;
	list-style: none;
}

.workenv-card__legend li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: min(8px, calc(100vw * 8 / 750));
}

.workenv-card__legend-icon {
	display: block;
	width: min(50px, calc(100vw * 50 / 750));
	height: auto;
	flex-shrink: 0;
}

.workenv-card__legend-icon--female {
	width: min(57px, calc(100vw * 57 / 750));
}

.workenv-card__legend-icon--newgrad {
	width: min(72px, calc(100vw * 72 / 750));
}

.workenv-card__legend-icon--midcareer {
	width: min(57px, calc(100vw * 57 / 750));
}

.workenv-card__legend-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.workenv-card__legend-label {
	font-size: min(22px, calc(100vw * 22 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.workenv-card__legend-value {
	font-family: 'Montserrat', sans-serif;
	font-size: min(70px, calc(100vw * 70 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.workenv-card__legend-unit {
	font-size: min(36px, calc(100vw * 36 / 750));
}



/* Recruit 職場環境：スマホは可読性優先で1列表示。 */
@media (max-width: 599px) {
	.workenv-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.workenv-card {
		padding: 24px 20px;
	}

	.workenv-card__title {
		font-size: clamp(20px, calc(100vw * 34 / 750), 28px);
	}

	.workenv-card__chart-wrap {
		width: min(300px, 100%);
		margin-top: 16px;
	}

	.workenv-card--jobs .workenv-card__chart-wrap {
		margin-top: 20px;
	}

	.workenv-card__legend {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
		gap: 12px;
		margin-top: 16px;
	}

	.workenv-card__legend li {
		flex: 1 1 0;
		width: auto;
		gap: 6px;
	}

	.workenv-card__legend-label {
		font-size: clamp(14px, calc(100vw * 22 / 750), 18px);
	}

	.workenv-card__legend-value {
		font-size: clamp(32px, calc(100vw * 70 / 750), 44px);
	}

	.workenv-card__legend-unit {
		font-size: clamp(18px, calc(100vw * 36 / 750), 24px);
	}

	.workenv-card__legend-icon {
		width: clamp(32px, calc(100vw * 50 / 750), 44px);
	}

	.workenv-card__legend-icon--female,
	.workenv-card__legend-icon--midcareer {
		width: clamp(36px, calc(100vw * 57 / 750), 48px);
	}

	.workenv-card__legend-icon--newgrad {
		width: clamp(44px, calc(100vw * 72 / 750), 58px);
	}

	.workenv-card__note-tag {
		font-size: clamp(14px, calc(100vw * 22 / 750), 18px);
	}

	.workenv-card__note-value {
		font-size: clamp(38px, calc(100vw * 65 / 750), 52px);
	}

	.workenv-card__note-unit {
		font-size: clamp(20px, calc(100vw * 30 / 750), 26px);
	}
}

@media (min-width: 1024px) {
	.workplace-env {
		padding: min(110px, calc(100vw * 110 / 1920)) min(360px, calc(100vw * 360 / 1920));
	}

	.workenv-list {
		grid-template-columns: repeat(2, min(578px, calc(100vw * 578 / 1920)));
		gap: min(42px, calc(100vw * 42 / 1920));
		margin-top: min(50px, calc(100vw * 50 / 1920));
	}

	.workenv-card {
		padding: min(30px, calc(100vw * 30 / 1920));
		border-width: min(1px, calc(100vw * 1 / 1920));
		border-radius: min(50px, calc(100vw * 50 / 1920));
	}

	.workenv-card__title {
		font-size: clamp(18px, calc(100vw * 26 / 1920), 26px);
	}

	.workenv-card__chart-wrap {
		width: min(360px, 100%);
		aspect-ratio: 1 / 1;
		height: auto;
		margin-top: min(18px, calc(100vw * 18 / 1920));
	}

	.workenv-card--jobs .workenv-card__chart-wrap {
		aspect-ratio: 1 / 1.3;
		margin-top: min(24px, calc(100vw * 24 / 1920));
	}

	.workenv-card__note {
		gap: min(8px, calc(100vw * 8 / 1920));
		margin-top: min(16px, calc(100vw * 16 / 1920));
	}

	.workenv-card__sparkle {
		width: min(57px, calc(100vw * 57 / 1920));
	}

	.workenv-card__note-text {
		gap: min(6px, calc(100vw * 6 / 1920));
	}

	.workenv-card__note-tag {
		height: min(40px, calc(100vw * 40 / 1920));
		padding: 0 min(20px, calc(100vw * 20 / 1920));
		font-size: clamp(14px, calc(100vw * 22 / 1920), 22px);
	}

	.workenv-card__note-value {
		font-size: clamp(36px, calc(100vw * 56 / 1920), 56px);
	}

	.workenv-card__note-unit {
		font-size: clamp(20px, calc(100vw * 26 / 1920), 26px);
	}

	.workenv-card__legend {
		flex-direction: row;
		gap: min(14px, calc(100vw * 14 / 1920));
		margin-top: min(16px, calc(100vw * 16 / 1920));
	}

	.workenv-card__legend li {
		width: auto;
		gap: min(6px, calc(100vw * 6 / 1920));
	}

	.workenv-card__legend-icon {
		width: min(36px, calc(100vw * 36 / 1920));
	}

	.workenv-card__legend-icon--female {
		width: min(57px, calc(100vw * 57 / 1920));
	}

	/* 新卒/中途 icons are wider than the plain 男性/女性 ones (leaf/glasses
	   details) -- client-specified PC widths override the shared default. */
	.workenv-card__legend-icon--newgrad {
		width: min(82px, calc(100vw * 82 / 1920));
	}

	.workenv-card__legend-icon--midcareer {
		width: min(66px, calc(100vw * 66 / 1920));
	}

	.workenv-card__legend-label {
		font-size: clamp(14px, calc(100vw * 22 / 1920), 22px);
	}

	.workenv-card__legend-value {
		font-size: clamp(34px, calc(100vw * 70 / 1920), 70px);
	}

	.workenv-card__legend-unit {
		font-size: clamp(18px, calc(100vw * 32 / 1920), 32px);
	}
}


/* ある社員の1日の働き方 (docs/imgs/recruit/block06-pc.png + block06-sp.png)
   -- full-bleed background photo (block06bg.jpg) with the title+ring
   floating on it (same .field-showcase__heading/__ring/__title reuse as
   every other section title on this page), a white rounded card below
   holding the timeline rows, and a strip of the photo still visible below
   the card. The client's SP CSS export for this block was a byte-for-byte
   duplicate of the PC export (impossible -- e.g. its "base" card claimed
   1200x1000, which can't be an SP-authored size), so SP pill/card/font
   sizes here came from pixel-measuring block06-sp.png directly rather
   than the export. Row heights aren't hardcoded -- the parenthetical note
   on a few rows is just part of the same bold string and wraps onto its
   own line naturally on narrower widths (see page-recruit.php), so a
   consistent row gap looks right whether a row is 1 or 3 lines. */
.workday {
	width: 100%;
	padding: min(120px, calc(100vw * 120 / 750)) min(30px, calc(100vw * 30 / 750)) min(131px, calc(100vw * 131 / 750));
	background-size: cover;
	background-position: center;
	text-align: center;
}

@media (min-width: 1024px) {
	.workday {
		background-attachment: fixed;
	}
}

.workday .field-showcase__heading {
	margin-top: 0;
}

.workday-card {
	box-sizing: border-box;
	margin: min(75px, calc(100vw * 75 / 750)) 0 0;
	padding: min(55px, calc(100vw * 55 / 750)) min(50px, calc(100vw * 50 / 750));
	border-radius: min(50px, calc(100vw * 50 / 750));
	background-color: rgb(255, 255, 255);
}

.workday-list {
	display: flex;
	flex-direction: column;
	gap: min(41px, calc(100vw * 41 / 750));
	margin: 0;
	padding: 0;
	list-style: none;
}

.workday-row {
	display: flex;
	align-items: flex-start;
	gap: min(20px, calc(100vw * 20 / 750));
}

.workday-row__time {
	flex-shrink: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: min(135px, calc(100vw * 135 / 750));
	height: min(49px, calc(100vw * 49 / 750));
	border: min(3px, calc(100vw * 3 / 750)) solid var(--color-yellow);
	border-radius: 999px;
	background-color: rgb(210, 210, 210);
	font-family: 'Montserrat', sans-serif;
	font-size: min(24px, calc(100vw * 24 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.workday-row__activity {
	margin-top: min(6px, calc(100vw * 6 / 750));
	font-size: min(28px, calc(100vw * 28 / 750));
	font-weight: bold;
	line-height: 1.5;
	color: rgb(0, 0, 0);
	/* .workday sets text-align:center for its section title -- this
	   activity text inherited that instead of getting its own value (the
	   time pill is fine centered, it's a badge; this multi-line
	   description text shouldn't be). */
	text-align: left;
}

@media (min-width: 1024px) {
	.workday {
		padding: min(80px, calc(100vw * 80 / 1920)) min(360px, calc(100vw * 360 / 1920)) min(130px, calc(100vw * 130 / 1920));
	}

	.workday-card {
		margin-top: min(60px, calc(100vw * 60 / 1920));
		padding: min(55px, calc(100vw * 55 / 1920)) min(75px, calc(100vw * 75 / 1920));
		border-radius: min(50px, calc(100vw * 50 / 1920));
	}

	.workday-list {
		gap: min(26px, calc(100vw * 26 / 1920));
	}

	.workday-row {
		align-items: center;
		gap: min(15px, calc(100vw * 15 / 1920));
	}

	.workday-row__time {
		width: clamp(72px, calc(100vw * 114 / 1920), 114px);
		height: clamp(28px, calc(100vw * 44 / 1920), 44px);
		border-width: min(3px, calc(100vw * 3 / 1920));
		font-size: clamp(13px, calc(100vw * 20 / 1920), 20px);
	}

	.workday-row__activity {
		margin-top: 0;
		font-size: clamp(14px, calc(100vw * 18 / 1920), 18px);
		line-height: 1.5;
	}
}

/* エントリー・お問い合わせ (docs/imgs/recruit/block7-pc.png + block7-sp.png)
   -- final CTA, solid yellow full-bleed, reuses .button/.button--arrow as-is
   (its PC media-query size, 330x70, matches this block's own PC button
   exactly). SP needs a bigger button (464x100 vs .button's own mobile
   default of auto-width+18px), so .entry-cta__button overrides just the
   box size/font fluidly at SP and re-states the same 330/70/18 PC uses,
   rather than fighting cascade order against .button's own PC rule. */
.entry-cta {
	width: 100%;
	padding: min(90px, calc(100vw * 90 / 750)) min(30px, calc(100vw * 30 / 750));
	background-color: var(--color-yellow);
	text-align: center;
}

.entry-cta__title {
	margin: 0;
	font-size: min(44px, calc(100vw * 44 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

.entry-cta__subtitle {
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	color: rgb(0, 0, 0);
}




.entry-cta__buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: min(20px, calc(100vw * 20 / 750));
	margin-top: min(32px, calc(100vw * 32 / 750));
}

.entry-cta__buttons .entry-cta__button {
	margin: 0;
}



.entry-cta__button {
	margin: min(32px, calc(100vw * 32 / 750)) auto 0;
	width: min(464px, calc(100vw * 464 / 750));
	height: min(100px, calc(100vw * 100 / 750));
	display: flex;
	align-items: center;
	justify-content: center;
	/* True center (padding:0), not the asymmetric right-padding tried
	   before -- reverted per feedback (text needs to actually be centered,
	   arrow shouldn't move far from the base component's own position). */
	padding: 0;
	font-size: min(28px, calc(100vw * 28 / 750));
}




.entry-cta__button.button--arrow::after {
	/* A little closer than the base component's 30px, not the 12px tried
	   before. */
	right: min(24px, calc(100vw * 24 / 750));
}

@media (min-width: 1024px) {
	.entry-cta {
		padding: min(90px, calc(100vw * 90 / 1920)) min(360px, calc(100vw * 360 / 1920));
	}

	.entry-cta__title {
		font-size: min(34px, calc(100vw * 34 / 1920));
	}

	.entry-cta__subtitle {
		margin-top: min(12px, calc(100vw * 12 / 1920));
		font-size: clamp(14px, calc(100vw * 18 / 1920), 18px);
	}


	.entry-cta__buttons {
		margin-top: min(24px, calc(100vw * 24 / 1920));
		gap: min(20px, calc(100vw * 20 / 1920));
	}


	.entry-cta__button {
		margin-top: min(24px, calc(100vw * 24 / 1920));
		width: 330px;
		height: 70px;
		/* The asymmetric right-only padding below is the SP fix for the
		   arrow overlapping the text (reserves room for it) -- inherited
		   here too since it's only set on the base/SP rule, which pushed
		   PC's centered text off-center. PC's button is already a fixed
		   330x70 box (base .button--arrow component), so plain centering
		   Service fine here without that reservation. */
		padding: 0;
		font-size: 18px;
	}
}

/* Shared non-home page header -- logo/menu are untouched (.site-header
   floats transparently over this via .has-page-header, see functions.php).
   Same reference-canvas + transform:scale technique as the home hero
   (.hero-mv / .hero-mv-sp): two separate compositions (PC 1920 reference,
   SP 750 reference), each with its own wrapper (max-width + margin:0 auto,
   so it re-centers instead of staying pinned left on ultra-wide screens)
   and canvas (fixed reference size, transform:scale(min(1,100vw/N)) so
   circles AND the title shrink/grow continuously with viewport width
   instead of jumping at a fixed breakpoint). min-height:500px on the
   wrapper is independent of that scale -- just how much vertical space the
   section reserves; height/content vary per page. Circle coordinates were
   extracted from the client's Photoshop file nested inside a much larger
   master canvas -- converted to local 0-based coordinates against each
   frame's own left offset (2022px PC, 825px SP). */

/* z-index was -1 here originally, which put clicks/selection on the
   title/back-link behind <main>'s own box (caught via elementFromPoint() on
   the Entertainment page -- a negative z-index sits behind its own
   containing block for hit-testing, even though <main> paints nothing
   visible there). Removed entirely (not replaced with a positive value):
   some pages pull their next section up over the header's dead space with
   a negative margin-top (e.g. .privacy-policy-section), and that section
   is meant to visually tuck the bottom of the header's decorative circles
   behind it -- a positive z-index here made circles float in FRONT of that
   section's text instead, which is wrong the other way (tried and
   reverted). No z-index at all still fixes the click bug (nothing here is
   negative anymore) while leaving normal DOM-order stacking for the
   circles-tuck-behind-content look. */
.page-header {
	position: relative;
	overflow-x: clip;
}

.page-header-pc {
	display: none;
}

.page-header-sp__wrapper {
	position: relative;
	max-width: 750px;
	margin: 0 auto;
	min-height: min(500px, calc(100vw * 500 / 750));
	overflow: visible;
}

/* Pages with an icon + back-link (see page-header.php) need more height
   than the default 500px reserves -- measured real content height at the
   750px reference is ~529px (icon+title+subtitle+button). +40px on top of
   that so the back-link button isn't flush against the next section (was
   a ~0px gap, confirmed via getBoundingClientRect -- the reservation was
   tuned to the content's exact height, leaving no breathing room). */
.page-header-sp__wrapper--tall {
	min-height: min(570px, calc(100vw * 570 / 750));
}

.page-header-sp__canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	padding-top: 130px;
	transform: scale(min(1, calc(100vw / 750px)));
	transform-origin: top left;
}

.page-header-sp__circle {
	position: absolute;
	box-sizing: content-box;
	border-radius: 50%;
	pointer-events: none;
}

.page-header-sp__circle--1 {
	left: -57px;
	top: -78px;
	width: 194px;
	height: 194px;
	border: 40px solid var(--color-yellow);
}

.page-header-sp__circle--2 {
	left: 329px;
	top: -267px;
	width: 362px;
	height: 363px;
	border: 10px solid var(--color-yellow);
}

.page-header-sp__circle--3 {
	left: -108px;
	top: 284px;
	width: 384px;
	height: 384px;
	border: 6px solid rgb(238, 238, 238);
}

.page-header-sp__circle--4 {
	left: 616px;
	top: 134px;
	width: 90px;
	height: 90px;
	border: 45px solid rgb(238, 238, 238);
}

.page-header-sp__canvas .section-title__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 111px;
	height: 111px;
	margin: 0 auto 24px;
	background-color: var(--color-yellow);
	border-radius: 50%;
}

.page-header-sp__canvas .section-title__icon img {
	width: 67px;
	height: auto;
}

.page-header-sp__canvas .section-title__en {
	margin: 0;
	font-size: 80px;
	font-family: "Montserrat", var(--font-base);
	color: rgb(0, 0, 0);
	font-weight: bold;
	line-height: 1.119;
}

.page-header-sp__canvas .section-title__ja {
	margin: 16px 0 0;
	font-size: 28px;
	color: rgb(0, 0, 0);
	line-height: 1.443;
}

.page-header-sp__canvas .section-title__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 333px;
	height: 78px;
	margin: 40px auto 0;
	border: 2px solid rgb(0, 0, 0);
	border-radius: 999px;
	background-color: var(--color-white);
	font-size: 28px;
	font-family: var(--font-base);
	color: rgb(0, 0, 0);
	text-decoration: none;
}

.page-header-sp__canvas .section-title__back-arrow {
	display: block;
	width: 20px;
	height: 20px;
	background: url("assets/images/arrow-black.svg") no-repeat center / contain;
	transform: scaleX(-1);
}

.page-header-sp__nav {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: fit-content;
	margin: 40px auto 0;
	padding: 24px 32px;
	background-color: rgb(238, 238, 238);
	border-radius: 40px;
}

.page-header-sp__nav-row {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-header-sp__nav-row li {
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-left: 1px solid rgb(212, 212, 212);
}

.page-header-sp__nav-row li:first-child {
	border-left: 0;
	padding-left: 0;
}

.page-header-sp__nav-row a {
	font-size: 19px;
	color: rgb(0, 0, 0);
	text-decoration: none;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.page-header-sp {
		display: none;
	}

	.page-header-pc {
		display: block;
	}

	.page-header-pc__wrapper {
		position: relative;
		max-width: 1920px;
		margin: 0 auto;
		/* The following sections can pull upward (Works uses a fixed
		   -149px margin). Reserve enough of this shared header for the
		   scaled title/subtitle plus a 40px visual gap, while retaining the
		   500px desktop reference height at 1920px. */
		min-height: max(
			min(500px, calc(100vw * 500 / 1920)),
			calc(189px + (100vw * 269 / 1920))
		);
		overflow: visible;
	}

	.page-header-pc__canvas {
		position: absolute;
		top: 0;
		left: 0;
		width: 1920px;
		padding-top: 158px;
		transform: scale(min(1, calc(100vw / 1920px)));
		transform-origin: top left;
	}

	.page-header-pc__circle {
		position: absolute;
		box-sizing: content-box;
		border-radius: 50%;
		pointer-events: none;
	}

	.page-header-pc__circle--1 {
		left: 97px;
		top: 26px;
		width: 241px;
		height: 242px;
		border: 60px solid var(--color-yellow);
	}

	.page-header-pc__circle--2 {
		left: 1012px;
		top: -82px;
		width: 320px;
		height: 321px;
		border: 10px solid var(--color-yellow);
	}

	.page-header-pc__circle--3 {
		left: 654px;
		top: 133px;
		width: 141.98px;
		height: 140.98px;
		border: 27.51px solid rgb(238, 238, 238);
	}

	.page-header-pc__circle--4 {
		left: 1573px;
		top: 229px;
		width: 90px;
		height: 90px;
		border: 45px solid rgb(238, 238, 238);
	}

	.page-header-pc__canvas .section-title__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 81px;
		height: 81px;
		margin: 0 auto 20px;
		background-color: var(--color-yellow);
		border-radius: 50%;
	}

	.page-header-pc__canvas .section-title__icon img {
		width: 49px;
		height: auto;
	}

	.page-header-pc__canvas .section-title__en {
		margin: 0;
		font-size: 70px;
		font-family: "Montserrat", var(--font-base);
		color: rgb(0, 0, 0);
		font-weight: bold;
		line-height: 0.987;
	}

	.page-header-pc__canvas .section-title__ja {
		margin-top: 12px;
		font-size: 20px;
		color: rgb(0, 0, 0);
		line-height: 1.489;
	}

	.page-header-pc__canvas .section-title__back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 188px;
		height: 38px;
		margin: 24px auto 0;
		border: 1px solid rgb(0, 0, 0);
		border-radius: 999px;
		background-color: var(--color-white);
		font-size: 14px;
		font-family: var(--font-base);
		color: rgb(0, 0, 0);
		text-decoration: none;
	}

	.page-header-pc__canvas .section-title__back-arrow {
		display: block;
		width: 12px;
		height: 12px;
		background: url("assets/images/arrow-black.svg") no-repeat center / contain;
		transform: scaleX(-1);
	}

	.page-header-pc__nav {
		position: relative;
		width: 800px;
		margin: 88px auto 0;
	}

	.page-header-pc__nav-list {
		display: flex;
		align-items: center;
		justify-content: center;
		list-style: none;
		height: 60px;
		margin: 0;
		padding: 0;
		background-color: rgb(238, 238, 238);
		border-radius: 999px;
	}

	.page-header-pc__nav-list li {
		display: flex;
		align-items: center;
		padding: 0 24px;
		border-left: 1px solid rgb(212, 212, 212);
	}

	.page-header-pc__nav-list li:first-child {
		border-left: 0;
	}

	.page-header-pc__nav-list a {
		font-size: max(16px, calc(14px * (1920px / 100vw)));
		color: rgb(0, 0, 0);
		text-decoration: none;
		white-space: nowrap;
	}
}

/* Footer -- mobile-first base here (everything stacked and centered); the
   >=1024px override below turns it into a left-aligned row (brand left,
   sitemap + contact columns right). Sitemap reuses the 'primary' menu
   location so it always matches the header nav (see [[project-cre-p]]). */

.site-footer {
	background: var(--color-gray-dark);
	color: var(--color-white);
	/* Horizontal inset lives on .container below (30px SP), not here, so it
	   isn't applied twice (this used to double up with .container's own
	   24px side padding). */
	padding: min(48px, calc(100vw * 48 / 750)) 0 min(24px, calc(100vw * 24 / 750));
	/* Base text size for the footer's own content (tagline, labels,
	   sitemap links, address) -- .site-footer__bottom (copyright/privacy
	   row) keeps its own smaller, separately-set size. */
	font-size: min(24px, calc(100vw * 24 / 750));
}

.site-footer .container {
	padding: 0 min(30px, calc(100vw * 30 / 750));
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer__top {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: min(40px, calc(100vw * 40 / 750));
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.site-footer .site-logo {
	width: min(150px, calc(100vw * 150 / 750));
}

.site-footer .site-logo img {
	width: 100%;
	height: auto;
}

.site-footer__tagline {
	margin: min(16px, calc(100vw * 16 / 750)) 0 0;
	line-height: 1.8;
}

.site-footer__groups {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: min(32px, calc(100vw * 32 / 750));
}

.site-footer__group {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-footer__label {
	margin: 0 0 min(16px, calc(100vw * 16 / 750));
	font-weight: bold;
	letter-spacing: 0.05em;
}

.site-footer__sitemap {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: min(12px, calc(100vw * 12 / 750)) min(32px, calc(100vw * 32 / 750));
}

.site-footer__address {
	font-style: normal;
	line-height: 1.8;
}

.site-footer__bottom {
	/* Row + space-between at every width (not just PC) -- one text left, one
	   right, always -- so font-size scales with min() to stay proportional
	   below the 750px reference instead of just wrapping/shrinking oddly. */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: min(8px, calc(100vw * 8 / 750));
	margin-top: min(40px, calc(100vw * 40 / 750));
	padding-top: min(16px, calc(100vw * 16 / 750));
	border-top: 1px solid #555;
	font-size: min(16.6px, calc(100vw * 16.6 / 750));
}

.site-footer__copyright {
	text-align: left;
}

.site-footer__privacy {
	text-align: right;
}

@media (min-width: 1024px) {
	.site-footer {
		font-size: min(16px, calc(100vw * 16 / 1920));
	}

	.site-footer .site-logo {
		width: min(150px, calc(100vw * 150 / 1920));
	}

	.site-footer .container {
		max-width: none;
		padding: 0 min(80px, calc(100vw * 80 / 1920));
	}

	.site-footer__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.site-footer__brand {
		align-items: flex-start;
		text-align: left;
	}

	.site-footer__groups {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: min(96px, calc(100vw * 96 / 1920));
	}

	.site-footer__group {
		align-items: flex-start;
	}

	.site-footer__sitemap {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: min(16px, calc(100vw * 16 / 1920));
	}

	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* Service */

/* Box (bg/radius/padding), title, icon circle, description, divider, note
   text and image width below are real Photoshop panel values (SP ref 690 /
   PC ref 1200, matching docs/imgs/Service/01.png+01sp.png). Only the vertical
   gaps between these elements (margin-top values) are still estimated --
   not part of the client's CSS dump, which only covered the elements
   themselves. */

.work-fields {
	width: 100%;
	padding: min(80px, calc(100vw * 80 / 750)) 0;
	/* cover (not "100% auto") -- with just width-matching, the image's own
	   height (scaled to the section's width) was shorter than the section's
	   actual content height on SP (tall stacked item), so no-repeat left a
	   hard cutoff to blank white partway down. cover guarantees the image
	   always fills the section in both dimensions. */
	background: url("assets/images/Service/bg.jpg") center top / cover no-repeat;
}

.work-field {
	background-color: rgb(255, 255, 255);
	/* Radius not restated for SP in the client's CSS (only padding was) --
	   assumed same as PC's 60px, scaled to the SP reference. */
	border-radius: min(60px, calc(100vw * 60 / 690));
	padding: min(80px, calc(100vw * 80 / 690)) min(50px, calc(100vw * 50 / 690));
	text-align: center;
}

.work-field + .work-field {
	margin-top: min(130px, calc(100vw * 130 / 690));
}


.work-field__department {
	position: relative;
	display: inline-block;
	margin: 0;
	padding-left: min(50px, calc(100vw * 50 / 690));
	font-size: min(26px, calc(100vw * 26 / 690));
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	color: var(--color-gray-dark);
}


.work-field__department::before,
.work-field__department::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	border-radius: 50%;
	pointer-events: none;
}

.work-field__department::before {
	left: 0;
	top: 50%;
	width: min(30px, calc(100vw * 30 / 690));
	height: min(30px, calc(100vw * 30 / 690));
	border: min(6px, calc(100vw * 6 / 690)) solid var(--color-yellow);
	transform: translateY(-50%);
}

.work-field__department::after {
	left: min(24px, calc(100vw * 24 / 690));
	top: min(-5px, calc(100vw * -5 / 690));
	width: min(17px, calc(100vw * 17 / 690));
	height: min(17px, calc(100vw * 17 / 690));
	border: min(4px, calc(100vw * 4 / 690)) solid rgb(190, 190, 190);
}


.work-field__title {
	margin: 0;
	font-size: min(34px, calc(100vw * 34 / 690));
	font-weight: bold;
	line-height: 1.684;
}

.work-field__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(111px, calc(100vw * 111 / 690));
	height: min(111px, calc(100vw * 111 / 690));
	margin: min(24px, calc(100vw * 24 / 690)) auto 0;
	background-color: var(--color-yellow);
	border-radius: 50%;
}

.work-field__icon img {
	width: min(67px, calc(100vw * 67 / 690));
	height: auto;
}

.work-field__description {
	margin: min(32px, calc(100vw * 32 / 690)) 0 0;
	font-size: min(28px, calc(100vw * 28 / 690));
	color: rgb(0, 0, 0);
	line-height: 1.857;
}

.work-field__note {
	/* "長方形_17": a plain 1px rgb(212,212,212) rectangle, full width --
	   same result as a border-top without an extra empty element. */
	margin: min(40px, calc(100vw * 40 / 690)) 0 0;
	padding: min(32px, calc(100vw * 32 / 690)) 0 0;
	border-top: 1px solid rgb(212, 212, 212);
}

.work-field__note-text {
	margin: 0;
	font-size: min(22px, calc(100vw * 22 / 690));
	color: rgb(0, 0, 0);
	line-height: 1.818;
}

.work-field__note-text::before {
	content: "●";
	margin-right: 0.4em;
	color: var(--color-yellow);
}

.work-field__images {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: min(24px, calc(100vw * 24 / 690));
	list-style: none;
	margin: min(48px, calc(100vw * 48 / 690)) 0 0;
	padding: 0;
}

.work-field__images li {
	width: min(384px, calc(100vw * 384 / 690));
	max-width: 100%;
}

/* Zigzag: 1st image left, 2nd right, 3rd left again -- only makes sense in
   the SP stacked column, where the fixed 384px width leaves room either
   side inside the (690 - 2*50 padding) content column. */
.work-field__images li:nth-child(2) {
	align-self: flex-end;
}

.work-field__images img {
	display: block;
	width: 100%;
	border-radius: min(30px, calc(100vw * 50 / 690));
}

.work-field__link {
	margin-top: min(48px, calc(100vw * 48 / 690));
}

/* SP only -- client's CSS had this button as position:absolute (raw
   Photoshop layer export) with its own fixed size, different from .button's
   normal SP sizing (content-width pill). Scoped to max-width so it doesn't
   leak into .button's existing PC treatment (330x70, see style.css:993). */
@media (max-width: 1023px) {
	.work-field__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: min(335px, calc(100vw * 335 / 690));
		height: min(100px, calc(100vw * 100 / 690));
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		font-size: min(28px, calc(100vw * 28 / 690));
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.work-fields {
		padding: min(100px, calc(100vw * 100 / 1920)) 0;
	}

	.work-field {
		/* "width: 1200px" in the client's CSS -- .work-fields > .container
		   already caps content at ~1200px (site-wide convention), so this
		   just fills that instead of repeating the literal 1200 and risking
		   overflow past .container's own side padding. */
		border-radius: min(60px, calc(100vw * 60 / 1200));
		padding: min(65px, calc(100vw * 65 / 1200)) min(80px, calc(100vw * 80 / 1200));
	}

	.work-field + .work-field {
		margin-top: min(50px, calc(100vw * 50 / 1200));
	}



.work-field__department {
	padding-left: min(39px, calc(100vw * 39 / 1200));
	font-size: min(18px, calc(100vw * 18 / 1200));
	font-weight: 700;
	letter-spacing: 0.08em;
}


.work-field__department::before {
	width: min(22px, calc(100vw * 22 / 1200));
	height: min(22px, calc(100vw * 22 / 1200));
	border-width: min(5px, calc(100vw * 5 / 1200));
}

.work-field__department::after {
	left: min(18px, calc(100vw * 18 / 1200));
	top: min(-3px, calc(100vw * -3 / 1200));
	width: min(13px, calc(100vw * 13 / 1200));
	height: min(13px, calc(100vw * 13 / 1200));
	border-width: min(3px, calc(100vw * 3 / 1200));
}

	.work-field__title {
		font-size: min(35px, calc(100vw * 35 / 1200));
		line-height: 2.657;
	}

	.work-field__icon {
		width: min(81px, calc(100vw * 81 / 1200));
		height: min(81px, calc(100vw * 81 / 1200));
		margin-top: min(24px, calc(100vw * 24 / 1200));
	}

	.work-field__icon img {
		width: min(49px, calc(100vw * 49 / 1200));
	}

	.work-field__description {
		margin-top: min(24px, calc(100vw * 24 / 1200));
		font-size: min(18px, calc(100vw * 18 / 1200));
		line-height: 1.889;
	}

	.work-field__note {
		margin-top: min(32px, calc(100vw * 32 / 1200));
		padding-top: min(24px, calc(100vw * 24 / 1200));
	}

	.work-field__note-text {
		font-size: min(14px, calc(100vw * 14 / 1200));
		line-height: 2.143;
	}

	.work-field__images {
		/* 3 * 321px fixed width leaves ~29px of slack across this box's
		   ~992px content width -- no explicit gap value was given, so
		   space-between distributes that slack evenly instead of guessing
		   a specific px. */
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		gap: 0;
		margin-top: min(40px, calc(100vw * 40 / 1200));
	}

	.work-field__images li {
		width: min(321px, calc(100vw * 321 / 1200));
		max-width: none;
		flex: none;
		align-self: auto;
	}

	.work-field__link {
		margin-top: min(40px, calc(100vw * 40 / 1200));
	}
}

/* #5 "Other" -- simpler item (no note/divider), own section with a plain
   white background instead of work-fields' bg.jpg texture. Same vertical
   rhythm as .work-fields (80px SP / 100px PC) since no other value was
   given. The card itself needs its own border since white-on-white would
   otherwise have no visible edge (the mockup shows a thin gray outline). */
.work-other {
	width: 100%;
	padding: min(80px, calc(100vw * 80 / 750)) 0;
	background-color: var(--color-white);
}

.work-field--simple {
	border: 1px solid rgb(212, 212, 212);
}

@media (min-width: 1024px) {
	.work-other {
		padding: min(100px, calc(100vw * 100 / 1920)) 0;
	}
}

.Service-intro {
	/* Same fix as .privacy-policy-section/.news-list-section/.contact-points
	   -- position + z-index above the (unpositioned) page-header, so this
	   section's negative margin tucks the header's circles behind it
	   instead of letting them show in front. */
	position: relative;
	z-index: 2;
	/* Target is 55px (SP) / 58px (PC) below the page-header's JA subtitle --
	   but the shared page-header wrapper reserves a flat min-height:500px
	   (see style.css:2030/2153) regardless of the title's real text height,
	   which leaves ~224px (SP ref 750) / ~231px (PC ref 1920) of empty space
	   below the subtitle when a page (like Service) passes no nav_items. This
	   negative margin cancels exactly that measured dead space and adds the
	   requested 55/58px back -- values come from real getBoundingClientRect()
	   measurements at each breakpoint's reference width, not a guess. */
	margin-top: max(-169.09px, calc(100vw * -169.09 / 750));
}

.Service-intro__text {
	margin: 0 0 min(85px, calc(100vw * 85 / 750));
	font-family: var(--font-base);
	font-size: min(28px, calc(100vw * 28 / 750));
	color: rgb(0, 0, 0);
	line-height: 1.857;
	text-align: center;
}

@media (min-width: 1024px) {
	.Service-intro {
		margin-top: max(-173.14px, calc(100vw * -173.14 / 1920));
	}

	.Service-intro__text {
		margin-bottom: min(80px, calc(100vw * 80 / 1920));
		font-size: 20px;
		line-height: 1.889;
	}
}

/* Field-showcase -- generic "business field detail page" block (first used
   on page-entertainment.php, docs/imgs/entertainment/01.png). Reusable as-is
   for the other work-field detail pages (building, Vtuber, system dev,
   other) -- only the page's own bg tile + $crep_field_items content differ.

   Given real values: section padding (100px/360px PC, 80px/30px SP), item
   card radius/bg/padding ("base"/".base"), the ring behind the title
   (106px/20px border PC, 140px/26px border SP), and the SP image size
   (184px, radius 50px, 3-then-2 wrap). Image gap and title/description
   font-size were NOT specified yet -- estimated below, reusing the same
   scale as the Service page's field cards for visual consistency.

   IMPORTANT: every item-level property below (padding, ring, title,
   images, description) shares the SAME reference width as the outer
   .field-showcase section itself (750 SP / 1920 PC) -- not a smaller
   "card-only" reference like the Service page's 690/1200. The item's real
   rendered width is "100vw minus the section's own side padding", so its
   internal calc(100vw * X / REF) formulas only stay proportional to the
   section's padding (and therefore never overflow/wrap wrong, e.g. the SP
   image row breaking into 3 rows below a certain width) if REF matches the
   section's REF exactly. Mixing 690/1200 in here (as an earlier pass did,
   copying the Service page's own item convention) breaks that at any
   viewport where the two references' min() caps don't happen to align. */

.field-showcase {
	width: 100%;
	padding: min(80px, calc(100vw * 80 / 750)) min(30px, calc(100vw * 30 / 750));
	background-repeat: repeat;
}

.field-showcase__item {
	background-color: rgb(255, 255, 255);
	border-radius: min(60px, calc(100vw * 60 / 750));
	padding: min(55px, calc(100vw * 55 / 750)) min(50px, calc(100vw * 50 / 750)) min(100px, calc(100vw * 100 / 750));
	text-align: center;
}

.field-showcase__item + .field-showcase__item {
	margin-top: min(50px, calc(100vw * 50 / 750));
}

/* Heading height is pinned to the ring's own height (not the title text's)
   so the ring sits flush at the top of this block -- position:absolute
   doesn't let it push the height itself. margin-top makes up the
   difference between the card's own padding-top and the client's real
   "distance from card top to ring" measurement (86px SP / 15px PC, the
   latter already equal to the card's own PC padding-top, so 0 extra). */
.field-showcase__heading {
	position: relative;
	height: min(140px, calc(100vw * 140 / 750));
	margin-top: min(31px, calc(100vw * 31 / 750));
}

.field-showcase__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(140px, calc(100vw * 140 / 750));
	height: min(140px, calc(100vw * 140 / 750));
	border: min(26px, calc(100vw * 26 / 750)) solid var(--color-yellow);
	border-radius: 50%;
}

.field-showcase__title {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: 0;
	font-size: min(34px, calc(100vw * 34 / 750));
	font-weight: bold;
	color: rgb(0, 0, 0);
}

/* SP: fixed 184px squares that wrap 3-then-2 (centered), not a 5-column
   grid -- 3*184px + 2 gaps fits this item's real content width (see the
   shared-750-reference note above) at every size, so plain flex-wrap
   naturally produces the 3/2 split without extra markup. PC goes back to
   one row of 5 via grid, see the media query below. */
.field-showcase__images {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: min(16px, calc(100vw * 16 / 750));
	list-style: none;
	margin: min(52px, calc(100vw * 52 / 750)) 0 0;
	padding: 0;
}

.field-showcase__images li {
	flex: none;
	width: min(184px, calc(100vw * 184 / 750));
}

.field-showcase__images img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background-color: rgb(147, 147, 147);
	border-radius: min(30px, calc(100vw * 50 / 750));
}

.field-showcase__description {
	margin: min(40px, calc(100vw * 40 / 750)) 0 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	color: rgb(0, 0, 0);
	line-height: 1.8;
}

@media (min-width: 1024px) {
	.field-showcase {
		padding: min(100px, calc(100vw * 100 / 1920)) min(360px, calc(100vw * 360 / 1920));
	}

	.field-showcase__item {
		border-radius: min(60px, calc(100vw * 60 / 1920));
		padding: min(15px, calc(100vw * 15 / 1920)) min(80px, calc(100vw * 80 / 1920)) min(65px, calc(100vw * 65 / 1920));
	}

	.field-showcase__item + .field-showcase__item {
		margin-top: min(50px, calc(100vw * 50 / 1920));
	}

	.field-showcase__heading {
		height: min(106px, calc(100vw * 106 / 1920));
		/* Target distance from card top to ring (15px) already equals the
		   card's own PC padding-top -- no extra margin needed here. */
		margin-top: 0;
	}

	.field-showcase__ring {
		width: min(106px, calc(100vw * 106 / 1920));
		height: min(106px, calc(100vw * 106 / 1920));
		border-width: min(20px, calc(100vw * 20 / 1920));
	}

	.field-showcase__title {
		font-size: min(28px, calc(100vw * 28 / 1920));
	}

.field-showcase__images {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: min(20px, calc(100vw * 20 / 1920));
    margin-top: min(35px, calc(100vw * 35 / 1920));
}

.field-showcase__images li {
    flex: 0 0 calc((100% - 80px) / 5);
    max-width: calc((100% - 80px) / 5);
}
	.field-showcase__images img {
		background-color: transparent;
		border-radius: min(20px, calc(100vw * 20 / 1920));
	}

	.field-showcase__description {
		margin-top: min(32px, calc(100vw * 32 / 1920));
		font-size: min(18px, calc(100vw * 18 / 1920));
		line-height: 1.889;
	}
}

/* Thanks page (Contact form success redirect) -- just centered text per the
   client's spec, no page-header/circles. min-height instead of a fixed
   height so it still grows if the sentence ever wraps to more lines --
   fills the rest of the viewport below the header so the footer doesn't
   sit awkwardly right under one short line of text. */
.thanks-page {
	/* Generous fixed padding, not a viewport-height stretch -- the earlier
	   100vh-minus-header version didn't account for the footer's own
	   height, so header+section alone already filled the screen and the
	   footer landed below the fold, forcing a scroll for a one-line page. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 140px 24px;
	text-align: center;
}

.thanks-page__content {
	max-width: 600px;
}

.thanks-page__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	background-color: var(--color-yellow);
	border-radius: 50%;
}

.thanks-page__icon svg {
	width: 36px;
	height: 36px;
	color: rgb(0, 0, 0);
}

.thanks-page__content p {
	margin: 0;
	font-size: min(28px, calc(100vw * 28 / 750));
	font-weight: bold;
	line-height: 1.8;
	color: rgb(0, 0, 0);
}

@media (min-width: 1024px) {
	.thanks-page__icon {
		width: 90px;
		height: 90px;
		margin-bottom: 32px;
	}

	.thanks-page__icon svg {
		width: 44px;
		height: 44px;
	}

	.thanks-page__content p {
		font-size: 22px;
	}
}

/* Contact form confirmation modal (assets/js/main.js populates
   __summary and toggles .is-open) -- same fullscreen-overlay technique
   as .intro-video, z-index high enough to sit above everything else on
   the page including .site-header (2000). */
.contact-confirm-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.contact-confirm-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.contact-confirm-modal__panel {
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 32px 24px;
	border-radius: 24px;
	background-color: rgb(255, 255, 255);
}

.contact-confirm-modal__title {
	margin: 0 0 24px;
	font-size: 22px;
	text-align: center;
	color: rgb(0, 0, 0);
}

.contact-confirm-modal__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 0;
	border-bottom: 1px solid rgb(230, 230, 230);
}

.contact-confirm-modal__label {
	font-size: 13px;
	color: rgb(120, 120, 120);
}

.contact-confirm-modal__value {
	font-size: 16px;
	color: rgb(0, 0, 0);
	word-break: break-word;
	white-space: pre-wrap;
}

.contact-confirm-modal__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 24px;
}



/* =========================================================
   Process showcase
   Business detail page production flow
========================================================= */

.process-showcase {
	width: 100%;
	padding: 0 min(30px, calc(100vw * 30 / 750))
		min(80px, calc(100vw * 80 / 750));
	background-color: rgb(247, 247, 247);
}

.process-showcase__panel {
	width: 100%;
	padding:
		min(65px, calc(100vw * 65 / 750))
		min(45px, calc(100vw * 45 / 750))
		min(75px, calc(100vw * 75 / 750));
	border-radius: min(60px, calc(100vw * 60 / 750));
	background-color: rgb(255, 255, 255);
}

/* Process / 制作工程 */

.process-showcase__header {
	position: relative;
	text-align: center;
}

.process-showcase__header-ring {
	position: absolute;
	top: max(-18px, calc(100vw * -18 / 750));
	left: 50%;
	transform: translateX(-50%);
	width: min(140px, calc(100vw * 140 / 750));
	height: min(140px, calc(100vw * 140 / 750));
	border:
		min(26px, calc(100vw * 26 / 750))
		solid var(--color-yellow);
	border-radius: 50%;
	pointer-events: none;
}

.process-showcase__title-en {
	position: relative;
	margin: 0;
	font-family: "Montserrat", var(--font-base);
	font-size: min(54px, calc(100vw * 54 / 750));
	font-weight: 400;
	line-height: 1.2;
	color: rgb(0, 0, 0);
}

.process-showcase__title-ja {
	position: relative;
	margin: min(12px, calc(100vw * 12 / 750)) 0 0;
	font-size: min(25px, calc(100vw * 25 / 750));
	line-height: 1.5;
	color: rgb(0, 0, 0);
}

/* Steps */

.process-showcase__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: min(70px, calc(100vw * 70 / 750));
	margin: min(80px, calc(100vw * 80 / 750)) 0 0;
	padding: 0;
	list-style: none;
}

.process-showcase__step {
	position: relative;
	min-height: min(180px, calc(100vw * 180 / 750));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: min(20px, calc(100vw * 20 / 750));
	padding: min(30px, calc(100vw * 30 / 750));
	border: 1px solid rgb(225, 225, 225);
	border-radius: min(32px, calc(100vw * 32 / 750));
	background-color: rgb(247, 247, 247);
	text-align: center;
}

.process-showcase__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:
		min(7px, calc(100vw * 7 / 750))
		min(18px, calc(100vw * 18 / 750));
	border-radius: 999px;
	background-color: var(--color-yellow);
	font-family: "Montserrat", var(--font-base);
	font-size: min(19px, calc(100vw * 19 / 750));
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: rgb(0, 0, 0);
}

.process-showcase__step-title {
	font-size: min(27px, calc(100vw * 27 / 750));
	font-weight: bold;
	line-height: 1.6;
	color: rgb(0, 0, 0);
}

/* SP: arrow goes downward */

.process-showcase__step:not(:last-child)::after {
	content: "↓";
	position: absolute;
	left: 50%;
	bottom: max(-55px, calc(100vw * -55 / 750));
	transform: translateX(-50%);
	font-size: min(32px, calc(100vw * 32 / 750));
	font-weight: normal;
	line-height: 1;
	color: rgb(180, 180, 180);
}


/* =========================================================
   Process - PC
========================================================= */

@media (min-width: 1024px) {

	.process-showcase {
		padding:
			0
			min(360px, calc(100vw * 360 / 1920))
			min(100px, calc(100vw * 100 / 1920));
	}

	.process-showcase__panel {
		padding:
			min(55px, calc(100vw * 55 / 1920))
			min(80px, calc(100vw * 80 / 1920))
			min(70px, calc(100vw * 70 / 1920));
		border-radius: min(60px, calc(100vw * 60 / 1920));
	}

	.process-showcase__header-ring {
		top: min(-7px, calc(100vw * -7 / 1920));
		width: min(106px, calc(100vw * 106 / 1920));
		height: min(106px, calc(100vw * 106 / 1920));
		border-width: min(20px, calc(100vw * 20 / 1920));
	}

	.process-showcase__title-en {
		font-size: min(51px, calc(100vw * 51 / 1920));
		line-height: 1.063;
	}

	.process-showcase__title-ja {
		margin-top: min(12px, calc(100vw * 12 / 1920));
		font-size: min(18px, calc(100vw * 18 / 1920));
	}

	.process-showcase__list {
		grid-template-columns: repeat(3, 1fr);
		gap:
			min(70px, calc(100vw * 70 / 1920))
			min(65px, calc(100vw * 65 / 1920));
		margin-top: min(75px, calc(100vw * 75 / 1920));
	}

	.process-showcase__step {
		min-height: min(175px, calc(100vw * 175 / 1920));
		gap: min(18px, calc(100vw * 18 / 1920));
		padding: min(25px, calc(100vw * 25 / 1920));
		border-radius: min(30px, calc(100vw * 30 / 1920));
	}

	.process-showcase__step-number {
		padding:
			min(6px, calc(100vw * 6 / 1920))
			min(15px, calc(100vw * 15 / 1920));
		font-size: min(14px, calc(100vw * 14 / 1920));
	}

	.process-showcase__step-title {
		font-size: min(20px, calc(100vw * 20 / 1920));
		line-height: 1.6;
	}

	/* Snake layout:
	   01 → 02 → 03
	             ↓
	   06 ← 05 ← 04
	*/

	.process-showcase__step:nth-child(4) {
		grid-column: 3;
		grid-row: 2;
	}

	.process-showcase__step:nth-child(5) {
		grid-column: 2;
		grid-row: 2;
	}

	.process-showcase__step:nth-child(6) {
		grid-column: 1;
		grid-row: 2;
	}

	/* Remove SP arrows first */

	.process-showcase__step:not(:last-child)::after {
		left: auto;
		bottom: auto;
		transform: none;
		font-size: min(28px, calc(100vw * 28 / 1920));
		color: rgb(180, 180, 180);
	}

	/* 01 → 02 */

	.process-showcase__step:nth-child(1)::after,
	.process-showcase__step:nth-child(2)::after {
		content: "→";
		top: 50%;
		right: max(-48px, calc(100vw * -48 / 1920));
		transform: translateY(-50%);
	}

	/* 03 ↓ 04 */

	.process-showcase__step:nth-child(3)::after {
		content: "↓";
		left: 50%;
		bottom: max(-50px, calc(100vw * -50 / 1920));
		transform: translateX(-50%);
	}

	/* 04 ← 05 ← 06 */

	.process-showcase__step:nth-child(4)::after,
	.process-showcase__step:nth-child(5)::after {
		content: "←";
		top: 50%;
		left: max(-48px, calc(100vw * -48 / 1920));
		transform: translateY(-50%);
	}

	.process-showcase__step:nth-child(6)::after {
		content: none;
	}
}



.field-showcase--visualization {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 40px;
}

.field-showcase--visualization .field-showcase__item {
	grid-column: 1 / -1;
}

.field-showcase--visualization .field-showcase__item--side {
	grid-column: auto;
}

@media screen and (max-width: 750px) {
	.field-showcase--visualization {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.field-showcase--visualization .field-showcase__item--side {
		grid-column: 1;
	}
}



/* =========================================================
   Works archive
   制作実績一覧
   ========================================================= */

.works-archive {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: -149px;
	padding: 70px 0 100px;
	background-color: var(--color-white);
}

.works-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

.works-card {
	min-width: 0;
}

.works-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 24px;
	background-color: var(--color-gray-light);
}

.works-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.works-card__title {
	margin: 20px 0 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5;
}

.works-card__excerpt {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.8;
}

.works-archive__empty {
	margin: 0;
	text-align: center;
	font-size: 16px;
}



.works-pagination {
	margin-top: 80px;
	text-align: center;
}

.works-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.works-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #222;
	color: #222;
	text-decoration: none;
}

.works-pagination .page-numbers.current {
	background-color: #222;
	color: #fff;
}




/* Tablet */
@media (min-width: 600px) {
	.works-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 32px;
	}
}

/* PC */
@media (min-width: 1024px) {
	.works-archive {
		padding: 80px 0 120px;
	}

	.works-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 60px 40px;
	}
}


/* =========================================================
   Works detail
   制作実績 詳細ページ
   ========================================================= */

.works-card__link {
	display: block;
	min-width: 0;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}

.works-card__title,
.works-card__excerpt {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.works-detail {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: -149px;
	padding: 70px 0 100px;
	background-color: var(--color-white);
}

.works-detail__article {
	max-width: 900px;
	margin: 0 auto;
}

.works-detail__title {
	margin: 0;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.5;
}

.works-detail__image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}

.works-detail__image img {
	width: auto;
	max-width: 100%;
	height: auto;
}

.works-detail__lead {
	margin: 32px 0 0;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
}

.works-detail__content {
	margin-top: 32px;
	font-size: 16px;
	line-height: 2;
}

.works-detail__content p {
	margin: 0 0 1em;
}

.works-detail__back {
	margin-top: 60px;
	text-align: center;
}

@media (min-width: 1024px) {
	.works-detail {
		padding: 80px 0 120px;
	}

	.works-detail__title {
		font-size: 32px;
	}
}



/* IT事業部 上部メイン画像 */
.system-development-visual {
	width: 100%;
	border-radius: min(60px, calc(100vw * 60 / 750)) min(60px, calc(100vw * 60 / 750)) 0 0;
	overflow: hidden;
}


.system-development-visual img {
	display: block;
	width: 100%;
	height: auto;
}



/* IT事業部 資料案内 */
.system-development-documents {
	margin: 0 0 50px;
	padding: 35px 30px;
	background-color: #fff;
	border-radius: 0 0 min(60px, calc(100vw * 60 / 750)) min(60px, calc(100vw * 60 / 750));
	text-align: center;
}


@media (min-width: 1024px) {
	.system-development-visual {
		border-radius:
			min(60px, calc(100vw * 60 / 1920))
			min(60px, calc(100vw * 60 / 1920))
			0
			0;
	}

	.system-development-documents {
		border-radius:
			0
			0
			min(60px, calc(100vw * 60 / 1920))
			min(60px, calc(100vw * 60 / 1920));
	}
}


.system-development-lead {
	padding: 35px 30px 30px;
	background-color: #fff;
	text-align: center;
}

.system-development-lead__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.5;
	color: #000;
}

.system-development-lead__text {
	margin: 15px 0 0;
	font-size: 17px;
	line-height: 1.8;
	color: #000;
}

@media (max-width: 767px) {
	.system-development-lead {
		padding: 25px 20px;
	}

	.system-development-lead__title {
		font-size: 22px;
	}

	.system-development-lead__text {
		font-size: 15px;
	}

	.system-development-lead__text br {
		display: none;
	}
}



.system-development-documents__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: bold;
	color: #000;
}

.system-development-documents__text {
	margin: 0 0 22px;
	line-height: 1.8;
	color: #000;
}

.system-development-documents__buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.system-development-documents__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 360px;
	min-height: 66px;
	padding: 12px 20px;

	background-color: #fff;
	border: 2px solid #000;
	color: #000;

	text-decoration: none;
	text-align: center;

	/* 追加 */
	font-weight: bold;
	gap: 10px;
}


.system-development-documents__external-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 無料DX診断 ボタン */
.field-showcase__actions {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.field-showcase__action-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 360px;
	min-height: 66px;
	padding: 12px 20px;

	border: 2px solid #000;

	font-weight: bold;
	text-decoration: none;
	text-align: center;
}

/* 申込はこちら */
.field-showcase__action-button--primary {
	background-color: #000;
	color: #fff;
}

/* チラシを見る */
.field-showcase__action-button--secondary {
	background-color: #fff;
	color: #000;
}


.field-showcase__action-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* レセプタ ロゴ画像専用 */
.field-showcase__images--logo li {
	flex: 0 1 600px;
	width: 100%;
	max-width: 600px;
}

.field-showcase__images--logo img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	background-color: transparent;
}

/* 無料DX診断 円形画像専用 */
.field-showcase__images--badge img {
	border-radius: 50%;
	background-color: transparent;
	object-fit: contain;
}

/* 既存システム改善・保守 横長画像専用 */
.field-showcase__images--landscape li {
	width: 100%;
	max-width: 500px;
	flex: 0 1 500px;

	aspect-ratio: 640 / 339;
	overflow: hidden;
	border-radius: 20px;
}

.field-showcase__images--landscape img {
	display: block;
	width: 100%;
	height: 100%;

	aspect-ratio: auto;
	object-fit: contain;

	background-color: transparent;
	border-radius: 0;
}



/* Works 絞り込み */
.works-filter {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 48px;
}

.works-filter__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 108px;
	height: 44px;
	padding: 0 22px;

	border: 1px solid #222;
	border-radius: 10px;

	background-color: #fff;
	color: #222;

	font-size: 15px;
	font-weight: 500;
	line-height: 1;

	text-decoration: none;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.works-filter__button:hover {
	background-color: #f5f5f5;
	transform: translateY(-1px);
}

.works-filter__button.is-active {
	background-color: var(--color-yellow, #ffe34d);
	border-color: var(--color-yellow, #ffe34d);
	color: #222;
	font-weight: 700;
}

@media (max-width: 599px) {

	.works-filter {
		gap: 8px;
		margin-bottom: 36px;
	}

	.works-filter__button {
		min-width: 0;
		height: 40px;
		padding: 0 14px;

		font-size: 13px;
		border-radius: 8px;
	}
}


/* Works 年代絞り込み */

.works-year-filter {
	display: flex;
	align-items: center;
	margin: 0;
}

.works-year-filter__wrap {
	position: relative;
}


/* 独自の▼ */
.works-year-filter__wrap::after {
	content: "";
	position: absolute;

	top: 50%;
	right: 17px;

	width: 8px;
	height: 8px;

	border-right: 2px solid #222;
	border-bottom: 2px solid #222;

	transform:
		translateY(-70%)
		rotate(45deg);

	pointer-events: none;
}


.works-year-filter__select {
	appearance: none;
	-webkit-appearance: none;

	width: 165px;
	height: 44px;

	padding: 0 42px 0 16px;

	border: 1px solid #222;
	border-radius: 14px;

	background-color: #f7f7f7;

	font-family: inherit;
	font-size: 14px;
	color: #222;

	cursor: pointer;
}


/* キーボード操作時 */
.works-year-filter__select:focus {
	outline: 2px solid var(--color-yellow, #ffe34d);
	outline-offset: 2px;
}


/* スマホ */
@media (max-width: 599px) {

	.works-year-filter {
		flex-basis: 100%;

		justify-content: center;

		margin-top: 6px;
	}

	.works-year-filter__wrap {
		width: min(100%, 320px);
	}

	.works-year-filter__select {
		width: 100%;
		height: 48px;

		padding-left: 18px;

		font-size: 15px;
	}

}









/* ==================================================
   Visualization
================================================== */

.visualization-page {
	background: #fff;
	padding-bottom: 0;
}

.visualization-inner {
	width: min(1200px, calc(100% - 80px));
	margin: 0 auto;
}





/* =========================
   Common section
========================= */

.visualization-section {
	padding: 120px 0;
}

.visualization-section__header {
	margin-bottom: 50px;
}

.visualization-section__en {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.visualization-section__en::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 4px;
	margin-right: 12px;
	vertical-align: middle;
	background: var(--color-yellow, #ffe44d);
}

.visualization-section__title {
	margin: 0;
	font-size: clamp(30px, 3vw, 46px);
	font-weight: 700;
	line-height: 1.35;
}

.visualization-section__description {
	max-width: 900px;
	margin: 55px auto 0;
	font-size: 17px;
	line-height: 2;
}



/* ==================================================
   Visualization - Scroll Scene
================================================== */

.visualization-page {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: #fff;
}


/* =========================
   Full screen scene
========================= */

.visualization-scene {
	position: relative;

	/* 親要素に幅制限があっても画面端まで広げる */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.visualization-scene--forest {
	height: 150vh;
}

.visualization-scene--photoreal {
	height: 170vh;
}

.visualization-scene__sticky {
	position: sticky;
	top: 0;

	width: 100%;
	height: 100vh;

	overflow: hidden;
	background: #111;
}


/* =========================
   Background image
========================= */

.visualization-scene__background {
	position: absolute;
	inset: 0;
	z-index: 1;

	overflow: hidden;
}

.visualization-scene__background img {
	display: block;

	width: 100%;
	height: 105%;

	object-fit: cover;
	object-position: center center;

	transform:
		translateY(var(--image-y, 0px))
		scale(var(--image-scale, 1.04));

	will-change: transform;
}


/* =========================
   Overlay
========================= */

.visualization-scene__shade {
	position: absolute;
	inset: 0;
	z-index: 2;

	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.52) 0%,
			rgba(0, 0, 0, 0.22) 45%,
			rgba(0, 0, 0, 0.04) 100%
		);

	pointer-events: none;
}

.visualization-scene__shade--photoreal {
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.20) 0%,
			rgba(0, 0, 0, 0.02) 42%,
			rgba(0, 0, 0, 0.58) 100%
		);
}


/* =========================
   Forest text
========================= */

.visualization-scene__content {
	position: relative;
	z-index: 3;

	width: min(1200px, calc(100% - 80px));
	height: 100%;

	margin: 0 auto;
}

.visualization-scene__content--forest {
	display: flex;
	align-items: flex-end;

	padding-bottom: 80px;
}

.visualization-scene__copy {
	max-width: 680px;

	padding: 30px 34px;

	background: rgba(0, 0, 0, 0.34);
	backdrop-filter: blur(3px);

	color: #fff;

	opacity: var(--forest-copy-opacity, 1);

	transform:
		translateY(var(--forest-copy-y, 0px));

	will-change: opacity, transform;
}

.visualization-scene__copy p {
	margin: 0;

	font-size: 17px;
	line-height: 2;
}

.visualization-scene__copy p + p {
	margin-top: 18px;
}


/* =========================
   Photoreal heading
========================= */

.visualization-photoreal__heading {
	position: absolute;

	z-index: 3;
	top: 65px;
	left: max(40px, calc((100% - 1200px) / 2));

	color: #fff;

	opacity: var(--photoreal-heading-opacity, 0);

	transform:
		translateY(var(--photoreal-heading-y, 30px));

	will-change: opacity, transform;
}

.visualization-photoreal__heading .visualization-section__en {
	color: #fff;
}


/* =========================
   Photoreal description
========================= */

.visualization-photoreal__description {
	position: absolute;

	z-index: 3;
	left: max(40px, calc((100% - 1200px) / 2));
	right: max(40px, calc((100% - 1200px) / 2));
	bottom: 65px;

	max-width: 900px;

	color: #fff;

	opacity: var(--photoreal-description-opacity, 0);

	transform:
		translateY(var(--photoreal-description-y, 40px));

	will-change: opacity, transform;
}

.visualization-photoreal__description p {
	margin: 0;

	font-size: 18px;
	line-height: 2;

	text-shadow:
		0 2px 10px rgba(0, 0, 0, 0.55);
}


/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

	.visualization-scene--forest {
		height: 135vh;
	}

	.visualization-scene--photoreal {
		height: 150vh;
	}

	.visualization-scene__content {
		width: calc(100% - 40px);
	}

	.visualization-scene__content--forest {
		padding-bottom: 30px;
	}

	.visualization-scene__copy {
		padding: 22px;
	}

	.visualization-scene__copy p {
		font-size: 14px;
		line-height: 1.9;
	}

	.visualization-photoreal__heading {
		top: 35px;
		left: 20px;
		right: 20px;
	}

	.visualization-photoreal__heading .visualization-section__title {
		font-size: 30px;
	}

	.visualization-photoreal__description {
		left: 20px;
		right: 20px;
		bottom: 30px;
	}

	.visualization-photoreal__description p {
		font-size: 14px;
		line-height: 1.9;
	}

}


/* 動きを減らす設定を使っている端末向け */
@media (prefers-reduced-motion: reduce) {

	.visualization-scene__background img,
	.visualization-scene__copy,
	.visualization-photoreal__heading,
	.visualization-photoreal__description {
		transform: none !important;
	}

}







/* =========================
   Advertising CG
========================= */

.visualization-advertising {
	background: #f7f7f7;
}

.visualization-advertising__gallery {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
}

.visualization-advertising__item {
	margin: 0;
	overflow: hidden;
	background: #eee;
}

.visualization-advertising__item--main {
	grid-row: 1 / 3;
}

.visualization-advertising__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.visualization-advertising__item--main img {
	aspect-ratio: 4 / 3;
}

.visualization-advertising__item:not(.visualization-advertising__item--main) img {
	aspect-ratio: 16 / 9;
}


/* =========================
   Illustration
========================= */

.visualization-illustration {
	background: #fffdf8;
}

.visualization-illustration__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.visualization-illustration__item {
	margin: 0;
	background: #fff;
}

.visualization-illustration__item img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================
   Works / Tools
========================= */

.visualization-info {
	padding: 110px 0;
	background: #222;
	color: #fff;
}

.visualization-info__columns {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 100px;
}

.visualization-info__title {
	position: relative;
	margin: 0 0 30px;
	padding-bottom: 16px;
	font-size: 28px;
}

.visualization-info__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 4px;
	background: var(--color-yellow, #ffe44d);
}

.visualization-info__text {
	margin: 0;
	font-size: 15px;
	line-height: 2;
}


/* =========================
   Tablet / Mobile
========================= */

@media (max-width: 767px) {

	.visualization-inner {
		width: calc(100% - 40px);
	}

	

	

	

	.visualization-section {
		padding: 80px 0;
	}

	.visualization-section__header {
		margin-bottom: 30px;
	}

	.visualization-section__title {
		font-size: 30px;
	}

	.visualization-section__description {
		margin-top: 35px;
		font-size: 15px;
		line-height: 1.9;
	}

	
	.visualization-advertising__gallery {
		display: block;
	}

	.visualization-advertising__item + .visualization-advertising__item {
		margin-top: 16px;
	}

	.visualization-advertising__item img,
	.visualization-advertising__item--main img,
	.visualization-advertising__item:not(.visualization-advertising__item--main) img {
		width: 100%;
		height: auto;
		aspect-ratio: auto;
	}

	.visualization-illustration__gallery {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.visualization-info {
		padding: 75px 0;
	}

	.visualization-info__columns {
		grid-template-columns: 1fr;
		gap: 60px;
	}

}



/* ========================================
   About - Mission / Vision / Value
======================================== */

.philosophy {
	padding: 110px 30px;
	background-color: #fff;
}

.philosophy__wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}


/* 各項目 */

.philosophy__item {
	padding: 40px 34px 44px;

	border-top: 6px solid var(--color-yellow);
	background-color: #f7f7f7;
}


/* 英字見出し */

.philosophy__en {
	margin: 0 0 6px;

	font-family: "Montserrat", var(--font-base);
	font-size: 15px;
	letter-spacing: 0.12em;
	color: #888;
}


/* 日本語見出し */

.philosophy__title {
	margin: 0;

	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
}


/* Mission / Visionのメイン文 */

.philosophy__lead {
	margin: 30px 0 0;

	font-size: 21px;
	font-weight: 700;
	line-height: 1.8;
}


/* Mission説明文 */

.philosophy__text {
	margin: 22px 0 0;

	font-size: 16px;
	line-height: 2;
}


/* Value */

.philosophy__values {
	margin: 30px 0 0;
	padding-left: 1.5em;
}

.philosophy__values li {
	margin-bottom: 18px;

	font-size: 16px;
	line-height: 1.9;
}

.philosophy__values li:last-child {
	margin-bottom: 0;
}


/* スマホ・タブレット */

@media (max-width: 1023px) {

	.philosophy {
		padding: 70px 24px;
	}

	.philosophy__wrapper {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.philosophy__item {
		padding: 34px 28px 38px;
	}

	.philosophy__title {
		font-size: 27px;
	}

	.philosophy__lead {
		margin-top: 24px;
		font-size: 20px;
	}

	.philosophy__text,
	.philosophy__values li {
		font-size: 16px;
	}
}


/* 見出し + 右上アイコン */
.philosophy__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.philosophy__heading {
	min-width: 0;
	flex: 1;
}

.philosophy__icon {
	flex-shrink: 0;
	line-height: 0;
	margin-left: auto;
	margin-right: 10px; /* 少し左へずらす */
}

.philosophy__icon img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.22;
}

/* 各アイコンサイズ（PC） */
.philosophy__icon--mission {
	width: 112px;
}

.philosophy__icon--vision {
	width: 113px;
}

.philosophy__icon--value {
	width: 103px;
}

/* 本文との間隔 */
.philosophy__lead,
.philosophy__values {
	margin-top: 16px;
}

/* スマホ・タブレット */
@media (max-width: 1023px) {
	.philosophy__head {
		gap: 14px;
	}

	.philosophy__icon {
		margin-right: 50px; /* 少し左へずらす */
	}

	.philosophy__icon--mission {
		width: 118px;
	}

	.philosophy__icon--vision {
		width: 120px;
	}

	.philosophy__icon--value {
		width: 110px;
	}

	.philosophy__icon img {
		opacity: 0.18;
	}

	.philosophy__lead,
	.philosophy__values {
		margin-top: 10px;
	}
}









/* Recruit entry form - desired position checkboxes */

.contact-form__field-label {
	display: flex;
	align-items: center;
	margin-bottom: min(27px, calc(100vw * 27 / 750));
	font-weight: bold;
}

.contact-form__field--positions .wpcf7-form-control {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.contact-form__field--positions .wpcf7-list-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}

.contact-form__field--positions .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-weight: normal;
	cursor: pointer;
}

.contact-form__field--positions input[type="checkbox"] {
	width: 20px;
	height: 20px;
	padding: 0;
	flex: 0 0 20px;
	cursor: pointer;
	accent-color: var(--color-yellow);
}

.contact-form__field--positions .wpcf7-list-item-label {
	line-height: 1.5;
}

/* グループ見出し */
.contact-form__field--positions .wpcf7-list-item:nth-child(1)::before {
	content: "CGデザイナー系";
}

.contact-form__field--positions .wpcf7-list-item:nth-child(4)::before {
	content: "営業・企画系";
}

.contact-form__field--positions .wpcf7-list-item:nth-child(5)::before {
	content: "エンジニア系";
}

.contact-form__field--positions .wpcf7-list-item:nth-child(1)::before,
.contact-form__field--positions .wpcf7-list-item:nth-child(4)::before,
.contact-form__field--positions .wpcf7-list-item:nth-child(5)::before {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 16px;
}

/* SPでは各グループを縦に並べる */
.contact-form__field--positions .wpcf7-list-item:nth-child(4),
.contact-form__field--positions .wpcf7-list-item:nth-child(5) {
	margin-top: 22px;
}

@media (min-width: 1024px) {
	.contact-form__field-label {
		margin-bottom: min(15px, calc(100vw * 15 / 1920));
	}

	.contact-form__field--positions .wpcf7-form-control {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto auto auto;
		column-gap: 32px;
		row-gap: 12px;
	}

	/* CGデザイナー系 */
	.contact-form__field--positions .wpcf7-list-item:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.contact-form__field--positions .wpcf7-list-item:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.contact-form__field--positions .wpcf7-list-item:nth-child(3) {
		grid-column: 1;
		grid-row: 3;
	}

	/* 営業・企画系 */
	.contact-form__field--positions .wpcf7-list-item:nth-child(4) {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	/* エンジニア系 */
	.contact-form__field--positions .wpcf7-list-item:nth-child(5) {
		grid-column: 3;
		grid-row: 1;
		margin-top: 0;
	}

	.contact-form__field--positions .wpcf7-list-item:nth-child(6) {
		grid-column: 3;
		grid-row: 2;
	}

	.contact-form__field--positions input[type="checkbox"] {
		width: 18px;
		height: 18px;
		flex-basis: 18px;
	}
}

/* Contact only: retain the fluid design while keeping PC fields and copy readable. */
@media (min-width: 1024px) {
	body.page-id-13 .contact-form-heading__desc,
	body.page-id-13 .contact-access__address {
		font-size: clamp(14px, calc(100vw * 16 / 1920), 16px);
	}

	body.page-id-13 .contact-form input:not([type="hidden"]),
	body.page-id-13 .contact-form select {
		min-height: 44px;
	}
}

@media (max-width: 599px) {
	/* Reserve more of the same three-column row for the authored address lines. */
	body.page-id-13 .contact-points__list {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.38fr);
		gap: 12px;
	}

	body.page-id-13 .contact-points__label {
		max-width: 100%;
		font-size: max(12px, min(22px, calc(100vw * 22 / 750)));
	}

	body.page-id-13 .contact-points__item:last-child .contact-points__label {
		font-size: max(12px, min(18px, calc(100vw * 18 / 750)));
	}
}


/* =========================================================
   Home / WORLD OEKAKI FACTORY + catch copy
   ========================================================= */

/* PC */
.hero-mv__brand-message {
	position: absolute;
	text-align: center;
	pointer-events: none;
}

.hero-mv__brand-logo {
	display: block;
	width: 290px;
	height: auto;
	margin: 0 auto;
}

.hero-mv__brand-catch {
	margin: 8px 0 0;
	padding: 0;
	font-size: 24px;
	line-height: 1.5;
	font-weight: 400;
	text-align: center;
}

/* SP / Tablet */
.hero-mv-sp__brand-message {
	position: absolute;
	text-align: center;
	pointer-events: none;
}

.hero-mv-sp__brand-logo {
	display: block;
	width: 326px;
	height: auto;
	margin: 0 auto;
}

.hero-mv-sp__brand-catch {
	margin: 8px 0 0;
	padding: 0;
	font-size: 24px;
	line-height: 1.5;
	font-weight: 400;
	text-align: center;
}

/* =========================================================
   About / Philosophy
   MISSION一時非表示時のVISION・VALUE配置
   ========================================================= */

/* MISSION非表示時のみ、VISION / VALUEを2列で中央配置 */
@media (min-width: 1024px) {
	.philosophy--mission-hidden .philosophy__wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: center;
	}
}

/* SP / Tabletは従来どおり縦並び */
@media (max-width: 1023px) {
	.philosophy--mission-hidden .philosophy__wrapper {
		display: grid;
		grid-template-columns: 1fr;
	}
}