/*
Theme Name: studio55_rdesign
Theme URI: https://studio55.co.jp/
Description: STUDIO 55「R.Design」サイト用テーマ（Arkhe 子テーマ）
Author: SiSoLa Design
Author URI: https://sisola.jp/
Template: arkhe
Version: 1.1.0
Text Domain: studio55_rdesign
*/

/* ==========================================================
   カラーベース：ニュートラルな黒基調 ＋ シャンパンゴールド(#B2A777)
   黒は青みを抜いた無彩色で2〜3段階の階調を持たせ、
   ゴールドはアクセント（ライン・番号・ボタン）に絞って使う
========================================================== */
:root {
	--ark-color--bg: #0d0d0e;
	--s55-bg-deep: #0a0a0b;
	--s55-panel: #141416;
	--s55-line: rgba(255, 255, 255, 0.08);
	--s55-accent: #b2a777;
	--s55-accent-light: #c9c093;
	--s55-accent-deep: #8a8059;
	--s55-text-sub: rgba(255, 255, 255, 0.78);

	/* 基本文字サイズを 16px → 17px に拡大（全体が連動して大きくなる） */
	--ark-font_size: min(17px, 4.4vw);
}

/* ブロックエディタのフォントサイズ（rem基準なので基本サイズ拡大とも連動） */
body {
	--wp--preset--font-size--small: 0.95rem;
	--wp--preset--font-size--large: 1.4rem;
	--wp--preset--font-size--xlarge: 1.8rem;
	--wp--preset--font-size--xxlarge: 2.6rem;
}

body {
	background-image: linear-gradient(180deg, #0f0f10 0%, #0a0a0b 100%);
	background-attachment: fixed;
}

/* ==========================================================
   ヘッダー
========================================================== */
/* 動画上でも白ロゴが見えるように、上から薄いスクリムを敷く */
.home .l-header {
	background: linear-gradient(180deg, rgba(9, 9, 10, 0.6), rgba(9, 9, 10, 0));
}

.c-headLogo img {
	transition: opacity 0.3s ease;
}
.c-headLogo:hover img {
	opacity: 0.7;
}
.c-headLogo:focus-visible {
	outline: 2px solid var(--s55-accent);
	outline-offset: 4px;
}

/* ==========================================================
   ヒーロー（トップの動画カバー）
========================================================== */
/* 動画読み込み前の下地も暗く */
.home .wp-block-cover.alignfull {
	background-color: var(--s55-bg-deep);
}

/* カバーの色被せ（20%）をニュートラルな暗色に */
.home .wp-block-cover .wp-block-cover__background.has-ark-main-background-color {
	background-color: var(--s55-bg-deep) !important;
}

/* 下端に向かうグラデーションでロゴ・コピーの可読性を確保 */
.home .wp-block-cover.alignfull .wp-block-cover__inner-container {
	position: relative;
	padding-bottom: 24px;
}
.home .wp-block-cover.alignfull .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	left: -100vw;
	right: -100vw;
	bottom: -24px;
	height: 320px;
	background: linear-gradient(180deg, rgba(9, 9, 10, 0), rgba(9, 9, 10, 0.75));
	z-index: -1;
	pointer-events: none;
}

/* キャッチコピー：中央揃え */
.home .wp-block-cover p.has-xlarge-font-size {
	margin-top: 1.2em;
	letter-spacing: 0.08em;
	font-weight: 400;
	text-align: center;
}

/* エントランスアニメーション（ロゴ→コピーの時間差フェードアップ） */
@media (prefers-reduced-motion: no-preference) {
	.home .wp-block-cover .wp-block-image,
	.home .wp-block-cover p.has-xlarge-font-size {
		opacity: 0;
		animation: s55FadeUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	}
	.home .wp-block-cover p.has-xlarge-font-size {
		animation-delay: 0.3s;
	}
}
@keyframes s55FadeUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================
   セクションの余白（呼吸感を持たせる）
========================================================== */
/* 英字キャプションで始まる各セクションの手前を大きく空ける */
.home .l-content p.has-small-font-size.has-text-align-center {
	margin-top: 5.5rem;
}
/* 帯セクション内（Contact など）のキャプションには適用しない */
.home .l-content .wp-block-group__inner-container p.has-small-font-size.has-text-align-center {
	margin-top: 0;
}
.home .l-content .wp-block-group.alignfull.has-background {
	margin-top: 2rem;
}
.home .l-content .ark-block-columns {
	margin-top: 3.2rem;
}
.home .l-content .wp-block-columns.has-ark-text-background-color {
	margin-top: 2.6rem;
}
/* 帯セクション（課題提起・Contact）の上下パディング */
.home .l-content .wp-block-group.alignfull.has-background > .wp-block-group__inner-container {
	padding-top: 4rem;
	padding-bottom: 6rem;
}

/* ==========================================================
   見出しまわり
========================================================== */
/* 英字の小見出し（Features of R.Design / Contact）
   ※ has-white-color の !important に勝つため !important 指定 */
.home .l-content p.has-small-font-size.has-text-align-center {
	color: var(--s55-accent-light) !important;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	font-weight: 600;
}

/* セクションタイトル（R.Designの特徴 / 資料のご請求） */
.home .l-content p.has-xxlarge-font-size.has-text-align-center {
	letter-spacing: 0.05em;
	padding-bottom: 26px;
	position: relative;
}
.home .l-content p.has-xxlarge-font-size.has-text-align-center::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 2px;
	background: linear-gradient(90deg, rgba(178, 167, 119, 0), var(--s55-accent), rgba(178, 167, 119, 0));
}

/* UE5紹介の大見出し：このページの主役ステートメント。ゴールドで大きく見せる */
.home .l-content .wp-block-group:not(.alignfull) h2 {
	font-size: 2.05rem;
	line-height: 1.55;
	letter-spacing: 0.03em;
	color: var(--s55-accent) !important;
}

/* 本文の可読性（真っ白より少し落とすと目が疲れない） */
.home .l-content p.has-white-color:not(.has-xlarge-font-size):not(.has-xxlarge-font-size):not(.has-small-font-size):not(.has-large-font-size) {
	color: var(--s55-text-sub) !important;
	line-height: 2;
}

/* ==========================================================
   課題提起セクション（元 #383838 の帯）
========================================================== */
.home .l-content .wp-block-group.alignfull.has-background:not(.has-ark-text-background-color) {
	background: linear-gradient(180deg, #151516, #101012) !important;
	border-top: 1px solid var(--s55-line);
	border-bottom: 1px solid var(--s55-line);
}
/* 帯の見出しは縦線スタイルにして、UE5紹介の見出しと見せ方を変える */
.home .l-content .wp-block-group.alignfull p.has-large-font-size {
	font-size: 1.45rem;
	letter-spacing: 0.04em;
	line-height: 1.7;
	border-left: 3px solid var(--s55-accent);
	padding-left: 22px;
}

/* ==========================================================
   特徴 4カラム → カード化
========================================================== */
.home .ark-block-columns__inner {
	counter-reset: s55feature;
}
.home .ark-block-column {
	counter-increment: s55feature;
	background: linear-gradient(160deg, #161618, #111113);
	border: 1px solid var(--s55-line);
	border-radius: 12px;
	padding: 32px 30px 34px;
	transition:
		transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}
.home .ark-block-column:hover {
	transform: translateY(-6px);
	border-color: rgba(178, 167, 119, 0.5);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
}
.home .ark-block-column::before {
	content: "0" counter(s55feature);
	display: block;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--s55-accent);
	margin-bottom: 16px;
}
.home .ark-block-column h2 {
	font-size: 1.3rem;
	margin-top: 0.2em;
	letter-spacing: 0.04em;
}
.home .ark-block-column .wp-block-separator {
	border: none;
	width: 100%;
	max-width: none;
	height: 1px;
	background: linear-gradient(90deg, rgba(178, 167, 119, 0.6), rgba(255, 255, 255, 0.08)) !important;
	margin: 16px 0 18px;
}
.home .ark-block-column p {
	font-size: 1rem;
	line-height: 1.9;
}

/* ==========================================================
   機能紹介（テキスト＋デモ動画の2行）→ パネル化
========================================================== */
.home .l-content .wp-block-columns.has-ark-text-background-color {
	background: var(--s55-panel) !important;
	border: 1px solid var(--s55-line);
	border-radius: 14px;
	padding: 44px 46px;
	gap: 40px;
}
.home .l-content .wp-block-columns.has-ark-text-background-color h2 {
	font-size: 1.55rem;
	letter-spacing: 0.04em;
	margin-top: 0;
}
.home .l-content .wp-block-columns.has-ark-text-background-color h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-bottom: 18px;
	background: linear-gradient(90deg, var(--s55-accent), rgba(178, 167, 119, 0.25));
}
.home .l-content .wp-block-columns.has-ark-text-background-color .wp-block-video {
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
}
.home .l-content .wp-block-columns.has-ark-text-background-color .wp-block-video:hover {
	transform: scale(1.015);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}
.home .l-content .wp-block-columns.has-ark-text-background-color video {
	display: block;
	width: 100%;
	border-radius: 10px;
}

/* ==========================================================
   資料請求（Contact）セクション
========================================================== */
.home .l-content .wp-block-group.alignfull.has-ark-text-background-color {
	background: linear-gradient(180deg, #131314, #0c0c0d) !important;
	border-top: 1px solid var(--s55-line);
}

/* フォーム入力欄：ダークトーン＋フォーカスでゴールド */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 .wpcf7-captchar,
.wpcf7 select,
.wpcf7 textarea {
	background: #17171a;
	border: 1px solid #3c3c42;
	border-radius: 8px;
	color: #fff;
	padding: 13px 15px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.wpcf7 select option {
	background: #17171a;
	color: #fff;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--s55-accent);
	box-shadow: 0 0 0 3px rgba(178, 167, 119, 0.22);
}

/* 送信ボタン：ゴールド背景＋ダークテキスト（コントラスト確保） */
.wpcf7 .wpcf7-submit {
	background: linear-gradient(135deg, #c0b487, var(--s55-accent-deep));
	border: none;
	color: #17150e;
	font-weight: 600;
	letter-spacing: 0.14em;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.wpcf7 .wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -12px rgba(178, 167, 119, 0.45);
	filter: brightness(1.06);
}
.wpcf7 .wpcf7-submit:active {
	transform: translateY(0);
}

/* ==========================================================
   フッター
========================================================== */
.l-footer {
	background: #09090a;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================
   スクロール連動フェードイン（JSが .s55-reveal を付与）
========================================================== */
.s55-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.s55-reveal.s55-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.s55-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================
   モバイル調整
========================================================== */
@media (max-width: 767px) {
	body {
		--wp--preset--font-size--xlarge: 1.35rem;
		--wp--preset--font-size--xxlarge: 2rem;
	}
	.home .wp-block-cover.alignfull {
		min-height: 76vh !important;
	}
	.home .l-content p.has-small-font-size.has-text-align-center {
		margin-top: 3.5rem;
	}
	.home .l-content .wp-block-group.alignfull.has-background {
		margin-top: 3.5rem;
	}
	.home .l-content .wp-block-group.alignfull.has-background > .wp-block-group__inner-container {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}
	.home .l-content .wp-block-columns.has-ark-text-background-color {
		padding: 28px 24px;
		gap: 20px;
	}
	.home .ark-block-column {
		padding: 26px 24px 28px;
	}
	.home .l-content .wp-block-group:not(.alignfull) h2 {
		font-size: 1.5rem;
	}
	.home .l-content .wp-block-group.alignfull p.has-large-font-size {
		font-size: 1.2rem;
		padding-left: 16px;
	}
}