/*
Theme Name: Hakochu
Theme URI: https://wordpress.org/themes/hakochu/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Hakochu is a simple and adaptable theme for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 1.0
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hakochu
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/** フォント */
* {
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 1.0rem;
}

html {
	color: #333;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

}

.uk-h3,
h3 {
	font-size: 1.4rem;
}

/**
 * Uikit 拡張
*/
.uk-article-title {
	font-size: 2.225rem;
}

.uk-link,
a {
	color: #222;
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
	font-size: unset;
}

.uk-link:hover,
a:hover {
	color: #e60012;
	text-decoration: none;
}

.uk-button-secondary:hover {
	background-color: #e60012;
	color: #fff;
}

.uk-button-secondary:hover>.hkc-color-red-icon {
	color: #fff;
	transform: rotate(45deg);
}

/** バックグランドが黒の場合 */
.uk-card-primary.uk-card-body,
.uk-card-primary>:not([class*=uk-card-media]),
.uk-card-secondary.uk-card-body,
.uk-card-secondary>:not([class*=uk-card-media]),
.uk-light,
.uk-offcanvas-bar,
.uk-overlay-primary,
.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color),
.uk-tile-secondary:not(.uk-preserve-color) {
	color: rgb(255 255 255);
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* =========================================================
 * CSS MAINTENANCE INDEX
 * ---------------------------------------------------------
 * Base / UIkit extensions
 * Header / navigation / main visual
 * Home page components
 * FullCalendar
 * Common page components
 * Fixed pages (Dealer / Insurance / Service / Recruit etc.)
 * Footer / responsive adjustments
 *
 * NOTE: Cascade order is intentionally preserved.
 * ========================================================= */

/** Hakochu Theme Styles */

/** ヘッダー */
.hkc-header {
	background-color: #222;
	color: #fff;
}

/** サイトタイトル */
.hkc-header .hkc-site-title {
	font-size: 1.3rem;
	color: #fff;
	max-width: 300px;
	line-height: 0.6;
	margin-bottom: 0;
}

/** Main Visual Slider */

/* スライド1枚ずつの設定 */
.mv-slide-item {
	background-size: cover;
	/* 画像を枠いっぱいに綺麗に表示 */
	background-position: center;
	/* 画像の中心を基準にする */
	background-repeat: no-repeat;

	width: 100%;
	/* 💡ここがポイント！横幅に対して「縦幅を50%（2:1）」に固定します */
	aspect-ratio: 1200 / 600;

	/* 中の文字を上下左右の中央に配置するための設定 */

}

.hkc-slide-item-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 文字が見づらくなる場合は、文字自体のデザインも調整 */
.mv-slide-item h2 {
	color: #fff;
	font-size: 2rem;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	/* 文字に影をつけて読みやすく */
	margin: 0;
	padding: 0 20px;
}

/* 左右にハミ出ているスライド（非アクティブ）は少し薄くする */
.splide__slide {
	opacity: 0.4;
	transition: opacity 0.6s ease;
	/* なめらかに変化させる */
}

/* 中央に表示されているスライド（アクティブ）だけ100%の明るさにする */
.splide__slide.is-active {
	opacity: 1;
}

/* ==========================================
 * Splide 矢印カスタマイズ
 * ========================================== */

/* 矢印ボタンの共通設定（丸いボタンの大きさや背景色） */
.splide__arrow {
	background: rgba(255, 255, 255, 0.8);
	/* 白色の半透明 */
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: all 0.3s ease;
	z-index: 10;
	/* 画像より確実に前に出す */
}

/* マウスを乗せたとき（ホバー時）の演出 */
.splide__arrow:hover {
	background: rgba(255, 255, 255, 1);
	/* 完全に不透明にする */
	transform: translateY(-50%) scale(1.1);
}

/* 矢印の中のアイコン（SVG）の色とサイズ */
.splide__arrow svg {
	fill: #333;
	/* 矢印の色をダークグレーに */
	width: 20px;
	height: 20px;
}

/* 💡【重要】左の矢印の位置調整 */
/* paddingが10%なので、左端から11%〜12%あたりに配置すると中央画像の内側に綺麗に収まります */
.splide__arrow--prev {
	left: 12%;
}

/* 💡【重要】右の矢印の位置調整 */
.splide__arrow--next {
	right: 12%;
}

/** DESCRIPTIONの変更 */
.uk-description-list>dt {
	font-weight: 600;
}

.uk-description-list-divider>dt:nth-child(n+2) {
	margin-top: 5px;
}

/** スマホメニュー */
.hkc-menu-button {
	background: #222;
	padding: 0;
	margin: 0;
	border: 0;
	color: #fff;
	font-size: 1.6rem;
}

/** ページ先頭へ移動 */
.hkc-totop {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 1000;

	width: 52px;
	height: 52px;

	color: #fff;
	background-color: #222;
	border: 1px solid #ffffff;

	border-radius: 50%;

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

	transition:
		background-color 0.3s ease,
		transform 0.3s ease,
		opacity 0.3s ease;
}

/* ホバー */
.hkc-totop:hover {
	color: #fff;
	background-color: #e60012;
	transform: translateY(-4px);
}

/* スマートフォン */
@media (max-width: 640px) {

	.hkc-totop {
		right: 15px;
		bottom: 15px;

		width: 46px;
		height: 46px;
	}

}

/** トップページトピックス */
.hkc-topics {
	padding: 10px;
	background-color: #efefef;
}

.hkc-hr-home-line {
	border: none;
	border-top: 3px solid #e60012;
	margin: 40px 0;
}

.hkc-hr-home-line-wide {
	border: none;
	border-top: 6px solid #e60012;
	margin: 0;
	padding-bottom: 20px;
}

/** ヘッダーの三菱ロゴサイズ */
@media screen and (max-width: 767px) {
	.hkc-head-mitsubishi-logo {
		max-width: 90px;
	}
}

.hkc-home-quick-menu-wrap {
	background: #fff;

	padding: 10px 0px;
	text-align: center;
}

.hkc-home-quick-menu-wrap img {
	max-width: 80px;
}

.hkc-home-quick-menu-wrap i {
	font-size: 2.2rem;
	bottom: 8px;
	color: #e60012;
	position: absolute;
	right: 1%;
}

.hkc-home-quicknavi {
	position: relative;
}

/** クイックナビのリンク線 */
.hkc-home-quicknavi::after {
	content: '';
	position: absolute;
	bottom: 35px;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #e60012;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

.hkc-home-quicknavi:hover::after {
	width: 18%;
}

.hkc-home-quicknavi-padding {
	padding-top: 45px;
	padding-bottom: 30px;
}

/** トップページお知らせ **/
/* カード全体 */
.hkc-news-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hkc-news-card {

	overflow: hidden;
	box-shadow: none;
	background: #fff;
	height: 100%;

}

.hkc-news-card:hover img {
	transform: scale(1.035);
	transition: transform .3s ease;

}

.hkc-news-card:hover .hkc-news-card-line {
	width: 132px;
}

.hkc-news-card-inner {
	display: flex;
	align-items: stretch;
	min-height: 120px;
	height: 100%;
}

/* サムネイル */
.hkc-news-card-thumb {
	flex: 0 0 138px;
	max-height: 138px;
	overflow: hidden;
}

.hkc-news-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* 本文 */
.hkc-news-card-body {
	flex: 1;
	padding: 14px 14px 12px;
	display: flex;
	flex-direction: column;
}

.hkc-news-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.hkc-news-date {
	font-size: 12px;
	color: #777;
	line-height: 1.2;
}

.hkc-news-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	padding: 0 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	letter-spacing: 0.02em;
}

.hkc-news-badge-1 {
	background: #e60012;
	color: #fff;
}

.hkc-news-badge-4 {
	background: #ff6b00;
}

.hkc-news-badge-5 {
	background: #2d67b2;
}

.hkc-news-badge-6 {
	background: #666;
}

.hkc-news-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: #111;
}

.hkc-news-card-line {
	width: 48px;
	height: 3px;

	margin-bottom: 5px;
	background: #e60012;
	transition: width .3s ease;
}

.hkc-news-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: #555;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 画面幅調整 */
@media (max-width: 1599px) {
	.hkc-news-card-thumb {
		flex-basis: 120px;
		max-width: 120px;
	}

	.hkc-news-title {
		font-size: 16px;
	}
}

@media (max-width: 959px) {
	.hkc-news-card-inner {
		min-height: auto;
	}
}

@media (max-width: 639px) {
	.hkc-news-card-inner {
		flex-direction: row;
	}

	.hkc-news-card-thumb {
		flex: 0 0 110px;
		max-width: 110px;
	}

	.hkc-news-card-body {
		padding: 12px;
	}

	.hkc-news-title {
		font-size: 15px;
		margin-bottom: 6px;
	}

	.hkc-news-text {
		font-size: 12px;
	}
}

/** カーラインナップ */
.hkc-home-carlineup-link img {
	transition: transform .5s ease;
}

.hkc-home-carlineup-link:hover img {
	transform: scale(1.05);
}

/* =========================================================
   Heading
========================================================= */

.hkc-main-heading {
	position: relative;
}

.hkc-main-heading__title {
	margin: 0;
	color: #111;
	font-size: clamp(20px, 2.2vw, 32px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.04em;
}

.hkc-main-heading__en {
	margin: 4px 0 0;
	color: #555;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.hkc-main-heading__line {

	width: 60px;
	height: 5px;
	margin-top: 16px;
	background: #e60012;
	position: relative;
}

.hkc-main-heading__line:before {
	content: '';
	position: absolute;
	width: 90px;
	border: 3px solid #dcdcdc;
	top: 0px;
	left: 56px;
	transform: skewX(-45deg);
}

.hkc-heading__line {
	width: 60px;
	height: 3px;
	margin-top: 16px;
	background: #e60012;
}

/* =========================================================
   OUR STRENGTH
========================================================= */

.hkc-home-strength-section {

	padding-top: 70px;
	padding-bottom: 80px;
	color: #111;
}

/* =========================================================
   Card
========================================================= */

.hkc-home-strength-card {
	display: grid;
	grid-template-columns: 55% 45%;
	min-height: 285px;

	overflow: hidden;

	box-shadow: 0 22px 22px rgba(0, 0, 0, 0.06);

	transition:
		transform .3s ease,
		box-shadow .3s ease,
		border-color .3s ease;
}

.hkc-home-strength-card:hover {

	border-color: #ddd;

}

/* =========================================================
   Image
========================================================= */

.hkc-home-strength-card__image {
	position: relative;
	overflow: hidden;
	background: #f4f4f4;
}

.hkc-home-strength-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	transition: transform .5s ease;
}

.hkc-home-strength-card:hover .hkc-home-strength-card__image img {
	transform: scale(1.05);
}

/* 画像とテキストの境界を少し柔らかく */
.hkc-home-strength-card__image::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: rgba(0, 0, 0, 0.05);
}

/* =========================================================
   Content
========================================================= */

.hkc-home-strength-card__content {
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 34px 38px;

}

/* =========================================================
   Icon
========================================================= */

.hkc-home-strength-card__icon {
	display: flex;
	justify-content: center;

	height: 76px;

	margin-bottom: 12px;
}

.hkc-home-strength-card__icon img {
	display: block;
	width: auto;

	object-fit: contain;
}

/* =========================================================
   Title
========================================================= */

.hkc-home-strength-card__title {
	margin: 0;
	color: #111;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-align: center;
}

/* =========================================================
   Accent Line
========================================================= */

.hkc-home-strength-card__line {
	width: 48px;
	height: 3px;
	margin-top: 17px;
	margin-bottom: 18px;
	margin-left: auto;
	margin-right: auto;
	background: #e60012;
	transition: width .3s ease;
}

/* =========================================================
   Text
========================================================= */

.hkc-home-strength-card__text {
	margin: 0;

	color: #444;

	font-size: 15px;
	line-height: 1.9;

	letter-spacing: 0.01em;
}

/* =========================================================
   Desktop
========================================================= */

@media (max-width: 1399px) {

	.hkc-home-strength-card {
		grid-template-columns: 52% 48%;
	}

	.hkc-home-strength-card__content {
		padding: 30px 30px;
	}

	.hkc-home-strength-card__title {
		font-size: 21px;
	}

	.hkc-home-strength-card__text {
		font-size: 14px;
	}

}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 959px) {

	.hkc-home-strength-section {
		padding-top: 55px;
		padding-bottom: 60px;
	}

	.hkc-home-strength-card {
		min-height: 250px;
	}

}

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

@media (max-width: 639px) {

	.hkc-home-strength-section {
		padding-top: 45px;
		padding-bottom: 50px;
	}

	.hkc-main-heading__title {
		font-size: 27px;
	}

	.hkc-home-strength-card {
		display: block;

		min-height: 0;

		border-radius: 3px;
	}

	.hkc-home-strength-card__image {
		height: 220px;
	}

	.hkc-home-strength-card__content {
		padding: 27px 24px 30px;
	}

	.hkc-home-strength-card__icon {
		height: 55px;
		margin-bottom: 10px;
	}

	.hkc-home-strength-card__icon img {
		max-height: 52px;
		max-width: 65px;
	}

	.hkc-home-strength-card__title {
		font-size: 20px;
	}

	.hkc-home-strength-card__line {
		margin-top: 14px;
		margin-bottom: 15px;
	}

	.hkc-home-strength-card__text {
		font-size: 14px;
		line-height: 1.8;
	}

}

/* =========================================================
   SERVICE MAINTENANCE
========================================================= */

.hkc-home-service-maintenance {
	position: relative;
	overflow: hidden;
	padding-top: 70px;
	padding-bottom: 80px;
	background:
		linear-gradient(135deg,
			#222222 0%,
			#0f0f10 45%,
			#09090a 100%);
	color: #fff;
}

/* 左上の赤いライン */
.hkc-home-service-maintenance::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 180px;
	height: 2px;
	background: #e60012;
	transform: rotate(-45deg);
	transform-origin: left top;
	box-shadow: 0 0 12px rgba(230, 0, 18, 0.45);
}

/* 背景の斜めライン */
.hkc-home-service-maintenance::after {
	content: "";
	position: absolute;
	right: -150px;
	bottom: -100px;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transform: rotate(45deg);
	pointer-events: none;
}

.hkc-home-service-maintenance .uk-container {
	position: relative;
	z-index: 2;
}

/* =========================================================
   Heading
========================================================= */

.hkc-heading-center__heading {
	margin-bottom: 40px;
}

.hkc-heading-center__title {
	margin: 0;

	font-size: clamp(20px, 2.2vw, 32px);
	font-weight: 600;
	line-height: 1.3;

}

.hkc-home-service-maintenance__line {
	width: 72px;
	height: 2px;
	margin: 18px auto 16px;
	background: #e60012;
}

.hkc-heading-center__en {
	margin: 0;

	opacity: 0.68;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.42em;
}

/* =========================================================
   Grid
========================================================= */

.hkc-home-service-maintenance__grid {
	margin-top: 0;
}

/* =========================================================
   Card
========================================================= */

.hkc-home-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 440px;
	padding: 36px 20px 28px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.025) 0%,
			rgba(255, 255, 255, 0.01) 100%);
	color: #fff;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition:
		transform .3s ease,
		border-color .3s ease,
		background-color .3s ease,
		box-shadow .3s ease;
}

/* UIkitのリンク色対策 */
.hkc-home-service-card:hover,
.hkc-home-service-card:focus {
	color: #fff;
	text-decoration: none;
}

.hkc-home-service-card:hover {

	border-color: rgba(230, 0, 18, 0.7);
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.04) 0%,
			rgba(230, 0, 18, 0.025) 100%);
	box-shadow:
		0 18px 35px rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 上部に薄い光 */
.hkc-home-service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background:
		linear-gradient(90deg,
			transparent,
			rgba(255, 255, 255, 0.3),
			transparent);
	opacity: 0;
	transition: opacity .3s ease;
}

.hkc-home-service-card:hover::before {
	opacity: 1;
}

/* =========================================================
   Icon
========================================================= */

.hkc-home-service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 132px;
	margin-bottom: 22px;
}

.hkc-home-service-card__icon img {
	display: block;
	width: auto;
	max-width: 170px;
	max-height: 120px;
	object-fit: contain;
	transition: transform .3s ease;
}

/* =========================================================
   Accent
========================================================= */

.hkc-home-service-card__accent {
	width: 44px;
	height: 2px;
	margin-bottom: 22px;
	background: #e60012;
	transition: width .3s ease;
}

.hkc-home-service-card:hover .hkc-home-service-card__accent {
	width: 68px;
}

/* =========================================================
   Text
========================================================= */

.hkc-home-service-card__title {
	margin: 0 0 20px;
	color: #fff;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.hkc-home-service-card__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.9;
}

/* =========================================================
   More
========================================================= */

.hkc-home-service-card__more {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: auto;
	padding-top: 34px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	letter-spacing: 0.08em;
}

.hkc-home-service-card__arrow {
	position: relative;
	display: block;
	width: 46px;
	height: 1px;
	background: #e60012;
	transition: width .3s ease;
}

.hkc-home-service-card__arrow::after {
	content: "";
	position: absolute;
	top: -4px;
	right: 0;
	width: 8px;
	height: 8px;
	border-top: 1px solid #e60012;
	border-right: 1px solid #e60012;
	transform: rotate(45deg);
}

.hkc-home-service-card:hover .hkc-home-service-card__arrow {
	width: 58px;
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1199px) {

	.hkc-home-service-card {
		min-height: 400px;
	}

	.hkc-home-service-card__icon {
		height: 118px;
	}

	.hkc-home-service-card__icon img {
		max-width: 150px;
		max-height: 108px;
	}

	.hkc-home-service-card__title {
		font-size: 19px;
	}

}

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

@media (max-width: 639px) {

	.hkc-home-service-maintenance {
		padding-top: 50px;
		padding-bottom: 56px;
	}

	.hkc-heading-center__heading {
		margin-bottom: 30px;
	}

	.hkc-heading-center__title {
		font-size: 26px;
		letter-spacing: 0.04em;
	}

	.hkc-heading-center__en {
		font-size: 11px;
		letter-spacing: 0.25em;
	}

	.hkc-home-service-card {
		min-height: 330px;
		padding: 28px 18px 22px;
	}

	.hkc-home-service-card__icon {
		height: 105px;
		margin-bottom: 16px;
	}

	.hkc-home-service-card__icon img {
		max-width: 135px;
		max-height: 95px;
	}

	.hkc-home-service-card__accent {
		margin-bottom: 17px;
	}

	.hkc-home-service-card__title {
		margin-bottom: 14px;
		font-size: 18px;
	}

	.hkc-home-service-card__text {
		font-size: 13px;
		line-height: 1.8;
	}

	.hkc-home-service-card__more {
		padding-top: 24px;
	}

}

.home-dealer-title-line {
	width: 60px;
	height: 3px;
	margin-bottom: 10px;
	background: #e60012;
}

.hkc-company-philosophy {
	font-size: 1.3rem;
}

/* ==========================================
 * バナースライダー（#logo-slider）用の矢印調整
 * ========================================== */

/* コンテナ（親要素）に少し余裕を持たせて、矢印が外側にはみ出せるようにします */
.logo-carousel-section .container {
	position: relative;
	padding: 0 60px;
	/* 💡 左右に矢印を置くための隙間（60px）を作る */
}

#logo-slider .splide__slide {
	opacity: 1 !important;
}

/* バナースライダー内の矢印のサイズや色を個別調整（メインビジュアルと変えたい場合） */
#logo-slider .splide__arrow {
	background: #333;
	/* ボタンの背景を黒（またはコーポレートカラー）に */
	width: 40px;
	/* メインビジュアルより少し小ぶりに設定 */
	height: 40px;
}

#logo-slider .splide__arrow svg {
	fill: #fff;
	/* 矢印の色を白に */
	width: 16px;
	height: 16px;
}

/* ホバー時の動き（元の上下中央を維持しながら少し拡大） */
#logo-slider .splide__arrow:hover {
	background: #555;
	/* ホバー時に少し明るいグレーに */
	transform: translateY(-50%) scale(1.1);
}

/* 💡【超重要】左矢印の位置：コンテナの作った隙間（左端）にぴったり配置 */
#logo-slider .splide__arrow--prev {
	left: 20px;
}

/* 💡【超重要】右矢印の位置：コンテナの作った隙間（右端）にぴったり配置 */
#logo-slider .splide__arrow--next {
	right: 20px;
}

.hkc-store-info {
	background-color: #222;
	color: #fff;
}

.hkc-store-title {
	padding-bottom: 10px;
}

.hkc-contents-info {
	background-color: #e60012;
	color: #fff;
}

/** フッター */
.hkc-site-footer {
	background-color: #222;
	color: #fff;

}

.hkc-site-footer a {
	color: #fff !important;
	font-size: 0.8rem;
}

.hkc-color-red-icon {
	color: #e60012;
}

.hkc-site-footer .uk-nav-header {
	color: #e60012;
	font-weight: 700;
}

/**
 *
 * calendar
 * FullCalendarのデフォルトスタイルをリセットして、カスタムスタイルを当てるためのCSS
 */

/* マス目の最小高さをリセットし、コンテンツに合わせる */
.fc .fc-daygrid-body {
	height: auto !important;
}

/* 日付のフレーム */
.fc .fc-daygrid-day-frame {
	height: auto !important;
	min-height: 50px !important;
	/* 高さ調整 */
}

/* カレンダーヘッダー部 */
/* カレンダーのヘッダー全体の余白を調整 */
.fc .fc-toolbar {
	justify-content: center !important;
	/* 確実に中央寄せにする */
	margin-bottom: 5px !important;
}

/** 曜日の表示（リンク無効） */
.fc .fc-col-header-cell-cushion {
	font-size: 0.8rem;
	pointer-events: none !important;
	/* クリック、ホバー、タップなどのイベントを完全無効化 */
	cursor: default !important;
	/* マウスカーソルを指マークから通常の矢印に戻す */
	text-decoration: none !important;
	/* 万が一の下線を強制非表示 */
	color: #333333 !important;
}

/** ヘッダー下のラインを強調 */
.fc .fc-col-header-cell {
	border-bottom: 2px solid var(--fc-border-color);
}

/** 日曜日の色指定 */
.fc .fc-day-sun a {
	color: #e60012 !important;
}

/** 土曜日の色指定 */
.fc .fc-day-sat a {
	color: #0000c0 !important;
}

/** カレンダー表示部分 */

/* 中央の塊（prev title next）の要素を縦方向で真ん中に揃える */
.fc .fc-toolbar-chunk {
	display: flex !important;
	align-items: center !important;
	gap: 40px;
	/* ボタンと年月の間の隙間の広さ（お好みで調整してください） */
}

/* カレンダーイベント表示の調整1 */
.fc-direction-ltr .fc-toolbar>*> :not(:first-child) {
	margin-left: 0 !important;
}

/* 年月の文字装飾 */
.fc .fc-toolbar-title {
	font-size: 1.1rem !important;
	/* 文字の大きさ */
	font-weight: 400 !important;
	/* 太字 */
	color: #555555 !important;
	/* 文字色 */
	margin: 0 !important;
}

/* 左右の月移動ボタンの背景を消して、矢印だけに近づける（UIkit風調整） */
.fc .fc-button-primary {
	background-color: transparent !important;
	/* 背景を透明に */
	border: none !important;
	/* 枠線を消す */
	color: #333333 !important;
	/* 矢印の色 */
	padding: 4px 8px !important;
	box-shadow: none !important;
}

.fc-h-event .fc-event-title-container {
	text-align: center;
}

/* Calendarの日付リンクを無効 */

/* 1. 日付リンクの「リンクとしての挙動・見た目」を完全に破壊し、ただのテキストにする */
.fc-daygrid-day-number {
	pointer-events: none !important;
	/* クリック、ホバー、タップなどのイベントを完全無効化 */
	cursor: default !important;
	/* マウスカーソルを指マークから通常の矢印に戻す */
	text-decoration: none !important;
	/* 万が一の下線を強制非表示 */
	color: #333333 !important;
	/* リンク特有の青色などをリセット（文字色はお好みで） */
}

/* 2. キーボードのTabキーによるフォーカスや、アクセシビリティの枠線を消す */
.fc-daygrid-day-number:focus,
.fc-daygrid-day-number:active {
	outline: none !important;
	box-shadow: none !important;
}

.fc .fc-daygrid-day-top {
	font-size: 0.7rem;
	align-items: center;
	justify-content: center;
}

/* 2. 日付の下にあるイベントエリアが勝手に広がるのを防ぐ */
.fc .fc-daygrid-day-events {
	min-height: 0 !important;
	height: auto !important;
}

/* イベントの内容表示 */
.fc .fc-h-event .fc-event-title {
	font-size: 0.6rem;
}

/* イベントの内容位置調整 */
.fc-daygrid-block-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title {
	padding: 2px;
}

/* イベントの内容位置調整2 */
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
	margin-bottom: 0.4em;
}

/* イベントの内容位置調整3 */
.fc .fc-daygrid-day-number {
	padding: 4px 4px 0 4px;
}

.fc .fc-daygrid-day-bg {
	display: none;
}

/* 3. テーブルの各行（tr）が均等に引き伸ばされる設定を解除 */
.fc .fc-scrollgrid-sync-table tr {
	height: auto !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
	background: #fff;
}

/** トップページ ヘッダー */
.hkc-contact-info {
	box-sizing: border-box;
	height: 27px;
	padding: 10px 25px;
	border-radius: 500px;
	vertical-align: middle;
	background: #e60012;
	color: #fff !important;
	font-size: .875rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	line-height: 0;
}

.hkc-header-icon {
	color: #e60012;
}

.hkc-header-icon-white {
	color: #fff;
}

/** ロゴサイズ */
.hkc-logo {
	max-width: 90%;
}

/** トップページナビ */
.hkc-navi-padding {
	padding: 15px;
}

@media screen and (max-width: 1200px) {
	.hkc-navi-padding {
		padding: 0 15px 15px;
	}
}

/* トップページメニュー */
.hkc-nav-hover-line {
	padding-bottom: 5px;
	color: #fff !important;
	text-decoration: none !important;
	position: relative;
}

.hkc-nav-hover-line::before {
	background: #e60012;
	color: #fff;
	text-decoration: none !important;
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: scale(0, 1);
	transition: transform .3s;
	transform-origin: center top;

}

.hkc-nav-hover-line:hover::before {
	color: #fff;
	text-decoration: none !important;
	transform-origin: center top;

	transform: scale(1, 1);
}

.uk-dropdown-nav>li.uk-active>a,
.uk-dropdown-nav>li>a:hover {
	color: #fff;
	text-decoration: underline;
	font-weight: 700;
}

.uk-dropdown-nav>li>a {
	color: #fff;
}

.uk-dropdown-nav .uk-nav-header {
	color: #e60012;
	font-weight: 700;
}

.uk-dropdown-nav .uk-nav-divider {
	border-top: 1px solid #666;
}

.hkc-nav-dropdown-divider {
	border-right: 1px solid #666;
}

/** スマホメニュー */
.hkc-menu-wrap .uk-nav-header {
	font-size: 1.1rem;
	color: #e60012;
}

.hkc-menu-wrap .uk-list>* {
	font-size: 0.9rem;
}

.hkc-top-service-title {
	font-size: 1.3rem;
	margin-bottom: 10px;
}

/* シングルページタイトル */
.hkc-h1-title {
	border-left: 10px solid #e60012;
	padding-left: 20px;

	margin-bottom: 40px;
	font-size: 1.8rem;
	font-weight: 700;
	position: relative;
}

.hkc-h2-title {
	font-size: 1.8rem;

	font-weight: 700;

	position: relative;
}

.hkc-h3-title {
	line-height: 1.4;
	font-weight: 700;
	border-left: 0;
	padding-left: 0;
	margin-top: 0;
	color: #222;
	position: relative;
}

.hkc-hr-line::after {
	position: absolute;
	height: 2px;
	border-width: 0;
	background-image: -webkit-linear-gradient(left, transparent 0%, #e60012 50%, transparent 100%);
	background-image: linear-gradient(90deg, transparent 0%, #e60012 50%, transparent 100%);
}

/* 上下に横線 */
.hkc-hr-line::before {
	background-image: linear-gradient(to right, transparent, #e60012 50%, transparent);
	/* 線の両端を透過 */
	background-repeat: no-repeat;
	content: "";
	height: 2px;
	/* 横線の高さ */
	left: 0;
	/* 線を中央寄せ */
	margin-inline: auto;
	/* 線を中央寄せ */
	max-width: 800px;
	/* 横線の最大の長さ */
	position: absolute;
	right: 0;
	/* 線を中央寄せ */
	width: 100%;
	/* 横線の長さの割合 */
}

/* レイアウトのためのスタイル */
.hkc-hr-line {
	font-size: clamp(16px, 3vw, 22px);
	margin-top: 30px;
	padding-bottom: 30px;
	padding-top: 30px;
	position: relative;
	text-align: center;
	width: 100%;
}

/** パンくずリスト 右側表示 */
.wp-block-breadcrumbs {
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}

.wp-block-breadcrumbs li,
.wp-block-breadcrumbs ol {
	align-items: center;
	display: flex;
	margin: 0;
	padding: 0;
}

.wp-block-breadcrumbs li:not(:last-child):after {
	content: var(--separator, "/");
	margin: 0 .5em;
	opacity: .7;
}

/** テーブル */
*+.uk-table {
	margin-top: 0px;
}

.uk-table th {
	color: #595959;
	background: #f3f3f3;
}

/**
 * ///////// コンテンツ /////////
*/
.hkc-content-background {
	color: #fff;
	padding: 30px 30px 30px 8.5%;
}

.hkc-content-background a {
	color: #fff;
}

.hkc-content-background::before {
	content: "";
	position: absolute;
	top: 95px;

	left: -100px;
	width: 118%;
	height: 97.5%;
	background: #222;
	z-index: -1;
}

@media (max-width: 1200px) {
	.hkc-content-background::before {
		position: unset;
	}
}

/** リンクボタン */
.hkc-button-primary {
	background-color: #e60012;
	border: 2px solid #e60012;
	border-radius: 25px;
	color: #fff;
	cursor: pointer;
}

.hkc-button-primary.circle {
	overflow: hidden;
	position: relative;
	transition-duration: .3s;
	z-index: 2;
	line-height: 1.5;
	padding: 10px 20px;
}

.hkc-button-primary.circle::after {
	background: #fff;
	color: #333;
	border-radius: 50%;
	content: "";
	display: block;
	margin: auto;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	width: 100%;
	padding-top: 100%;
	height: 0;
	z-index: -1;
	transform: translateY(-50%) scale(0.1);
	transition: opacity .3s, transform 0s;
	transition-delay: 0s, .3s;
}

.hkc-button-primary.circle:hover {
	color: #333;
}

.hkc-button-primary.circle:hover::after {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
	transition-delay: 0s;
	transition: opacity .8s, transform .4s ease-in-out;
}

/**-------------------------------------------
 ■ 固定ページ: ディーラー
---------------------------------------------*/
/* Dealer文字の表示 */

/* H1見出し文字の表示 */
.hkc-dealer-hakochu-title {
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.1;
	color: #e5e5e5;

	padding-top: 20px;
	padding-bottom: 30px;
	text-align: center;
}

/** 中央店リスト */
.hkc-dealer-hakochu-list {
	padding-left: 35px;
}

/** サブジェクト */
.hkc-dealer-subject {
	font-size: 1.7rem;
	font-weight: 700;
	text-shadow: 0 0 8px #ffffff, 0 0 8px #ffffff, 0 0 8px #ffffff;
}

/** フリーダイヤル */
.hkc-dealer-freedial-wrap {
	padding: 20px 50px;

}

@media screen and (max-width: 767px) {
	.hkc-dealer-freedial-wrap {
		padding: 0
	}
}

.hkc-dealer-freedial-wrap address {
	margin-top: 10px;
	margin-bottom: 10px;
}

.hkc-dealer-freedial-wrap ul {
	margin-bottom: 0;
}

.hkc-dealer-freedial-wrap li {

	list-style-type: none;
}

.hkc-dealer-freedial-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0;
}

.hkc-dealer-freedial-number a {
	font-size: 2.225rem;
	font-weight: 700;
	margin-left: 15px;
}

.hkc-dealer-freedial-icon {
	color: #009F41;
}

/** フリーダイヤルここまで */

/** 充電器の見出しは専用の赤線 */
.hkc-dealer-h3-title {
	border-left: 5px solid #e60012;
}

/** 充電器の見出し */
.hkc-dealer-description dt {
	color: #e60012;
}

/** 充電器の説明文  */
.hkc-dealer-description dd {
	color: #fff;
}

/** アクセスマップの背景 */
.hkc-dealer-accessmap-background {
	background-color: #efefef;
}

/**-------------------------------------------
 ■ 固定ページ: 勧誘方針
---------------------------------------------*/
/* Dealer文字の表示 */

/** 見出し */

/** テーブルの色 */
.hkc-insurance-table-header {
	background-color: #d2e3ec;
}

/** テーブル幅 */
.hkc-insurance-table-w15 {
	width: 12%;
}

/**-------------------------------------------
 ■ 固定ページ: 車両の持込みについて
---------------------------------------------*/

/**-------------------------------------------
 ■ 固定ページ: お問い合わせ
---------------------------------------------*/

/**-------------------------------------------
 ■ 固定ページ: サービス
---------------------------------------------*/

.hkc-service-design-cube::before {
	content: '';
	position: absolute;
	top: 41%;
	left: -7%;
	background-color: #c1c1c1;
	width: 50%;
	height: 70%;
	z-index: -1;
	opacity: 0.1;
}

/** 見出し文字を最大サイズにする設定 */
.hkc-h3-emphasis {
	font-weight: 700;
	font-size: 3rem;
	border-left: 0;
	padding-left: 0;
}

@media screen and (max-width: 767px) {
	.hkc-h3-emphasis {

		font-size: 1.6rem;
	}
}

.hkc-service-title-wrap {
	top: 23px;
	left: 17px;
	padding: 30px 30px 30px 0;
	z-index: 1;
}

@media screen and (max-width: 767px) {
	.hkc-service-title-wrap {
		padding: 0;
	}
}

.hkc-service-desc {
	color: #222;
	-webkit-text-stroke: 1px #e9e9e9;
	paint-order: stroke fill;
}

/** サービスのフロー矢印 */
.hkc-service-divider-icon-allow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M13.0001 1.99974L11.0002 1.9996L11.0002 18.1715L7.05044 14.2218L5.63623 15.636L12.0002 22L18.3642 15.636L16.9499 14.2218L13.0002 18.1716L13.0001 1.99974Z'%3E%3C/path%3E%3C/svg%3E");
}

/** 画像の斜め下■ */
.hkc-service-design-cube-red::before {
	content: '';
	position: absolute;
	bottom: -60px;
	left: -60px;
	width: 380px;
	height: 290px;
	background-color: #bbbbbb;
	z-index: -1;
	opacity: 0.1;
}

/** こまったときの文章 */
.hkc-service-troublesome-problem li {
	font-size: 1.3rem;
}

/** テーブル縦線 */
.hkc-table-line td {
	border: 1px solid #e5e5e5;
	text-align: center;
}

/** 車検のイメージ車画像 */
.hkc-table-backimage {
	height: 90px;

	line-height: 1.2;
	background-size: 88px !important;
	background-repeat: no-repeat !important;
	background-position: right bottom !important;
}

.hkc-table-width-10 {
	width: 10%;
}

.hkc-table-backimage-car01 {
	background: url(/images/services/vehicle-inspection-table/d2.jpg);
}

.hkc-table-backimage-car02 {
	background: url(/images/services/vehicle-inspection-table/d5.jpg);
}

.hkc-table-backimage-car03 {
	background: url(/images/services/vehicle-inspection-table/delica_cargo.jpg);
}

.hkc-table-backimage-car04 {
	background: url(/images/services/vehicle-inspection-table/delicamini.jpg);
}

.hkc-table-backimage-car05 {
	background: url(/images/services/vehicle-inspection-table/lanser_cargo.jpg);
}

.hkc-table-backimage-car06 {
	background: url(/images/services/vehicle-inspection-table/outlander.jpg);
}

.hkc-table-backimage-car07 {
	background: url(/images/services/vehicle-inspection-table/rvr.jpg);
}

.hkc-table-backimage-car08 {
	background: url(/images/services/vehicle-inspection-table/d2.jpg);
}

.hkc-table-backimage-car09 {
	background: url(/images/services/vehicle-inspection-table/d2.jpg);
}

/** 合計金額 */
.hkc-table-backcolor {
	background-color: #fffbe0;
}

/** 項目のプラス表示 */
.hkc-service-divider-icon-plus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M13.0001 10.9999L22.0002 10.9997L22.0002 12.9997L13.0001 12.9999L13.0001 21.9998L11.0001 21.9998L11.0001 12.9999L2.00004 13.0001L2 11.0001L11.0001 10.9999L11 2.00025L13 2.00024L13.0001 10.9999Z'%3E%3C/path%3E%3C/svg%3E");
}

.hkc-service-work-number {
	font-size: 2.5rem;
}

/**-------------------------------------------
 ■ 固定ページ: カタログ
---------------------------------------------*/
.hkc-catalog-h3 {
	padding-top: 40px;
}

/**-------------------------------------------
 ■ 固定ページ: 各種ポリシー
---------------------------------------------*/

/* 1. 全体の親要素で、基準となるh3のカウンターをリセット */
body {
	counter-reset: h3-cnt;
}

/* 2. h3の処理：自身のカウントを進め、下位（h4）をリセット */
.hkc-customer h3 {
	counter-increment: h3-cnt;
	counter-reset: h4-cnt;
}

.hkc-customer h3::before {
	content: counter(h3-cnt) ". ";
	margin-right: 0.2em;
}

/* 3. h4の処理：自身のカウントを進める */
.hkc-customer h4 {
	counter-increment: h4-cnt;
}

.hkc-customer h4::before {
	content: counter(h3-cnt) "." counter(h4-cnt) " ";
	margin-right: 0.2em;
}

/**-------------------------------------------
 ■ 固定ページ: リクルート
---------------------------------------------*/
.hkc-recruit-badge-position-bottom {
	position: absolute;
	bottom: -6px;
	right: 10px;
}

.hkc-recruit-badge {
	box-sizing: border-box;
	min-width: 28px;
	height: 28px;
	padding: 0 5px;
	vertical-align: middle;
	background: #e60012;
	color: #fff !important;
	font-size: 11px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	line-height: 0;
}

.hkc-recruit-content-button {
	padding: 15px 5px;
}

/** リクルート採用メッセージトップ見出し */
.hkc-recruit-top-title-position {
	left: 0;
	top: 30%;
	position: absolute;
	max-width: calc(100% - (var(--uk-position-margin-offset) * 2));
	box-sizing: border-box;
}

@media (max-width: 1200px) {
	.hkc-recruit-top-title-position {
		position: unset;
	}
}

.hkc-recruit-top-title {
	z-index: 1;
	text-shadow: 0 0 8px #ffffff, 0 0 8px #ffffff, 0 0 8px #ffffff;
	font-size: 4rem;
}

@media (max-width: 1200px) {
	.hkc-recruit-top-title {
		font-size: 3rem;
	}
}

@media (max-width: 959px) {
	.hkc-recruit-top-title {
		font-size: 2rem;
	}
}

.hkc-recuit-title-ja span {
	display: block;
}

.hkc-recruit-top-title-lead {
	margin-top: 438px;
}

@media (max-width: 1200px) {
	.hkc-recruit-top-title-lead {
		margin-top: 0;
	}
}

.hkc-recruit-top-sublead {
	font-size: 2.1rem;
}

@media (max-width: 959px) {
	.hkc-recruit-top-sublead {
		font-size: 1.6rem;
	}
}

.hkc-recruit-top-important {
	padding: 70px 40px;
}

@media (max-width: 760px) {
	.hkc-recruit-top-important {
		padding: 70px 10px;
	}
}

.hkc-recruit-top-carlife {
	padding: 70px 40px;
}

@media (max-width: 760px) {
	.hkc-recruit-top-carlife {
		padding: 70px 10px;
	}
}

.hkc-recruit-second-lead {
	margin-top: 30px;
	margin-bottom: 95px;
}

.hkc-recruit-second-background::before {
	content: '';
	position: absolute;
	width: 122%;
	height: 79%;
	top: 46%;
	left: -12%;
	background-color: #f5f5f5;
	z-index: -1;
}

@media (max-width: 1200px) {
	.hkc-recruit-second-background::before {
		position: unset;
	}
}

.hkc-recruit-third-content-warp {
	padding: 40px;
}

@media (max-width: 959px) {
	.hkc-recruit-third-content-warp {
		padding: 0;
	}
}

.hkc-recruit-third-allow::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: -1.7%;
	left: 50%;
	transform: translateX(-50%);
	border-style: solid;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	border-top: 50px solid #e10000;
	border-bottom: 0;
}

/** 営業職ページ */
.hkc-recruit-sales-title-position {
	left: 0;
	top: 40%;
	position: absolute;
	max-width: calc(100% - (var(--uk-position-margin-offset) * 2));
	box-sizing: border-box;
	z-index: 1;
}

.hkc-recruit-sales-title {
	text-shadow: 0 0 8px #ffffff, 0 0 8px #ffffff, 0 0 8px #ffffff;
}

@media (max-width: 1200px) {
	.hkc-recruit-sales-title-position {
		position: unset;
	}
}

.hkc-recruit-sales-title-lead {
	margin-top: 418px;
}

@media (max-width: 1200px) {
	.hkc-recruit-sales-title-lead {
		margin-top: 0;
	}
}

.hkc-recruit-sales-first-background::before {
	content: '';
	background-color: #f5f5f5;
	position: absolute;
	width: 101.4%;
	height: 87.5%;
	top: 650px;
	left: -90px;
	z-index: -10;
}

@media (max-width: 1200px) {
	.hkc-recruit-sales-first-background::before {
		position: unset;
	}
}

.hkc-recruit-sales-first-hr {
	border-top: 2px solid #e5e5e5;
	margin-bottom: 40px;
}

.hkc-recruit-sales-first-sublead {
	font-size: 2.1rem;
	line-height: 1.5 !important;
	margin-bottom: 40px !important;
}

@media (max-width: 1200px) {
	.hkc-recruit-sales-first-sublead {
		font-size: 1.6rem;
	}
}

.hkc-recruit-sales-second-background::before {
	content: '';
	position: absolute;
	width: 122%;
	height: 119%;
	top: -12%;
	left: -12%;
	background-color: #f5f5f5;
	z-index: -1;
}

@media (max-width: 1200px) {
	.hkc-recruit-sales-second-background::before {
		position: unset;
	}
}

.hkc-recruit-sales-third-backimage {
	width: 100%;
	height: 552px;

	background-size: cover;
	background-position: center;
}

@media (max-width: 640px) {
	.hkc-recruit-sales-third-backimage {
		height: 330px;
	}
}

@media (max-width: 400px) {
	.hkc-recruit-sales-third-backimage {
		height: 200px;
	}
}

.hkc-recruit-sales-forth-background::before {
	content: '';
	background-color: #f5f5f5;
	position: absolute;
	width: 91.4%;
	height: 74%;
	top: 42%;
	left: -5%;
	z-index: -1;
}

@media (max-width: 1200px) {
	.hkc-recruit-sales-forth-background::before {
		position: unset;
	}
}

.hkc-recruit-sales-forth-title {
	margin-bottom: 80px;
}

@media (max-width: 1200px) {
	.hkc-recruit-sales-forth-title {
		margin-bottom: 30px;
	}
}

.hkc-sales-work-background-padding {
	padding: 70px 40px;
}

@media (max-width: 640px) {
	.hkc-sales-work-background-padding {
		padding: 70px 10px;
	}
}

.hkc-recruit-sales-forth-subtitle {
	margin-top: 90px;
	margin-bottom: 30px;
}

.hkc-recruit-sales-five-backimage {
	width: 100%;
	height: 552px;

	background-size: cover;
	background-position: center;
}

@media (max-width: 640px) {
	.hkc-recruit-sales-five-backimage {
		height: 320px;
	}
}

@media (max-width: 400px) {
	.hkc-recruit-sales-five-backimage {
		height: 200px;
	}
}

/** 求人ページ - メカニック */
.hkc-recruit-mechanic-first-title {
	text-shadow: 0 0 8px #ffffff, 0 0 8px #ffffff, 0 0 8px #ffffff;
}

.hkc-recruit-mechanic-title-position {
	left: 0;
	top: 40%;
	position: absolute;
	max-width: calc(100% - (var(--uk-position-margin-offset) * 2));
	box-sizing: border-box;
	z-index: 1;
}

@media (max-width: 1200px) {
	.hkc-recruit-mechanic-title-position {
		position: unset;
	}
}

.hkc-recruit-mechanic-title-lead {
	margin-top: 418px;
}

@media (max-width: 1200px) {
	.hkc-recruit-mechanic-title-lead {
		margin-top: 0;
	}
}

.hkc-recruit-mechanic-first-background::before {
	content: '';
	background-color: #f5f5f5;
	position: absolute;
	width: 101.4%;
	height: 87.5%;
	top: 650px;
	left: -90px;
	z-index: -10;
}

@media (max-width: 1200px) {
	.hkc-recruit-mechanic-first-background::before {
		position: unset;
	}
}

.hkc-recruit-mechanic-first-hr {
	border-top: 2px solid #e5e5e5;
	margin-bottom: 40px;
}

.hkc-recruit-mechanic-first-sublead {
	font-size: 2.1rem;
	line-height: 1.5 !important;
	margin-bottom: 40px !important;
}

@media (max-width: 1200px) {
	.hkc-recruit-mechanic-first-sublead {
		font-size: 1.6rem;
	}
}

.hkc-recruit-mechanic-second-background::before {
	content: '';
	position: absolute;
	width: 122%;
	height: 115%;
	top: -8%;
	left: -12%;
	background-color: #f5f5f5;
	z-index: -1;
}

@media (max-width: 1200px) {
	.hkc-recruit-mechanic-second-background::before {
		position: unset;
	}
}

.hkc-mechanic-work-background-padding {
	padding: 70px 40px;
}

@media (max-width: 760px) {
	.hkc-mechanic-work-background-padding {
		padding: 70px 10px;
	}
}

.hkc-recruit-mechanic-third-backimage {
	width: 100%;
	height: 552px;
	background-image: linear-gradient(to left, rgba(34, 34, 34, 0) 50.0%, rgba(34, 34, 34, 1.9) 100%), url(/images/recruit/responsibly.jpg);
	background-size: cover;
	background-position: center;
}

@media (max-width: 640px) {
	.hkc-recruit-mechanic-third-backimage {
		height: 320px;
	}
}

@media (max-width: 400px) {
	.hkc-recruit-mechanic-third-backimage {
		height: 200px;
	}
}

.hkc-recruit-mechanic-forth-background::before {
	content: '';
	background-color: #f5f5f5;
	position: absolute;
	width: 91.4%;
	height: 40%;
	top: 20%;
	left: -4%;
	z-index: -1;
}

@media (max-width: 1200px) {
	.hkc-recruit-mechanic-forth-background::before {
		position: unset;
	}
}

.hkc-recruit-mechanic-forth-title {
	margin-bottom: 80px;
}

.hkc-recruit-mechanic-forth-subtitle {
	margin-top: 90px;
	margin-bottom: 30px;
}

.hkc-recruit-mechanic-fifth-image-shadow {
	position: relative;
}

.hkc-recruit-mechanic-fifth-image-shadow::before {
	content: '';
	background-color: #ebebeb;
	position: absolute;
	width: 91.4%;
	height: 45%;
	top: 7%;
	left: -2%;
	z-index: -10;
}

.hkc-recruit-mechanic-fifth-image-shadow::after {
	content: '';
	background-color: #f5f5f5;
	position: absolute;
	width: 91.4%;
	height: 44%;
	top: 14%;
	left: -16%;
	z-index: -20;
}

@media (max-width: 1200px) {

	.hkc-recruit-mechanic-fifth-image-shadow:before,
	.hkc-recruit-mechanic-fifth-image-shadow:after {
		position: unset;
	}
}

.hkc-recruit-mechanic-sixth-backimage {
	width: 100%;
	height: 380px;
	background-image: linear-gradient(to left, rgba(34, 34, 34, 0) 50.0%, rgba(34, 34, 34, 1.9) 100%), url(/images/recruit/teams.jpg);
	background-size: cover;
	background-position: center;
}

@media (max-width: 1360px) {
	.hkc-recruit-mechanic-sixth-backimage {
		height: 280px;
	}
}

@media (max-width: 1200px) {
	.hkc-recruit-mechanic-sixth-backimage {
		height: 580px;
	}
}

@media (max-width: 780px) {
	.hkc-recruit-mechanic-sixth-backimage {
		height: 300px;
	}
}

/** 文字を流す */
.hkc-animation-reveal-text {
	display: inline-block;
	/* 文字自体にグラデーションを重ね、背景として配置します */
	background: linear-gradient(to right, #222 30%, rgba(0, 0, 0, 0) 70%);
	background-size: 300% 100%;
	background-position: 100% 0;

	/* グラデーションを文字の形にくり抜きます */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	/* アニメーションを適用（ease-outで最後をなめらかに減速） */
	animation: smooth-flow 1.8s ease-out forwards;
}

@keyframes smooth-flow {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: 0% 0;
	}
}

.hkc-recruit-imagewrap-link>p {
	background-color: #222;
	color: #fff;
}

.hkc-recruit-imagewrap-link:hover>p {
	background: #e60012;
	color: #fff !important;
}

.hkc-recruit-imagewrap-link:hover .hkc-color-red-icon {
	color: #fff !important;
}

.hkc-recruit p {
	line-height: 2rem;
}


/* 1. UIkit標準の右側矢印アイコンを消す */
.uk-accordion-title::after {
	display: none !important;
}

/* 2. タイトル全体のレイアウトを横並び・上下中央揃えにする */
.uk-accordion-title {
	display: flex !important;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

/* 3. タイトルテキストを左端に固定する */
.hkc-accordion-text {
	margin-right: auto;
	text-align: left;
	font-size: 1.2rem;
	font-weight: 700;
	display: flex;
	align-items: center;
}

.hkc-accordion-text::before {
	content: 'Q. ';
	color: #e60012;
	font-size: 1.5rem;
	margin-right: 15px;
	font-weight: 700;
	flex-shrink: 0;
	/* 画面が狭くなっても「Q.」が潰れないようにする */
	line-height: 1.2;
	/* タイトルの文字と高さを合わせるための微調整 */
}

/* 4. アイコンのサイズ変更と回転の設定 */
.hkc-accordion-icon {
	font-size: 24px;
	/* 好きなサイズに変更 */
	color: #333;
	/* アイコンの色 */
	flex-shrink: 0;
	/* 画面が狭くなってもアイコンが潰れないようにする */
	transition: transform 0.2s ease;
}

/* 5. 開いた時に45度回転させて×にする */
.uk-open .hkc-accordion-icon {
	transform: rotate(45deg);
}

.uk-accordion-content {
	font-size: 1.1rem;
	padding: 0 15px;
}

.hkc-recruit-question .uk-accordion-content::after {
	content: "";
	display: block;
	height: 30px;
	/* ここで開いた時の下の余白をコントロール */
	width: 100%;
}

.uk-accordion-content span {
	color: #025891;
	font-size: 1.5rem;
	margin-right: 5px;
	font-weight: 700;
}

/**-------------------------------------------
 ■ 固定ページ: Q＆Aで就活のお悩みを解決
---------------------------------------------*/

.uk-accordion-default .uk-accordion-title:hover {
	color: #e60012;
	text-decoration: none;
}

/**-------------------------------------------
 ■ 固定ページ: エピソードトーク
---------------------------------------------*/
.hkc-episode-grid {
	position: relative;
	transition: min-height .25s ease;
}

.hkc-episode-section {
	background: #f5f5f5;
}

.hkc-episode-eyebrow {
	color: #e60012;
	letter-spacing: .08em;
}

.hkc-episode-filter .uk-active>a {
	background: #e60012;
	color: #fff;
}

.hkc-episode-card {
	position: relative;
	height: 100%;
	min-height: 300px;
	padding: 28px;
	background: #fff;

	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	overflow: hidden;
}

.hkc-episode-card--wide {
	min-height: 300px;
}

.hkc-episode-card--tall {
	min-height: 430px;
}

.hkc-episode-card--mini {
	background: #fff;
}

.hkc-episode-card--entry {
	background: #111;
	color: #fff;
}

.hkc-episode-card--entry .hkc-episode-entry-title,
.hkc-episode-card--entry .hkc-episode-lead {
	color: #fff;
}

.hkc-episode-label {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* お客様 */
.category-customer::before {
	background: #e60012;
}

.hkc-label-customer {
	background: rgba(230, 0, 18, .10);
	color: #e60012;
}

/* 成長 */
.hkc-category-growth::before {
	background: #1f4068;
}

.hkc-label-growth {
	background: rgba(31, 64, 104, .10);
	color: #1f4068;
}

/* 職場 */
.hkc-category-team::before {
	background: #2e7d5a;
}

.hkc-label-team {
	background: rgba(46, 125, 90, .10);
	color: #2e7d5a;
}

/* 車の魅力 */
.hkc-category-car::before {
	background: #111;
}

.hkc-label-car {
	background: rgba(17, 17, 17, .10);
	color: #111;
}

/* 人柄 */
.hkc-category-personality::before {
	background: #b95f13;
}

.hkc-label-personality {
	background: rgba(214, 116, 31, .12);
	color: #b95f13;
}

.hkc-episode-title {
	display: block;
	color: #111;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.55;
}

.hkc-episode-title:hover {
	color: #e60012;
	text-decoration: none;
}

.hkc-episode-title::before {
	display: none;
}

.hkc-episode-title::after {
	content: "＋";
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 26px;
	height: 26px;
	margin-left: 10px;
	border-radius: 50%;
	background: #e60012;
	color: #fff;
	font-size: 16px;
	vertical-align: middle;
}

.uk-open>.hkc-episode-title::after {
	content: "−";
}

.hkc-episode-lead {
	margin-top: 14px;
	color: #555;
	font-size: 15px;
	line-height: 1.9;
}

.hkc-episode-body {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #eee;
	color: #333;
	font-size: 15px;
	line-height: 2;
}

.hkc-episode-body p {
	margin-bottom: 1em;
}

.hkc-episode-point {
	margin-top: 18px;
	padding: 16px 18px;
	border-left: 4px solid #e60012;
	background: #f8f8f8;
	color: #222;
	font-weight: 700;
	line-height: 1.8;
}

.hkc-episode-photo-card {
	position: relative;
	height: 300px;
	min-height: 280px;
	margin: 0;
	padding: 28px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
}

.hkc-episode-photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hkc-episode-entry-title {
	margin-top: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}

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

	.hkc-episode-card,
	.hkc-episode-card--wide,
	.hkc-episode-card--tall {
		min-height: auto;
	}

	.hkc-episode-card {
		padding: 24px;
	}

	.hkc-episode-title {
		font-size: 19px;
	}

	.hkc-episode-lead,
	.hkc-episode-body {
		font-size: 14px;
	}

	.hkc-episode-photo-card {
		height: 240px;
	}
}

.hkc-episode-photo-card::before {
	content: "";
	position: absolute;
	inset: 0;

	z-index: 1;
}

.hkc-episode-photo-content {
	position: relative;
	z-index: 2;
	color: #fff;
}

.hkc-episode-photo-label {
	display: inline-block;
	margin-bottom: 8px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: #111;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
}

.hkc-episode-photo-title {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

/* ==============================
   Footer Accordion
============================== */

.hkc-footer-accordion {
	margin: 0;
	background-color: #222;

}

.hkc-footer-accordion>li {
	margin-top: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hkc-footer-accordion .uk-accordion-title {
	position: relative;
	padding: 17px 40px 17px 4px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.hkc-footer-accordion .uk-accordion-title:hover {
	color: #fff;
	text-decoration: none;
}

/* UIkit標準の矢印を少し見やすく */
.hkc-footer-accordion .uk-accordion-title::before {
	margin-right: 0;
}

/* ブックマークアイコン */
.hkc-footer-accordion .uk-accordion-title>i {
	margin-right: 6px;
}

/* 開いた中身 */
.hkc-footer-accordion .uk-accordion-content {
	margin-top: 0;
	padding: 0 5px 15px 8px;
}

/* リンク */
.hkc-footer-accordion .uk-accordion-content li {
	margin-top: 10px;
}

.hkc-footer-accordion .uk-accordion-content a {
	font-size: 14px;
}

/* 赤矢印 */
.hkc-footer-accordion .hkc-color-red-icon {
	margin-right: 3px;
}