@charset "UTF-8";

/************************************
** PROJECTS（実績）詳細ページ
** デザイン: 04_PROJECTS_ver01.pdf 2ページ目
************************************/

body.single-projects .ast-container {
	max-width: 960px !important;
}
body.single-projects .e-con>.e-con-inner {
	max-width: 100%;
	padding: 0;
}
body.single-projects .elementor .e-flexbox-base {
	padding:  16px 0;
}

.p-project {
	--project-max: 100%;      /* コンテンツ幅 */
	--project-arrow: 44px;     /* 左右の矢印スペース */
	--project-rule: #d5d5d5;
	--project-label: #222;

	max-width: var(--project-max);
	margin-inline: auto;
	padding-block: 20px 0;
}

/* ------------------------------------------------
 * 見出し
 * ------------------------------------------------ */

.p-project__head {
	margin-bottom: clamp(16px, 2.4vw, 28px);
}

.p-project__eyebrow {
	margin: 0 0 2px;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.p-project__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.p-project__eyebrow a:hover,
.p-project__eyebrow a:focus-visible {
	text-decoration: underline;
}

.p-project__title {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ------------------------------------------------
 * スライダー
 * ------------------------------------------------ */

/* 矢印をスライダーの外側に出すための余白 */
.p-project__gallery {
	padding-inline: var(--project-arrow);
}

.p-project__main-wrap,
.p-project__thumbs-wrap {
	position: relative;
}

.p-project__main {
	overflow: hidden;
}

.p-project__figure {
	position: relative;
	margin: 0;
}

.p-project__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* 画像右下に重ねるキャプション */
.p-project__caption {
	position: absolute;
	right: 8px;
	bottom: 6px;
	max-width: calc(100% - 16px);
	color: #fff;
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: right;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* サムネイル */
.p-project__thumbs-wrap {
	margin-top: clamp(12px, 1.8vw, 20px);
}

.p-project__thumbs {
	overflow: hidden;
}

.p-project__thumbs .swiper-slide {
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.25s ease;
}

.p-project__thumbs .swiper-slide:hover,
.p-project__thumbs .swiper-slide-thumb-active {
	opacity: 1;
}

.p-project__thumb-image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ------------------------------------------------
 * 矢印
 * ------------------------------------------------ */

.p-project__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--project-arrow);
	height: var(--project-arrow);
	padding: 0;
	border: 0;
	background: none;
	color: var(--project-label);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.25s ease;
	box-shadow: none;
}
.p-project__arrow:hover {
	background-color: inherit;
	color: inherit;
}

.p-project__arrow--prev {
	left: calc(var(--project-arrow) * -1);
}

.p-project__arrow--next {
	right: calc(var(--project-arrow) * -1);
}

.p-project__chevron {
	display: block;
	width: 10px;
	height: 10px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}

.p-project__arrow--prev .p-project__chevron {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.p-project__arrow--next .p-project__chevron {
	transform: rotate(45deg);
	margin-right: 3px;
}

/* Swiper が付与する状態クラス */
.p-project__arrow.swiper-button-disabled {
	opacity: 0.25;
	cursor: default;
	pointer-events: none;
}

.p-project__arrow.swiper-button-lock {
	display: none;
}

/* ------------------------------------------------
 * 本文（LOCATION / YEAR / ブランド仕様などを手入力する領域）
 * デザインの区切り線と小さめの英字組みに合わせている
 * ------------------------------------------------ */

.p-project__content {
	margin-top: clamp(20px, 3vw, 32px);
	padding-top: clamp(12px, 1.6vw, 18px);
	border-top: 1px solid var(--project-rule);
	font-size: 11px;
	line-height: 2;
	letter-spacing: 0.08em;
	color: var(--project-label);
}

/* 本文内の見出し（SieMatic / Rimadesio などのブランド名を想定） */
.p-project__content h2,
.p-project__content h3 {
	margin: clamp(20px, 3vw, 32px) 0 clamp(8px, 1.2vw, 14px);
	font-size: 1.125rem;
	line-height: 1.2;
	letter-spacing: normal;
}

.p-project__content p {
	margin: 0;
}

/* Elementor で組む場合は上の文字設定を引き継がせない */
.p-project__content .elementor {
	font-size: initial;
	line-height: initial;
	letter-spacing: initial;
}

/* ------------------------------------------------
 * スマートフォン
 * ------------------------------------------------ */

@media (max-width: 600px) {

	.p-project {
		--project-arrow: 28px;
	}

	.p-project__chevron {
		width: 8px;
		height: 8px;
	}
}