@charset "UTF-8";
/*
Theme Name: ACTIVE CARSHOP
Description: Active Carshop WordPress Theme (Base & Utilities)
Version: 4.2.5
Author: Active Inc.
*/

/* ==========================================================================
	1. 基本設定 (Variables, Reset, Typography)
========================================================================== */
:root {
	--color-primary:      #BF0008;
	--color-secondary:    #2A3039;
	--color-tertiary:     #1E2229;
	--color-quaternary:   #274169;
	--color-accent:       #D7E9F2;
	--color-info:         #0674AD;
	--color-success:      #1B9B61;
	--color-danger:       #CC6600;
	--color-gray:         #81858B;
	--color-light:        #EEE;
	--color-white:        #FFF;
	--color-dark:         #252525;
	--color-black:        #121212;
	--color-link:         #007DD2;
	--font-en: "Cinzel", serif;
	--font-jp: "Helvetica Neue", "Helvetica", "Arial","Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	--header-h: 110px;
	--transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	overflow-x: hidden !important;
	position: relative;
	font-size: clamp( 0.875rem, calc( 0.8109756097560976rem + 0.24390243902439024vw ), 1rem );
	-webkit-text-size-adjust: 100%;
}
html.lenis, html.lenis body {
	height: auto;
}
body {
	width: 100%;
	position: relative;
	overflow-x: hidden;
	cursor: auto;
	font-family: var(--font-jp);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-dark);
	background-color: #FFF;
	line-break: strict;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
a {
	cursor: pointer;
	color: var(--color-link);
	text-decoration: none;
	outline: none;
	transition: var(--transition);
}
.has-text-color:not(.has-link-color) a {
	color: var(--color-link) !important;
}
a img {
	transition: opacity 0.3s ease;
}
a:hover img {
	opacity: 0.8;
}
a:focus, a:active {
	outline: none;
}
button {
	cursor: pointer;
	border: none;
	background: none;
}
li {
	list-style: none;
}
img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}
.img-fit img,
img.img-fit {
	margin: 0 auto;
	width: 100% !important;
	height: auto;
}
.img-circle img {
	border-radius: 50% !important;
}
h1, h2, h3, h4, h5, h6, .wp-block-heading {
	margin-top: 0 !important;
	margin-bottom: 1rem !important;
	font-weight: 700;
	line-height: 1.3;
	word-break: auto-phrase;
}
h1, .h1 {
	margin-bottom: 1.5rem !important;
	font-size: clamp( 2rem, calc( 1.64rem + 1.53vw ), 3rem );
	letter-spacing: 1px;
}
h2, .h2 {
	font-size: clamp( 1.8rem, calc( 1.6975609756097563rem + 0.3902439024390243vw ), 2.5rem );
	letter-spacing: 1px;
}
h3, .h3 {
	font-size: clamp( 1.25rem, calc( 1.177rem + 0.36vw ), 1.5rem );
	letter-spacing: 0.5px;
}
h4, .h4 {
	font-size: clamp( 1.1rem, calc( 1.042rem + 0.29vw ), 1.3rem );
	letter-spacing: 0.5px;
}
h5, .h5 {
	font-size: clamp( 1rem, calc( 0.956rem + 0.22vw ), 1.15rem );
}
h6, .h6 {
	font-size: 1rem;
}
p {
	margin-top: 0 !important;
	margin-bottom: 1rem !important;
}
ul:not([class]), ol:not([class]), ul.wp-block-list, ol.wp-block-list {
	margin-top: 0 !important;
	margin-bottom: 1rem !important;
	padding-left: 0;
}
ul:not([class]) li, ul.wp-block-list li {
	padding-left: 1em;
	position: relative;
	list-style: none !important;
}
ul:not([class]) li::before, ul.wp-block-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	content: '・';
}
ol:not([class]), ol.wp-block-list {
	counter-reset: ol-counter;
}
ol:not([class]) li, ol.wp-block-list li {
	padding-left: 1.4em;
	position: relative;
	list-style: none !important;
}
ol:not([class]) li::before, ol.wp-block-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	content: counter(ol-counter) ". ";
	counter-increment: ol-counter;
}
.en-title, .is-style-active-en-title {
	font-family: var(--font-en);
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	word-break: normal;
	overflow-wrap: break-word;
}
p.is-style-active-en-title {
	margin-bottom: 0 !important;
}
h2.en-title {
	font-size: clamp(2.6rem, 8vw, 4.2rem);
}
h3.en-title {
	font-size: clamp(2rem, 8vw, 4.5rem);
}
.text-en {
	font-family: var(--font-en);
	font-weight: 400 !important;
	line-height: 1;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	word-break: normal;
	overflow-wrap: break-word;
}
.jp-sub {
	margin-top: 0.5rem;
	padding: 0;
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-quaternary);
	letter-spacing: 0.15em;
	background-color: transparent;
}
.en-sub {
	font-family: var(--font-en);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	word-break: normal;
	overflow-wrap: break-word;
}
.section-header {
	margin-bottom: 4rem;
	padding: 0;
	text-align: center;
}
small, .small {
	font-size: .8rem;
	line-height: 1.4;
	color: #505050;
}
.text-center {
	text-align: center !important;
}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}

/* ==========================================================================
	2. カラーパレット (Colors) ※theme.json と連動
========================================================================== */
.has-primary-color { color: var(--color-primary) !important; }
.has-primary-background-color { background-color: var(--color-primary) !important; }
.has-secondary-color { color: var(--color-secondary) !important; }
.has-secondary-background-color { background-color: var(--color-secondary) !important; }
.has-tertiary-color { color: var(--color-tertiary) !important; }
.has-tertiary-background-color { background-color: var(--color-tertiary) !important; }
.has-quaternary-color { color: var(--color-quaternary) !important; }
.has-quaternary-background-color { background-color: var(--color-quaternary) !important; }
.has-accent-color { color: var(--color-accent) !important; }
.has-accent-background-color { background-color: var(--color-accent) !important; }
.has-info-color { color: var(--color-info) !important; }
.has-info-background-color { background-color: var(--color-info) !important; }
.has-success-color { color: var(--color-success) !important; }
.has-success-background-color { background-color: var(--color-success) !important; }
.has-danger-color { color: var(--color-danger) !important; }
.has-danger-background-color { background-color: var(--color-danger) !important; }
.has-gray-color { color: var(--color-gray) !important; }
.has-gray-background-color { background-color: var(--color-gray) !important; }
.has-light-color { color: var(--color-light) !important; }
.has-light-background-color { background-color: var(--color-light) !important; }
.has-white-color { color: var(--color-white) !important; }
.has-white-background-color { background-color: var(--color-white) !important; }
.has-dark-color { color: var(--color-dark) !important; }
.has-dark-background-color { background-color: var(--color-dark) !important; }
.has-black-color { color: var(--color-black) !important; }
.has-black-background-color { background-color: var(--color-black) !important; }
.has-theme-link-color { color: var(--color-link) !important; }
.has-theme-link-background-color { background-color: var(--color-link) !important; }
/* -- ブロックエディタスタイル -- */
.has-medium-font-size { font-size: 1rem!important;}
.has-small-font-size {
	font-size: .8rem!important;
	line-height: 1.35;
}

/* ==========================================================================
	3. ユーティリティ (Spacing)
========================================================================== */
.mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

.m-1 { margin: 0.25rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.ml-1 { margin-left: 0.25rem !important; }

.m-2 { margin: 0.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.ml-2 { margin-left: 0.5rem !important; }

.m-3 { margin: 1rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ml-3 { margin-left: 1rem !important; }

.m-4 { margin: 1.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ml-4 { margin-left: 1.5rem !important; }

.m-5 { margin: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ml-5 { margin-left: 3rem !important; }

.mt-6 { margin-top: 4rem !important; }
.mb-6 { margin-bottom: 4rem !important; }

.mt-7 { margin-top: 5rem !important; }
.mb-7 { margin-bottom: 5rem !important; }

.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }

.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }

.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }

.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }

.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }

.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }

/* ==========================================================================
	3. アニメーション (Animations)
========================================================================== */
.js-split-text span {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}
.js-fade-up {
	opacity: 0;
	transform: translateY(20px);
}
.js-reveal-wrap {
	overflow: hidden;
	position: relative;
	border-radius: 6px;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	--mask-scale: 1;
}
.js-reveal-wrap::after {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	content: '';
	pointer-events: none;
	background-color: #FFF;
	transform: scaleX(var(--mask-scale));
	transform-origin: left;
}
.reveal-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 6px;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.js-parallax-img {
	width: 100%;
	height: 100%;
	display: block;
	transform: scale(1.3);
	object-fit: cover;
}

/* ==========================================================================
	4. コンポーネント
========================================================================== */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background-color: #FFF;
}
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) td {
	background-color: #F0F0F1;
}
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.makers > table tr th:nth-child(even) {
	background-color: var(--color-accent) !important;
}
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th, .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
	color: var(--color-dark) !important;
	white-space: nowrap !important;
}
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th, .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr:nth-child(even) td {
	background-color: var(--color-light) !important;
}
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th, .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
	border-color: rgba(0, 0, 0, 0.2) !important;
}
.table-sm {
	margin-top: 0 !important;
}
.wp-block-flexible-table-block-table > figcaption {
	display: block;
	text-align: right !important;
	font-size: .8rem !important;
}
.table-sm table {
	table-layout: auto !important;
	font-size: .9rem !important;
}
.table-sm table tbody tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.table-sm > table tr th {
	padding-right: 1rem !important;
	padding-left: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: inherit !important;
	white-space: nowrap !important;
	letter-spacing: 0 !important;
}
.table-sm table tbody tr:nth-child(odd) th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.table-sm > table tr:nth-child(odd) th {
	padding-right: 1rem !important;
	padding-left: 1rem !important;
	font-weight: 400 !important;
	color: inherit !important;
	color: var(--color-white) !important;
	white-space: nowrap !important;
	background-color: var(--color-secondary) !important;
}
.table-sm table tbody tr td,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.table-sm > table tr td {
	padding-right: 1rem !important;
	padding-left: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: left;
	letter-spacing: 0 !important;
}
.table-sm.is-content-justification-center table tbody tr td,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.table-sm.is-content-justification-center > table tr td {
	width: 18%;
	text-align: center !important;
}
@media screen and (max-width: 900px) {
	:root :where(.is-layout-constrained) > * {
		margin-block-start: 12px;
		margin-block-end: 0;
	}
	:root :where(.is-layout-flex) {
		gap: 15px !important;
	}
	.table-sm table {
		font-size: .85rem !important;
	}
	.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table.has-fixed-layout {
		table-layout: auto !important;
	}
}
/* ==========================================================================
	5. ジグザグレイアウト（左右反転）機能
	※reverseクラスがついた親要素内のカラム順序を入れ替え
========================================================================== */
@media screen and (min-width: 901px) {
	.reverse .wp-block-columns,
	.wp-block-columns.reverse {
		display: flex;
	}

	.reverse .wp-block-column:first-child,
	.wp-block-columns.reverse .wp-block-column:first-child {
		order: 2;
	}

	.reverse .wp-block-column:last-child,
	.wp-block-columns.reverse .wp-block-column:last-child {
		order: 1;
	}
	.reverse .wp-block-columns.no-reverse .wp-block-column:first-child,
	.wp-block-columns.no-reverse .wp-block-column:first-child {
		order: 1 !important;
	}
	.reverse .wp-block-columns.no-reverse .wp-block-column:last-child,
	.wp-block-columns.no-reverse .wp-block-column:last-child {
		order: 2 !important;
	}
}