/* =========================================================
   HOSOI ENGLISH — Philosophy
   Figma source: node 282:2
   Footer is shared by the theme.
========================================================= */


/* =========================================================
   Base
========================================================= */

.c-philosophy-page {
	background: var(--bg);
	color: #54524d;
}


/* =========================================================
   Shared Philosophy primitives
========================================================= */

.c-philosophy__eyebrow-line {
	display: inline-block;
	width: 32px;
	height: 1px;
	margin-right: 12px;
	background: rgb(181 106 69 / 60%);
	vertical-align: middle;
}

.c-philosophy-hero__eyebrow,
.c-philosophy-about__eyebrow {
	display: flex;
	align-items: center;
	gap: 0;
}


/* =========================================================
   Philosophy Hero
========================================================= */

.c-philosophy-hero {
	background: var(--bg);
	padding: 208px 0 120px;
}

.c-philosophy-hero__inner {
	display: block;
	max-width: 1180px;
}

.c-philosophy-hero__copy {
	max-width: 680px;
	min-width: 0;
}

.c-philosophy-hero h1 {
	margin: 32px 0 0;
	color: #2c2b29;
	font-family: var(--font-en);
	font-size: 88px;
	font-weight: 500;
	line-height: 1.05;
}

.c-philosophy-hero__lead {
	max-width: 680px;
	margin: 32px 0 0;
	color: #54524d;
	font-family: var(--font-serif);
	font-size: 22.4px;
	line-height: 1.9;
	letter-spacing: 0.04em;
}

/*
 * Mobile-only hero image.
 * Desktopでは表示しない。
 */
.c-philosophy-hero__media--mobile {
	display: none;
}


/* =========================================================
   Philosophy Message
   Figma 282:17
========================================================= */

.c-philosophy-message {
	background: #f7f6f2;
	padding: 0 64px 160px;
}

.c-philosophy-message__inner {
	display: grid;
	grid-template-columns: 655px 445px;
	gap: 80px;
	align-items: start;
	max-width: 1180px;
}

.c-philosophy-message__content {
	width: 655px;
}

.c-philosophy-message__content p {
	margin: 0;
	color: #54524d;
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 400;
	line-height: 35.2px;
	letter-spacing: 0.03em;
}

.c-philosophy-message__content p + p {
	margin-top: 32px;
}

.c-philosophy-message__quote {
	padding: 0 0 0 34px;
	border-left: 2px solid rgb(181 106 69 / 50%);
	color: #2c2b29 !important;
	font-family: var(--font-serif) !important;
	font-size: 21px !important;
	font-weight: 500 !important;
	line-height: 39.9px !important;
	letter-spacing: 0.02em !important;
}


/*
 * Desktop image
 *
 * PCではMessageの右側に表示。
 * Heroには表示しない。
 */
.c-philosophy-message__media--desktop {
	display: block;
	width: 445px;
	height: 556.25px;
	margin: 0;
	overflow: hidden;
}

.c-philosophy-message__media--desktop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* =========================================================
   Core Values
   Figma 282:35
========================================================= */

.c-philosophy-values {
	background: #efece4;
	padding: 160px 64px;
}

.c-philosophy-values__inner {
	max-width: 1180px;
}

.c-philosophy-values__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.c-philosophy-values__header h2 {
	margin: 0;
	color: #2c2b29;
	font-family: var(--font-en);
	font-size: 41.6px;
	font-weight: 500;
	line-height: 58.24px;
	letter-spacing: 0.01em;
}

.c-philosophy-values__header p {
	margin: 0;
	color: rgb(84 82 77 / 60%);
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 700;
	line-height: 16.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.c-philosophy-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-top: 64px;
}

.c-philosophy-value__media {
	height: 268.44px;
	margin: 0;
	overflow: hidden;
	padding-top: 24px;
}

.c-philosophy-value__media img {
	display: block;
	width: 100%;
	height: 244.44px;
	object-fit: cover;
}

.c-philosophy-value h3 {
	margin: 32px 0 0;
	color: #2c2b29;
	font-family: var(--font-en);
	font-size: 24px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: 0.01em;
}

.c-philosophy-value__sub {
	margin: 4px 0 0 !important;
	color: #b56a45 !important;
	font-family: var(--font-serif) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 22.5px !important;
	letter-spacing: 0.06em !important;
}

.c-philosophy-value > p:last-child {
	margin: 20px 0 0;
	color: #54524d;
	font-family: var(--font-en);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 29.725px;
	letter-spacing: 0.02em;
}


/* =========================================================
   About
   Figma 282:78
========================================================= */

.c-philosophy-about {
	background: #f7f6f2;
	padding: 160px 64px;
}

.c-philosophy-about__inner {
	display: grid;
	grid-template-columns: 648.33px 435.66px;
	gap: 96px;
	align-items: center;
	max-width: 1180px;
}

.c-philosophy-about__content {
	width: 648.33px;
}

.c-philosophy-about h2 {
	margin: 32px 0 0;
	color: #2c2b29;
	font-family: var(--font-serif);
	font-size: 56px;
	font-weight: 500;
	line-height: 58.2px;
	letter-spacing: 0.01em;
}

.c-philosophy-about__name-en {
	margin: 16px 0 0;
	color: #54524d;
	font-family: var(--font-en);
	font-size: 22px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: 0.02em;
}

.c-philosophy-about__body {
	margin-top: 32px;
}

.c-philosophy-about__body p {
	margin: 0;
	color: #54524d;
	font-family: var(--font-en);
	font-size: 15px;
	font-weight: 400;
	line-height: 33px;
	letter-spacing: 0.03em;
}

.c-philosophy-about__body p + p {
	margin-top: 24px;
}

.c-philosophy-about__representative {
	margin: 40px 0 0;
	color: #54524d;
	font-family: var(--font-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0.08em;
}

.c-philosophy-about__representative span {
	display: block;
}

.c-philosophy-about__representative span + span {
	margin-top: 12px;
}

.c-philosophy-about__media {
	width: 435.66px;
	height: 544.56px;
	margin: 0;
	overflow: hidden;
}

.c-philosophy-about__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

	/* =====================================================
	   Philosophy Hero
	====================================================== */

	.c-philosophy-hero {
		padding: 88px 24px 64px;
	}

	.c-philosophy-hero__inner {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.c-philosophy-hero__copy {
		width: 100%;
		max-width: none;
	}

	.c-philosophy-hero h1 {
		margin-top: 28px;
		font-size: 52px;
		line-height: 1.08;
	}

	.c-philosophy-hero__lead {
		max-width: none;
		margin-top: 24px;
		font-size: 18px;
		line-height: 1.9;
		white-space: normal;
	}

	/*
	 * Mobile only.
	 *
	 * リードの直下に画像。
	 */
	.c-philosophy-hero__media--mobile {
		display: block;
		width: 100%;
		margin: 72px 0 0;
		overflow: hidden;
	}

	.c-philosophy-hero__media--mobile img {
		display: block;
		width: 100%;
		height: auto;
	}


	/* =====================================================
	   Philosophy Message
	====================================================== */

	.c-philosophy-message {
		padding: 0 24px 72px;
	}

	.c-philosophy-message__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		max-width: none;
	}

	.c-philosophy-message__content {
		width: auto;
	}

	.c-philosophy-message__content p {
		font-size: 14px;
		line-height: 2;
	}

	.c-philosophy-message__quote {
		padding-left: 24px;
		font-size: 18px !important;
		line-height: 1.8 !important;
	}

	/*
	 * Desktop image is hidden on mobile.
	 * Mobile版はHero側の画像を使用。
	 */
	.c-philosophy-message__media--desktop {
		display: none;
	}


	/* =====================================================
	   Core Values
	====================================================== */

	.c-philosophy-values {
		padding: 80px 24px;
	}

	.c-philosophy-values__header {
		display: block;
	}

	.c-philosophy-values__header h2 {
		font-size: 34px;
		line-height: 1.4;
	}

	.c-philosophy-values__header p {
		margin-top: 16px;
	}

	.c-philosophy-values__grid {
		grid-template-columns: 1fr;
		gap: 48px;
		margin-top: 40px;
	}

	.c-philosophy-value__media {
		height: auto;
		padding-top: 16px;
	}

	.c-philosophy-value__media img {
		width: 100%;
		height: auto;
		aspect-ratio: 1.5 / 1;
		object-fit: cover;
	}

	.c-philosophy-value h3 {
		margin-top: 24px;
		font-size: 22px;
		line-height: 1.5;
	}

	.c-philosophy-value > p:last-child {
		font-size: 14px;
		line-height: 2;
	}


	/* =====================================================
	   About
	====================================================== */

	.c-philosophy-about {
		padding: 80px 24px;
	}

	.c-philosophy-about__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		max-width: none;
	}

	.c-philosophy-about__content {
		width: auto;
	}

	.c-philosophy-about h2 {
		margin-top: 28px;
		font-size: 42px;
		line-height: 1.35;
	}

	.c-philosophy-about__name-en {
		font-size: 18px;
		line-height: 1.6;
	}

	.c-philosophy-about__body {
		margin-top: 28px;
	}

	.c-philosophy-about__body p {
		font-size: 14px;
		line-height: 2;
	}

	.c-philosophy-about__body p + p {
		margin-top: 20px;
	}

	.c-philosophy-about__representative {
		margin-top: 32px;
		font-size: 13px;
		line-height: 1.7;
	}

	.c-philosophy-about__media {
		width: 100%;
		height: 420px;
	}

	.c-philosophy-about__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


	/* =====================================================
	   CTA
	====================================================== */

	.c-philosophy-cta {
		padding: 80px 24px;
	}

	.c-philosophy-cta__inner {
		max-width: none;
	}

	.c-philosophy-cta h2 {
		font-size: 36px;
		line-height: 1.4;
	}

	.c-philosophy-cta > .l-container > p:not(.c-eyebrow) {
		margin-top: 32px;
		font-size: 13px;
		line-height: 2;
	}

	.c-philosophy-cta__button {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		margin-top: 40px;
		padding: 16px 24px;
	}

}