/*
Theme Name: CIRCULAR FARM Child
Theme URI:
Description: CIRCULAR FARM公式サイト用 Lightning子テーマ
Author: 
Author URI:
Template: lightning
Version: 1.0
*/

/* このファイルにはLightning本体のCSSは含まれません。
   ページ単位のスタイルは front-page.php 内にインラインで記述します。
   サイト全体で共通して使う最低限のスタイルのみここに置きます。 */

body {
	font-family: "Noto Sans JP", sans-serif;
	color: #142015;
	background-color: #ffffff;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	color: #90C341 !important;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* セクション間の区切り線を表示しない（親テーマのデフォルト線を打ち消す） */
.p-cf-mainvisual,
.p-cf-about,
.p-cf-project,
.p-cf-instagram,
.p-cf-supporters {
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
}

/* Lightning親テーマのデフォルト区切り線・リンク色を打ち消す */
main,
#content,
.site-content,
.content-area,
article,
section {
	border: none !important;
	box-shadow: none !important;
}

a {
	color: inherit !important;
}

/* Lightning標準のh2見出し上下ボーダーを打ち消す */
h2,
.p-cf-about h2,
.p-cf-project h2,
.p-cf-supporters h2 {
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
	padding: 0 !important;
}

/* 循環図：背景矢印の回転アニメーション */
.p-cf-cycle-bg {
	animation: cfRotateCycle 60s linear infinite;
}

@keyframes cfRotateCycle {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.p-cf-project-item h3:after {
	border-bottom: none !important;
}

.p-cf-footer-nav ul {
	gap: 0 !important;
	margin-top: 0 !important;
}

/* =====================================================
   CIRCULAR FARM トップページ スマホ・タブレット対応
   PC版(992px以上)のデザインは変更しない
   ===================================================== */

/* メインビジュアル */
@media screen and (max-width:991px) {
	.p-cf-mainvisual-inner {
		min-height: 380px !important;
	}
}

@media screen and (max-width:575px) {
	.p-cf-mainvisual-inner {
		height: 300px !important;
		padding: 50px 0;
	}

	.p-cf-mainvisual-inner img {
		object-position: right center;
	}
}

/* CIRCULAR FARMとは？（円形配置の解除） */
@media screen and (max-width:575px) {
	.p-cf-cycle {
		aspect-ratio: auto !important;
		height: auto !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		margin-bottom: 36px !important;
	}

	.p-cf-cycle-bg {
		display: none !important;
	}

	.p-cf-cycle-item {
		width: 100% !important;
		height: auto !important;
		margin-bottom: 30px !important;
	}

	.p-cf-cycle-item-1 {
		order: 1;
	}

	.p-cf-cycle-item-2 {
		order: 2;
	}

	.p-cf-cycle-item-3 {
		order: 3;
	}

	.p-cf-cycle-item-4 {
		order: 4;
	}
}

/* プロジェクト */
@media screen and (max-width:767px) {
	.p-cf-project-list {
		flex-direction: column;
	}

	.p-cf-project-item {
		flex: 1 1 100% !important;
		width: 100%;
	}
}

/* Instagram */
@media screen and (max-width:767px) {
	.p-cf-instagram-row {
		flex-direction: column;
	}

	.p-cf-instagram-text,
	.p-cf-instagram-grid {
		flex: 1 1 100% !important;
		width: 100%;
	}
}

@media screen and (max-width:575px) {
	.p-cf-instagram-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* CIRCULAR FARMを支える2社 */
@media screen and (max-width:767px) {
	.p-cf-supporters-row {
		flex-direction: column;
	}

	.p-cf-supporters-item {
		flex: 1 1 100% !important;
		width: 100%;
		padding: 32px 24px !important;
	}
}

/* タブレット限定の改行（992px以下〜768px程度で表示） */
.tb-only {
	display: none;
}

@media screen and (max-width:991px) and (min-width:576px) {

	.p-cf-project-item {
		flex: 1 !important;
	}

	.p-cf-supporters-item {
		flex: 1 !important;
	}

	.tb-only {
		display: inline;
	}
}

/* セクション全体の縦余白をスマホで詰める */
@media screen and (max-width:575px) {

	.p-cf-about,
	.p-cf-project,
	.p-cf-instagram,
	.p-cf-supporters {
		padding: 50px 0 !important;
	}
}

h3 {
	border-bottom: none;
}

h3:after {
	display: none !important;
}

/* =====================================================
   ボタン・テキストリンクのhover効果
   ===================================================== */

/* Instagramボタン：hover時に背景をinherit（透明）、枠線を緑、アイコンをwhite→green */
.p-cf-insta-btn:hover {
	background-color: transparent !important;
	color: #90C341 !important;
}

.p-cf-insta-btn:hover img {
	content: url('images/icon-instagram-green.svg');
}

/* テキストリンク：hover時に矢印が右に動く */
.p-cf-text-link .p-cf-arrow {
	display: inline-block;
	transition: transform 0.3s;
}

.p-cf-text-link:hover .p-cf-arrow {
	transform: translateX(5px);
}

.p-cf-btn-insta-outline {
	color: #90C341 !important;
}

/* Instagramボタン（枠線緑タイプ）：hover時に緑背景・白文字・白アイコン */
.p-cf-btn-insta-outline:hover {
	background-color: #90C341 !important;
	color: #ffffff !important;
}

.p-cf-btn-insta-outline:hover .p-cf-icon-default {
	opacity: 0;
}

.p-cf-btn-insta-outline:hover .p-cf-icon-hover {
	opacity: 1 !important;
}

/* 株式会社Landeoボタン：hover時に白背景・茶枠線・茶文字 */
.p-cf-btn-landeo {
	color: white !important;
}

.p-cf-btn-landeo:hover {
	background-color: #ffffff !important;
	color: #8D6A41 !important;
}

.p-cf-btn-insta-solid {
	color: #ffffff !important;
}

/* Instagramをフォローするボタン（緑背景タイプ）：hover時に透明背景・緑枠線・緑文字 */
.p-cf-btn-insta-solid:hover {
	background-color: transparent !important;
	color: #90C341 !important;
}

/* カードのhover：ふわっと浮き上がる効果 */
.p-cf-project-item,
.p-cf-supporters-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-cf-project-item:hover,
.p-cf-supporters-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   スマホ用ハンバーガーメニュー
   ===================================================== */

/* PC時：ハンバーガーボタン・SPメニューを非表示 */
.p-cf-hamburger {
	display: none;
}

.p-cf-sp-menu {
	display: none;
}

@media screen and (max-width: 991px) {

	/* PC用ナビ・アクションボタンを非表示 */
	.p-cf-header-nav,
	.p-cf-header-actions {
		display: none !important;
	}

	/* ハンバーガーボタンを表示 */
	.p-cf-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		flex-shrink: 0;
	}

	.p-cf-hamburger span {
		display: block;
		width: 24px;
		height: 2px;
		background-color: #142015;
		border-radius: 2px;
		transition: transform 0.3s, opacity 0.3s;
		transform-origin: center;
	}

	/* ハンバーガー → ✕ アニメーション */
	.p-cf-hamburger.is-open span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.p-cf-hamburger.is-open span:nth-child(2) {
		opacity: 0;
	}

	.p-cf-hamburger.is-open span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* ドロワーメニュー */
	.p-cf-sp-menu {
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease;
		background-color: #ffffff;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
	}

	.p-cf-sp-menu.is-open {
		max-height: 600px;
	}

	.p-cf-sp-menu ul {
		list-style: none;
		margin: 0;
		padding: 8px 0 16px;
	}

	.p-cf-sp-menu li a {
		display: block;
		padding: 14px 24px;
		font-size: 0.9rem;
		font-weight: bold;
		color: #142015;
		text-decoration: none;
		transition: color 0.2s, background-color 0.2s;
	}

	.p-cf-sp-menu li a:hover {
		color: #90C341;
		background-color: rgba(144, 195, 65, 0.05);
	}

	/* 子メニュー（もしり・ゆんぬ） */
	.p-cf-sp-menu-child {
		padding: 0 !important;
	}

	.p-cf-sp-menu-child li a {
		padding: 10px 24px 10px 44px !important;
		font-size: 0.85rem !important;
		font-weight: normal !important;
		color: #555 !important;
	}

	.p-cf-sp-menu-child li a::before {
		content: "－ ";
	}
}

/* =====================================================
   固定ページ共通スタイル
   ===================================================== */

.p-cf-page {
	padding: 80px 0;
}

.p-cf-page-title {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: bold;
	color: #142015;
	margin: 0 0 40px;
	padding: 0 0 20px !important;
	border-bottom: 3px solid #90C341 !important;
	border-top: none !important;
}

.p-cf-page-content {
	font-size: 0.95rem;
	line-height: 1.9;
	color: #2f382f;
}

.p-cf-page-content h2 {
	font-size: 1.4rem;
	font-weight: bold;
	color: #90C341;
	margin: 48px 0 16px;
	padding: 0 0 8px !important;
	border-bottom: 2px solid rgba(144, 195, 65, 0.3) !important;
	border-top: none !important;
}

.p-cf-page-content h3 {
	font-size: 1.15rem;
	font-weight: bold;
	color: #142015;
	margin: 32px 0 12px;
}

.p-cf-page-content p {
	margin: 0 0 20px;
}

.p-cf-page-content ul,
.p-cf-page-content ol {
	padding-left: 1.5em;
	margin: 0 0 20px;
}

.p-cf-page-content li {
	margin-bottom: 8px;
}

.p-cf-page-content a {
	color: #90C341 !important;
	text-decoration: underline;
}

.p-cf-page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 24px 0;
}

@media screen and (max-width: 575px) {
	.p-cf-page {
		padding: 50px 0 !important;
	}
}

/* h3・h4のフォントサイズ正規化（Lightning親テーマのデフォルト値を上書き） */
h3 {
	font-size: 1.3rem !important;
}

h4 {
	font-size: 1.1rem !important;
}

h5 {
	font-size: 1rem !important;
}