/*
========================================================
SIGNAL CORPORATE DESIGN SYSTEM
Kadence Child Theme
========================================================

Design direction:
- White / black base
- SIGNAL blue accent
- Large Japanese typography
- Clean corporate / technology aesthetic
- Minimal radius
- Thin borders
- Subtle hover motion
- Responsive-first

HERO structure:

Row Layout (.hero-section)
└── Group (.hero-inner)
    ├── Group (.hero-content)
    │   ├── Lead text
    │   ├── H1
    │   ├── Description
    │   └── Button
    │
    └── Image (.hero-image)

PC:
- hero-section = full width
- hero-inner = full width / position: relative
- hero-content = left side
- hero-image = absolute / right side

Mobile:
- hero-content = normal flow
- hero-image = normal flow
- text → image
*/


/* ======================================================
   01. DESIGN TOKENS
====================================================== */

:root {
	/* Brand */
	--signal-blue: #1769ff;
	--signal-blue-dark: #0d4fd7;
	--signal-blue-light: #eaf2ff;

	/* Neutral */
	--signal-black: #111111;
	--signal-text: #222222;
	--signal-gray-700: #4b5563;
	--signal-gray-600: #666666;
	--signal-gray-500: #8a8f98;
	--signal-gray-300: #d9dde5;
	--signal-gray-200: #e5e7eb;
	--signal-gray-100: #f6f8fa;
	--signal-white: #ffffff;

	/* Layout */
	--signal-container: 1200px;
	--signal-content: 1080px;

	/* Radius */
	--signal-radius-sm: 4px;
	--signal-radius-md: 8px;
	--signal-radius-lg: 12px;

	/* Shadows */
	--signal-shadow-sm: 0 8px 24px rgba(17, 17, 17, 0.06);
	--signal-shadow-md: 0 20px 50px rgba(17, 17, 17, 0.08);

	/* Typography */
	--signal-font-sans:
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Yu Gothic",
		"YuGothic",
		Meiryo,
		sans-serif;

	--signal-font-display:
		"Inter",
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Yu Gothic",
		"YuGothic",
		Meiryo,
		sans-serif;

	--signal-font-mono:
		"SFMono-Regular",
		Consolas,
		"Liberation Mono",
		monospace;

	/* Motion */
	--signal-transition: 0.25s ease;
	--signal-transition-slow: 0.35s ease;
}


/* ======================================================
   02. BASE
====================================================== */

html {
	scroll-behavior: smooth;
}

body.signal-corporate {
	font-family: var(--signal-font-sans);
	color: var(--signal-text);
	background: var(--signal-white);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.signal-corporate a {
	transition:
		color var(--signal-transition),
		background-color var(--signal-transition),
		border-color var(--signal-transition),
		box-shadow var(--signal-transition),
		transform var(--signal-transition),
		opacity var(--signal-transition);
}

body.signal-corporate img {
	max-width: 100%;
	height: auto;
}

body.signal-corporate button,
body.signal-corporate input,
body.signal-corporate textarea,
body.signal-corporate select {
	font-family: inherit;
}


/* ======================================================
   03. TYPOGRAPHY
====================================================== */

.signal-corporate h1,
.signal-corporate h2,
.signal-corporate h3,
.signal-corporate h4,
.signal-corporate h5,
.signal-corporate h6 {
	font-family: var(--signal-font-display);
	color: var(--signal-black);
	font-weight: 700;
	letter-spacing: -0.025em;
}

.signal-corporate h1 {
	font-size: clamp(44px, 5vw, 80px);
	line-height: 1.16;
}

.signal-corporate h2 {
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.3;
}

.signal-corporate h3 {
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.45;
}

.signal-corporate p {
	line-height: 1.9;
}

.signal-corporate .signal-label {
	display: block;
	margin-bottom: 12px;
	color: var(--signal-blue);
	font-family: var(--signal-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.signal-corporate .signal-section-title {
	margin-top: 0;
	margin-bottom: 18px;
}

.signal-corporate .signal-section-description {
	margin-top: 0;
	color: var(--signal-gray-600);
	font-size: 15px;
}


/* ======================================================
   04. COMMON LAYOUT
====================================================== */

.signal-corporate .signal-section {
	padding-top: 110px;
	padding-bottom: 110px;
}

.signal-corporate .signal-section--light {
	background: var(--signal-gray-100);
}

.signal-corporate .signal-section--blue {
	background: var(--signal-blue);
	color: var(--signal-white);
}

.signal-corporate .signal-section--blue h2,
.signal-corporate .signal-section--blue h3,
.signal-corporate .signal-section--blue p {
	color: var(--signal-white);
}

.signal-corporate .signal-container {
	width: min(100% - 48px, var(--signal-container));
	margin-right: auto;
	margin-left: auto;
}


/* ======================================================
   05. HEADER / NAVIGATION
====================================================== */

.signal-corporate .main-header-menu .menu-item > a {
	font-family: var(--signal-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.signal-corporate .main-header-menu .menu-item > a:hover {
	color: var(--signal-blue);
}

.signal-corporate .signal-service-nav {
	background: var(--signal-blue);
	color: var(--signal-white) !important;
}

.signal-corporate .signal-service-nav:hover {
	background: var(--signal-blue-dark);
	color: var(--signal-white) !important;
}


/* ======================================================
   06. HERO
====================================================== */

/*
 * HERO外枠
 *
 * Row Layoutが1カラムでも問題なし。
 *
 * HEROそのものは画面幅いっぱい。
 */
.signal-corporate .hero-section {
	position: relative;

	width: 100%;
	max-width: none;

	min-height: 620px;

	margin: 0;
	padding: 0;

	overflow: hidden;

	background: var(--signal-white);
}


/*
 * HERO内部
 *
 * ここがabsolute配置の基準。
 *
 * 重要：
 * hero-inner自体を1200pxに制限しない。
 *
 * 画面いっぱいの領域をposition:relativeにして、
 * その中にテキストと画像を配置する。
 */
.signal-corporate .hero-section .hero-inner {
	position: relative;

	width: 100%;
	max-width: none;

	min-height: 620px;

	margin: 0;
	padding: 0;
}


/* ======================================================
   HERO CONTENT
====================================================== */

.signal-corporate .hero-section .hero-content {
	position: relative;

	z-index: 3;

	/*
	 * テキスト領域。
	 *
	 * 画面左側に配置する。
	 */
	width: min(600px, 48%);

	max-width: 600px;

	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;

	/*
	 * 1200pxのコンテンツ領域を基準に
	 * 左位置を決める。
	 */
	margin-left: max(
		24px,
		calc((100% - 1200px) / 2)
	);

	padding-top: 80px;
}


/* ======================================================
   HERO EYEBROW
====================================================== */

.signal-corporate .hero-section .hero-eyebrow {
	margin: 0 0 24px;

	color: var(--signal-text);

	font-size: 16px;
	font-weight: 500;

	line-height: 1.9;
}


/* ======================================================
   HERO H1
====================================================== */

.signal-corporate .hero-section h1 {
	max-width: 600px;

	margin: 0 0 28px;

	color: var(--signal-black);

	font-size: clamp(52px, 5.2vw, 82px);

	font-weight: 800;

	line-height: 1.08;

	letter-spacing: -0.055em;
}


/* ======================================================
   HERO DESCRIPTION
====================================================== */

.signal-corporate .hero-section .hero-description {
	max-width: 460px;

	margin: 0 0 28px;

	color: var(--signal-gray-700);

	font-size: 15px;

	line-height: 2;
}


/* ======================================================
   HERO BUTTON
====================================================== */

.signal-corporate .hero-section .hero-content .signal-button {
	position: relative;

	z-index: 4;
}


/* ======================================================
   HERO IMAGE
====================================================== */

/*
 * PCでは画像を右側にabsolute配置。
 *
 * hero-innerがposition:relativeなので、
 * hero-innerを基準に配置される。
 */
.signal-corporate .hero-section .hero-image {
	position: absolute;

	top: 0;
	right: 0;

	z-index: 1;

	width: 68%;

	max-width: none;

	margin: 0;
	padding: 0;

	pointer-events: none;
}


/*
 * 元画像 2048 × 768
 *
 * 横幅のみ指定し、
 * 高さは画像のアスペクト比から自動計算。
 */
.signal-corporate .hero-section .hero-image img {
	display: block;

	width: 100%;
	max-width: none;

	height: auto;

	object-fit: contain;

	/*
	 * 左下を斜めにカット。
	 */
	clip-path: polygon(
		18% 0,
		100% 0,
		100% 100%,
		68% 100%,
		0 42%
	);
}


/* ======================================================
   07. LINKS / BUTTONS
====================================================== */

.signal-corporate .signal-link {
	color: var(--signal-blue);
	font-weight: 700;
	text-decoration: none;
}

.signal-corporate .signal-link::after {
	content: " →";
	display: inline-block;
	transition: transform var(--signal-transition);
}

.signal-corporate .signal-link:hover {
	color: var(--signal-blue-dark);
}

.signal-corporate .signal-link:hover::after {
	transform: translateX(4px);
}

.signal-corporate .signal-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 52px;

	padding: 12px 28px;

	border: 1px solid var(--signal-blue);
	border-radius: var(--signal-radius-sm);

	background: var(--signal-blue);
	color: var(--signal-white);

	font-family: var(--signal-font-display);
	font-size: 13px;
	font-weight: 700;

	line-height: 1.4;

	text-decoration: none;
}

.signal-corporate .signal-button:hover {
	border-color: var(--signal-blue-dark);

	background: var(--signal-blue-dark);
	color: var(--signal-white);

	transform: translateY(-2px);
}


/* ======================================================
   08. BUSINESS / SERVICE CARDS
====================================================== */

.signal-corporate .service-card {
	height: 100%;

	overflow: hidden;

	border: 1px solid var(--signal-gray-200);
	border-radius: var(--signal-radius-md);

	background: var(--signal-white);

	box-shadow: var(--signal-shadow-sm);

	transition:
		transform var(--signal-transition-slow),
		box-shadow var(--signal-transition-slow);
}

.signal-corporate .service-card:hover {
	transform: translateY(-6px);

	box-shadow: var(--signal-shadow-md);
}

.signal-corporate .service-card img {
	display: block;

	width: 100%;
}

.signal-corporate .service-card .service-content {
	padding: 30px;
}

.signal-corporate .service-card .service-label {
	margin-bottom: 8px;

	color: var(--signal-blue);

	font-family: var(--signal-font-display);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;
}

.signal-corporate .service-card h3 {
	margin-bottom: 12px;
}

.signal-corporate .service-card p {
	color: var(--signal-gray-600);

	font-size: 14px;
}


/* ======================================================
   09. DEVELOPMENT PROCESS
====================================================== */

.signal-corporate .development-step {
	position: relative;

	padding: 20px 16px;

	text-align: center;
}

.signal-corporate .development-step:not(:last-child)::after {
	content: "→";

	position: absolute;

	top: 50%;
	right: -14px;

	z-index: 2;

	color: var(--signal-blue);

	font-size: 20px;

	transform: translateY(-50%);
}

.signal-corporate .development-step .step-number {
	display: block;

	margin-bottom: 18px;

	color: var(--signal-blue);

	font-family: var(--signal-font-display);

	font-size: 12px;
	font-weight: 700;

	letter-spacing: 0.08em;
}

.signal-corporate .development-step .step-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;

	margin: 0 auto 18px;

	border: 1px solid var(--signal-gray-200);

	border-radius: 50%;

	background: var(--signal-white);

	color: var(--signal-blue);
}

.signal-corporate .development-step h3 {
	margin-bottom: 8px;

	font-size: 17px;
}

.signal-corporate .development-step p {
	margin: 0;

	color: var(--signal-gray-600);

	font-size: 12px;

	line-height: 1.8;
}


/* ======================================================
   10. CASE STUDY
====================================================== */

.signal-corporate .case-study-card {
	height: 100%;

	overflow: hidden;

	border: 1px solid var(--signal-gray-200);

	border-radius: var(--signal-radius-md);

	background: var(--signal-white);

	box-shadow: var(--signal-shadow-sm);
}

.signal-corporate .case-study-card img {
	display: block;

	width: 100%;

	aspect-ratio: 16 / 9;

	object-fit: cover;
}

.signal-corporate .case-study-card .case-content {
	padding: 26px;
}

.signal-corporate .case-study-card .case-category {
	display: inline-block;

	margin-bottom: 12px;

	padding: 5px 10px;

	border-radius: 3px;

	background: var(--signal-blue);
	color: var(--signal-white);

	font-size: 10px;
	font-weight: 700;

	line-height: 1.4;
}

.signal-corporate .case-study-card h3 {
	margin-bottom: 10px;

	font-size: 19px;
}

.signal-corporate .case-study-card p {
	margin-bottom: 0;

	color: var(--signal-gray-600);

	font-size: 13px;
}


/* ======================================================
   11. STRENGTHS
====================================================== */

.signal-corporate .strength-card {
	height: 100%;

	padding: 32px 20px;

	border: 1px solid var(--signal-gray-200);

	border-radius: var(--signal-radius-md);

	background: var(--signal-white);

	text-align: center;
}

.signal-corporate .strength-card .icon {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;

	margin: 0 auto 22px;

	border: 1px solid #dbe5ff;

	border-radius: 50%;

	color: var(--signal-blue);
}

.signal-corporate .strength-card h3 {
	margin-bottom: 10px;

	font-size: 18px;
}

.signal-corporate .strength-card p {
	margin: 0;

	color: var(--signal-gray-600);

	font-size: 13px;
}

/* ======================================================
   STRENGTHS / ABOUT SIGNAL PANELS
====================================================== */

/* 左右の大カード */
.strengths-panel,
.about-signal-panel {
	height: 100%;

	padding: 38px 36px;

	border: 1px solid var(--signal-gray-200);
	border-radius: var(--signal-radius-md);

	background: var(--signal-white);

	box-shadow: var(--signal-shadow-sm);

	box-sizing: border-box;
}


/* Kadence Column自体の高さを揃える */
.strengths-about-grid .kt-row-column-wrap {
	align-items: stretch !important;
}

.strengths-about-grid .wp-block-kadence-column {
	display: flex !important;
}

.strengths-about-grid .kt-inside-inner-col {
	width: 100%;
}


/* ABOUT SIGNAL画像 */
.about-signal-panel .about-signal-image {
	margin-top: 24px;
	overflow: hidden;

	border-radius: 4px;
}

.about-signal-panel .about-signal-image img {
	display: block;

	width: 100%;
	aspect-ratio: 16 / 9;

	object-fit: cover;
}


/* スマホ */
@media (max-width: 767px) {

	.strengths-panel,
	.about-signal-panel {
		padding: 28px 22px;
	}

}

/* ======================================================
   12. MESSAGE
====================================================== */

.signal-corporate .message-section {
	overflow: hidden;
}

.signal-corporate .message-photo {
	height: 100%;

	overflow: hidden;

	border-radius: var(--signal-radius-md);
}

.signal-corporate .message-photo img {
	width: 100%;
	height: 100%;

	min-height: 420px;

	object-fit: cover;
}


/* ======================================================
   13. NEWS
====================================================== */

.signal-corporate .news-list {
	margin: 0;
	padding: 0;

	list-style: none;
}

.signal-corporate .news-list li {
	display: grid;

	grid-template-columns: 120px 90px 1fr;

	gap: 16px;

	align-items: center;

	padding: 18px 0;

	border-bottom: 1px solid var(--signal-gray-200);
}

.signal-corporate .news-date {
	color: var(--signal-gray-600);

	font-family: var(--signal-font-display);

	font-size: 12px;
}

.signal-corporate .news-category {
	display: inline-block;

	width: fit-content;

	padding: 4px 8px;

	background: var(--signal-blue);
	color: var(--signal-white);

	font-size: 10px;
	font-weight: 700;

	line-height: 1.4;
}

.signal-corporate .news-title a {
	color: var(--signal-text);

	font-size: 14px;
	font-weight: 600;

	text-decoration: none;
}

.signal-corporate .news-title a:hover {
	color: var(--signal-blue);
}


/* ======================================================
   14. CONTACT
====================================================== */

.signal-corporate .contact-panel {
	padding: 42px;

	border: 1px solid var(--signal-gray-200);

	border-radius: var(--signal-radius-md);

	background: var(--signal-white);

	box-shadow: var(--signal-shadow-sm);
}

.signal-corporate .contact-panel h2 {
	margin-bottom: 12px;

	font-size: 28px;
}


/* ======================================================
   15. FOOTER
====================================================== */

.signal-corporate .site-footer {
	font-size: 13px;
}

.signal-corporate .site-footer a:hover {
	color: var(--signal-blue);
}

.signal-corporate .footer-brand {
	font-family: var(--signal-font-display);

	font-weight: 800;

	letter-spacing: -0.04em;
}


/* ======================================================
   16. ACCESSIBILITY
====================================================== */

.signal-corporate :focus-visible {
	outline: 3px solid rgba(23, 105, 255, 0.45);

	outline-offset: 3px;
}

.signal-corporate .screen-reader-text:focus {
	z-index: 100000;
}


/* ======================================================
   17. TABLET
====================================================== */

@media (max-width: 1024px) {

	/* --------------------------------------------------
	   HERO
	-------------------------------------------------- */

	.signal-corporate .hero-section {
		min-height: 560px;
	}

	.signal-corporate .hero-section .hero-inner {
		min-height: 560px;
	}

	.signal-corporate .hero-section .hero-content {
		width: 50%;

		max-width: 520px;

		margin-left: 32px;

		padding-top: 70px;
	}

	.signal-corporate .hero-section h1 {
		font-size: clamp(
			44px,
			6vw,
			68px
		);
	}

	.signal-corporate .hero-section .hero-image {
		right: 0;

		width: 72%;
	}


	/* --------------------------------------------------
	   COMMON
	-------------------------------------------------- */

	.signal-corporate .signal-section {
		padding-top: 90px;

		padding-bottom: 90px;
	}


	/* --------------------------------------------------
	   DEVELOPMENT
	-------------------------------------------------- */

	.signal-corporate .development-step:not(:last-child)::after {
		right: -8px;
	}
}


/* ======================================================
   18. MOBILE
====================================================== */

@media (max-width: 767px) {

	/* --------------------------------------------------
	   COMMON
	-------------------------------------------------- */

	.signal-corporate .signal-container {
		width: min(
			calc(100% - 32px),
			var(--signal-container)
		);
	}

	.signal-corporate .signal-section {
		padding-top: 70px;

		padding-bottom: 70px;
	}


	/* --------------------------------------------------
	   HERO
	-------------------------------------------------- */

	.signal-corporate .hero-section {
		width: 100%;

		max-width: none;

		min-height: auto;

		margin: 0;

		overflow: hidden;
	}


	/* --------------------------------------------------
	   HERO INNER
	-------------------------------------------------- */

	.signal-corporate .hero-section .hero-inner {
		width: 100%;

		max-width: none;

		min-height: auto;

		margin: 0;

		padding: 0;
	}


	/* --------------------------------------------------
	   HERO CONTENT
	   
	   PCではabsolute画像と同じ領域上に配置。
	   スマホでは通常フロー。
	-------------------------------------------------- */

	.signal-corporate .hero-section .hero-content {
		position: relative;

		z-index: 3;

		width: auto;

		max-width: none;

		margin: 0;

		padding-top: 40px;
		padding-right: 24px;
		padding-bottom: 0;
		padding-left: 24px;

		text-align: left;
	}


	/* --------------------------------------------------
	   HERO EYEBROW
	-------------------------------------------------- */

	.signal-corporate .hero-section .hero-eyebrow {
		margin-bottom: 18px;

		font-size: 13px;

		line-height: 1.8;
	}


	/* --------------------------------------------------
	   HERO H1
	-------------------------------------------------- */

	.signal-corporate .hero-section h1 {
		max-width: none;

		margin-bottom: 20px;

		font-size: clamp(
			42px,
			11.5vw,
			58px
		);

		line-height: 1.1;

		letter-spacing: -0.045em;
	}


	/* --------------------------------------------------
	   HERO DESCRIPTION
	-------------------------------------------------- */

	.signal-corporate .hero-section .hero-description {
		max-width: none;

		margin-bottom: 26px;

		font-size: 13px;

		line-height: 1.9;
	}


	/* --------------------------------------------------
	   HERO BUTTON
	-------------------------------------------------- */

	.signal-corporate .hero-section .hero-button {
		margin-top: 0;
	}


	/* --------------------------------------------------
	   HERO IMAGE
	   
	   PCのabsolute配置を解除。
	   
	   スマホでは
	   
	   テキスト
	      ↓
	   画像
	   
	   の通常フローにする。
	-------------------------------------------------- */

	.signal-corporate .hero-section .hero-image {
		position: relative;

		top: auto;
		right: auto;

		z-index: 1;

		width: 100%;

		max-width: none;

		margin-top: 40px;

		margin-right: 0;
		margin-bottom: 0;
		margin-left: 0;

		padding: 0;
	}


	/* --------------------------------------------------
	   HERO IMAGE
	-------------------------------------------------- */

	.signal-corporate .hero-section .hero-image img {
		display: block;

		width: 100%;

		max-width: none;

		height: auto;

		object-fit: contain;

		clip-path: polygon(
			0 12%,
			100% 0,
			100% 100%,
			0 100%
		);
	}


	/* --------------------------------------------------
	   DEVELOPMENT
	-------------------------------------------------- */

	.signal-corporate .development-step {
		padding: 26px 12px;
	}

	.signal-corporate .development-step:not(:last-child)::after {
		content: "↓";

		top: auto;

		right: auto;

		bottom: -18px;

		left: 50%;

		transform: translateX(-50%);
	}


	/* --------------------------------------------------
	   NEWS
	-------------------------------------------------- */

	.signal-corporate .news-list li {
		grid-template-columns: 1fr;

		gap: 8px;
	}


	/* --------------------------------------------------
	   CONTACT
	-------------------------------------------------- */

	.signal-corporate .contact-panel {
		padding: 28px 22px;
	}


	/* --------------------------------------------------
	   MESSAGE
	-------------------------------------------------- */

	.signal-corporate .message-photo img {
		min-height: 320px;
	}
}


/* ======================================================
   19. SMALL MOBILE
====================================================== */

@media (max-width: 480px) {

	.signal-corporate .hero-section .hero-content {
		padding-top: 32px;

		padding-right: 20px;

		padding-left: 20px;
	}

	.signal-corporate .hero-section h1 {
		font-size: clamp(
			38px,
			11.5vw,
			52px
		);
	}

	.signal-corporate .hero-section .hero-image {
		margin-top: 32px;
	}
}


/* ======================================================
   20. REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.signal-corporate *,
	.signal-corporate *::before,
	.signal-corporate *::after {
		transition-duration: 0.01ms !important;

		animation-duration: 0.01ms !important;

		animation-iteration-count: 1 !important;
	}
}





/* ======================================================
   BUSINESS CARDS - SAME HEIGHT
====================================================== */

/*
 * Kadence Row Layout の内部ラッパーを
 * Stretchさせる
 */
.business-grid .kt-row-column-wrap {
	align-items: stretch !important;
}


/*
 * 左右Column
 */
.business-grid .wp-block-kadence-column {
	display: flex !important;
	align-self: stretch !important;
}


/*
 * Column内部
 */
.business-grid .wp-block-kadence-column > .kt-inside-inner-col {
	display: flex !important;
	flex-direction: column !important;

	width: 100% !important;
	height: 100% !important;
}


/*
 * カード本体
 */
.business-grid .business-card {
	display: flex !important;
	flex-direction: column !important;

	flex: 1 1 auto !important;

	width: 100% !important;
	height: 100% !important;

	box-sizing: border-box;
}


/*
 * カード本文
 */
.business-grid .business-card-content {
	display: flex !important;
	flex-direction: column !important;

	flex: 1 1 auto !important;

	width: 100%;
}


/*
 * CTAをカード下端へ
 */
.business-grid .business-card-link {
	margin-top: auto !important;
}


/* ======================================================
   NEWS QUERY LOOP
====================================================== */

.news-query {
	width: 100%;
}

/* 投稿テンプレート */
.news-query .wp-block-post-template {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}


/* ======================================================
   NEWS ITEM
   日付 | カテゴリー | タイトル
====================================================== */

.news-query .news-item {
	display: grid !important;

	grid-template-columns:
		100px
		90px
		minmax(0, 1fr) !important;

	column-gap: 14px !important;
	row-gap: 0 !important;

	align-items: center !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 12px 0 !important;

	border-bottom: 1px solid #e5e7eb;

	box-sizing: border-box;
}


/* Gutenberg Groupの内部レイアウトを解除 */
.news-query .news-item.is-layout-flow,
.news-query .news-item.is-layout-constrained {
	display: grid !important;
}


/* ======================================================
   DATE
====================================================== */

.news-query .news-date {
	grid-column: 1 !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #666666;

	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;

	white-space: nowrap;
}


/* 投稿日ブロック内部 */
.news-query .news-date time {
	margin: 0 !important;
}


/* ======================================================
   CATEGORY
====================================================== */

/*
 * WordPress側で付いている
 * 青い四角背景を完全に解除
 */
.news-query .news-category {
	grid-column: 2 !important;

	display: block !important;

	width: fit-content !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;

	line-height: 1 !important;
}


/*
 * 投稿カテゴリーのリンクを
 * 小さなピル型ラベルにする
 */
.news-query .news-category a {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	width: auto !important;
	min-width: 0 !important;
	min-height: 22px;

	margin: 0 !important;
	padding: 3px 10px !important;

	border: 0 !important;
	border-radius: 999px !important;

	background: #eaf2ff !important;
	color: #1769ff !important;

	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;

	text-decoration: none !important;
	white-space: nowrap;
}


/* カテゴリーhover */
.news-query .news-category a:hover {
	background: #1769ff !important;
	color: #ffffff !important;
}


/* ======================================================
   TITLE
====================================================== */

.news-query .news-title {
	grid-column: 3 !important;

	min-width: 0;

	margin: 0 !important;
	padding: 0 !important;

	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
}


/* 投稿タイトルリンク */
.news-query .news-title a {
	color: #222222 !important;

	text-decoration: none !important;
}

.news-query .news-title a:hover {
	color: #1769ff !important;
}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 767px) {

	.news-query .news-item {
		grid-template-columns:
			auto
			1fr !important;

		column-gap: 10px !important;
		row-gap: 8px !important;

		padding: 14px 0 !important;
	}


	/* 日付 */
	.news-query .news-date {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}


	/* カテゴリー */
	.news-query .news-category {
		grid-column: 2 !important;
		grid-row: 1 !important;

		justify-self: start;
	}


	/* タイトル */
	.news-query .news-title {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;

		font-size: 13px !important;
	}
}