/*
Theme Name: Office Novaera
Theme URI: https://novaera.example.com
Author: Office Novaera
Description: オフィスノヴァエラ株式会社 コーポレートサイト用テーマ
Version: 1.0
Text Domain: novaera_new_theme
*/

:root {
	--color-navy: #1c2b45;
	--color-navy-dark: #16233a;
	--color-accent: #a58346;
	--color-accent-dark: #a58346;
	--color-accent-hover: #86682f;
	--color-cream: #f7f2ea;
	--color-beige: #efe8db;
	--color-text: #3c3c3c;
	--color-text-light: #6b6b6b;
	--color-mauve: #9c85a6;
	--color-border: #e2dccf;
	--font-jp: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	--font-en: "Playfair Display", serif;
	--max-width: 1180px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Mobile Safari silently boosts font-size beyond the CSS value for
	   text blocks it judges "too narrow to read comfortably" relative
	   to their box width — which is exactly why .mission-quote (a
	   narrow width:max-content box) was rendering smaller than
	   .vision-quote/.purpose-quote (full-width boxes) even though all
	   three share the same font-size: 24px on touch. This disables
	   that auto-boosting so font-size is always rendered literally.
	   No visible effect on PC — desktop browsers don't do this. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-jp);
	color: var(--color-text);
	line-height: 1.9;
	font-size: 15px;
	background: #fff;
	overflow-x: hidden;
}

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

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

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* Touch devices only (phones/tablets) — PC is untouched.
   Give every section ~20px more breathing room on both edges. */
.is-touch .container {
	padding-left: 44px;
	padding-right: 44px;
}

.section {
	padding: 100px 0;
}

.section-label {
	display: block;
	text-align: center;
	font-family: var(--font-en);
	letter-spacing: 0.25em;
	color: var(--color-accent-dark);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 16px;
}

.section-title {
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 60px;
	letter-spacing: 0.05em;
}

.btn {
	display: inline-block;
	padding: 14px 44px;
	border: 1px solid var(--color-navy);
	border-radius: 4px;
	color: var(--color-navy);
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.15em;
	transition: background 0.25s ease, color 0.25s ease;
}

.btn:hover {
	background: var(--color-navy);
	color: #fff;
}

.btn-fill {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.btn-fill:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: #fff;
}

.btn-center {
	text-align: center;
	margin-top: 56px;
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	border-bottom: 2px solid var(--color-accent);
}

.site-header .container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0;
}

/* Touch devices only (phones/tablets) — PC (mouse) is untouched. */
.is-touch .site-header .container {
	padding-left: 16px;
}

.site-logo img {
	width: 190px;
	height: 96px;
}

@media (min-width: 641px) {
	.site-logo img {
		margin-left: -32px;
	}
}

/* Touch devices only (phones/tablets) — PC (mouse) is untouched.
   The -32px above would push the logo past the screen edge on phones. */
.is-touch .site-logo img {
	width: 160px;
	margin-left: -7px;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

.site-nav ul {
	display: flex;
	gap: 40px;
}

.site-nav ul li a {
	position: relative;
	padding-bottom: 6px;
}

.site-nav ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.site-nav ul li a:hover::after {
	transform: scaleX(1);
}

.site-nav a {
	font-family: var(--font-en);
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	font-weight: 500;
}

.site-nav a.btn-fill {
	color: #fff;
}

.site-nav .btn {
	padding: 12px 28px;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.nav-toggle span {
	width: 26px;
	height: 2px;
	background: var(--color-navy);
}

/* ---------- Hero / FV ---------- */
.hero {
	position: relative;
	color: #fff;
	overflow: hidden;
}

.hero-media {
	position: relative;
	height: 680px;
	overflow: hidden;
}

.hero-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.15);
	transform-origin: 50% 60%;
}

.hero-panel {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: hidden;
	z-index: 2;
}

.hero-panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-panel-left {
	left: 0;
	width: 37%;
}

.hero-panel-right {
	right: 0;
	width: 37%;
}


.hero-content {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}

.hero-content .logo-fv {
	max-width: 420px;
	width: 70%;
	margin-bottom: 32px;
}

.hero-tagline {
	width: 100%;
	display: flex;
	flex-direction: column;
	font-family: var(--font-jp);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
}

.tagline-line {
	display: inline-block;
	background: #fff;
	color: #2b3f5c;
	padding: 12px 28px;
}

.tagline-line-1 {
	align-self: center;
	transform: translate(15px, 15px);
}

.tagline-line-2 {
	align-self: flex-end;
	margin-top: 14px;
	margin-right: -20px;
	transform: translateY(15px);
}

/* ---------- News ---------- */
.news {
	background: #f7f5f2;
	padding: 60px 0;
}

.news .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.news-list li {
	display: flex;
	gap: 40px;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
}

.news-list li:first-child {
	border-top: 1px solid var(--color-border);
}

.news-date {
	flex: 0 0 auto;
	color: #2b3f5c;
	font-weight: 600;
}

.news-text {
	color: #2b3f5c;
}

/* ---------- About / Vision Mission Purpose ---------- */
#about {
	background: url('pictures/haikei.png') no-repeat center -200px;
	background-size: 120%;
}

#about .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.about-item {
	display: grid;
	grid-template-columns: 670px 1fr;
	align-items: center;
	gap: 60px;
	margin-bottom: 90px;
}

.about-item:last-child {
	margin-bottom: 0;
}

.about-item.reverse .about-media {
	order: 2;
}

.about-item.reverse .about-text {
	order: 1;
}

.about-media img {
	border-radius: 4px;
}

.about-stack {
	margin-bottom: 90px;
}

.about-stack .about-media {
	max-width: 620px;
	margin-bottom: 24px;
}

.about-stack-right .about-media {
	margin-left: auto;
}

.about-stack-right {
	transform: translateY(-350px);
}

.about-stack-purpose {
	transform: translateY(-700px);
}

.about-quote {
	font-family: var(--font-jp);
	font-size: 20px;
	font-weight: 700;
	color: #2b3f5c;
	line-height: 1.7;
	margin: 0 0 20px;
}

.about-desc {
	font-family: var(--font-jp);
	font-weight: 700;
	color: #2b3f5c;
	font-size: 16px;
}

.vision-quote {
	font-size: 36px;
	text-align: left;
	color: #2b3f5c;
}

.vision-desc {
	max-width: 670px;
	font-size: 16px;
	text-align: center;
	color: #2b3f5c;
	margin-left: -75px;
}

.about-media.mission-media {
	max-width: 600px;
}

.mission-quote {
	font-size: 36px;
	text-align: left;
	color: #2b3f5c;
	margin-left: 625px;
}

.mission-desc {
	font-size: 16px;
	text-align: center;
	color: #2b3f5c;
	margin-left: 650px;
}

.purpose-quote {
	font-size: 36px;
	text-align: left;
	color: #2b3f5c;
}

.purpose-more {
	text-align: right;
	margin-top: 20px;
}

.purpose-more-btn {
	background: #fff;
	border-color: #2b3f5c;
	color: #2b3f5c;
}

.purpose-desc {
	font-size: 16px;
	text-align: center;
	color: #2b3f5c;
	margin-left: -600px;
}

/* Touch devices only (phones/tablets) — PC is untouched.
   Align each description's start point with its quote's start point. */
.is-touch .vision-desc {
	text-align: left;
	margin-left: 0;
	font-size: 14px;
}

/* margin-left is set at runtime by the script at the bottom of
   front-page.php, which measures the actual rendered width of the
   first line (.align-line) and shifts the whole block so that line's
   end lands exactly on mission.png's right edge — this replaces a
   hardcoded pixel value that was measured in headless Chrome and
   didn't match the width of the same text in the on-device font,
   causing the line to wrap mid-word. width:max-content sizes the box
   to exactly what its longest hard-wrapped line needs (never more),
   so it can never wrap early *and* never overflow past the container
   the way a generously-guessed fixed width could — that overflow was
   invisible (no text rendered in the extra space) but still widened
   Safari's effective viewport, which is what caused the blank strip
   on the right edge. */
.is-touch .mission-desc {
	text-align: left;
	margin-left: 0;
	width: max-content;
	max-width: 100%;
	font-size: 14px;
}

.is-touch .purpose-desc {
	text-align: left;
	margin-left: 0;
	font-size: 14px;
}

/* Same runtime-alignment technique as .mission-desc above — see the
   script at the bottom of front-page.php. */
.is-touch .mission-quote {
	text-align: left;
	margin-left: 0;
	width: max-content;
	max-width: 100%;
}

/* A little smaller, per request. */
.is-touch .about-stack .about-media {
	max-width: 500px;
}

.is-touch .vision-quote,
.is-touch .mission-quote,
.is-touch .purpose-quote {
	font-size: 24px;
}

/* ---------- Approach ---------- */
.approach {
	background: #fff;
	margin-top: -750px;
}

.approach-lead {
	text-align: center;
	margin-bottom: 60px;
}

.approach-lead .sub {
	display: block;
	font-size: 36px;
	font-weight: 700;
	color: #a58346;
	margin-bottom: 10px;
}

.approach-lead .main {
	display: block;
	font-size: 48px;
	font-weight: 700;
	color: #2b3f5c;
}

.approach-steps {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 70px;
}

.approach-step img {
	width: 410px;
}

.approach-checklist {
	background: #fff;
	border-radius: 6px;
	padding: 50px 10px;
}

.approach-checklist h3 {
	display: table;
	margin: 0 auto 36px;
	font-size: 36px;
	color: #a58346;
	white-space: nowrap;
	transform: translateX(-38px);
}

.sp-only-break {
	display: none;
}

/* Touch devices only (phones/tablets) — PC is untouched. */
.is-touch .sp-only-break {
	display: inline;
}

.is-touch .approach-checklist h3 {
	text-align: center;
}

.checklist-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-left: 160px;
}

/* Touch devices only (phones/tablets) — PC is untouched. */
.is-touch .checklist-grid {
	margin-left: 120px;
}

.checklist-grid li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 24px;
	font-weight: 700;
	color: #2b3f5c;
}

.checklist-grid img {
	width: 50px;
	height: 50px;
	flex: 0 0 auto;
	margin-top: 2px;
}

/* ---------- Service ---------- */
#service {
	margin-top: -100px;
}

#service .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.service-card img {
	border-radius: 4px;
	margin-bottom: 24px;
	aspect-ratio: 39 / 25;
	object-fit: cover;
	filter: grayscale(15%);
}

.service-card .service-en {
	font-family: var(--font-en);
	font-size: 16px;
	letter-spacing: 0.2em;
	color: #2b3f5c;
	display: block;
	margin-bottom: -20px;
}

.service-card h3 {
	font-size: 36px;
	color: #2b3f5c;
	margin: 0 0 14px;
}

.service-card p {
	font-size: 16px;
	color: #2b3f5c;
}

/* Touch devices only (phones/tablets) — PC is untouched.
   Stack the 3 service cards vertically instead of side by side. */
.is-touch .service-grid {
	grid-template-columns: 1fr;
}

.is-touch .service-card img {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.is-touch .service-card .service-en,
.is-touch .service-card h3 {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Company ---------- */
.company {
	background: #f7f5f2;
}

.company .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.company-top {
	display: grid;
	grid-template-columns: 1fr 500px;
	grid-template-areas:
		"name  photo"
		"bio   photo";
	gap: 60px;
	margin-bottom: 60px;
}

.company-top .company-name {
	grid-area: name;
	font-size: 36px;
	font-weight: 700;
	color: #2b3f5c;
	margin: 0 0 24px;
}

.company-top .company-bio {
	grid-area: bio;
}

.company-bio p {
	font-size: 16px;
	color: #2b3f5c;
	margin: 0 0 16px;
}

.company-top .company-photo {
	grid-area: photo;
}

.company-photo img {
	border-radius: 4px;
	width: 500px;
}

/* Touch devices only (phones/tablets) — PC is untouched.
   Stack as: photo, name, description. */
.is-touch .company-top {
	grid-template-columns: 1fr;
	grid-template-areas:
		"photo"
		"name"
		"bio";
}

.is-touch .company-photo img {
	width: 50%;
	margin: 0 auto;
}

.is-touch .company-top .company-name {
	text-align: center;
}

.company-lists {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
}

/* Touch devices only (phones/tablets) — PC is untouched. */
.is-touch .company-lists {
	grid-template-columns: 1fr;
}

.company-lists h4 {
	font-family: var(--font-jp) !important;
	font-size: 24px;
	color: #a58346;
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 12px;
	margin: 0 0 18px;
}

.company-lists li {
	font-size: 13px;
	color: var(--color-text-light);
	padding: 8px 0;
	border-bottom: 1px dashed var(--color-border);
}

.company-interview {
	margin-top: 60px;
	text-align: center;
}

.company-interview-title {
	font-family: var(--font-jp) !important;
	font-size: 24px;
	font-weight: 700;
	color: #2b3f5c;
	margin: 0 0 30px;
}

.company-interview-banner {
	display: block;
	max-width: 831px;
	margin: 0 auto;
}

.company-interview-banner img {
	width: 100%;
	border-radius: 4px;
}

/* ---------- Contact ---------- */
.contact {
	text-align: center;
	background: #fff;
}

.contact .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.contact .section-label.contact-page-heading {
	color: #2b3f5c;
	font-size: 32px;
}

.contact-lead {
	max-width: none;
	margin: 60px auto 40px;
	color: #2b3f5c;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	line-height: 1.8;
}

/* ---------- About Page ---------- */
.message-section {
	background: url('pictures/haikei.png') no-repeat center -600px;
	background-size: 120%;
}

.message-section .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.message-quote {
	text-align: left;
	font-size: 30px;
	font-weight: 700;
	color: #2b3f5c;
	margin: 0 0 50px;
}

.message-body p {
	font-size: 16px;
	color: #2b3f5c;
	margin: 0 0 28px;
}

.profile-section .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.profile-top {
	display: grid;
	grid-template-columns: 1fr 500px;
	gap: 60px;
	margin-bottom: 60px;
	align-items: start;
}

.profile-bio p {
	font-size: 16px;
	color: #2b3f5c;
	margin: 0 0 16px;
}

.profile-photo img {
	border-radius: 4px;
	width: 500px;
	margin-bottom: 20px;
}

.profile-name {
	font-size: 24px;
	font-weight: 700;
	color: #2b3f5c;
	text-align: center;
	margin: 0;
}

/* Touch devices only (phones/tablets) — PC is untouched.
   Match TOP's COMPANY section: photo first (half size, centered),
   then name, then the description. */
.is-touch .profile-top {
	grid-template-columns: 1fr;
}

.is-touch .profile-photo {
	order: -1;
}

.is-touch .profile-photo img {
	width: 50%;
	margin: 0 auto 20px;
}

.company-info-section .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.company-info-list {
	margin: 40px 0 0;
}

.company-info-row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border);
}

.company-info-row dt {
	font-size: 24px;
	font-weight: 700;
	color: #2b3f5c;
	margin-left: 60px;
	white-space: nowrap;
}

.company-info-row dd {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 0 60px;
	color: #2b3f5c;
}

.company-info-row dd.no-wrap {
	white-space: nowrap;
}

/* ---------- Contact Page ---------- */
.contact-page-label {
	text-align: left;
	font-size: 32px;
	color: #a58346;
	font-weight: 700;
	margin-bottom: 40px;
}

.contact-form-card {
	background: #b7c6d1;
	border-radius: 16px;
	padding: 60px;
}

.form-row {
	margin-bottom: 40px;
}

.form-row:last-of-type {
	margin-bottom: 0;
}

.form-row label {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: #2b3f5c;
	margin-bottom: 14px;
}

.form-row input,
.form-row textarea {
	width: 100%;
	border: none;
	border-radius: 6px;
	padding: 18px 20px;
	font-family: var(--font-jp);
	font-size: 15px;
	color: var(--color-text);
	background: #fff;
}

.form-row textarea {
	resize: vertical;
}

.form-agree {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 40px;
	font-size: 16px;
	font-weight: 700;
	color: #2b3f5c;
}

.form-agree input[type="checkbox"] {
	width: 20px;
	height: 20px;
}

.contact-send {
	text-align: center;
}

.contact-send .btn {
	padding: 18px 60px;
	font-size: 15px;
	border-radius: 4px;
}

/* ---------- Thanks Page ---------- */
.thanks-page {
	text-align: center;
}

.thanks-title {
	font-family: var(--font-en);
	font-size: 40px;
	font-weight: 700;
	color: #2b3f5c;
	margin: 0 0 24px;
}

.thanks-subtitle {
	font-size: 30px;
	font-weight: 700;
	color: #2b3f5c;
	margin: 0 0 80px;
}

.thanks-body {
	max-width: 900px;
	margin: 0 auto;
	color: #2b3f5c;
	font-size: 15px;
}

/* ---------- Service Page ---------- */
.service-page-intro .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.service-page-heading {
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	color: #2b3f5c;
	margin: 0 0 30px;
}

.service-page-lead {
	max-width: 900px;
	margin: 0 auto 60px;
	text-align: left;
	font-size: 16px;
	line-height: 1.9;
	color: #2b3f5c;
}

.service-detail {
	padding-top: 0;
}

.service-badge {
	display: inline-block;
	background: #a58346;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	padding: 22px 40px;
	padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
	margin-bottom: 40px;
}

.service-badge-right {
	display: table;
	margin-left: auto;
	margin-right: 0;
	padding-left: 40px;
	padding-right: max(24px, calc((100vw - 1180px) / 2 + 24px));
}

.service-block {
	margin-bottom: 90px;
}

.service-block:last-child {
	margin-bottom: 0;
}

.service-block-title {
	font-size: 32px;
	color: #2b3f5c;
	margin: 0 0 10px;
}

.service-block-sub {
	font-size: 18px;
	font-weight: 700;
	color: #a58346;
	margin: 0 0 30px;
}

.exec-coaching-title {
	margin-left: 0;
}

.exec-coaching-sub {
	color: #2b3f5c;
	font-size: 24px;
}

.exec-coaching-flow {
	margin-left: 10px;
}

.exec-coaching-body {
	grid-template-columns: 1fr 600px;
}

.exec-coaching-media {
	width: 600px;
	margin-top: -100px;
	margin-right: calc(-20px - 1 * max(24px, calc((100vw - 1180px) / 2 + 24px)));
}

.exec-coaching-media img {
	width: 600px;
}

.service-block-text .exec-coaching-text {
	color: #2b3f5c;
}

.service-block-text .exec-coaching-numbered {
	font-weight: 700;
	font-size: 20px;
	color: #2b3f5c;
}

.service-block-text .service-target.exec-coaching-target {
	color: #a58346;
	font-size: 16px;
}

.personal-coaching-title {
	margin-left: 0;
}

.personal-coaching-sub {
	color: #2b3f5c;
	font-size: 24px;
}

.personal-coaching-flow {
	margin-left: 10px;
}

.personal-coaching-body {
	grid-template-columns: 1fr 600px;
}

.personal-coaching-media {
	width: 600px;
	margin-top: -100px;
	margin-right: calc(-20px - 1 * max(24px, calc((100vw - 1180px) / 2 + 24px)));
}

.personal-coaching-media img {
	width: 600px;
}

.service-block-text .personal-coaching-text {
	color: #2b3f5c;
}

.service-block-text .personal-coaching-numbered {
	font-weight: 700;
	font-size: 20px;
	color: #2b3f5c;
}

.service-block-text .service-target.personal-coaching-target {
	color: #a58346;
	font-size: 16px;
}

.service-block-body {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: 50px;
	align-items: center;
	margin-bottom: 40px;
}

.service-block-reverse {
	grid-template-columns: 460px 1fr;
}

.service-block-reverse .service-block-media {
	order: -1;
}

.training-title {
	margin-left: 490px;
	font-size: 24px;
}

.training-body {
	grid-template-columns: 460px 1fr;
}

.training-media {
	width: 600px;
	margin-left: calc(-20px - 1 * max(24px, calc((100vw - 1180px) / 2 + 24px)));
}

.training-media img {
	width: 600px;
}

.service-block-text p {
	font-size: 15px;
	color: var(--color-text);
	margin: 0 0 20px;
}

.service-block-text .service-target {
	font-size: 13px;
	font-weight: 700;
	color: #2b3f5c;
	margin: 0;
}

.service-block-text .training-text {
	color: #2b3f5c;
}

.consulting-title {
	margin-left: 0;
	font-size: 24px;
}

.consulting-media {
	width: 600px;
	margin-top: -100px;
	margin-right: calc(-20px - 1 * max(24px, calc((100vw - 1180px) / 2 + 24px)));
}

.consulting-media img {
	width: 600px;
}

.service-block-text .consulting-text {
	color: #2b3f5c;
}

.service-block-text .consulting-numbered {
	font-weight: 700;
	font-size: 20px;
	color: #2b3f5c;
}

.service-block-text .service-target.consulting-target {
	color: #a58346;
	font-size: 16px;
}

.service-block-text .training-numbered {
	font-weight: 700;
	font-size: 20px;
	color: #2b3f5c;
}

.service-block-text .service-target.training-target {
	color: #a58346;
	font-size: 16px;
}

.service-block-media img {
	border-radius: 4px;
}

.service-flow img {
	width: 100%;
}

/* Touch devices only (phones/tablets) — PC is untouched.
   The coaching/training/consulting blocks use fixed 600px media widths
   plus a "bleed to the browser edge" negative margin. On PC that's fine
   (there's real extra space beyond the 1180px design outside the
   container), but on mobile the viewport is locked to exactly 1180px,
   so that same negative margin has nowhere to go and instead overflows
   the screen — making the section too wide and, in the training
   section, making the oversized image spill into the text column.
   Fix: stack image above text in a single column, full width. */
.is-touch .service-block-body,
.is-touch .exec-coaching-body,
.is-touch .personal-coaching-body,
.is-touch .training-body {
	grid-template-columns: 1fr;
}

/* Training's markup has the image before the text in the HTML
   (it's PC's "reverse" layout), so push it after the text here
   to match how the other sections stack on mobile. */
.is-touch .service-block-reverse .service-block-media {
	order: 1;
}

.is-touch .exec-coaching-media,
.is-touch .personal-coaching-media,
.is-touch .training-media,
.is-touch .consulting-media {
	width: 50%;
	margin: 0 auto 24px;
}

.is-touch .exec-coaching-media img,
.is-touch .personal-coaching-media img,
.is-touch .training-media img,
.is-touch .consulting-media img {
	width: 100%;
}

.is-touch .training-title {
	margin-left: 0;
}

/* ---------- Footer ---------- */
.site-footer {
	background: #2b3f5c;
	color: #cfd6e2;
	padding: 70px 0 30px;
}

.footer-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-top h5 {
	color: #fff;
	font-family: var(--font-en) !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.15em;
	margin: 0 0 18px;
}

.footer-company p {
	margin: 0;
	font-size: 14px;
}

.footer-nav {
	text-align: right;
	margin-left: 80px;
}

.footer-nav ul {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.footer-nav a {
	font-family: var(--font-en);
	font-size: 13px;
}

.footer-bottom {
	text-align: center;
	font-family: var(--font-en);
	font-size: 12px;
	color: #8b93a5;
	padding-top: 24px;
}

/* ---------- Interview Page ---------- */
.interview-page {
	background: #fff;
}

.interview-page .section-label {
	text-align: left;
	color: #a58346;
	font-size: 20px;
	font-weight: 700;
}

.interview-body {
	max-width: 840px;
	margin: 0 auto;
}

.interview-title {
	font-size: 32px;
	font-weight: 700;
	color: #2b3f5c;
	line-height: 1.7;
	margin: 0 0 50px;
}

.interview-image {
	margin: 50px 0;
}

.interview-image img {
	width: 100%;
	border-radius: 4px;
}

.interview-heading {
	font-size: 26px;
	font-weight: 700;
	color: #2b3f5c;
	line-height: 1.6;
	margin: 80px 0 36px;
	padding-top: 40px;
	border-top: 2px solid var(--color-accent);
}

.interview-body p {
	font-size: 16px;
	color: var(--color-text);
	line-height: 2;
	margin: 0 0 28px;
}

.interview-body p.interview-q {
	font-weight: 700;
	color: #2b3f5c;
	font-size: 17px;
	margin: 44px 0 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.about-item,
	.company-top,
	.profile-top,
	.approach-steps,
	.service-grid,
	.service-block-body,
	.footer-top {
		grid-template-columns: 1fr;
	}

	.about-item.reverse .about-media,
	.about-item.reverse .about-text,
	.service-block-reverse .service-block-media {
		order: initial;
	}

	.company-photo {
		max-width: 260px;
	}

	.hero-media {
		height: 520px;
	}

	.hero-media video,
	.hero-panel-right {
		display: none;
	}

	.hero-panel-left {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.section {
		padding: 64px 0;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 24px 30px;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
		transform: translateY(-140%);
		transition: transform 0.3s ease;
	}

	.site-nav.is-open {
		transform: translateY(0);
	}

	.site-nav ul {
		flex-direction: column;
		gap: 18px;
		width: 100%;
	}

	.nav-toggle {
		display: flex;
	}

	.hero-tagline {
		font-size: 18px;
	}

	.checklist-grid,
	.company-lists {
		grid-template-columns: 1fr;
	}

	.news-list li {
		flex-direction: column;
		gap: 6px;
	}
}