@charset "UTF-8";

/* =============================================================================
   WEB CREATION 固定ページ
   Figma: デザインコピー広場 / node 362:379（アートボード幅 1440 / コンテンツ幅 1200）

   デバイスモックアップの画面部分は Figma と同じく白で塗りつぶしている
   （実案件のスクリーンショット待ちのプレースホルダー）。
   ========================================================================== */

.wc {
	--wc-text: #333;
	--wc-muted: #8a8a8a;
	--wc-line: #8a8a8a;
	--wc-bg-soft: #f9f9f9;
	--wc-content: 1200px;

	color: var(--wc-text);
	font-family: "NotoSans", "Noto Sans JP", sans-serif;
	overflow-x: hidden;
}

.wc-inner {
	width: min(100% - 48px, var(--wc-content));
	margin-inline: auto;
}

/* ---------- 見出し（セクション共通） ---------- */
.wc-heading {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 52px;
	letter-spacing: 0.48px;
}

.wc-heading__desc {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0.24px;
}

/* =============================================================================
   ヒーロー
   ========================================================================== */
/* ヘッダーが position:fixed / height:150px なので、その分を必ず空ける */
.wc-hero {
	padding-top: 224px;
	padding-bottom: 80px;
}

.wc-hero__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}

.wc-hero__text {
	flex: 1 1 auto;
	min-width: 0;
}

.wc-hero__title {
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.wc-hero__subtitle {
	margin: 12px 0 0 1px;
	color: var(--wc-muted);
	font-size: 16px;
	line-height: 1.4;
}

.wc-hero__lead {
	margin: 87px 0 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 52px;
	letter-spacing: 0.48px;
}

.wc-hero__desc {
	max-width: 502px;
	margin: 34px 0 0;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0.24px;
}

.wc-hero__visual {
	position: relative;
	flex: 0 0 627px;
	width: 627px;
}

.wc-hero__visual img {
	display: block;
	width: 100%;
	height: auto;
}

/* 画面部分の白塗り（デザイン通り） */
.wc-hero__blank {
	position: absolute;
	background-color: #fff;
}

.wc-hero__blank--pc {
	top: 15.91%;   /* 56 / 352 */
	left: 36.52%;  /* 229 / 627 */
	width: 35.41%; /* 222 / 627 */
	height: 56.25%; /* 198 / 352 */
}

.wc-hero__blank--sp {
	top: 40.91%;   /* 144 / 352 */
	left: 17.7%;   /* 111 / 627 */
	width: 13.24%; /* 83 / 627 */
	height: 42.33%; /* 149 / 352 */
}

/* =============================================================================
   制作実例
   ========================================================================== */
.wc-works {
	padding: 68px 0 0;
}

.wc-works__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px 37px;
	margin: 104px 0 0;
	padding: 0;
	list-style: none;
}

.wc-works__item {
	display: flex;
	flex-direction: column;
}

.wc-works__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.wc-works__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 375 / 218;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.wc-works__link:hover .wc-works__thumb {
	opacity: 0.82;
}

/* モックアップ枠（画面が白塗りのプレースホルダー） */
.wc-works__thumb--mockup {
	position: relative;
	overflow: hidden;
}

.wc-works__thumb--mockup img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wc-works__blank {
	position: absolute;
	background-color: #fff;
}

.wc-works__blank--pc {
	top: 16.45%;   /* 35.87 / 218.019 */
	left: 36.17%;  /* 135.76 / 375.314 */
	width: 39.22%; /* 147.2 / 375.314 */
	height: 55.32%; /* 120.605 / 218.019 */
}

.wc-works__blank--sp {
	top: 40.57%;   /* 88.44 / 218.019 */
	left: 18.38%;  /* 68.97 / 375.314 */
	width: 13.51%; /* 50.716 / 375.314 */
	height: 42.55%; /* 92.773 / 218.019 */
}

.wc-works__title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 32px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 34px;
	letter-spacing: 0.36px;
}

.wc-works__mark {
	flex: 0 0 27px;
	width: 27px;
	height: 27px;
	margin-top: 4px;
	background: url("../img/web-creation/work-mark.svg") no-repeat center / contain;
}

.wc-works__more {
	display: grid;
	place-items: center;
	width: 100%;
	height: 60px;
	margin-top: 86px;
	background-color: var(--wc-text);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.wc-works__more:hover {
	opacity: 0.82;
	color: #fff;
}

/* =============================================================================
   よくあるご質問
   ========================================================================== */
.wc-faq {
	padding: 72px 0 0;
}

.wc-faq__list {
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1.34px solid var(--wc-line);
}

.wc-faq__item {
	border-bottom: 1.34px solid var(--wc-line);
}

.wc-faq__row {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 103px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
}

.wc-faq__row--static {
	cursor: default;
}

.wc-faq__row::-webkit-details-marker {
	display: none;
}

.wc-faq__label {
	flex: 0 0 154px;
	color: var(--wc-muted);
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0.36px;
}

.wc-faq__question {
	flex: 1 1 auto;
	color: #000;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0.36px;
}

.wc-faq__chevron {
	flex: 0 0 auto;
	width: 26px;
	height: 14px;
	background: url("../img/web-creation/accordion-chevron.svg") no-repeat center / contain;
	/* SVG は「>」なので 90 度回して「∨」にする */
	transform: rotate(90deg);
	transition: transform 0.25s ease;
}

.wc-faq__details[open] .wc-faq__chevron {
	transform: rotate(-90deg);
}

/* 答えは薄いグレーの面にのせて、設問の行と視覚的に切り分ける */
.wc-faq__answer {
	margin: 0 0 32px;
	padding: 24px 32px;
	border-radius: 5px;
	background-color: var(--wc-bg-soft);
	font-size: 16px;
	line-height: 26px;
	animation: wc-faq-open 0.3s ease;
}

/* 設問に対する結論。ここだけ太字にして先に目が留まるようにする */
.wc-faq__answer-lead {
	margin: 0;
	color: var(--wc-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
}

.wc-faq__answer-detail {
	margin: 12px 0 0;
}

@keyframes wc-faq-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-faq__answer {
		animation: none;
	}
}

/* =============================================================================
   CTA
   ========================================================================== */
.wc-cta {
	padding: 120px 0 130px;
}

.wc-cta__box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 386px;
	padding: 46px 24px;
	border-radius: 5px;
	background: url("../img/web-creation/cta-bg.svg") no-repeat center / 100% 100%;
	overflow: hidden;
}

.wc-cta__logo {
	position: absolute;
	top: 46px;
	left: 35px;
	width: 289.66px;
	height: auto;
	opacity: 0.1;
	transform: rotate(-6.27deg);
	pointer-events: none;
}

.wc-cta__content {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 599px;
	text-align: center;
}

.wc-cta__dots {
	display: flex;
	justify-content: center;
	gap: 35px;
	margin: 0 0 14px;
}

.wc-cta__dots span {
	width: 12px;
	height: 12px;
	background: url("../img/web-creation/cta-dot.svg") no-repeat center / contain;
}

.wc-cta__title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 52px;
	letter-spacing: 0.72px;
}

.wc-cta__lead {
	margin: 32px 0 0;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0.24px;
}

.wc-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: 599px;
	height: 60px;
	margin: 42px auto 0;
	background-color: var(--wc-text);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.wc-cta__button:hover {
	opacity: 0.82;
	color: #fff;
}

.wc-cta__button-icon {
	width: 24px;
	height: 22px;
	background: url("../img/web-creation/cta-send-icon.svg") no-repeat center / contain;
}

/* 右側のモニターイラスト */
.wc-cta__illust {
	position: absolute;
	top: 17.1%;
	right: 7.42%;
	width: 16.77%; /* 1199 に対する 100% - 75.81% - 7.42% */
	pointer-events: none;
}

.wc-cta__illust img {
	display: block;
	width: 100%;
	height: auto;
}

.wc-cta__illust-base {
	margin-top: 6%;
}

/* =============================================================================
   タブレット
   ========================================================================== */
@media screen and (max-width: 1100px) {
	.wc-hero {
		padding-top: 200px;
	}

	.wc-hero__inner {
		flex-direction: column;
		gap: 40px;
	}

	.wc-hero__lead {
		margin-top: 48px;
	}

	.wc-hero__visual {
		flex: 1 1 auto;
		width: 100%;
	}

	.wc-works__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 32px;
		margin-top: 64px;
	}

	.wc-works__title {
		font-size: 21px;
	}

	.wc-cta__illust {
		display: none;
	}
}

/* =============================================================================
   カルーセル / SP 専用パーツ

   PC は制作実例を 3 カラムのグリッドで並べるので、ナビゲーションごと隠す。
   「全ての事例を見る」の矢印も SP デザインにだけあるもの。
   ========================================================================== */
.wc-carousel__nav,
.wc-works__more-arrow {
	display: none;
}

/* =============================================================================
   スマートフォン
   Figma: デザインコピー広場 / node 532:642（アートボード幅 375 / コンテンツ幅 343）

   PC とは構成が変わる箇所が 2 つある。
   ・制作実例     … 3 カラムではなく 1 枚ずつのスライダー（矢印 + ドット）
   ・よくあるご質問 … ラベルと設問を 1 行ずつ積み、シェブロンを右端に出す
   ========================================================================== */
@media screen and (max-width: 767px) {
	/* ---------- 共通 ---------- */
	/* Figma: 375 幅に対して左右 16px → コンテンツ 343px */
	.wc-inner {
		width: calc(100% - 32px);
	}

	.wc-heading {
		font-size: 24px;
	}

	.wc-heading__desc {
		margin-top: 32px;
	}

	/* ---------- ヒーロー ---------- */
	.wc-hero {
		/* SP のヘッダーは height:12vh。Figma はヘッダー下端 95 → 見出し上端 132（＝37px） */
		padding-top: calc(12vh + 37px);
		/* 下の余白は .wc-works の padding-top に任せる（二重に空けない） */
		padding-bottom: 0;
	}

	.wc-hero__inner {
		gap: 0;
	}

	.wc-hero__title {
		font-size: 32px;
		line-height: 38px;
	}

	.wc-hero__subtitle {
		margin: 8px 0 0;
		font-size: 16px;
		line-height: 19px;
	}

	.wc-hero__lead {
		margin-top: 56px;
		font-size: 24px;
		line-height: 34px;
	}

	.wc-hero__desc {
		max-width: none;
		margin-top: 66px;
	}

	/* Figma: 343 × 177 の窓でモックアップを天地中央トリミング */
	.wc-hero__visual {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 56px;
	}

	.wc-hero__visual img {
		aspect-ratio: 343 / 177;
		object-fit: cover;
	}

	/* ---------- 制作実例 ---------- */
	.wc-works {
		padding-top: 56px;
	}

	.wc-works__list {
		gap: 16px;
		margin-top: 32px;
	}

	.wc-works__item {
		flex: 0 0 100%;
	}

	/* Figma: サムネイル 343 × 230 */
	.wc-works__thumb {
		aspect-ratio: 343 / 230;
	}

	/* Figma: サムネイル下端 1191 → 社名の行ボックス（52px）上端 1216。
	   2 行以上に折り返す社名で行間が開きすぎないよう、行は 34px にして
	   1 行のときだけ min-height で 52px の箱に見せる */
	.wc-works__title {
		align-items: center;
		gap: 10px;
		min-height: 52px;
		margin-top: 25px;
		font-size: 24px;
		line-height: 34px;
	}

	.wc-works__mark {
		flex-basis: 27px;
		width: 27px;
		height: 27px;
		margin-top: 0;
	}

	/* Figma: 343 × 40 の帯に「全ての事例を見る →」 */
	.wc-works__more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		height: 40px;
		margin-top: 32px;
		font-size: 20px;
		line-height: 34px;
	}

	.wc-works__more-arrow {
		display: block;
		flex: 0 0 19.25px;
		width: 19.25px;
		height: 19.25px;
		background: url("../img/web-creation/more-arrow.svg") no-repeat center / contain;
	}

	/* ---------- よくあるご質問 ---------- */
	.wc-faq {
		padding-top: 56px;
	}

	/* Figma は 1 行目の上に罫線がない（線は各行の下だけ） */
	.wc-faq__list {
		/* 設問の文字上端 1621 に合わせる（行の上余白 23px ぶんを引く） */
		margin-top: 9px;
		border-top: 0;
	}

	.wc-faq__item {
		border-bottom-width: 1px;
	}

	/* Figma: 行ピッチ 92px（上 23 + ラベル 30 + 設問 30 + 下 8 + 線 1） */
	.wc-faq__row {
		position: relative;
		flex-wrap: wrap;
		gap: 0;
		min-height: 0;
		padding: 23px 30px 8px 0;
	}

	.wc-faq__label {
		flex: 0 0 100%;
		font-size: 16px;
		line-height: 30px;
		letter-spacing: 0.24px;
	}

	.wc-faq__question {
		flex: 1 1 100%;
		font-size: 16px;
		line-height: 30px;
		letter-spacing: 0.24px;
	}

	/* 設問 1 行目（ラベル直下の 30px）の中央に合わせる。見た目 19×9 */
	.wc-faq__chevron {
		position: absolute;
		top: 59px;
		right: 0;
		width: 9px;
		height: 19px;
		margin-top: 0;
	}

	.wc-faq__answer {
		margin: 0 0 24px;
		padding: 16px;
	}

	.wc-faq__answer-lead {
		font-size: 16px;
		line-height: 26px;
	}

	/* ---------- CTA ---------- */
	.wc-cta {
		padding: 56px 0;
	}

	/* Figma: CTA の面だけ左右いっぱい（角丸なし） */
	.wc-cta .wc-inner {
		width: 100%;
	}

	.wc-cta__box {
		min-height: 0;
		padding: 40px 16px 32px;
		border-radius: 0;
		background: #f9f8f2;
	}

	/* SP は背景のロゴもモニターのイラストも置かない */
	.wc-cta__logo,
	.wc-cta__illust {
		display: none;
	}

	.wc-cta__content {
		width: 100%;
	}

	.wc-cta__dots {
		gap: 23px;
		margin-bottom: 4px;
	}

	.wc-cta__dots span {
		width: 8px;
		height: 8px;
	}

	.wc-cta__title {
		font-size: 32px;
		line-height: 32px;
		letter-spacing: 0.48px;
	}

	.wc-cta__lead {
		margin-top: 32px;
		text-align: left;
	}

	.wc-cta__button {
		gap: 48px;
		max-width: none;
		height: 60px;
		margin-top: 32px;
	}

	.wc-cta__button-icon {
		width: 23.333px;
		height: 23.333px;
	}

	/* =========================================================================
	   カルーセル（制作実例）
	   ====================================================================== */
	.wc-carousel__track {
		display: flex;
		/* タブレット側でグリッドにしているので明示的に戻す */
		flex-wrap: nowrap;
		/* PC 側の中央寄せのままだと、あふれた 1 枚目に到達できなくなる */
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.wc-carousel__track::-webkit-scrollbar {
		display: none;
	}

	.wc-carousel__track > * {
		box-sizing: border-box;
		min-width: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Figma: 矢印 → ドットの間隔が 27px。矢印のボタン箱（24px）のぶんを差し引く */
	.wc-carousel__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 19px;
		margin-top: 32px;
	}

	.wc-carousel__arrow {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: url("../img/web-creation/carousel-chevron.svg") no-repeat center / 11px 19px;
		cursor: pointer;
		transition: opacity 0.25s ease;
	}

	.wc-carousel__arrow--next {
		transform: rotate(180deg);
	}

	.wc-carousel__arrow[disabled] {
		opacity: 0.3;
		cursor: default;
	}

	.wc-carousel__dots {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wc-carousel__dots-item {
		display: flex;
	}

	/* デザインのドットは #eae9e1。現在位置だけ一段濃くする */
	.wc-carousel__dot {
		width: 9.714px;
		height: 9.714px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: #eae9e1;
		cursor: pointer;
		transition: background-color 0.25s ease;
	}

	.wc-carousel__dot.is-current {
		background-color: #b9b7ab;
	}
}