/* ==========================================================================
   RAWCODE design — デザイン再現用カスタムCSS
   ========================================================================== */

:root {
	--rc-ink: #1f1e1c;
	--rc-ink-soft: #55534f;
	--rc-bg: #efedea;
	--rc-serif-ja: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", serif;
	--rc-serif-en: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

body {
	background-color: var(--rc-bg);
	color: var(--rc-ink);
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

.l-header {
	--the-color: var(--rc-ink);
}

.l-header.l-header--sticky-overlay-colored-lg:not([data-scrolled="true"]) {
	background-color: transparent;
}

.l-header .c-container {
	max-width: none;
	padding-right: clamp(20px, 3.2vw, 48px);
	padding-left: clamp(20px, 3.2vw, 48px);
}

.l-1row-header {
	padding-top: 18px;
	padding-bottom: 18px;
}

/* ロゴ */
.c-site-branding__title {
	line-height: 1;
}

.c-site-branding__title a {
	color: var(--rc-ink);
	text-decoration: none;
}

.c-site-branding__title a.rc-logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rc-logo__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	border: 1px solid var(--rc-ink);
	border-radius: 50%;
	font-family: var(--rc-serif-en);
	font-size: 24px;
	font-weight: 500;
	flex-shrink: 0;
}

.rc-logo__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.rc-logo__name {
	font-family: var(--rc-serif-en);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.rc-logo__sub {
	font-family: var(--rc-serif-en);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.34em;
}

/* グローバルナビ */
.p-global-nav .c-navbar__item > a {
	padding-right: 1.1em;
	padding-left: 1.1em;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	color: var(--rc-ink);
}

.p-global-nav .c-navbar__item > a:hover {
	opacity: 0.55;
}

/* ヘッダー右端のメールボタン */
.rc-mail-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background-color: var(--rc-ink);
	color: #fff;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.rc-mail-btn:hover {
	color: #fff;
	opacity: 0.75;
}

.rc-mail-btn::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background-color: #fff;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="1.5"/><path d="M3.5 6.5l8.5 6 8.5-6"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="1.5"/><path d="M3.5 6.5l8.5 6 8.5-6"/></svg>') center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   フロントページ：余白リセット
   -------------------------------------------------------------------------- */

.home.page .l-contents,
.home.page .l-contents__inner {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
}

.home.page .l-contents__main > *:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   共通：ボタン（Snow Monkey Blocks btn の ghost スタイルを上書き）
   -------------------------------------------------------------------------- */

.smb-btn-wrapper.rc-btn .smb-btn {
	--smb-btn--style--ghost--border-color: var(--rc-ink);
	--smb-btn--style--ghost--color: var(--rc-ink);
	--smb-btn--border-radius: 0;
	position: relative;
	padding: 17px 52px 17px 30px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.3em;
	background-color: rgba(255, 255, 255, 0.18);
	transition: background-color 0.3s ease;
}

.smb-btn-wrapper.rc-btn .smb-btn:hover {
	filter: none;
	background-color: rgba(255, 255, 255, 0.55);
}

/* ボタン右側の突き抜ける矢印 */
.rc-btn .smb-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -34px;
	inline-size: 70px;
	block-size: 1px;
	background-color: var(--rc-ink);
}

.rc-btn .smb-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -34px;
	inline-size: 13px;
	block-size: 1px;
	background-color: var(--rc-ink);
	transform: rotate(35deg);
	transform-origin: right bottom;
}

/* 白抜きバージョン（CONTACT セクション用） */
.smb-btn-wrapper.rc-btn--white .smb-btn {
	--smb-btn--style--ghost--border-color: #fff;
	--smb-btn--style--ghost--color: #fff;
	background-color: transparent;
}

.smb-btn-wrapper.rc-btn--white .smb-btn:hover {
	background-color: rgba(255, 255, 255, 0.18);
}

.rc-btn--white .smb-btn::after,
.rc-btn--white .smb-btn::before {
	background-color: #fff;
}

/* --------------------------------------------------------------------------
   共通：セクション見出し（SMB section）
   -------------------------------------------------------------------------- */

.rc-section .smb-section__subtitle {
	font-family: var(--rc-serif-en);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.34em;
	color: var(--rc-ink-soft);
}

.rc-section .smb-section__title {
	font-family: var(--rc-serif-ja);
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.7;
}

.rc-section .smb-section__body {
	font-size: 14px;
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: var(--rc-ink-soft);
}

/* --------------------------------------------------------------------------
   ヒーローセクション（SMB section-with-bgimage）
   -------------------------------------------------------------------------- */

.rc-hero.smb-section-with-bgimage {
	min-block-size: max(100svh, 660px);
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
}

.rc-hero .smb-section-with-bgimage__bgimage img {
	object-position: 62% 50%;
}

/* テキスト可読性のための左側グラデーション */
.rc-hero .smb-section-with-bgimage__bgimage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(239, 237, 234, 0.92) 0%,
		rgba(239, 237, 234, 0.55) 32%,
		rgba(239, 237, 234, 0) 58%
	);
}

.rc-hero .smb-section__inner {
	padding: 90px 0 170px;
}

/* 特徴リストの absolute 基準を .smb-section__inner にするため static に */
.rc-hero .c-container {
	position: static;
	max-width: none;
	padding-right: clamp(20px, 4.5vw, 64px);
	padding-left: clamp(20px, 4.5vw, 64px);
}

.rc-hero .smb-section__title {
	margin: 0;
	font-family: var(--rc-serif-ja);
	font-size: clamp(38px, 4.6vw, 62px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.08em;
	color: var(--rc-ink);
}

.rc-hero .smb-section__lede-wrapper {
	margin-top: 34px;
}

.rc-hero .smb-section__lede {
	font-size: 13px;
	line-height: 2.2;
	letter-spacing: 0.1em;
	color: var(--rc-ink-soft);
}

.rc-hero .smb-section__body {
	margin-top: 44px;
}

/* SCROLL インジケーター */
.rc-hero::before {
	content: "SCROLL";
	position: absolute;
	z-index: 2;
	right: clamp(16px, 2.4vw, 34px);
	bottom: 216px;
	font-size: 11px;
	letter-spacing: 0.32em;
	color: var(--rc-ink-soft);
	writing-mode: vertical-rl;
}

.rc-hero::after {
	content: "";
	position: absolute;
	z-index: 2;
	right: calc(clamp(16px, 2.4vw, 34px) + 0.5em - 1px);
	bottom: 150px;
	inline-size: 1px;
	block-size: 52px;
	background-color: var(--rc-ink-soft);
	animation: rc-scroll-line 2.2s ease-in-out infinite;
	transform-origin: top center;
}

@keyframes rc-scroll-line {
	0% { transform: scaleY(0); }
	45% { transform: scaleY(1); }
	100% { transform: scaleY(1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   ヒーロー下部：3つの特徴（SMB items）
   -------------------------------------------------------------------------- */

.rc-hero .rc-hero-features {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 26px clamp(20px, 4.5vw, 64px) 38px;
}

.rc-feature .smb-items__item__body {
	display: flex;
	align-items: center;
	gap: 16px;
}

.rc-feature .rc-feature__icon {
	flex-shrink: 0;
	margin: 0 !important;
	line-height: 1;
	color: var(--rc-ink);
}

/* Font Awesome のグリフ（i / JS変換後のsvg どちらも）を隠し、
   段落自体の背景としてデザイン通りの線画SVGを表示する */
.rc-feature__icon,
.rc-service-item__icon {
	inline-size: 40px;
	block-size: 40px;
	background: center / contain no-repeat;
}

.rc-feature__icon > i,
.rc-feature__icon > svg,
.rc-service-item__icon > i,
.rc-service-item__icon > svg {
	display: none;
}

.rc-feature__icon:has(.fa-camera-retro),
.rc-service-item__icon:has(.fa-camera-retro) {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="%231f1e1c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="9" width="26" height="18" rx="2"/><path d="M11 9l2.2-3.5h5.6L21 9"/><circle cx="16" cy="18" r="5"/><circle cx="25" cy="13" r="0.6" fill="%231f1e1c"/></svg>');
}

.rc-feature__icon:has(.fa-pen-ruler),
.rc-service-item__icon:has(.fa-pen-ruler) {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="%231f1e1c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4h16a1 1 0 0 1 1 1v22a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/><path d="M11 10h7M11 15h10M11 20h6"/><path d="M27.5 12.5l-7 7-2.5 1 1-2.5 7-7 1.5 1.5z" fill="%23ffffff"/></svg>');
}

.rc-feature__icon:has(.fa-laptop-code),
.rc-service-item__icon:has(.fa-laptop-code) {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="%231f1e1c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="20" height="16" rx="1.5"/><path d="M3 10h20"/><circle cx="6" cy="7.5" r="0.5" fill="%231f1e1c"/><circle cx="9" cy="7.5" r="0.5" fill="%231f1e1c"/><rect x="14" y="14" width="15" height="13" rx="1.5" fill="%23f4f3f1"/><path d="M14 18h15"/></svg>');
}

.rc-feature .rc-feature__text {
	margin: 0 !important;
	line-height: 1;
}

.rc-feature__en {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.24em;
	color: var(--rc-ink);
}

.rc-feature__ja {
	display: block;
	margin-top: 7px;
	font-size: 11.5px;
	letter-spacing: 0.08em;
	color: var(--rc-ink-soft);
}

/* --------------------------------------------------------------------------
   ABOUT（SMB section-break-the-grid）
   -------------------------------------------------------------------------- */

.rc-about .smb-section-break-the-grid__content {
	box-shadow: none;
	background-color: #fff !important;
}

/* --------------------------------------------------------------------------
   SERVICE（SMB items）
   -------------------------------------------------------------------------- */

.rc-service-item .smb-items__item--free > .smb-items__item__body {
	padding: 36px 28px;
	background-color: #fff;
	block-size: 100%;
}

.rc-service-item .rc-service-item__icon {
	margin: 0 0 22px;
	font-size: 34px;
	line-height: 1;
	color: var(--rc-ink);
}

.rc-service-item .rc-service-item__title {
	margin: 0 0 16px;
	padding-bottom: 0;
	border-bottom: none;
	font-family: var(--rc-serif-ja);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--rc-ink);
}

.rc-service-item__en {
	display: block;
	margin-top: 8px;
	font-family: var(--rc-serif-en);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: var(--rc-ink-soft);
}

.rc-service-item .rc-service-item__text {
	margin: 0;
	font-size: 13px;
	line-height: 2;
}

/* --------------------------------------------------------------------------
   WORKS（SMB items-item-standard）
   -------------------------------------------------------------------------- */

.rc-work .smb-items__item__figure img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	inline-size: 100%;
}

.rc-work .smb-items__item__title {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--rc-ink);
}

.rc-work .smb-items__item__lede {
	margin-top: 6px;
	font-family: var(--rc-serif-en);
	font-size: 11px;
	letter-spacing: 0.26em;
	color: var(--rc-ink-soft);
}

/* VIEW ALL ボタン行 */
.rc-more {
	margin-top: 56px;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   FLOW（SMB step）
   -------------------------------------------------------------------------- */

.rc-flow .smb-step__item__title > span {
	font-family: var(--rc-serif-ja);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--rc-ink);
}

.rc-flow .smb-step__item__number {
	background-color: var(--rc-ink);
}

.rc-flow .smb-step__item__summary {
	font-size: 13px;
	line-height: 2;
}

/* --------------------------------------------------------------------------
   BLOG（SMB recent-posts）
   -------------------------------------------------------------------------- */

.rc-blog .smb-recent-posts {
	font-size: 14px;
}

/* カテゴリーバッジ（未分類）と著者アバターを非表示 */
.rc-blog .c-entry-summary__term {
	display: none;
}

.rc-blog .c-meta__item--author {
	display: none;
}

/* --------------------------------------------------------------------------
   CONTACT（SMB section-with-bgimage）
   -------------------------------------------------------------------------- */

.rc-contact .smb-section__inner {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* 可読性向上のためマスクを少し強める */
.rc-contact .smb-section-with-bgimage__bgimage img {
	opacity: 0.3 !important;
}

.rc-contact .smb-section__subtitle,
.rc-contact .smb-section__lede {
	color: rgba(255, 255, 255, 0.8);
}

.rc-contact .smb-section__title {
	color: #fff;
}

.rc-contact .smb-buttons {
	justify-content: center;
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   下層ページ
   -------------------------------------------------------------------------- */

/* オーバーレイヘッダーと重ならないように上部に余白を確保 */
body:not(.home) .l-contents {
	padding-top: 120px;
}

.c-breadcrumbs {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--rc-ink-soft);
}

.c-entry__title,
.c-page-header__title {
	font-family: var(--rc-serif-en);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--rc-ink);
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.rc-hero .rc-hero-features {
		padding-bottom: 28px;
	}

	.rc-hero .rc-hero-features .c-row {
		gap: 14px 0;
	}

	.rc-feature__ja {
		margin-top: 4px;
	}

	.rc-hero .smb-section__inner {
		padding-bottom: 300px;
	}

	.rc-hero.smb-section-with-bgimage {
		min-block-size: 760px;
	}

	.rc-hero::before,
	.rc-hero::after {
		display: none;
	}
}

@media (max-width: 639px) {
	body:not(.home) .l-contents {
		padding-top: 90px;
	}

	.rc-logo__mark {
		inline-size: 38px;
		block-size: 38px;
		font-size: 19px;
	}

	.rc-logo__name {
		font-size: 17px;
	}

	.rc-logo__sub {
		font-size: 11px;
	}

	.rc-hero .smb-section__title {
		font-size: 34px;
	}

	.rc-hero .smb-section__lede {
		font-size: 12px;
	}

	.rc-hero .smb-section-with-bgimage__bgimage::after {
		background: linear-gradient(
			90deg,
			rgba(239, 237, 234, 0.94) 0%,
			rgba(239, 237, 234, 0.65) 45%,
			rgba(239, 237, 234, 0.2) 100%
		);
	}
}