body {
	font-family: "Noto Sans JP", sans-serif;
}

.u-desktop {
	display: none;
}

/* リキッドレイアウト対応 */

html {
	font-size: 16px;
}

/* pcの電話番号発信対応 */

/* ホバー */

a {
	-webkit-text-decoration: none;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

/* コンテンツ量が少なく短いページでもフッターを最下部に表示する ---- */

.content-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
}

.l-wrapper {
	flex: 1;
}

/* コンテンツ量が少なく短いページでもフッターを最下部に表示する ここまで ---- */

.content-wrap {
	position: relative;
}

.content-wrap::before {
	background-color: #161617;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -5;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core root defaults */

html {
	scroll-behavior: smooth;
}

/* Set core body defaults */

body {
	line-height: 1.5;
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul,
ol {
	list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

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

/* Natural flow and rhythm in articles by default */

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Blur images when they have no alt attribute */

img:not([alt]) {
	filter: blur(10px);
}

/* フォームリセット */

input,
button,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
}

textarea {
	resize: vertical;
}

input[type=checkbox],
input[type=radio] {
	display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}

.l-archive-home {
	margin-top: 2.5rem;
}

.l-archive-works {
	margin-top: 2.5rem;
}

.l-company-info {
	margin-top: 5rem;
}

.l-company {
	margin-top: 3.125rem;
}

.l-contact {
	margin-top: 5rem;
}

.l-contact--mt0 {
	margin-top: 0;
}

.l-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 550px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

/* サイドバー幅の基準（23vwを上限332pxでクランプ） */

:root {
	--sidebar-w: max(0px, min(23vw, 20.75rem));
}

/* ===== サイドバー ===== */

.p-sidebar {
	display: none;
}

.p-sidebar::before {
	background: rgba(0, 0, 0, 0.66);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

/* ===== 本文領域 ===== */

/* ここが肝：width は書かない。margin-left だけでオフセットする */

.l-main {
	width: 100%; /* baseはそのまま（width: auto） */
}

/* CONTACT が見えて body に .sidebar-off が付いたら全幅に戻す */

.l-page-contact {
	margin-bottom: 2.5rem;
	margin-top: 2.5rem;
}

.l-page-service {
	margin-top: 2.5rem;
}

.l-paginavi {
	margin-top: 2.5rem;
}

.l-recruit {
	margin-top: 2.5rem;
}

.l-service {
	margin-top: 5rem;
}

.l-single-body {
	margin-top: 2.5rem;
}

.l-topNews {
	margin-top: 2.5rem;
}

.l-works {
	margin-top: 5rem;
}

.l-wrapper {
	display: flex;
}

/* ---------- 各セクションのマスクアニメーション（X軸方向） -------------------------- */

.js-mask {
	-webkit-mask-image: linear-gradient(90deg, #ffffff 0%,#ffffff 50%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, #ffffff 0% 50%, transparent 100%);
	-webkit-mask-size: 200% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 200% 0%;
	mask-image: linear-gradient(90deg, #ffffff 0%,#ffffff 50%, transparent 100%);
	mask-image: linear-gradient(90deg, #ffffff 0% 50%, transparent 100%);
	mask-position: 200% 0%;
	mask-repeat: no-repeat;
	mask-size: 200% 100%;
}

.js-mask.is-open {
	animation: mask 0.5s linear forwards;
}

/* ---------- 各セクションのマスクアニメーション（X軸方向） ここまで ----------------- */

/* ---------- 読み込み時のチラつき防止 | ここから ---------- */

.js-fade-op,
.js-pop-up,
.js-mv-fade,
.js-fadeIn-rights,
.js-fadeIn-right {
	opacity: 0;
}

/* ---------- 読み込み時のチラつき防止 | ここまで ---------- */

/* -------------------- テキストのマスクエフェクト ------------------------- */

.js-text-mask,
.js-mv-text-mask {
	--translateX: 0px;
	opacity: 0;
	overflow: hidden;
	position: relative;
	transform: translateY(1.25rem);
	visibility: hidden;
}

.js-text-mask::before,
.js-mv-text-mask::before {
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: translateX(var(--translateX));
	width: 100%;
}

/* -------------------- テキストのマスクエフェクト ここまで ------------------------- */

.c-breadcrumb {
	background-color: rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid #b6a152;
	border-top: 1px solid #b6a152;
	display: block;
	padding-bottom: 0.625rem;
	padding-top: 0.625rem;
	position: relative;
	width: 100%;
}

.c-breadcrumb::before,
.c-breadcrumb::after {
	background-image: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	content: "";
	height: 0.125rem;
	position: absolute;
	width: 100%;
}

.c-breadcrumb::before {
	top: 0;
}

.c-breadcrumb::after {
	bottom: 0;
}

.c-breadcrumb__nav {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	width: 100%;
}

.c-breadcrumb__items {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.3125rem; /* 上下の余白 */
}

.c-breadcrumb__items li {
	color: #cca32f;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
}

.c-breadcrumb__items li:not(:first-of-type) .itemListElement {
	padding-left: 0.9375rem;
	text-indent: -1.125rem;
}

.c-breadcrumb__items li:first-of-type {
	color: #cca32f;
	position: relative;
}

.c-breadcrumb__items li:last-of-type {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1; /* 表示する行数を1行に設定 */
	color: #fff;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
}

/* 404ページ用 | 404 = 「\34 04」*/

.c-breadcrumb__items li.\34 04.current-item {
	pointer-events: none;
}

.c-breadcrumb__items li.\34 04.current-item span a {
	color: #fff;
}

.c-breadcrumb__items li::before {
	-webkit-mask-image: url(../../assets/images/common/icon-arrow.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	aspect-ratio: 1/1;
	background-color: #fff;
	content: "";
	display: inline-block;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	mask-image: url(../../assets/images/common/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	transform: translateY(0.2em);
	width: 0.9375rem;
}

.c-breadcrumb__items li:first-of-type::before {
	content: none;
}

.c-breadcrumb__items li a {
	color: #c3a355;
	display: inline-block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	transition: all 0.3s;
}

.c-button {
	background: transparent linear-gradient(90deg, #7633a4 0%, #250d65 100%) 0% 0% no-repeat padding-box;
	border-radius: 50px;
	color: #fff;
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	padding: 1.4375rem 0;
	text-align: center;
	text-transform: uppercase;
	width: 12.5rem;
}

.c-hamburger {
	cursor: pointer;
	height: 1.875rem;
	position: absolute;
	right: 1.25rem;
	top: 0.9375rem;
	width: 2.5rem;
	z-index: 1000;
}

.c-hamburger span {
	background-color: #fff;
	height: 2px;
	position: absolute;
	transition: 0.3s;
	width: inherit;
}

.c-hamburger span:nth-child(1) {
	top: 15%;
}

.c-hamburger span:nth-child(2) {
	opacity: 1;
	top: 51%;
}

.c-hamburger span:nth-child(3) {
	top: 85%;
}

.c-hamburger.is-active span:nth-child(1) {
	top: 60%;
	transform: rotate(45deg);
}

.c-hamburger.is-active span:nth-child(2) {
	opacity: 0;
	top: 51%;
}

.c-hamburger.is-active span:nth-child(3) {
	top: 60%;
	transform: rotate(-45deg);
}

.c-loading-logo {
	display: block;
	height: 100%;
	width: 100%;
}

/* 線の長さ用の共通値（実際の長さより大きければOK） */

:root {
	--logo-stroke-length: 1000;
}

/* --- V（ロゴ本体）線描画 --- */

.c-loading-logo__path-main {
	fill: none;
	stroke: url(#logo-gradient);
	stroke-width: 1;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1000;
	stroke-dasharray: var(--logo-stroke-length);
	stroke-dashoffset: 1000;
	stroke-dashoffset: var(--logo-stroke-length);
	animation: logo-draw 3s cubic-bezier(0.2, 0, 0.3, 1) forwards;
	animation-delay: 0s;
}

/* --- forgion（文字）線描画 --- */

.c-loading-logo__path-text {
	fill: none;
	stroke: #fff;
	stroke-width: 0.6;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1000;
	stroke-dasharray: var(--logo-stroke-length);
	stroke-dashoffset: 1000;
	stroke-dashoffset: var(--logo-stroke-length);
	animation: logo-draw 3s ease forwards;
	animation-delay: 0s;
}

/* --- V 塗り（じわ〜っと塗り） --- */

.c-loading-logo__path-main--fill { /* じわ〜っと塗りになるように duration を 1 秒へ */
	animation: logo-fill 0.3s ease forwards;
	animation-delay: 1s;
	opacity: 0;
}

/* --- forgion 塗り（じわ〜っと塗り） --- */

.c-loading-logo__path-text--fill {
	animation: logo-fill 0.3s ease forwards;
	animation-delay: 1s; /* V と同時発火 */
	opacity: 0;
}

/* 線を描くアニメーション（最後に線は消える） */

/* 塗りを ふわ〜っと表示するアニメーション */

.c-loading {
	background-color: #161617;
	bottom: 0;
	height: 100svh;
	left: 0;
	opacity: 1;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 0.5s ease-in-out;
	width: 100%;
	z-index: 10000;
}

.loading-fadeout {
	opacity: 0;
}

.loading-hidden {
	display: none;
}

.hexagon {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.hexagon:nth-of-type(1) {
	transform: translate(-50%, -50%) scale(1);
}

.hexagon:nth-of-type(1) .hexagon__line {
	animation-delay: 0s;
	background: #a7801b;
}

.hexagon:nth-of-type(2) {
	transform: translate(-50%, -50%) scale(1.006);
}

.hexagon:nth-of-type(2) .hexagon__line {
	animation-delay: 0.1s;
	background: #cca32f;
}

.hexagon:nth-of-type(3) {
	transform: translate(-50%, -50%) scale(1.012);
}

.hexagon:nth-of-type(3) .hexagon__line {
	animation-delay: 0.2s;
	background: #dbb956;
}

.hexagon:nth-of-type(4) {
	transform: translate(-50%, -50%) scale(1.018);
}

.hexagon:nth-of-type(4) .hexagon__line {
	animation-delay: 0.3s;
	background: #ffefb5;
}

.hexagon:nth-of-type(5) {
	transform: translate(-50%, -50%) scale(1.024);
}

.hexagon:nth-of-type(5) .hexagon__line {
	animation-delay: 0.4s;
	background: #ccaf5c;
}

.hexagon__line {
	--line-width: 0.03125rem;
	--side: 8.75rem;
	--apothem: calc(var(--side) * 0.866);
	--slide-distance: 50vw;
	--disperse-multiplier: 2;
	animation: hexagon-line 3s linear;
	height: 0.03125rem;
	height: var(--line-width);
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc((8.75rem * 0.866) * -1));
	transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(calc(8.75rem * 0.866) * -1));
	transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--apothem) * -1));
	transform-origin: 50% 50%;
	width: calc(8.75rem + 0.03125rem * 2);
	width: calc(var(--side) + var(--line-width) * 2);
}

.hexagon__line--1 {
	--angle: 0deg;
}

.hexagon__line--2 {
	--angle: 60deg;
}

.hexagon__line--3 {
	--angle: 120deg;
}

.hexagon__line--4 {
	--angle: 180deg;
}

.hexagon__line--5 {
	--angle: 240deg;
}

.hexagon__line--6 {
	--angle: 300deg;
}

.c-loading__logo-wrapper {
	left: 50%;
	max-width: 7.5rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.c-mv-btn {
	border: 1px solid #fff;
	border-radius: 50px;
	display: inline-block;
	font-family: "Montserrat", sans-serif;
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 1.3125rem 4.375rem;
}

.c-page-link {
	color: #391E88;
	margin-top: 2.5rem;
}

.c-page-link__flex {
	align-items: center;
	border-bottom: 1px solid #B8AED5;
	border-top: 1px solid #B8AED5;
	display: flex;
	padding: 0.9375rem 0;
}

.c-page-link__prev,
.c-page-link__next {
	font-size: 0.75rem;
	line-height: 1.5714285714;
	padding: 0 1.25rem;
	position: relative;
	width: 50%;
}

.c-page-link__prev {
	margin-right: auto;
}

.c-page-link__prev::after {
	background-color: #B8AED5;
	bottom: 0;
	content: "";
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
}

.c-page-link__next {
	margin-left: auto;
}

.c-page-link__archive {
	font-size: 0.875rem;
	margin-top: 1.25rem;
	text-align: center;
}

.c-section-header,
.c-section-header--white {
	color: #391e88;
	text-align: center;
}

.c-section-header__jatitle {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
}

.c-section-header__engtitle {
	font-family: "Montserrat", sans-serif;
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2333333333;
	text-transform: uppercase;
}

.c-section-header--white {
	color: #fff;
}

.c-section-header__subpage {
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
}

.p-subtitle {
	margin-bottom: max(28px, min(5vw, 48px));
}

.p-subtitle__top { /* Figmaのゴールド500: 6%/22%/45%/68%/100% */
	--gold-grad: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text; /* グラデで文字を塗る */
	background-image: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background-image: var(--gold-grad);
	font-family: "Barlow", sans-serif;
	font-size: 3.75rem;
	font-weight: 100;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: capitalize;
}

.p-subtitle__bottom {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0;
	margin-top: -0.625rem;
}

.c-to-top {
	border: 1px solid;
	border-radius: 50%;
	bottom: 0.625rem;
	overflow: hidden;
	position: fixed;
	right: 0.625rem;
}

.c-to-top a {
	background-color: #fff;
	display: block;
	height: 3.125rem;
	position: relative;
	width: 3.125rem;
}

.c-to-top a span {
	background-color: transparent;
	border-right: 2px solid;
	border-top: 2px solid;
	height: 1.25rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, calc(-50% + 0.25em)) rotate(-45deg);
	width: 1.25rem;
}

:root {
	--cta-accent: #b6a152; /* 既存 */
	--cta-text: #ffffff;
	--cta-shadow: rgba(0, 0, 0, 0.15); /* gold/400 のグラデ（お好みで編集可） */
	--cta-grad: linear-gradient(90deg, #a7801b 6%, #ccaf5c 22%, #dbb956 68%, #cca32f 100%);
}

/* 置換：背景色をグラデーションに（その他は変更なし） */

.cta-gold {
	align-items: center; /* フォールバック → グラデーション */
	background-color: #161617;
	border: 2px solid #b6a152;
	border: 2px solid var(--cta-accent); /* 枠は単色のまま（ご要望なら後でグラデ対応可） */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 8px var(--cta-shadow);
	display: inline-flex;
	gap: 0.5em;
	justify-content: center;
	max-width: 13.4375rem;
	padding: 0.9em 1.6em;
	position: relative;
	transition: all 0.3s;
	width: 100%;
}

.cta-gold::before {
	background-image: linear-gradient(90deg, #a7801b 6%, #ccaf5c 22%, #dbb956 68%, #cca32f 100%);
	background-image: var(--cta-grad);
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 0.3s;
	width: 100%;
	z-index: 1;
}

/* 矢印は擬似要素で */

.cta-gold::after {
	border-bottom: 2px solid currentColor; /* L字の片側 */
	border-right: 2px solid currentColor; /* L字の片側 */
	content: "";
	height: 0.6em;
	line-height: 1;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) translateX(0) rotate(-45deg);
	transition: all 0.3s;
	vertical-align: middle;
	width: 0.6em; /* 大きさ */
	z-index: 1;
}

/* ホバー：色反転＆矢印スライド */

.cta-gold__label {
	color: #ffffff;
	color: var(--cta-text);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	position: relative;
	transition: all 0.3s;
	z-index: 1;
}

/* フォーカス可視化 */

.cta-gold:focus {
	outline: none;
}

.cta-gold:focus-visible {
	box-shadow: 0 0 0 3px rgba(195, 163, 85, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 0 3px rgba(195, 163, 85, 0.35), 0 2px 8px var(--cta-shadow);
}

/* 動きの配慮 */

.p-404 {
	background-color: #161617;
	display: flex;
	flex-direction: column;
	padding: 100px 0;
	text-align: center;
}

.p-404__title {
	color: #fff;
}

.p-404__lead {
	color: #fff;
	margin-top: 30px;
}

.p-404__next {
	margin-top: 50px;
}

.p-company {
	background-image: url(../images/common/company-bg.png);
	background-position: -0.9375rem 0;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 6rem;
	padding-top: 2rem;
}

.p-company--subPage {
	background-image: url(../images/common/page-company-bg.png);
	background-position: -0.8125rem -2.875rem;
	background-repeat: no-repeat;
	background-size: contain;
	padding-bottom: 0;
	padding-top: 2rem;
}

.p-company__inner.inner {
	max-width: 81.25rem;
}

.p-company__contents {
	margin-top: 1.875rem;
}

.p-company__subtitle {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-align: center;
}

.p-company__yellow {
	background: linear-gradient(180deg, transparent 0%, transparent 75%, #F5F534 75%, #F5F534 90%, transparent 90%, transparent 100%);
}

.p-company__content {
	margin-top: 2.6875rem;
}

.p-company__text {
	font-size: 0.875rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1.79;
	text-align: center;
}

.p-company__btn {
	margin-top: 1.875rem;
	text-align: center;
}

.p-company__message {
	margin-top: 3.75rem;
}

.p-company__message-image {
	aspect-ratio: 335/248;
}

.p-company__message-image img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-company__message-text {
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	line-height: 1.7142857143;
	margin-top: 1.875rem;
}

.p-company__message-text p:not(:first-child) {
	margin-top: 1.5rem;
}

/* ===== Contact Form ===== */

.p-contact-form {
	--gold-grad: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background: #0f1113;
	color: #fff;
	padding: max(56px, min(8vw, 120px)) 0;
	width: 100%;
}

.p-contact-form__inner { /* l-inner を利用（ユーザー環境の l-inner をそのまま使えます） */
}

.p-contact-form__message {
	margin-bottom: 3.125rem;
}

.p-contact-form__message-text {
	font-size: 1rem;
	text-align: center;
}

/* フォーム本体 */

.p-contact-form__row:first-of-type {
	margin-top: 0;
}

/* ラベル */

.p-contact-form__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 400;
	margin: 0 0 10px;
}

.p-contact-form__req {
	color: #ff7a7a;
	margin-left: 4px;
}

/* テキスト入力 */

.p-contact-form__input {
	background: #fff;
	border: 0;
	border-radius: 0;
	color: #111;
	display: block;
	font-size: 1rem;
	height: 40px;
	line-height: 1;
	padding: 0 14px;
	width: 100%;
}

.p-contact-form__input [type=text] {
	max-width: 100%;
}

.p-contact-form__input::-moz-placeholder {
	color: rgba(0, 0, 0, 0.5);
}

.p-contact-form__input::placeholder {
	color: rgba(0, 0, 0, 0.5);
}

.p-contact-form__input:focus-visible {
	outline: 2px solid #ccaf5c;
	outline-offset: 0;
}

/* 並び */

.p-contact-form__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

/* 1項目 */

.p-contact-form__check {
	align-items: center;
	display: inline-flex;
	position: relative;
}

/* 入力本体は視覚的に隠す（ネイティブ枠を出さない） */

.p-contact-form__check input {
	bottom: 0;
	height: 1px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
}

/* ラベル：左に □ を出す余白 */

.p-contact-form__check label {
	-webkit-user-select: none;
	-moz-user-select: none;
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.875rem;
	line-height: 1.2;
	padding-left: 28px; /* □ の幅 */
	position: relative;
	user-select: none;
}

/* □ ボックス（常に透明） */

.p-contact-form__check label::before {
	background: #fff;
	border: 1.5px solid #fff;
	content: "";
	height: 18px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: border-color 0.3s ease;
	width: 18px;
}

/* ✓（白）— 未選択は非表示 */

.p-contact-form__check label::after {
	border: 3px solid #0f1113;
	border-right: none;
	border-top: none;
	content: "";
	height: 6px;
	left: 4px;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-60%) rotate(-45deg);
	transition: opacity 0.3s ease;
	width: 10px;
}

/* 選択時：背景は透明のまま、✓ だけ表示 */

.p-contact-form__check input:checked + label::after {
	opacity: 1;
}

/* フォーカスリング（キーボード操作） */

.p-contact-form__check input:focus-visible + label::before {
	outline: 2px solid #ccaf5c;
	outline-offset: 2px;
}

/* textarea */

.p-contact-form__textarea {
	background: #efefef;
	border: 0;
	border-radius: 0;
	color: #111;
	font-size: 1rem;
	line-height: 1.7;
	max-width: 100%;
	min-height: 240px;
	padding: 14px;
	resize: vertical;
	width: 100%;
}

/* 送信ボタン（黒×金トーン） */

.p-contact-form__actions {
	margin-top: max(28px, min(6vw, 40px));
	text-align: center;
}

.p-contact-form__submit {
	background-color: transparent; /* ← 実背景は ::before で表現 */
	border: 2px solid transparent; /* ホバー時だけ金色に */
	border-radius: 0;
	color: #0f1113; /* 通常は黒文字 */
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	isolation: isolate;
	letter-spacing: 0.08em;
	min-width: 220px;
	padding: 14px 28px;
	position: relative; /* 0.3s で色を滑らかに */
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

/* 通常時：金のグラデ背景は ::before で描画 */

.p-contact-form__submit::before {
	background: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background: var(--gold-grad);
	bottom: 0;
	content: "";
	left: 0;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.3s ease; /* ← ここで0.3sフェード */
	z-index: -1; /* テキストより背面 */
}

/* hover：背景=白、文字=金、枠=金（位置は不変） */

/* キーボード操作でも同じ演出 */

.p-contact-form__submit:focus-visible {
	background-color: #161617;
	border-color: #c3a355;
	color: #c3a355;
	outline: 2px solid #c3a355;
	outline-offset: 2px;
}

.p-contact__inner.p-contact__inner--1000 {
	max-width: 500px;
	padding: 15px;
}

.p-contact__flex {
	margin-top: 2rem;
}

.p-contact__cards {
	grid-gap: 20px;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(1, 1fr);
}

.p-contact__card {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.p-contact__card::after {
	border-right: 1px solid #626262;
	border-top: 1px solid #626262;
	content: "";
	height: 10px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 10px;
}

:root {
	--gold-grad: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
}

/* 元の指定はそのまま */

.p-contact__link {
	background-color: #fff; /* 通常は白背景 */
	border: 3px solid #c3a355;
	display: block;
	height: 100%;
	overflow: hidden; /* はみ出し防止 */
	padding: 20px 0;
	position: relative; /* ← 擬似要素の基準 */
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
	width: 100%;
}

/* グラデーション面は ::before に描画して、通常は非表示 */

.p-contact__link::before {
	background: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background: var(--gold-grad);
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0; /* ← 隠しておく */
	pointer-events: none; /* クリック可視性の邪魔をしない */
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.3s ease; /* 0.35s でフェード */
}

/* hover/focus-visible でグラデーションをフェードイン */

/* === グラデホバーを載せているコンテナ（例：.p-contact__link）側 === */

.p-contact__link {
	isolation: isolate; /* 新しいスタッキングコンテキストを作る */
	overflow: hidden;
	position: relative; /* 擬似要素の基準 */ /* 既存の padding / border / background はそのまま */
}

/* グラデ面（常時は透明） */

.p-contact__link::before {
	background: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background: var(--gold-grad);
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.3s ease;
	z-index: 0; /* ← 子要素より“背面”に固定 */
}

/* ホバーで金グラデをフェードイン（子要素の上に来ない） */

/* 子要素は必ず前面に */

.p-contact__link > * {
	position: relative;
	z-index: 1; /* ← コンテンツが常に見える */
}

/* === カード本体（中身が見えなくなるのを防止） === */

.p-contact__card {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1; /* 親::before(0)より前面 */
}

/* 右端の「>」矢印も前面に */

.p-contact__card::after {
	border-right: 1px solid #626262;
	border-top: 1px solid #626262;
	content: "";
	height: 10px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 10px;
	z-index: 2; /* ← コンテンツよりもさらに上 */
}

/* 画像系はそのまま（必要なら display:block だけ保険） */

.p-contact__card .p-contact__img img {
	display: block;
}

/* 既存のサイズ指定はそのまま */

.p-contact__card .p-contact__img.p-contact__img--chatwork {
	margin: 0 auto;
	width: 48.5829959514%;
}

.p-contact__card .p-contact__img.p-contact__img--line {
	margin: 0 auto;
	width: 14.5748987854%;
}

.p-contact__card .p-contact__img.p-contact__img--chatwork img {
	-o-object-fit: contain;
	aspect-ratio: 240/72;
	object-fit: contain;
}

.p-contact__card .p-contact__img.p-contact__img--line img {
	-o-object-fit: contain;
	aspect-ratio: 1/1;
	object-fit: contain;
}

.p-contact__desc {
	color: #626262;
	font-size: 1rem;
	font-weight: 500;
	margin-top: 0.75rem;
}

:root {
	--gold-grad: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
}

/* ===== Section base ===== */

.p-contact-form {
	background: #0f1113;
	color: #fff;
	padding: max(56px, min(8vw, 120px)) 0;
	width: 100%;
}

.p-contact-form__form {
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
}

.p-contact-form__row {
	margin-top: 2rem;
}

.p-contact-form__row:first-of-type {
	margin-top: 0;
}

.p-contact-form__label {
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin: 0 0 10px;
}

.p-contact-form__req {
	color: #ff7a7a;
	margin-left: 4px;
}

/* ===== Inputs ===== */

.p-contact-form input.wpcf7-text,
.p-contact-form input.wpcf7-email,
.p-contact-form input.wpcf7-tel,
.p-contact-form textarea.wpcf7-textarea {
	background: #fff;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	color: #111;
	display: block;
	font-size: 16px;
	line-height: 1.6;
	width: 100%;
}

.p-contact-form input.wpcf7-text,
.p-contact-form input.wpcf7-email,
.p-contact-form input.wpcf7-tel {
	height: 46px;
	padding: 0 14px;
}

.p-contact-form textarea.wpcf7-textarea {
	background: #efefef;
	min-height: 240px;
	padding: 14px;
}

.p-contact-form input:focus-visible,
.p-contact-form textarea:focus-visible {
	outline: 2px solid #ccaf5c;
	outline-offset: 0;
}

/* ===== 「ラジオ風」(CF7 use_label_element ＆ exclusive 対応) ===== */

/* 1) 並びと余白 */

.p-contact-form__row--checks .wpcf7-form-control {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.p-contact-form .wpcf7-list-item {
	margin: 0;
}

/* 2) 入力本体は完全に視覚外へ（スペースを残さない） */

.p-contact-form .wpcf7-list-item input[type=checkbox],
.p-contact-form .wpcf7-list-item input[type=radio] {
	left: -9999px; /* ← これで崩れの原因だった“余白”を消す */
	position: absolute;
}

/* 3) ラベルで見た目を作る（□と✓） */

.p-contact-form .wpcf7-list-item label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5em;
	line-height: 1.2;
	padding-left: 28px;
	position: relative;
}

.p-contact-form .wpcf7-list-item label::before {
	background: #fff;
	border: 1.5px solid #fff;
	content: "";
	height: 18px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
}

.p-contact-form .wpcf7-list-item input:checked + .wpcf7-list-item-label::after {
	border: 3px solid #0f1113;
	border-right: none;
	border-top: none;
	content: "";
	height: 6px;
	left: 4px;
	position: absolute;
	top: 50%;
	transform: translateY(-60%) rotate(-45deg);
	width: 10px;
}

/* ===== Submit（通常=金グラデ／hover=黒塗りフェード＋金文字＆枠） ===== */

.p-contact-form .wpcf7-submit {
	background: linear-gradient(#0f1113, #0f1113) 0 0/0% 100% no-repeat, linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background: linear-gradient(#0f1113, #0f1113) 0 0/0% 100% no-repeat, var(--gold-grad);
	border: 2px solid transparent;
	border-radius: 0;
	color: #0f1113;
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
	letter-spacing: 0.08em;
	min-width: 220px;
	padding: 14px 28px;
	transition: background-size 0.35s ease, color 0.3s ease, border-color 0.3s ease;
}

.p-contact-form .wpcf7-submit:focus-visible {
	background-size: 100% 100%, auto;
	border-color: #c3a355;
	color: #c3a355;
	outline: 2px solid #c3a355;
	outline-offset: 2px;
}

/* 行間 */

.p-contact-form .wpcf7-form p {
	margin: 0 0 20px;
}

/* 初期状態：CF7のエラー/結果ボックスは見せない */

.p-contact-form .wpcf7-not-valid-tip,
.p-contact-form .wpcf7-response-output {
	display: none;
}

/* 送信アクション後（.cf7-triedが付与されたら）だけ表示 */

.p-contact-form .wpcf7.cf7-tried .wpcf7-not-valid-tip {
	display: block;
}

.wpcf7-spinner {
	display: none;
}

/* Contact Form 7：送信に成功したときだけメッセージを非表示にする（サンクスページが設置されているため）
『display: none;』だとリダイレクトされないので注意。 */

.wpcf7 form.sent .wpcf7-response-output {
	border: 0;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	visibility: hidden;
}

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

.p-contact {
	--gold-0: #e2cd85;
	--gold-1: #c3a355;
	--gold-2: #a88733;
	background-image: url("../../assets/images/common/contact-bg.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	overflow: hidden;
	padding: 50px 0;
	position: relative;
}

.p-contact__inner {
	margin: 0 auto;
	max-width: 900px;
	position: relative;
	text-align: center;
}

.p-contact__head {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.8;
}

.p-contact__btn {
	margin: 0;
}

/* ===== ゴールド枠のゴーストCTA（反転ホバー/位置は動かさない） ===== */

/* 反転フェード対応（位置不動） */

.c-cta-ghost {
	--gold-0: #e2cd85;
	--gold-1: #c3a355;
	--gold-2: #a88733;
	--panel: #0d1216;
	--dot: rgba(255, 255, 255, 0.08);
	-webkit-text-decoration: none;
	align-items: center;
	background: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) padding-box, linear-gradient(#0d1216, #0d1216) padding-box, linear-gradient(90deg, #e2cd85 0%, #c3a355 60%, #a88733 100%) border-box;
	background: radial-gradient(var(--dot) 1px, transparent 1px) padding-box, linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(90deg, var(--gold-0) 0%, var(--gold-1) 60%, var(--gold-2) 100%) border-box;
	background-size: 6px 6px, auto, auto; /* 枠と面（通常：面=黒／枠=金）+ ドット */
	border: 2px solid transparent;
	border-radius: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 12px rgba(0, 0, 0, 0.35);
	color: #fff;
	display: inline-flex;
	gap: max(14px, min(2vw, 22px));
	isolation: isolate;
	justify-content: center;
	margin-top: 1.75rem;
	max-width: 20.3125rem;
	padding: 20px;
	position: relative;
	text-decoration: none; /* テキスト色はフェード */
	transition: color 0.3s ease;
	width: 100%;
	z-index: 0;
}

/* テキスト・アイコンは前面に固定 */

.c-cta-ghost > * {
	position: relative;
	z-index: 1;
}

/* 反転背景のオーバーレイ（初期は透明） */

.c-cta-ghost::after { /* 反転：面=金／枠=黒（ドットも維持） */
	background: radial-gradient(var(--dot) 1px, transparent 1px) padding-box, linear-gradient(90deg, var(--gold-0) 0%, var(--gold-1) 60%, var(--gold-2) 100%) padding-box, linear-gradient(var(--panel), var(--panel)) border-box;
	background-size: 6px 6px, auto, auto;
	border: 2px solid transparent;
	border-radius: 0;
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.3s ease; /* ← ここが“滑らかさ”の肝 */
	z-index: 0; /* 文字の背面 */
}

/* hover：背景はフェード、文字色だけを黒へ */

.c-cta-ghost__sub {
	align-items: center;
	display: inline-flex;
}

.c-cta-ghost__sub ruby {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
}

.c-cta-ghost__sub rt {
	display: none;
}

/* 「>」は currentColor で反転連動 */

.c-cta-ghost__arrow {
	height: 6px;
	position: absolute;
	right: 15px;
	width: 18px;
}

.c-cta-ghost__arrow::before,
.c-cta-ghost__arrow::after {
	background: currentColor;
	content: "";
	height: 2px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	transform-origin: right center;
	width: 14px;
}

.c-cta-ghost__arrow::before {
	top: 2px;
	transform: rotate(45deg);
}

.c-cta-ghost__arrow::after {
	bottom: 2px;
	transform: rotate(-45deg);
}

.c-cta-ghost__label {
	font-family: "Barlow", sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* 上にのる暗幕は z-index:0、本文は z-index:1 で必ず前面に */

.p-contact::before {
	z-index: 0;
}

.p-contact__inner {
	position: relative;
	z-index: 1;
}

/* =========================
   Flow section（no-nesting except MQ）
   ========================= */

.p-flow {
	--gold: #c3a355;
	--text: #fff;
	--body: #dfe3e7;
	background: #161617; /* パディングは .p-works と同じ書き方に揃える */
	padding: 60px 0 100px;
}

.p-flow__wrap {
	margin-top: 3.125rem;
}

.p-flow__wrap .p-flow__item:not(:first-child) {
	margin-top: 3.125rem;
}

/* アイテム：SPは縦積み / md以上で2カラム */

.p-flow__item {
	grid-gap: clamp(1.875rem, -5rem + 8.33vw, 2.5rem);
	display: grid;
	gap: clamp(1.875rem, -5rem + 8.33vw, 2.5rem);
	grid-template-columns: 1fr;
}

/* 左：画像（角丸なし） */

.p-flow__media {
	border-radius: 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	margin: 0 auto;
	max-width: 350px;
	width: 100%;
}

.p-flow__media img {
	-o-object-fit: cover;
	aspect-ratio: 316/191;
	border-radius: 0;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* 右：本文 */

.p-flow__body {
	color: var(--text);
}

/* ========= Flow: STEP 見出しの修正 ========= */

/* グラデーション定義（figma: gold/400 相当） */

.p-flow {
	--gold-grad: linear-gradient(90deg, #a7801b 0%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
}

.p-flow__head {
	-moz-column-gap: max(14px, min(2vw, 22px));
	align-items: center;
	column-gap: max(14px, min(2vw, 22px));
}

.p-flow__head.p-flow__head-u-mobile {
	display: flex;
}

.p-flow__head.p-flow__head-u-desktop {
	display: none;
}

/* ← ここがポイント：縦積み + 右側に縦線（グラデ） */

.p-flow__step {
	align-items: center;
	border-left: 0; /* 旧実装の名残をリセット */
	display: flex;
	flex-direction: column; /* STEP の上に 01 を縦積み */
	min-width: 64px;
	padding-left: 0; /* 旧実装の名残をリセット */
	padding-right: 0.875rem; /* 縦線ぶんの余白 */
	position: relative;
}

/* STEP｜タイトルの「｜」をグラデで描画 */

.p-flow__step::after {
	background: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background: var(--gold-grad); /* グラデーション */
	content: "";
	height: 2.25rem; /* 線の長さ */
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px; /* 線の太さ */
}

/* “STEP” */

.p-flow__step-eyebrow {
	color: #e9ce87;
	font-family: "Barlow", sans-serif;
	font-size: 0.875rem;
	font-weight: 300;
	text-transform: uppercase;
}

/* “01” をテキストグラデーションに */

.p-flow__step-num {
	-webkit-background-clip: text;
	background: linear-gradient(100deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background: var(--gold-grad);
	background-clip: text;
	color: transparent; /* ここでグラデが文字色になる */
	font-family: "Barlow", sans-serif;
	font-size: max(22px, min(3.2vw, 28px));
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
}

/* タイトル */

.p-flow__title {
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.7;
	margin: 0;
}

/* 本文 */

.p-flow__text {
	color: var(--body);
}

.p-flow__text p {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.8;
	margin: 0;
}

/* Divider コンテナだけ。サイズ感はここで調整 */

.p-flow__arrow {
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.125rem;
	max-width: 3.125rem;
	width: 100%;
}

.p-flow__arrow img {
	-o-object-fit: contain;
	object-fit: contain;
}

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

.p-footer { /* ← グラデ色のトークンを用意（必要箇所のみ追加） */
	--gold-0: #e2cd85;
	--gold-1: #c3a355;
	--gold-2: #a88733;
	--gold-grad: linear-gradient(90deg, var(--gold-0) 0%, var(--gold-1) 60%, var(--gold-2) 100%);
	background: #161617;
	color: #fff;
	margin-left: 0;
	padding: 50px 25px 20px;
}

/* 内側バー：中央寄せ + 2カラム（ロゴ / ナビ） */

.p-footer__bar {
	margin: 0 auto;
	max-width: 59.375rem;
	width: 100%;
}

.p-footer__wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 3rem;
	margin: 0 auto;
	max-width: 59.375rem;
	padding: 3rem 0;
	width: 100%;
}

/* ロゴ（テキスト無し／マークのみ） */

.p-footer__brand {
	-webkit-text-decoration: none;
	align-items: center;
	display: inline-flex;
	text-decoration: none;
	transition: opacity 0.3s;
}

.p-footer__brandMark {
	-o-object-fit: contain;
	aspect-ratio: 78/80;
	display: block;
	object-fit: contain;
	width: 78px;
}

.p-footer__nav {
	justify-self: end;
}

.p-footer-nav__items {
	grid-gap: 2rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(1, 1fr);
}

.p-footer-nav__item {
	list-style: none;
}

.p-footer-nav__link {
	grid-row-gap: 6px;
	-webkit-text-decoration: none;
	color: #fff;
	color: #fff;
	display: grid;
	font-family: "Montserrat", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.25;
	row-gap: 6px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}

.p-footer-nav__label {
	font-family: "Barlow", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: color 0.3s ease, background 0.3s ease, -webkit-text-fill-color 0.25s ease;
	transition: all 0.3s;
}

.p-footer-nav__sub {
	display: block;
	font-size: 12px;
	font-size: 10px;
	font-weight: 500;
	transition: color 0.3s ease, background 0.3s ease, -webkit-text-fill-color 0.25s ease;
	transition: all 0.3s;
}

/* ===== ここから：ホバー時に金色へ ===== */

/* グラデ対応環境では金グラデ文字に切替（文字自体にグラデを当てる） */

/* ===== ここまで：ホバー色変更 ===== */

.p-footer__rule {
	background: rgba(255, 255, 255, 0.28);
	border: 0;
	grid-column: 1/-1;
	height: 1px;
	margin: 18px 0 0;
}

.p-footer__copyright {
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	margin: 10px auto 0;
	max-width: 1120px;
	text-align: center;
}

.p-form {
	letter-spacing: 0.05em;
}

.p-form__radio {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	margin-top: 0.3125rem;
}

.p-form dl:not(:first-child) {
	margin-top: 1.875rem;
}

.p-form__item dt {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 2;
}

.p-form__item dt span {
	color: #391E88;
	font-size: 0.75rem;
	margin-left: 0.625rem;
}

.p-form__item dt span.p-form__tel-info {
	color: #333333;
	font-size: 0.75rem;
	margin-left: 0;
}

.p-form__btn {
	margin-top: 3.125rem;
	text-align: center;
}

.p-header {
	background-color: transparent;
	position: fixed;
	transition: 0.3s;
	width: 100%;
	z-index: 1000;
}

.p-header.is-color {
	background-color: #21054d;
}

.p-header__inner {
	align-items: center;
	display: flex;
	height: inherit;
	justify-content: space-between;
	padding: 0 1.5625rem; /* ← 上下0 / 左右のみ */
}

.p-header__pc-nav {
	display: none;
}

.p-header__logo {
	display: none;
}

.p-header__logoLink {
	display: block;
	transition: all 0.3s;
}

.p-mv {
	height: 100vh;
	max-height: 600px;
	min-height: 400px;
	overflow: hidden;
	position: relative;
}

:root {
	--mv-ref-w: 1108; /* 基準幅 */
	--mv-ref-h: 900; /* 基準高 */
	--mv-copy-left: 108; /* 基準での left(px) */
	--mv-copy-bottom: 250; /* 基準での bottom(px) */
}

.p-mv__slider {
	opacity: 0.5;
	transform: scale(1.2);
}

.p-mv__slider,
.p-mv__slider .swiper-wrapper,
.p-mv__slider .swiper-slide {
	height: 100%;
}

.p-mv__slider img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
}

.p-mv__copy {
	bottom: calc(100% * 250 / 900);
	bottom: calc(100% * var(--mv-copy-bottom) / var(--mv-ref-h));
	color: #fff;
	left: calc(100% * 108 / 1108);
	left: calc(100% * var(--mv-copy-left) / var(--mv-ref-w));
	max-width: 560px;
	position: absolute;
	z-index: 2;
}

.p-mv__subtitle {
	font-size: 0.875rem;
	font-weight: 400;
}

.p-mv__title-wrapper {
	margin-top: 0.5rem;
}

.p-mv__title {
	font-size: 1.25rem;
	font-weight: 500;
}

body.is-loading .p-mv__subtitle,
body.is-loading .p-mv__title-a,
body.is-loading .p-mv__title-b,
body.is-loading .js-mv-fade-op {
	opacity: 0;
}

/* ===== Marquee（金色グラデの無限スクロール） ===== */

.p-mv__marquee { /* 端のフェード（不要なら削除OK） */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	bottom: 3.125rem;
	height: max(56px, min(10vw, 120px));
	left: 0;
	mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 2;
}

.p-mv__marquee::before,
.p-mv__marquee::after { /* フォールバック（古いブラウザ用の単色） */
	color: #d8b762;
	content: attr(data-text);
	display: inline-block;
	font-size: max(32px, min(8vw, 100px));
	font-weight: 700;
	left: 0;
	letter-spacing: 0.02em;
	line-height: max(56px, min(10vw, 120px));
	position: absolute;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	top: 0;
	white-space: nowrap;
	will-change: transform;
}

/* 1本目：画面内 → 左へ流れる */

.p-mv__marquee::before {
	animation: marquee-a 140s linear infinite;
}

/* 2本目：右外 → 画面内へ流れる */

.p-mv__marquee::after {
	animation: marquee-b 140s linear infinite;
}

/* キーフレーム（変数不使用で堅牢） */

/* ===== 金色グラデ（フォールバックの上から確実に上書き）===== */

/* ※このブロックはファイルの一番下付近に置くと安全です */

.p-mv__marquee::before,
.p-mv__marquee::after {
	color: transparent !important;
}

.p-mv__marquee::before,
.p-mv__marquee::after {
	-webkit-background-clip: text; /* Chrome/Safari */
	-webkit-text-fill-color: transparent; /* 既存colorを確実に打ち消す */
	background-clip: text; /* 仕様上はここも */
	background-image: linear-gradient(90deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	font-family: "Barlow", sans-serif;
	font-size: 3rem;
	font-weight: 100;
}

/* ===== My Stance（下部セクション）===== */

.p-mystance-bottom {
	color: #fff;
	padding: 3.125rem 0 6.25rem;
	position: relative;
}

.p-mystance-bottom__inner {
	margin: 0 auto;
	max-width: 33.75rem;
	padding: 0 0.9375rem;
}

.p-mystance-bottom__grid {
	align-items: flex-start;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}

/* 画像側（既存比率を踏襲・崩さない） */

.p-mystance-bottom__figure {
	background: #000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.875rem;
	max-width: 31.25rem;
	overflow: visible;
	position: relative;
	z-index: -1;
}

.p-mystance-bottom__figure img {
	-o-object-fit: cover;
	aspect-ratio: 3/2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* テキスト側 */

.p-mystance-bottom__eyebrow {
	color: #c3a355;
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.16em;
	margin-bottom: 8px;
}

.p-mystance-bottom__heading {
	font-family: "Noto Sans JP", sans-serif;
	font-size: max(20px, min(3.4vw, 26px));
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 10px;
}

.p-mystance-bottom__text {
	color: #fff;
	font-size: 0.875rem;
	line-height: 2.6;
	margin-top: 2.1875rem;
}

.p-mystance-bottom__text p + p {
	margin-top: 1.875rem;
}

/* ===== マルキー（金色グラデの無限スクロール） ===== */

.p-mystance-bottom__marquee { /* 端のフェード（必要なければ削除） */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	bottom: 0.625rem;
	height: 3.125rem;
	left: 0;
	mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 1; /* コンテンツより後ろにしない限りOK */
}

.p-mystance-bottom__marquee::before,
.p-mystance-bottom__marquee::after { /* フォールバック色（古い環境） */
	color: #d8b762;
	content: attr(data-text);
	display: inline-block;
	font-family: "Barlow", sans-serif;
	font-size: 2.25rem;
	font-weight: 100;
	left: 0;
	letter-spacing: 0.02em;
	line-height: 1;
	position: absolute;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	top: 0;
	white-space: nowrap; /* 文字列の間隔を少し空ける（重なり防止） */
	will-change: transform;
}

/* 流しアニメ */

.p-mystance-bottom__marquee::before {
	animation: mystance-marquee-a 140s linear infinite;
}

.p-mystance-bottom__marquee::after {
	animation: mystance-marquee-b 140s linear infinite;
}

/* 金色グラデで文字を塗る（フォールバックの上書き） */

.p-mystance-bottom__marquee::before,
.p-mystance-bottom__marquee::after {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-image: linear-gradient(90deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	color: transparent;
}

.p-news__items {
	margin-top: 2rem;
}

.p-news__item + .p-news__item {
	margin-top: 2.5rem;
}

.p-news-content__meta {
	align-items: center;
	display: flex;
	font-family: "Montserrat", sans-serif;
}

.p-news-content__date {
	color: #333;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
}

.p-news-content__category {
	background-color: #E8E8E8;
	border-radius: 50px;
	flex-shrink: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	line-height: 1;
	margin-left: 0.9375rem;
	padding: 0.25rem 1.125rem;
}

.p-news-content__text {
	font-size: 0.875rem;
}

.p-page-contact__text {
	font-size: 0.9375rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-align: center;
}

.p-page-contact__content {
	background-color: #F7F7F7;
	margin-top: 1.875rem;
	padding: 1.875rem;
}

/* ===== My Stance ===== */

.p-mystance {
	--gold-0: #e2cd85;
	--gold-1: #c3a355;
	--gold-2: #a88733;
	background: #161617;
	color: #fff;
	padding: max(56px, min(8vw, 120px)) 0 3.125rem;
	width: 100%;
}

.p-mystance__grid {
	align-items: start;
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	justify-content: space-between;
	margin-top: 50px;
	padding-bottom: 20px;
}

/* ブロック（テキスト側） */

.p-mystance__block {
	margin-top: 30px;
}

.p-mystance__blockHead {
	border-bottom: 1px solid #fff;
	font-family: "Barlow", sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	padding: 10px;
}

/* テキスト本文 */

.p-mystance__text {
	color: #fff;
	font-size: 0.875rem;
	line-height: 2.6;
	margin-top: 2.1875rem;
}

.p-mystance__text p:not(:first-child) {
	margin-top: 20px;
}

/* 画像 */

.p-mystance__figure {
	background: #000;
	margin: 0;
	max-width: 370px;
	overflow: hidden;
	overflow: visible;
	position: relative;
	width: 72.5490196078%;
}

.p-mystance__figure img {
	-o-object-fit: cover;
	aspect-ratio: 372/424;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.p-mystance__absolute {
	bottom: -7.0754716981%;
	content: "";
	position: absolute;
	right: -37.8378378378%;
	width: 56.2162162162%;
}

.p-page-recruit {
	background-image: url(../images/common/bg-recruit.png);
	background-repeat: repeat;
	padding-bottom: 6.875rem;
	padding-top: 2.5rem;
}

.p-page-recruit__title {
	color: #391E88;
	text-align: center;
}

.p-page-recruit__main {
	font-size: 3rem;
	letter-spacing: 0.01em;
	line-height: 1.1666666667;
}

.p-page-recruit__sub {
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	margin-top: 0.9375rem;
}

.p-page-recruit__text {
	font-size: 0.9375rem;
	line-height: 1.8;
	margin-top: 1.5625rem;
	text-align: center;
}

.p-page-recruit__image {
	margin-left: calc(50% - 50vw);
	margin-top: 2.5rem;
	width: 100vw;
}

.p-page-recruit__recruit {
	margin-top: 2.5rem;
}

.p-page-recruit__items {
	margin-top: 1.875rem;
}

.p-page-recruit__item {
	background-color: #FFFFFF;
	border: 1px solid #B8AED5;
	border-radius: 10px;
	padding: 1.875rem 1.25rem;
}

.p-page-recruit__item:not(:first-child) {
	margin-top: 2.5rem;
}

.p-page-recruit__job-title {
	color: #391E88;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
}

.p-page-recruit__lists {
	margin-top: 0.9375rem;
}

.p-page-recruit__apply {
	margin-top: 2.5rem;
	text-align: center;
}

.p-page-recruit__apply p {
	font-size: 0.75rem;
	margin-top: 0.3125rem;
}

.p-page-recruit__movies {
	margin-top: 5rem;
}

.p-page-recruit__movie {
	margin-top: 1.875rem;
	position: relative;
}

.p-page-recruit__movie::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.p-page-recruit__movie iframe {
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.p-page-service__item:not(:first-child) {
	margin-top: 3.125rem;
}

.p-page-service__image {
	aspect-ratio: 335/211;
}

.p-page-service__image img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-page-service__text-block {
	margin-top: 1.25rem;
}

.p-page-service__title {
	font-size: 1.125rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-align: center;
}

.p-page-service__text {
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin-top: 0.9375rem;
}

.p-recruit__inner.l-inner {
	padding: 0;
}

.p-recruit__text-block {
	margin-top: 1.875rem;
	text-align: center;
}

.p-recruit__text {
	font-size: 0.875rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1.79;
	text-align: center;
}

.p-recruit__img {
	position: relative;
}

.p-recruit__img::before {
	content: "";
	display: block;
	padding-top: 37.3333333%;
}

.p-recruit__img img {
	-o-object-fit: cover;
	height: 100%;
	left: 50%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.p-recruit__contents {
	background-color: #f7f7f7;
	padding-bottom: 3.125rem;
	padding-top: 3.75rem;
}

.p-recruit__btn {
	margin-top: 1.875rem;
	text-align: center;
}

:root {
	--gold-400: #c3a355; /* 画像のゴールド系に合わせた色 */
	--bg-dark: #111315; /* 背景のダーク色 */
	--text-main: #ffffff;
	--text-dim: rgba(255, 255, 255, 0.85);
	--container-w: 1100px; /* 最大幅。必要に応じて変更 */
	--side-pad: 24px; /* 横余白 */
}

/* セクション全体（背景ダーク） */

.p-section-header {
	color: #ffffff;
	color: var(--text-main);
}

/* 横幅制御 */

.p-section-header__inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	max-width: var(--container-w);
	padding-left: 24px;
	padding-left: var(--side-pad);
	padding-right: 24px;
	padding-right: var(--side-pad);
}

/* 英語の小見出し（MY STANCE） */

.p-section-header__eyebrow {
	color: #c3a355;
	color: var(--gold-400);
	font-family: "Barlow", sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* 日本語の大見出し */

.p-section-header__title {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.25;
	margin-top: 0.625rem;
}

/* リード文（任意） */

.p-section-header__lead {
	color: rgba(255, 255, 255, 0.85);
	color: var(--text-dim);
	font-family: "Barlow", sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 2;
	margin: 0;
}

.p-service {
	background-color: #161617;
	padding: 60px 0;
}

.p-service__container {
	margin: 0 auto;
	max-width: 1440px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.p-service__container::after {
	-o-object-fit: contain;
	aspect-ratio: 4/5;
	background-image: url("../../assets/images/common/service-bg.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	content: "";
	height: auto;
	object-fit: contain;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}

/* 2カラム：左右の高さをきっちり揃える（右が左のハニカム高に合わせて伸びる） */

.p-service__wrap {
	align-items: stretch; /* ← ここを stretch に */
	display: flex;
	flex-direction: column;
	gap: max(24px, min(3vw, 75px));
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1440px;
	position: relative;
	z-index: 2;
}

.p-service__wrap.l-inner {
	max-width: 550px;
}

.p-service__left {
	display: none;
	max-width: 513px;
	width: 100%;
}

.p-service__left.p-service__left--sp {
	display: block;
	margin: 0 auto;
	margin-top: 30px;
	max-width: 300px;
}

.p-service__honeycomb {
	aspect-ratio: 1/1;
	display: block;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
	margin: 0;
}

.p-service__honeycomb img {
	-o-object-fit: contain;
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.p-service__right {
	border-radius: 8px;
	color: var(--text);
	height: 100%; /* ← 伸ばす */
	min-height: 0; /* ← ここを 0 に */
	overflow: hidden;
	position: relative;
}

.p-service__text {
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.8;
	margin-top: 1.875rem;
}

/* ====== 共通の安全策（横はみ出し防止） ====== */

html,
body {
	overflow-x: hidden;
	width: 100%;
}

.l-wrapper {
	overflow-x: clip;
}

/* clip は scroll より安全 */

/* ====== サイドバーの基準幅（23vw～最大332px） ====== */

:root {
	--sidebar-w: max(0px, min(23vw, 20.75rem));
}

/* ====== サイドバー ====== */

.p-sidebar {
	display: none;
}

.p-sidebar::before {
	background: rgba(0, 0, 0, 0.66);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-sidebar__wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 11.5625rem;
	padding: 9.375rem 0 3.125rem;
	position: relative;
	z-index: 100;
}

.p-sidebar__brand a {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 78px;
	transition: all 0.3s;
	width: 100%;
}

.p-sidebar__brand img {
	-o-object-fit: contain;
	aspect-ratio: 78/81;
	display: block;
	object-fit: contain;
}

.p-sidebar .inner {
	min-height: 400px;
}

/* サイドバー内部（見た目が崩れないよう最小限の指定） */

.p-sidebar__list {
	margin-top: 3.4375rem;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.p-sidebar__item {
	color: #fff;
}

.p-sidebar__item:not(:first-child) {
	margin-top: 1.5625rem;
}

.p-sidebar__link {
	display: block;
	transition: opacity 0.3s;
}

.p-sidebar__list img {
	-o-object-fit: contain;
	aspect-ratio: 78/81;
	display: block;
	margin: 0 auto;
	max-width: 78px;
	object-fit: contain;
}

.p-sidebar__head {
	font-size: 2rem;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s;
}

.p-sidebar__text {
	font-size: 0.75rem;
	font-weight: 500;
	transition: all 0.3s;
}

/* ====== 本文（左にオフセット） ====== */

/* ====== CONTACTが見えたら（デスクトップのみ）全幅に戻す ====== */

/* p-service 内グリッドの子要素が広がらないよう保険 */

.p-service__wrap,
.p-service__left,
.p-service__right {
	min-width: 0;
}

/* 画像は常にコンテナに収める */

img {
	height: auto;
	max-width: 100%;
}

/* ================================
   Stance section (class-only selectors)
   ================================ */

.p-stance {
	background-color: #161617;
	color: #fff;
	padding: 3.75rem 0;
}

/* コンテナは .l-inner に任せる想定 */

.p-stance__inner.l-inner {
	padding: 0 25px;
}

/* レイアウト */

.p-stance__flex {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* 左カラム（見出し＋本文） */

/* 本文 */

.p-stance__text {
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.3;
	margin-top: 1.875rem;
}

/* CTA（左カラムの下に来る） */

.cta__wrap {
	margin-top: 1.5rem;
	text-align: center;
}

/* 右カラム（画像） */

.p-stance__right {
	display: none;
}

.p-stance__right img,
.p-stance__left-img img {
	-o-object-fit: cover;
	aspect-ratio: 1/1;
	display: block;
	object-fit: cover;
}

.p-stance__left-img {
	margin: 0 auto;
	margin-top: 30px;
	max-width: 350px;
}

.p-thanks {
	background-color: #161617;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 50px 0;
	text-align: center;
}

.p-thanks__title {
	color: #fff;
}

.p-thanks__lead {
	color: #fff;
	margin-top: 30px;
	text-align: left;
}

.p-thanks__lead-note {
	padding-left: 1em;
	text-indent: -1em;
}

.p-thanks__next {
	margin-top: 50px;
}

/* ==== Gold Gradient Tokens (gold/400 相当) ==== */

.p-work-head { /* 縦線の長さをインラインでも調整できるようにカスタムプロパティ化 */
	--divider-h: 1.75rem;
	align-items: center;
	color: #fff;
	font-family: "Barlow", sans-serif;
	gap: 0.625rem;
}

.p-work-head.p-work-head-u-desktop {
	display: none;
}

.p-work-head.p-work-head-u-mobile {
	display: flex;
}

.p-work-head__meta {
	align-items: center;
	display: flex;
	flex-direction: column;
	min-width: 2.75rem;
}

/* WORKS */

.p-work-head__eyebrow {
	color: #c3a355;
	font-size: 0.875rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

/* 01（文字グラデーション） */

.p-work-head__number {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; /* Safari 対応 */ /* 文字にグラデーションをのせる */
	background: linear-gradient(90deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%);
	background-clip: text;
	color: transparent;
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1;
}

/* 縦仕切り（グラデーション＋長さ可変） */

.p-work-head__divider {
	background: linear-gradient(180deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%); /* 縦方向に金グラデーション */
	border-radius: 999px; /* 端をなめらかに */
	display: inline-block;
	height: var(--divider-h); /* ここで長さ調整 */
	width: 1px; /* 1pxでもOK。2pxの方が金グラが出やすい */
}

/* タイトル */

.p-work-head__title {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	margin-left: 0.875rem;
}

/* ========== このファイルは .p-works 配下のみをスタイル。タイトル用クラスは触りません ========== */

.p-works {
	--gold-400: #c3a355;
	--panel-weak: #1b1e21;
	--text-dim: rgba(0, 0, 0, 0.72);
	background: #161617;
	padding: 60px 0;
}

.p-works .works-swiper-container {
	padding-top: 2.5rem;
}

/* ===== Swiper 本体のみをクリップ ===== */

.p-works .works-swiper {
	overflow: hidden; /* 右下の“映り込み”はここで防止 */
	position: relative;
}

.p-works .swiper-wrapper {
	align-items: stretch;
}

.p-works .works-swiper__pagination {
	margin-top: 16px;
	position: static;
}

.p-works .works-swiper__nav::before {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	display: inline-block;
	height: 0.7em;
	transform: rotate(-45deg);
	width: 0.7em;
}

.p-works .works-swiper__prev::before {
	transform: rotate(135deg);
}

/* ===== スライドレイアウト ===== */

.p-works .p-work {
	display: grid;
	grid-template-columns: 1fr;
}

/* ===== 左：ギャラリー ===== */

.p-works .p-work__left {
	padding-top: 1.25rem;
}

.p-works .p-work__pickup {
	border: 1px solid rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.p-works .p-work__pickupImg {
	-o-object-fit: cover;
	aspect-ratio: 16/10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* サムネ 3 枚（ul > li > img） */

.p-works .p-work__thumbs {
	grid-gap: 0.5625rem;
	display: grid;
	gap: 0.5625rem;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.25rem;
	padding: 0;
	width: 80%;
}

.p-works .p-work__thumb {
	border: 1px solid rgba(0, 0, 0, 0.15);
	cursor: pointer;
	outline: none;
	overflow: hidden;
	transition: opacity 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.p-works .p-work__thumb:focus-visible {
	box-shadow: 0 0 0 3px #c3a355 inset;
	box-shadow: 0 0 0 3px var(--gold-400) inset;
}

.p-works .p-work__thumb img {
	-o-object-fit: cover;
	aspect-ratio: 16/10;
	cursor: pointer;
	display: block;
	height: auto;
	object-fit: cover;
	opacity: 0.6;
	transition: all 0.3s;
	width: 100%;
}

/* 選択されているサムネイルにだけ見た目を足す */

.p-work__thumb img.is-active {
	opacity: 1;
	transform: scale(1.03);
	transition: all 0.3s;
}

/* はみ出しゼロのアクティブ枠 */

.p-works .p-work__thumb.is-active {
	border-color: rgba(0, 0, 0, 0.25);
	box-shadow: 0 0 0 3px #c3a355 inset, 0 0 0 2px rgba(0, 0, 0, 0.25) inset;
	box-shadow: 0 0 0 3px var(--gold-400) inset, 0 0 0 2px rgba(0, 0, 0, 0.25) inset;
}

.p-works .p-work__block {
	margin-top: 2.5rem;
}

.p-works .p-work__blockHead {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 700;
	gap: 0.5rem;
	line-height: 1.7;
	margin-bottom: 0.625rem;
}

.p-works .p-work__blockHead.p-work__blockHead-url {
	margin-bottom: 0;
}

.p-works .p-work__blockHead img {
	max-width: 20px;
	width: 100%;
}

.p-work__blockText {
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.8;
}

/* ========== Pickup（メイン画像）に外側エリアを付ける ==========
   使い方: <figure class="p-work__pickup p-work__pickup--framed">...</figure>
*/

.p-work__pickup--framed { /* 上書き用トークン */
	--frame-bg: #24292f; /* 外側エリアの色（メインは白が既定） */
	background: #24292f;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); /* 薄い縁取り */
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	position: relative;
	width: 90%;
}

/* 中の画像にも角丸を当てて段差を作る（ネストなしで指定） */

.p-work__pickup--framed .p-work__pickupImg {
	-o-object-fit: cover;
	aspect-ratio: 16/10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ========== サムネ一覧にも同様の“外側エリア”を付けたい場合 ==========
   使い方: <ul class="p-work__thumbs thumbs--framed"> ... </ul>
*/

.thumbs--framed {
	--thumb-frame-bg: #24292f;
}

/* li 自体にフレームを作る */

.thumbs--framed .p-work__thumb {
	background: var(--thumb-frame-bg);
	border: none; /* 枠線は消してフレーム感だけに */
	outline: none;
	overflow: hidden;
	padding: 6px 3px;
	transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* サムネ画像 */

.thumbs--framed .p-work__thumb img {
	-o-object-fit: cover;
	aspect-ratio: 16/10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.p-works {
	position: relative;
}

.p-work__cta {
	display: none;
	margin-top: 30px;
}

/* --- サムネ（そのまま） --- */

.thumbs--framed .p-work__thumb.is-active {
	box-shadow: 0 0 0 3px rgb(195, 163, 85) inset;
}

.p-work__link-wrapper {
	display: flex;
	flex-direction: column;
	margin-top: 1.875rem;
}

.p-work__link a {
	color: #c3a355;
	color: var(--gold-400);
	display: inline-block;
	font-family: "Barlow", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	transition: all 0.3s;
	word-break: break-all;
}

/* --- 基準は pickup（各スライド毎に固有の基準） --- */

.p-works .p-work__pickup {
	overflow: visible;
	position: relative;
}

/* 外へ出す量（px） */

:root {
	--works-nav-outset: -40px;
}

/* --- 矢印（背景なし） --- */

/* ※ .works-swiper__nav の定義は“1回だけ”。下記を他の同名定義で上書きしない */

.p-works .works-swiper__nav {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.p-works .works-swiper__nav {
	color: #fff;
	cursor: pointer;
	height: 1.625rem;
	padding: 0;
	position: absolute;
	top: clamp(27.5rem, 8.75rem + 80vw, 36.25rem); /* 440 ~ 550 | 375 ~ 550 */
	transition: transform 0.3s;
	width: 2rem;
	z-index: 5;
}

.p-works__inner.l-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 550px;
	padding-left: 1.875rem;
	padding-right: 1.875rem;
	width: 100%;
}

/* 矢印の基準を“矢印とスライダーを包む” l-inner にする */

.p-works .l-inner:last-of-type {
	position: relative;
}

/* 矢印は絶対配置。サイズは任意で固定（クリック領域の安定用） */

.works-swiper__nav {
	height: 44px;
	position: absolute;
	width: 44px;
	z-index: 5;
}

.p-works .works-swiper__prev {
	left: 0.625rem;
	transform: scaleX(-1);
}

.p-works .works-swiper__next {
	right: 0.625rem;
}

/* 擬似要素2本で「>」を描画 */

.p-works .works-swiper__nav::before,
.p-works .works-swiper__nav::after {
	background: currentColor;
	content: "";
	height: 3px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	transform-origin: center;
	width: 72%;
}

.p-works .works-swiper__nav::before {
	top: 11%;
	transform: rotate(45deg);
}

.p-works .works-swiper__nav::after {
	bottom: 18%;
	transform: rotate(-45deg);
}

.pc-nav__items {
	align-items: center;
	display: flex;
	gap: 1rem; /* お好みで */
	height: auto; /* ← ここを auto に */
	justify-content: center;
}

.pc-nav__item,
.pc-nav__item a {
	height: auto;
}

.pc-nav__item a {
	align-items: center;
	color: #fff;
	display: flex;
	font-family: "Barlow", sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	padding-left: 0.8125rem;
	padding-right: 0.75rem;
	text-transform: uppercase;
}

.pc-nav__item:first-child a {
	padding-left: 0;
}

.pc-nav__item:last-child a {
	padding-right: 0;
}

.pc-nav__button {
	display: none;
}

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

.c-cta { /* サイズ・見た目 */
	--h: 48px; /* 高さ（必要なら56px等に） */
	--px: 24px; /* 左右余白 */
	--radius: 9999px;
	--icon: 24px;
	--chev: 20px; /* gold stops */
	--gold-a: #a7801b;
	--gold-b: #ccaf5c;
	--gold-c: #ffefb5;
	--gold-d: #dbb956;
	--gold-e: #cca32f;
	-webkit-text-decoration: none;
	align-items: center; /* 内側=黒、外側=金グラデ枠 */
	background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(90deg, #a7801b 6%, #ccaf5c 22%, #ffefb5 45%, #dbb956 68%, #cca32f 100%) border-box;
	background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(90deg, var(--gold-a) 6%, var(--gold-b) 22%, var(--gold-c) 45%, var(--gold-d) 68%, var(--gold-e) 100%) border-box;
	border: 2px solid transparent;
	border-radius: 9999px;
	border-radius: var(--radius);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: #fff;
	display: inline-flex; /* ← 中央揃えに必須 */ /* 文字 */
	font-family: "Barlow", sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	height: 48px;
	height: var(--h);
	justify-content: center;
	letter-spacing: 0.01em;
	max-width: 100%;
	overflow: hidden; /* 反転レイヤーはみ出し防止 */
	padding: 8px 32px; /* 上下は0で高さに依存 */
	position: relative;
	text-decoration: none;
	transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
	width: 175px;
}

/* 反転用：内側を白で覆うレイヤー（opacityでフェード） */

.c-cta::before {
	background: #fff;
	border-radius: inherit;
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.3s ease;
	z-index: 0;
}

/* 右矢印：擬似要素 */

.c-cta::after {
	-webkit-mask-image: url(../../assets/images/common/icon-arrow.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	aspect-ratio: 1/1;
	background-color: currentColor;
	content: "";
	mask-image: url(../../assets/images/common/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	position: absolute;
	right: 10px;
	top: 55%;
	transform: translateY(-50%);
	transition: all 0.3s;
	width: 0.9375rem;
}

/* コンテンツは前面に */

.c-cta > * {
	position: relative;
	z-index: 1;
}

.c-cta__icon {
	flex: 0 0 auto;
	height: 13px;
	margin-right: 5px;
	transition: filter 0.3s ease;
	width: 14px;
}

.c-cta__label {
	font-family: "Barlow", sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
}

/* hover/focus：白黒反転（スムーズ）＋矢印スライド */

/* SPサイズ調整（任意） */

.sp-nav {
	-webkit-overflow-scrolling: touch;
	background-image: url(../../assets/images/common/drawer.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: 0;
	display: none;
	left: 0; /* 全体をスクロール可能に */
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 100px 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999;
}

.sp-nav::before {
	background: rgba(0, 0, 0, 0.66);
	bottom: 0;
	content: "";
	left: 0;
	position: fixed; /* ← absolute→fixedにして背景がスクロールしないように */
	right: 0;
	top: 0;
	z-index: 1;
}

.sp-nav.is-active {
	display: block;
}

/* ▼中央寄せをフレックスで実現（スクロールしても位置維持） */

.sp-nav__items {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 32px;
	justify-content: center; /* 高さが足りる場合は中央寄せ */
	min-height: 100svh; /* 全高を確保しつつ */
	padding: 40px 16px 80px; /* 上下余白を十分に取る */
	position: relative; /* ← absoluteをやめる */
	z-index: 1000;
}

.sp-nav__item {
	color: #fff;
	text-align: center;
}

.sp-nav__link {
	display: block;
	transition: all 0.3s;
}

.sp-nav__head {
	font-size: 1.75rem;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s;
}

.sp-nav__text {
	font-size: 0.75rem;
	font-weight: 500;
	transition: all 0.3s;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom: -1.5625rem;
	text-align: center;
}

.swiper-pagination-bullet {
	background: transparent;
	background-color: #fff;
	border-radius: 100vmax;
	height: 0.5rem;
	opacity: 1;
	width: 0.5rem;
}

.swiper-pagination-bullet-active {
	background-color: #b6a152;
}

.wp-pagenavi {
	display: flex;
	gap: 0.625rem;
	justify-content: center;
}

.wp-pagenavi a,
.wp-pagenavi span {
	align-items: center;
	background-color: #7633a4;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	font-size: 1.25rem;
	font-weight: bold;
	height: 2.8125rem;
	justify-content: center;
	transition: 0.3s ease;
	width: 2.8125rem;
}

.wp-pagenavi span.current {
	background-color: #f1ebf8;
	color: #4f31a5;
}

@media (any-hover: hover) {

.c-breadcrumb__items li a:hover {
	color: #ffefb5;
}

.cta-gold:hover {
	background: transparent;
	opacity: 1;
}

.cta-gold:hover::before {
	opacity: 0;
}

.cta-gold:hover::after {
	color: #b6a152;
	color: var(--cta-accent);
	right: 15px;
}

.cta-gold:hover .cta-gold__label {
	color: #b6a152;
	color: var(--cta-accent);
}

.p-contact__link:hover::before,
.p-contact__link:focus-visible::before {
	opacity: 1;
}

.p-contact__link:hover::before,
.p-contact__link:focus-visible::before {
	opacity: 1;
}

.c-cta-ghost:hover {
	color: var(--panel);
}

.c-cta-ghost:hover::after {
	opacity: 1;
}

.p-footer__brand:hover {
	opacity: 0.7;
}

.p-footer-nav__link:hover {
	opacity: 1;
}

.p-footer-nav__link:hover .p-footer-nav__label,
.p-footer-nav__link:hover .p-footer-nav__sub {
	color: var(--gold-1);
}

.p-sidebar__link:hover {
	opacity: 1;
}

.p-sidebar__link:hover .p-sidebar__head,
.p-sidebar__link:hover .p-sidebar__text {
	color: #c3a355;
}

.p-works .works-swiper__nav:hover {
	background: rgba(0, 0, 0, 0.1);
}

.p-works .p-work__thumb:hover {
	border-color: rgba(0, 0, 0, 0.25);
	opacity: 0.95;
}

.p-work__link a:hover {
	opacity: 0.6;
}

.c-cta:hover,
.c-cta:focus-visible {
	box-shadow: 0 6px 24px rgba(204, 163, 47, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: #111; /* 文字・矢印を黒へ */
	transform: translateY(-1px);
}

.c-cta:hover::before,
.c-cta:focus-visible::before {
	opacity: 1; /* 内側が白にフェード */
}

.c-cta:hover::after {
	transform: translateY(-50%) translateX(2px);
}

/* 白PNGを黒にしたい場合のみ有効化（黒やカラーPNGなら不要） */

.c-cta:hover .c-cta__icon,
.c-cta:focus-visible .c-cta__icon {
	filter: invert(1) brightness(0);
}

.sp-nav__link:hover {
	opacity: 1;
}

.sp-nav__link:hover .sp-nav__head,
.sp-nav__link:hover .sp-nav__text {
	color: #c3a355;
}

.wp-pagenavi a:hover {
	background-color: #f1ebf8;
	color: #4f31a5;
	opacity: 1;
}

}

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

.cta-gold,
.cta-gold::after {
	transition: none;
}

}

@media (hover: hover) and (pointer: fine) {

.p-contact-form__submit:hover {
	background-color: #161617; /* 白背景に切替（0.3s） */
	border-color: #c3a355; /* 金色の枠 */
	color: #c3a355; /* 金色文字 */
	opacity: 1;
}

.p-contact-form__submit:hover::before {
	opacity: 0; /* グラデ面を 0.3s でフェードアウト */
}

.p-contact-form .wpcf7-submit:hover {
	background-size: 100% 100%, auto;
	border-color: #c3a355;
	color: #c3a355;
}

.p-works .p-work__thumb img,
.thumbs--framed .p-work__thumb img {
	transform-origin: center;
	transition: transform 0.3s ease;
}

.p-works .p-work__thumb:hover img,
.thumbs--framed .p-work__thumb:hover img {
	transform: scale(1.06);
}

}

@media (hover: hover) {

.p-works .works-swiper__next:hover {
	transform: translateX(-2px);
}

.p-works .works-swiper__prev:hover {
	transform: translateX(2px) scaleX(-1);
}

}

@media screen and (min-width: 480px) {

.p-footer-nav__items {
	grid-template-columns: repeat(2, 1fr);
}

}

@media screen and (min-width: 600px) {

.p-contact__head {
	font-size: 1.25rem;
}

.c-cta-ghost {
	max-width: 400px;
}

.c-cta-ghost__sub ruby {
	font-size: 1rem;
}

.c-cta-ghost__label {
	font-size: 1.5rem;
}

.p-mv__subtitle {
	font-size: 1rem;
}

.p-mv__title {
	font-size: 1.75rem;
}

}

@media screen and (min-width: 768px) {

.u-desktop {
	display: block;
}

.u-mobile {
	display: none;
}

html {
	font-size: 1.7777777778vw;
}

a[href^="tel:"] {
	pointer-events: none;
}

a:hover {
	opacity: 0.8;
}

.l-archive-home {
	margin-top: 3.75rem;
}

.l-archive-works {
	margin-top: 4.375rem;
}

.l-company-info {
	margin-top: 8.75rem;
}

.l-company {
	margin-top: 2.5rem;
}

.l-contact {
	margin-top: 6.875rem;
}

.l-inner {
	max-width: 700px;
}

.l-page-contact {
	margin-bottom: 4.375rem;
	margin-top: 4.375rem;
}

.l-page-service {
	margin-top: 4.375rem;
}

.l-recruit {
	margin-top: 4.375rem;
}

.l-service {
	margin-top: 8.75rem;
}

.l-single-body {
	margin-top: 4.375rem;
}

.l-topNews {
	margin-top: 4.375rem;
}

.c-breadcrumb {
	padding-bottom: 0.625rem;
	padding-top: 0.625rem;
}

.c-breadcrumb__nav {
	padding-left: 3.75rem;
	padding-right: 3.75rem;
}

.c-breadcrumb__items li::before {
	margin-left: 0.9375rem;
	margin-right: 0.9375rem;
}

.c-hamburger {
	top: 2rem;
}

.hexagon__line {
	--side: 12.5rem;
	--apothem: calc(var(--side) * 0.866);
}

.c-loading__logo-wrapper {
	max-width: 12.5rem;
}

.c-page-link__prev,
.c-page-link__next {
	font-size: 0.875rem;
}

.c-section-header__jatitle {
	font-size: 0.875rem;
}

.c-section-header__engtitle {
	font-size: 2.25rem;
}

.c-section-header--left {
	text-align: left;
}

.c-section-header__subpage {
	font-size: 2rem;
}

.p-subtitle__top {
	font-size: 6.875rem;
}

.p-subtitle__bottom {
	font-size: 2rem;
	margin-top: -1.5625rem;
}

.p-404 {
	padding: 150px 0;
}

.p-company {
	background-image: url(../images/common/company-bg-pc.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 8.5rem;
}

.p-company--subPage {
	background-image: url(../images/common/page-company-bg-pc.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 81.25rem;
	padding-top: 8.5rem;
}

.p-company__message {
	display: flex;
	gap: 3.125rem;
	margin-top: 10rem;
}

.p-company__message-image {
	max-width: 27.8125rem;
	width: 100%;
}

.p-company__message-text {
	font-size: 0.9375rem;
	margin-top: 0;
	max-width: 37.8125rem;
	width: 100%;
}

.p-contact-form__label {
	font-size: 1rem;
}

.p-contact-form__input {
	height: 46px;
}

.p-contact__inner.p-contact__inner--1000 {
	max-width: 1082px;
	padding: 25px;
}

.p-contact__cards {
	gap: 32px;
	grid-template-columns: repeat(2, 1fr);
}

.p-contact__link {
	padding: 40px 0;
}

.p-contact {
	padding: 97px 0;
}

.p-contact__head {
	font-size: 1.75rem;
}

.c-cta-ghost {
	max-width: 42.1875rem;
	padding: 2.375rem 1.875rem;
}

.c-cta-ghost__sub::before {
	background-color: #fff;
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	right: -4.0625rem;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
	width: max(40px, min(12vw, 55px));
	z-index: 1;
}

.c-cta-ghost__sub::after {
	background-image: linear-gradient(90deg, #0d1216 0%, rgb(13, 18, 22) 100%);
	content: "";
	display: block;
	height: 1px;
	opacity: 0;
	position: absolute;
	right: -4.0625rem;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
	width: max(40px, min(12vw, 55px));
	z-index: 2;
}

.c-cta-ghost__label {
	font-size: 2rem;
}

.p-flow {
	padding: 88px 0 150px;
}

.p-flow__wrap {
	margin-top: 4.125rem;
}

.p-flow__wrap .p-flow__item:not(:first-child) {
	margin-top: 1.5rem;
}

.p-flow__item {
	grid-template-columns: 316fr 544fr;
}

.p-flow__media {
	margin: 0;
	max-width: none;
}

.p-flow__body {
	width: 100%;
}

.p-flow__head.p-flow__head-u-mobile {
	display: none;
}

.p-flow__head.p-flow__head-u-desktop {
	display: flex;
}

.p-flow__step::after {
	height: 2.625rem;
}

.p-flow__step-num {
	font-size: 1.75rem;
}

.p-flow__title {
	font-size: 1.5rem;
}

.p-flow__text {
	margin-top: 0.75rem;
}

.p-flow__arrow {
	margin-top: 1.5rem;
}

.p-footer {
	padding: 130px 25px 20px;
}

.p-footer__wrap {
	flex-direction: row;
	justify-content: space-between;
	padding: 0 5rem;
}

.p-footer-nav__items {
	gap: 2rem;
	grid-auto-columns: max-content;
	grid-auto-flow: column;
	grid-template-columns: initial;
}

.p-footer__rule {
	margin-top: 22px;
}

.p-form__radio {
	display: block;
	gap: 0;
}

.p-header__inner {
	padding: 0 2rem; /* ← 上下0 / 左右のみ */
}

.p-header__logo {
	display: block;
	left: 2rem;
	position: absolute;
	top: 1.25rem;
	width: 3.75rem;
}

.p-mv {
	max-height: 900px;
}

.p-mv__subtitle {
	font-size: 1.25rem;
}

.p-mv__title {
	font-size: 2.5rem;
}

.p-mv__marquee::before,
.p-mv__marquee::after {
	font-size: 5rem;
}

.p-mystance-bottom {
	padding: 9.375rem 0 12.8125rem;
}

.p-mystance-bottom__inner {
	max-width: 50rem;
}

.p-mystance-bottom__grid {
	flex-direction: row;
}

.p-mystance-bottom__figure {
	width: 45.4545454545%;
}

.p-mystance-bottom__figure img {
	aspect-ratio: 610/568;
}

.p-mystance-bottom__wrap {
	margin-left: -30px;
	width: 58.4415584416%;
}

.p-mystance-bottom__text {
	font-size: 1rem;
	margin-top: 3rem;
}

.p-mystance-bottom__marquee {
	bottom: 4.375rem;
	height: 4.5rem;
}

.p-mystance-bottom__marquee::before,
.p-mystance-bottom__marquee::after {
	font-size: 3rem;
}

.p-news__inner {
	display: flex;
	justify-content: center;
}

.p-news-content {
	display: flex;
}

.p-news__items {
	margin-left: 3.125rem;
	margin-top: 0;
}

.p-news__item + .p-news__item {
	margin-top: 0.9375rem;
}

.p-news-content__link {
	margin-left: 1.25rem;
	max-width: 43.75rem;
}

.p-page-contact__text {
	font-size: 1rem;
}

.p-page-contact__content {
	margin-top: 2.5rem;
	padding: 5.625rem;
}

.p-mystance {
	padding: max(56px, min(8vw, 120px)) 0 4.6875rem;
}

.p-mystance__grid {
	flex-direction: row;
	margin-top: 30px;
	padding-bottom: 10px;
}

.p-mystance__block {
	margin-top: 4.6875rem;
}

.p-mystance__text {
	font-size: 1rem;
}

.p-mystance__figure {
	width: 41.1111111111%;
}

.p-mystance__absolute {
	bottom: -42.4528301887%;
	right: -1.875rem;
}

.p-mystance__block {
	max-width: 500px;
	width: 55.5555555556%;
}

.p-page-recruit {
	padding-top: 7.25rem;
}

.p-page-recruit__main {
	font-size: 4.5rem;
}

.p-page-recruit__sub {
	font-size: 2rem;
}

.p-page-recruit__text {
	font-size: 1rem;
}

.p-page-recruit__recruit {
	margin-top: 4.375rem;
}

.p-page-recruit__job-title {
	font-size: 1.5rem;
}

.p-page-recruit__movies {
	margin-top: 8.75rem;
}

.p-page-service__item {
	display: flex;
	gap: 3.125rem;
}

.p-page-service__item:not(:first-child) {
	margin-top: 3.75rem;
}

.p-page-service__image {
	width: 40%;
}

.p-page-service__text-block {
	margin-top: 0;
	width: 55.4%;
}

.p-page-service__title {
	font-size: 1.5rem;
	text-align: left;
}

.p-page-service__text {
	font-size: 0.9375rem;
	margin-top: 1.25rem;
}

.p-recruit__inner.l-inner {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.p-recruit__wrapper {
	display: flex;
	flex-direction: row-reverse;
}

.p-recruit__contents {
	width: 40%;
}

.p-recruit__img {
	width: 60%;
}

.p-section-header__title {
	font-size: 2rem;
}

.p-service {
	padding: 88px 0;
}

.p-service__wrap {
	flex-direction: row;
	padding-top: calc(min(100vw, 1440px) * 67 / 720);
}

.p-service__wrap.l-inner {
	max-width: 700px;
}

.p-service__left {
	display: block;
}

.p-service__left.p-service__left--sp {
	display: none;
}

.p-service__right {
	padding-bottom: 60px;
	padding-top: 100px;
	width: 100%;
}

.p-service__text {
	margin-top: 2.8125rem;
}

.p-stance {
	padding: 10.6875rem 0 6.25rem;
}

.p-stance__text {
	margin-top: 3rem;
}

.p-stance__right img,
.p-stance__left-img img {
	aspect-ratio: 396/486;
}

.p-thanks {
	padding: 150px 0;
}

.p-thanks__lead {
	text-align: center;
}

.p-works {
	padding: 88px 0;
}

.p-works .works-swiper-container {
	padding-top: 1.5rem;
}

.p-works .p-work__thumbs {
	padding: 0 0.4375rem;
	width: 75%;
}

.p-work__pickup--framed {
	padding: 1.25rem 0.625rem;
	width: 100%;
}

.p-work__link-wrapper {
	margin-top: 3.125rem;
}

.p-works .works-swiper__nav {
	top: 50%;
}

.p-works__inner.l-inner {
	max-width: 700px;
	padding-left: 40px;
	padding-right: 40px;
}

.p-works .works-swiper__prev {
	left: 0;
	transform: translateY(-50%) scaleX(-1);
}

.p-works .works-swiper__next {
	right: 0;
	transform: translateY(-50%); /* 縦中央 */
}

.sp-nav__head {
	font-size: 2rem;
}

}

@media (min-width: 768px) {

.p-contact-form__label {
	font-size: 16px;
}

}

@media screen and (any-hover: hover) and (min-width: 768px) {

.c-cta-ghost:hover .c-cta-ghost__sub::after {
	opacity: 0;
}

.c-cta-ghost:hover .c-cta-ghost__sub::after {
	opacity: 1;
}

}

@media screen and (hover: hover) and (min-width: 768px) {

.p-works .works-swiper__next:hover {
	transform: translate(-2px, -50%);
}

.p-works .works-swiper__prev:hover {
	transform: translate(2px, -50%) scaleX(-1);
}

}

@media (min-width: 900px) {

html {
	font-size: 16px;
}

}

@media screen and (min-width: 1024px) {

.l-inner {
	max-width: 950px;
	padding-left: 25px;
	padding-right: 25px;
}

.p-sidebar {
	background-image: url(../../assets/images/common/drawer.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: max(0px, min(23vw, 20.75rem));
	width: var(--sidebar-w); /* ← 実幅は変数で統一 */
}

.l-main {
	margin-left: max(0px, min(23vw, 20.75rem));
	margin-left: var(--sidebar-w);
	min-width: 0; /* 念のためのはみ出し保険 */
	width: 100%;
}

.sidebar-off .l-main {
	margin-left: 0;
}

.sidebar-off .p-sidebar {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.p-footer {
	margin-left: max(0px, min(23vw, 20.75rem));
	margin-left: var(--sidebar-w);
	min-width: 0; /* グリッド/フレックスのはみ出し保険 */
}

.p-header__inner {
	justify-content: flex-end;
}

.p-header__drawer {
	display: none;
}

.p-header__pc-nav {
	display: block;
	position: absolute;
	right: 2rem;
	top: 1.5625rem;
}

.p-header__logo {
	display: none;
}

.p-mv__marquee::before,
.p-mv__marquee::after {
	font-size: 6.875rem;
}

.p-mystance-bottom__inner {
	max-width: 69.25rem;
	padding-left: 1.5625rem;
	padding-right: 1.5625rem;
}

.p-mystance-bottom__figure {
	margin: 4.375rem;
	margin-left: 0;
	margin-right: 0;
	max-width: 38.125rem;
	width: 60.7569721116%;
}

.p-mystance-bottom__wrap {
	margin-left: -70px;
	width: 46.2151394422%;
}

.p-mystance-bottom__text p + p {
	margin-top: 2.8125rem;
}

.p-mystance-bottom__marquee::before,
.p-mystance-bottom__marquee::after {
	font-size: 3.75rem;
}

.p-mystance__text p:not(:first-child) {
	margin-top: 1.875rem;
}

.p-service__container::after {
	aspect-ratio: 645/725;
	max-width: 645px;
}

.p-service__wrap.l-inner {
	max-width: 1010px;
}

.p-service__right {
	max-width: 366px;
	padding-bottom: 100px;
	padding-top: 180px;
}

.p-sidebar {
	background-image: url(../../assets/images/common/drawer.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	height: 100%;
	left: 0;
	min-height: 400px;
	position: fixed;
	top: 0;
	width: max(0px, min(23vw, 20.75rem));
	width: var(--sidebar-w);
	z-index: 10; /* ヘッダーの下、本文の上にならない */
}

.l-main {
	margin-left: max(0px, min(23vw, 20.75rem));
	margin-left: var(--sidebar-w);
	min-width: 0; /* グリッド/フレックスのはみ出し保険 */
}

.sidebar-off .l-main {
	margin-left: 0;
}

.sidebar-off .p-sidebar {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	visibility: hidden;
}

.p-stance__inner.l-inner {
	padding-left: 108px;
	padding-right: 68px;
}

.p-stance__flex {
	flex-direction: row;
	gap: 2.5rem;
	justify-content: space-between;
}

.p-stance__left {
	max-width: 460px;
	min-width: 330px;
}

.cta__wrap {
	margin: 3rem 0 0 0;
	text-align: left;
}

.p-stance__right {
	display: block;
	max-width: 24.875rem;
	width: 100%;
}

.p-stance__left-img {
	display: none;
}

.p-work-head {
	--divider-h: 2rem;
}

.p-work-head.p-work-head-u-desktop {
	display: flex;
}

.p-work-head.p-work-head-u-mobile {
	display: none;
}

.p-works .p-work__left {
	padding-top: 0;
}

.p-works .p-work__block {
	margin-top: 1.125rem;
}

.p-works__inner.l-inner {
	max-width: 950px;
	padding-left: 40px;
	padding-right: 40px;
}

.pc-nav__button {
	align-items: center;
	display: flex;
	height: 100%;
}

}

@media (min-width: 1024px) {

.p-works .p-work {
	gap: clamp(1.25rem, -3.958rem + 8.33vw, 2.5rem); /* 20 ~ 40 | 1000 ~ 1240 */
	grid-template-columns: 1.1fr 0.9fr;
}

}

@media screen and (min-width: 1440px) {

.p-mystance-bottom__inner {
	margin: 0 auto;
}

.p-mystance__absolute {
	right: -3.75rem;
}

}

@media (max-width: 480px) {

.c-cta {
	--h: 56px;
	width: 100%;
}

}

@media (max-width: 375px) {

html {
	font-size: 4.2666666667vw;
}

}

@keyframes mask {

0% {
	-webkit-mask-position: 200% 0%;
	mask-position: 200% 0%;
}

100% {
	-webkit-mask-position: 0% 0%;
	mask-position: 0% 0%;
}

}

@keyframes logo-draw {

from {
	stroke-dashoffset: 1000;
	stroke-dashoffset: var(--logo-stroke-length);
	opacity: 1; /* 最初から線は表示 */
}

to {
	stroke-dashoffset: 0;
	opacity: 1; /* ← 最後も線を残す */
}

}

@keyframes logo-fill {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@keyframes hexagon-line {

0% {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--apothem) * -1)) translateX(var(--slide-distance));
}

30% {
	animation-timing-function: ease-out;
	opacity: 1;
	transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--apothem) * -1)) translateX(0);
}

70% {
	animation-timing-function: cubic-bezier(0.7, 0, 1, 1);
	opacity: 1;
	transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--apothem) * -1)) translateX(0);
}

100% {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(calc(var(--angle) - 0deg)) translateY(calc(var(--apothem) * var(--disperse-multiplier) * -1)) translateX(0);
}

}

@keyframes marquee-a {

from {
	transform: translateX(0);
}

to {
	transform: translateX(-100%);
}

/* padding-rightぶんも含めて流れる */

}

@keyframes marquee-b {

from {
	transform: translateX(100%);
}

to {
	transform: translateX(0);
}

}

@keyframes mystance-marquee-a {

from {
	transform: translateX(0);
}

to {
	transform: translateX(-100%);
}

}

@keyframes mystance-marquee-b {

from {
	transform: translateX(100%);
}

to {
	transform: translateX(0);
}

}


/*# sourceMappingURL=styles.css.map */