/*
Theme Name: Corporate LP
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: スピリード風コーポレートサイトの骨組みテーマ。会社理念・サービス・プロジェクトの流れ・お問い合わせフォームのセクション構成。Bootstrap 5.3 使用。
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: corporate-lp
Tags: one-column, custom-menu, custom-logo, featured-images, full-width-template, translation-ready
*/

/* ========================================
   基本・Bootstrap 補足
   パターンA: このファイルの基本スタイル＝PC表示。
   スマホだけ変えるときは末尾の @media (max-width: 767.98px) を編集する。
   ======================================== */
/* ナビのアンカーリンク（#philosophy など）をクリックしたときにスムーズにスクロール */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 210px; /* ヘッダー高さに合わせる（ロゴ高さ＋余白） */
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	padding-top: 210px; /* 固定ヘッダー高さ分、メインが隠れないように */
}

/* Bootstrap の primary 系カラーを緑へ統一 */
:root {
	--bs-primary: #2d7a2d;
	--bs-primary-rgb: 45, 122, 45;
	--bs-link-color: #2d7a2d;
	--bs-link-hover-color: #1e5c1e;
	/* ヒーロー背景（PC）。位置・高さはここを調整 */
	--hero-bg-size: cover;
	--hero-bg-position: center center;
	--hero-min-height: 90vh;
	--hero-header-offset: 210px;
}
/* サイト全体の背景を白に統一（Bootstrap の .bg-light を上書き） */
.bg-light {
	background-color: #fff !important;
}

/* ========================================
   セクション見出し（スピリード風デザイン）
   https://www.speelead.com/ 参考
   ======================================== */
.section-heading {
	position: relative;
	margin-bottom: 0.5rem;
	text-align: center;
}
.section-heading::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	background: #2d7a2d;
	margin: 0.75rem auto 0;
}
.section-head-en {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: #6c757d;
	font-weight: 600;
	margin-bottom: 0.5rem;
	line-height: 1.2;
}
.section-head-ja {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0;
	color: #212529;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

/* セクション導入文（中央揃え） */
.section-intro {
	font-size: 0.95rem;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.services-section .section-intro {
	margin-left: auto;
	margin-right: auto;
}

/* セクション共通パディング */
section[id] {
	padding: 4.5rem 0;
}

/* ========================================
   サービスカード（スピリード風：カード下にサービス種別ラベル）
   ======================================== */
.service-card {
	display: flex;
	flex-direction: column;
}
.service-card .card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto; /* カード高さいっぱいに伸ばす */
	min-height: 0;
}
.service-card .h5.card-title {
	text-align: center;
	min-height: 3.6em; /* 2行見出しでも3カードで高さを揃える */
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: keep-all;
	line-height: 1.5;
}
.service-card .card-text {
	text-align: left;
	min-height: 2.8em; /* 各説明文の段をカード間で揃える */
	margin-bottom: 0.5rem;
	word-break: keep-all;
}
.service-card .card-text:last-of-type {
	margin-bottom: 0;
}
.service-label {
	display: block;
	margin-top: auto; /* 本文量が違ってもラベル＋ボタンをカード下端で揃える */
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: #666;
	text-transform: uppercase;
}

/* 「詳細を見る」ボタンを緑基調に統一 */
.service-detail-btn {
	width: 100%;
	min-height: 2.25rem; /* btn-sm の見た目に合わせて高さを固定 */
	margin-top: 0.75rem !important;
	color: #2d7a2d;
	border-color: #2d7a2d;
}
.service-detail-btn:hover,
.service-detail-btn:focus {
	color: #ffffff;
	background-color: #2d7a2d;
	border-color: #2d7a2d;
}

/* お問い合わせフォーム送信ボタン（緑基調） */
.contact-submit-btn {
	background-color: #2d7a2d;
	border-color: #2d7a2d;
	color: #ffffff;
}
.contact-submit-btn:hover,
.contact-submit-btn:focus {
	background-color: #1e5c1e;
	border-color: #1e5c1e;
	color: #ffffff;
}

/* ========================================
   プロジェクトの流れ（STEP 表示・スピリード風）
   ======================================== */
.flow-step {
	text-align: center;
}
.flow-step h3 {
	font-size: 1.1rem;
	font-weight: 600;
	color: #333;
}
.flow-step p {
	word-break: keep-all;
}

/* ========================================
   お問い合わせセクション
   ======================================== */
/* サービス詳細エリア：SERVICE01/02/03 をブロック分けして表示 */
.service-detail-section .detail-placeholder {
	padding: 2rem 0;
	min-height: 120px;
}
.service-detail-section .detail-block {
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: none;
	border-radius: 0.375rem;
}
.service-detail-section .detail-block:last-child {
	margin-bottom: 0;
}
.service-detail-section.bg-light .detail-block {
	background: #fff;
}
/* ブロック1：SERVICE + 番号 と 小見出し + メイン見出し を横並び（spanで区切り） */
.detail-block--title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem 3rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
}
.detail-service-label {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.detail-service-word {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #2d7a2d;
}
.detail-service-num {
	display: block;
	font-size: 2.5rem;
	font-weight: 700;
	color: #2d7a2d;
	letter-spacing: 0.02em;
}
.detail-service-heading {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.detail-head-small {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #495057;
	margin-bottom: 0.25rem;
}
.detail-head-main {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: #212529;
	line-height: 1.35;
}
/* ブロック3：ここがPOINT! エリア（白背景に統一） */
.service-detail-section .detail-block--point {
	background: #fff;
}
.service-detail-section.bg-light .detail-block--point {
	background: #fff;
}
/* ブロック3：「ここがPOINT!」＋見出しを横並び、その下に説明 */
.detail-point-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
	text-align: left;
}
.detail-point-heading .section-head-en {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.35rem 1.25rem;
	line-height: 1.2;
}
.detail-point-heading .section-head-ja {
	display: inline-block;
	font-size: 1.125rem;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.contact-section {
	background-color: #fff;
}

.site-footer .letter-spacing {
	letter-spacing: 0.15em;
}

/* ========================================
   ヘッダー：範囲を広く（高さ・幅）
   ======================================== */
.site-header,
.site-header .navbar-brand-logo,
.site-header .custom-logo-link,
.site-header .custom-logo {
	transition: all 0.25s ease;
}

/* 下層ページ（お問い合わせ含む）：スクロール時にヘッダーを縮小 */
body:not(.home) .site-header.header-scrolled .navbar-brand-logo {
	height: 40px;
	max-height: 40px;
}
body:not(.home) .site-header.header-scrolled .custom-logo-link,
body:not(.home) .site-header.header-scrolled .custom-logo {
	height: 72px;
	max-height: 72px;
}

/* フロントページ：ヘッダーを透明にしてヒーロー背景と一体化（境目を見えなくする） */
body.home .site-header {
	background: transparent !important;
	border-bottom: none !important;
	box-shadow: none !important;
}
body.home .site-header .nav-link {
	color: rgba(255, 255, 255, 0.95);
}
body.home .site-header .nav-link:hover,
body.home .site-header .nav-link:focus {
	color: #fff;
}
body.home .site-header .navbar-brand,
body.home .site-header .navbar-brand:hover,
body.home .site-header .navbar-brand:focus {
	color: #fff;
}
body.home .site-header .navbar-brand-catchphrase {
	color: rgba(255, 255, 255, 0.85);
}
body.home .site-header .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.9);
}
body.home .site-header .navbar-toggler-icon {
	filter: brightness(0) invert(1);
}
/* フロントページ：スクロール時にヘッダーを緑で塗りつぶし、左上ロゴを少し小さく */
body.home .site-header.header-scrolled {
	background: #b8d4b0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.home .site-header.header-scrolled .navbar-brand-logo {
	height: 25px;
	max-height: 25px;
}
body.home .site-header.header-scrolled .custom-logo-link,
body.home .site-header.header-scrolled .custom-logo {
	height: 40px;
	max-height: 40px;
}
body.home .site-header.header-scrolled .nav-link {
	color: #2d7a2d;
}
body.home .site-header.header-scrolled .nav-link:hover,
body.home .site-header.header-scrolled .nav-link:focus {
	color: #1e5c1e;
}
body.home .site-header.header-scrolled .navbar-brand,
body.home .site-header.header-scrolled .navbar-brand:hover,
body.home .site-header.header-scrolled .navbar-brand:focus {
	color: #2d7a2d;
}
body.home .site-header.header-scrolled .navbar-brand-catchphrase {
	color: #2d7a2d;
}
body.home .site-header.header-scrolled .navbar-toggler {
	border-color: rgba(45, 122, 45, 0.6);
	color: #2d7a2d;
}
body.home .site-header.header-scrolled .navbar-toggler-icon {
	filter: none;
}
/* 画像の上・下の余白をなくす：ナビの上下パディングをゼロに
   調整する場所：
   - 画像の上の余白 → .site-header .navbar の padding-top（いじったあと、下の scroll-padding-top / body padding-top も合わせて変更）
   - 画像の下の余白 → .site-header .navbar の padding-bottom
   - ヘッダー全体の高さに合わせる → 24行目 scroll-padding-top と 29行目 body の padding-top（ロゴの高さ＋α） */
.site-header .navbar {
	padding-top: 0;
	padding-bottom: 0;
	align-items: center;
	min-height: auto;
}
.site-header .container {
	max-width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
@media (min-width: 576px) {
	.site-header .navbar {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ヘッダー：ナビゲーションメニューの横幅を広く */
.site-header .navbar-nav {
	gap: 0.25rem;
}
.site-header .nav-link {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
@media (min-width: 992px) {
	.site-header .nav-link {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* ヘッダー：会社名＋キャッチコピー（横並びのまま） */
.site-header .navbar-brand {
	align-self: flex-start;
	margin: 0;
	padding: 0;
}
.navbar-brand .navbar-brand-catchphrase {
	letter-spacing: 0.02em;
}

/* WordPressカスタムロゴ（外観→カスタマイズで設定したロゴ）の大きさを制限 */
.site-header .custom-logo-link,
.site-header .custom-logo {
	display: block;
	height: 100px;
	width: auto;
	max-height: 100px;
	object-fit: contain;
}
.site-header .custom-logo-link {
	line-height: 0;
}

/* ヘッダー左上：テーマ用ロゴ画像（assets/images/logo.png）ここで大きさの編集を行う。 */
.navbar-brand-logo {
	display: block;
	height: 56px;
	width: auto;
	max-height: 56px;
	object-fit: contain;
}

/* ヒーロー：会社名とキャッチコピーを縦並び・左寄せで表示（front-page.php・スピリード風） */
.hero-brand-vertical {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	padding-bottom: 4rem; /* キャッチコピー「test」がビューポートで切れないように余白を確保 */
}
.hero-company {
	text-align: left;
	padding-bottom: 16rem;
	min-height: var(--hero-min-height);
	display: flex;
	align-items: flex-end;
	background-color: #fff;
}
/* ファーストビュー：背景画像 */
.hero-company.hero-with-bg {
	position: relative;
	background-color: #0f2a16; /* 画像がないときのフォールバック（濃い緑） */
	background-image: var(--hero-bg-url);
	background-size: var(--hero-bg-size);
	background-position: var(--hero-bg-position);
	background-repeat: no-repeat;
}
/* フロントページ：ヒーロー背景をヘッダー背面まで伸ばして境目をなくす */
body.home .hero.hero-company.hero-with-bg {
	margin-top: calc(-1 * var(--hero-header-offset));
	padding-top: var(--hero-header-offset);
	min-height: calc(var(--hero-min-height) + var(--hero-header-offset));
}
.hero-company.hero-with-bg .container-fluid,
.hero-company.hero-with-bg .container {
	z-index: 1;
}
/* 背景ありヒーロー：会社名に緑のグラデーション */
.hero-company.hero-with-bg .hero-company-name {
	background: linear-gradient(135deg, #b8d4b0 0%, #5aa85a 35%, #2d7a2d 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.hero-company.hero-with-bg .hero-catchphrase {
	color: #fff;
}
.hero-company.hero-with-bg .hero-catchphrase {
	opacity: 0.95;
}
.hero-company .container-fluid {
	width: 100%;
	position: relative;
	bottom: 8rem; /* 会社名＋「test」を上に寄せる（値を大きくするとさらに上に。例: 10rem, 12rem） */
}
.hero-company .hero-brand-vertical {
	flex: 0 0 auto;
}

/* ヒーロー：会社名（PC基準・スマホは末尾 @media で上書き） */
.hero-company .hero-company-name {
	font-size: clamp(3.5rem, 8vw, 7rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ヒーロー：キャッチコピー（PC基準） */
.hero-company .hero-catchphrase {
	font-size: clamp(1rem, 2vw, 1.5rem);
	line-height: 1.5;
}

/* ヒーロー：キャッチコピー自動切り替え（スピリード風） */
.hero-rotator {
	position: relative;
	min-height: 2.5em;
}
.hero-rotator .rotator-item {
	position: absolute;
	left: 0;
	width: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
/* JSが動く前：最初の1つを確実に表示（rotator-initialized が付くまで） */
.hero-rotator:not(.rotator-initialized) .rotator-item:first-child {
	opacity: 1;
	position: relative;
	pointer-events: auto;
}
/* JS稼働後：rotator-visible の項目のみ表示 */
.hero-rotator .rotator-item.rotator-visible {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}
.hero-rotator .rotator-item.rotator-visible + .rotator-item {
	left: 0;
}

/* ========================================
   会社理念（スピリード TOPMESSAGE 風）
   ======================================== */
/* 会社理念セクションをより下に配置（固定レイアウト） */
section#philosophy.philosophy-section {
	margin-top: 10rem;
	padding-top: 8rem;
}
.philosophy-catchphrase {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}
.philosophy-body {
	font-size: 1rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}
.philosophy-body:last-of-type {
	margin-bottom: 0;
}
.philosophy-tagline {
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #888;
	font-weight: 500;
}

/* 会社理念・大きく表示（ヒーロー扱い） */
.philosophy-hero {
	padding-top: 5rem;
	padding-bottom: 6rem;
	background: #fff;
}
.philosophy-hero .section-heading--hero {
	margin-bottom: 1rem;
}
.philosophy-hero .section-heading--hero::after {
	width: 4rem;
	height: 4px;
	margin-top: 1rem;
}
.philosophy-hero .philosophy-block {
	text-align: center;
}
.philosophy-hero .section-head-en {
	font-size: 0.75rem;
	letter-spacing: 0.4em;
	margin-bottom: 0.75rem;
}
.philosophy-hero-title {
	font-size: 3rem !important;
	font-weight: 700;
	line-height: 1.3;
	color: #212529;
}
.philosophy-hero-catchphrase {
	font-size: 1.75rem !important;
	font-weight: 700;
	line-height: 1.6;
	color: #212529;
	margin-bottom: 1.5rem;
}
.philosophy-hero .philosophy-body {
	font-size: 1.0625rem;
}

.section-heading--badge {
	text-align: center;
}
.section-heading--badge::after {
	display: none; /* デフォルトの下線を消す */
}
.section-heading--badge .section-head-en {
	display: inline-block;
	background-color: #2d7a2d;
	color: #ffffff;
	padding: 0.35rem 1.25rem;
	border-radius: 50rem; /* 完全な角丸 */
	font-size: 0.75rem;
	margin-bottom: 1rem;
}

/* ========================================
   スマホのみ（〜767px）— パターンA: PCスタイルをここで上書き
   ======================================== */
@media (max-width: 767.98px) {
	html {
		scroll-padding-top: 88px;
	}

	body {
		padding-top: 88px;
		overflow-x: hidden;
	}

	:root {
		--hero-bg-size: cover;
		--hero-bg-position: center center;
		--hero-min-height: 72vh;
		--hero-header-offset: 88px;
	}

	body.home .hero.hero-company.hero-with-bg {
		margin-top: calc(-1 * var(--hero-header-offset));
		padding-top: var(--hero-header-offset);
		min-height: var(--hero-min-height);
	}

	.hero-company {
		min-height: var(--hero-min-height);
		padding-bottom: 5rem;
	}

	.hero-company .hero-company-name {
		font-size: clamp(2rem, 10vw, 3rem);
		white-space: normal;
		word-break: break-word;
		max-width: 100%;
	}

	.hero-company .hero-catchphrase {
		font-size: clamp(0.95rem, 2.5vw, 1.25rem);
	}

	.hero-company .container-fluid {
		bottom: 1.5rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.hero-brand-vertical {
		padding-bottom: 1.5rem;
		width: 100%;
	}

	.navbar-brand .navbar-brand-catchphrase {
		display: none;
	}

	/* ヘッダー行：ロゴ左・メニューボタン右 */
	.site-header .navbar {
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		padding: 0.625rem 0;
		min-height: 3.5rem;
	}

	.site-header .navbar-brand {
		align-self: center;
		flex: 0 1 auto;
		max-width: calc(100% - 3.25rem);
		margin-right: 0;
		margin-left: 0;
		justify-content: flex-start;
	}

	.site-header .navbar-toggler {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		align-self: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border-radius: 0.5rem;
		margin-left: auto;
	}

	.site-header .navbar-toggler-icon {
		width: 1.25rem;
		height: 1.25rem;
		margin: 0;
		background-size: 100%;
	}

	/* トップ（透明ヘッダー）でもボタンが見えるように */
	body.home .site-header .navbar-toggler {
		background-color: rgba(255, 255, 255, 0.94);
		border-color: rgba(45, 122, 45, 0.35);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	}

	body.home .site-header .navbar-toggler-icon {
		filter: none;
	}

	body.home .site-header.header-scrolled .navbar-toggler {
		background-color: transparent;
		box-shadow: none;
	}

	body.home .site-header {
		background: rgba(255, 255, 255, 0.9) !important;
		backdrop-filter: blur(8px);
	}

	/* 開いたメニュー：下に白いパネルで表示 */
	.site-header .navbar-collapse {
		flex-basis: 100%;
		width: 100%;
	}

	.site-header .navbar-collapse.show,
	.site-header .navbar-collapse.collapsing {
		margin-top: 0.5rem;
		padding: 0.5rem 0 0.25rem;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		background-color: #fff;
		border-radius: 0.5rem;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	}

	body.home .site-header .navbar-collapse.show,
	body.home .site-header .navbar-collapse.collapsing {
		background-color: #fff;
	}

	.site-header .navbar-nav {
		gap: 0;
		width: 100%;
	}

	.site-header .navbar-nav .nav-item {
		width: 100%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	.site-header .navbar-nav .nav-item:last-child {
		border-bottom: none;
	}

	.site-header .nav-link {
		display: block;
		width: 100%;
		padding: 0.875rem 0.625rem;
		font-size: 1rem;
		line-height: 1.4;
		text-align: left;
	}

	body.home .site-header .nav-link {
		color: #2d7a2d;
	}

	body.home .site-header .nav-link:hover,
	body.home .site-header .nav-link:focus {
		color: #1e5c1e;
		background-color: rgba(45, 122, 45, 0.06);
		border-radius: 0.375rem;
	}

	.site-header .container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.navbar-brand-logo {
		height: 36px;
		max-height: 36px;
	}

	.site-header .custom-logo-link,
	.site-header .custom-logo {
		height: 48px;
		max-height: 48px;
	}

	body.home .site-header.header-scrolled .navbar-brand-logo {
		height: 32px;
		max-height: 32px;
	}

	body.home .site-header.header-scrolled .custom-logo-link,
	body.home .site-header.header-scrolled .custom-logo {
		height: 44px;
		max-height: 44px;
	}

	section[id] {
		padding: 3rem 0;
	}

	section#philosophy.philosophy-section {
		margin-top: 3rem;
		padding-top: 3rem;
	}

	.section-head-ja {
		font-size: 1.25rem;
		line-height: 1.45;
	}

	.detail-head-main {
		font-size: 1.375rem;
	}

	.service-card .h5.card-title {
		min-height: auto;
	}

	.detail-point-heading .section-head-ja {
		font-size: 1rem;
	}

	.philosophy-hero {
		padding-top: 4rem;
		padding-bottom: 5rem;
	}

	.philosophy-hero-title {
		font-size: 1.75rem !important;
	}

	.philosophy-hero-catchphrase {
		font-size: 1.5rem !important;
	}
}