/* ==========================================================================
1. 基本設定 & 変数
========================================================================== */
:root {
	--main-color: #eb0a1e; /* トヨタレッド / LUCRISアクセントカラー [cite: 14, 18] */
	--text-color: #333;
	--bg-gray: #f5f5f5;
	--white: #ffffff;
	--black-alpha: rgba(0, 0, 0, 0.75);
	--transition-base: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

:target {
  scroll-margin-top: 110px;
}

body {
	margin: 0;
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--text-color);
	line-height: 1.8;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* ==========================================================================
2. ヘッダー (L字ロゴ & カプセルナビ)
========================================================================== */
.style-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	pointer-events: none; /* 下層の要素の邪魔をしない */
}

/* メガメニュー展開時の背景オーバーレイ */
.style-header::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease;
	z-index: -1;
	pointer-events: none;
}

/* サブメニューホバー時にオーバーレイを表示 */
.style-header:has(.has-sub:hover)::before {
	opacity: 1;
	visibility: visible;
}

.header-main-visual-container {
	display: flex;
	align-items: flex-start;
	width: 100%;
	justify-content: space-between;
	pointer-events: auto;
}

/* L字型ロゴエリア */
.logo-wrapper {
	background: #fff;
	padding: 20px 70px 20px 50px;
	border-radius: 0 0 50px 0;
	/* 	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); */
	transition: var(--transition-base);
}

.logo-content img {
	height: 70px;
	width: auto;
	display: block;
	transition: height 0.4s ease;
}

/* スクロール時のロゴ縮小 */
.is-scrolled .logo-content img {
	height: 80px;
}

/* カプセル型ナビゲーション */
.capsule-nav {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	margin: 30px 40px 0 40px;
	padding: 0 45px;
	height: 64px;
	border-radius: 32px;
	display: flex;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	transition: var(--transition-base);
}

.nav-items {
	display: flex;
	list-style: none;
	gap: 35px;
	margin: 0;
	padding: 0;
	align-items: center;
	height: 100%;
}
.nav-items > li{
	height: 100%;
}

.nav-items > li > a {
	text-decoration: none;
	color: #333;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	position: relative;
	padding: 5px 0;
	transition: color 0.3s ease;
	width: 100%;
	display: flex;
	height: 100%;
	box-sizing: border-box;
	align-items: center;
}

/* ホバー時の赤線 */
.nav-items > li > a::after {
	content: '';
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--main-color);
	transition: width 0.3s ease;
}

.nav-items li a:hover {
	color: var(--main-color);
}

.nav-items li a:hover::after {
	width: 100%;
}

/* ==========================================================================
3. メガメニュー
========================================================================== */
.mega-menu-inner {
	display: flex;
	gap: 30px;
	align-items: stretch;
}

/* 左側バナー */
.mega-left { flex: 0 0 220px; }
.category-banner {
	background: var(--main-color);
	color: #fff;
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 15px;
}
.category-banner .en { font-size: 24px; font-weight: 900; letter-spacing: 0.1em; }
.category-banner .jp { font-size: 11px; margin-top: 5px; opacity: 0.8; }

.mega-link-list { list-style: none; padding: 0; margin: 0; }
.mega-link-list li { margin-bottom: 18px; }
.mega-link-list a {
	color: #333; font-size: 14px; font-weight: 700; text-decoration: none;
	display: flex; align-items: center; transition: color 0.3s;
}
.mega-link-list a:hover { color: var(--main-color); }
.mega-link-list a::before {
	content: ''; width: 6px; height: 1px; background: var(--main-color); margin-right: 10px;
}

/* 右側カード */
.mega-right { flex: 1; display: flex; gap: 20px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.mega-card { text-decoration: none; color: #333; display: block; }
.card-img {
	width: 100%; aspect-ratio: 16/10; background: #f7f7f7; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: bold; color: #999; margin-bottom: 10px;
	overflow: hidden; transition: transform 0.3s;
}
.mega-card:hover .card-img { transform: translateY(-5px); }
.logo-bg { background: #fff; border: 1px solid #eee; color: var(--main-color); font-size: 16px; }

/* ==========================================================================
4. メインビジュアル & ニュース欄
========================================================================== */
.hero {
	position: relative;
	height: 100vh;
	background: #000; /* AI・自動化・Webの総合パートナーとしての洗練された背景 [cite: 1] */
	color: var(--white);
	display: flex;
	align-items: center;
	padding-left: 10%;
	overflow: hidden;
	background-image: url("/wp-content/uploads/2026/02/matt-wang-lnjQDLEKppI-unsplash-scaled.jpg");
	background-size: cover;
	background-position: center;
}

.en-title {
	font-size: 1.2rem;
	color: var(--main-color);
	margin-bottom: 20px;
	font-weight: 700;
}

.hero h1 {
	font-size: 4rem;
	line-height: 1.2;
	font-weight: 900;
}

/* ニュースコンテナ：画面右端に密着 */
.mv-news-container {
	position: absolute;
	right: 0;
	bottom: 40px;
	width: 480px;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	padding: 35px 40px 35px 50px;
	border-radius: 40px 0 0 40px;
	z-index: 10;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
}

.mv-news-label {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 15px;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
}

.mv-news-label::before {
	content: '';
	width: 3px;
	height: 14px;
	background: var(--main-color);
	margin-right: 12px;
}

.mv-news-list { list-style: none; padding: 0; margin: 0; }
.mv-news-item { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.mv-news-item:last-child { border-bottom: none; }

.mv-news-item a {
	text-decoration: none;
	color: #fff;
	display: flex;
	justify-content: flex-start; /* 左詰めに変更 */
	align-items: center;
	padding: 10px 0;
	width: 100%;
}

.mv-news-item .title {
	font-size: 13.5px;
	flex: 1; /* タイトルが余白を埋める */
	padding-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mv-news-item .date {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	margin-right: 20px;
	flex-shrink: 0; /* 日付が潰れないように固定 */
}

/* 矢印アニメーション */
.arrow-box {
	position: relative;
	width: 20px;
	height: 9px;
	overflow: hidden;
	flex-shrink: 0; /* 矢印のサイズを固定 */
	margin-left: auto; /* これで右端に押し出されます */
}

.arrow-icon, .arrow-box::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid rgba(255, 255, 255, 0.4);
	border-right: 2px solid rgba(255, 255, 255, 0.4);
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-box::before {
	left: -25px;
	border-color: #fd261f; /* ホバー時の緑 [cite: 135] */
}

.mv-news-item a:hover .arrow-icon { left: 25px; opacity: 0; }
.mv-news-item a:hover .arrow-box::before { left: 0; }

/* マウスを離した瞬間にリセット */
.mv-news-item a:not(:hover) .arrow-icon,
.mv-news-item a:not(:hover) .arrow-box::before { transition: none; }

/* ==========================================================================
5. コンテンツセクション
========================================================================== */
.section { padding: 120px 10%; }
.section-label { color: var(--main-color); font-weight: 900; margin-bottom: 40px; }
.bg-gray { background-color: var(--bg-gray); }
h2 { font-size: 2.5rem; margin-bottom: 40px; font-weight: 700; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.card { background: var(--white); padding: 40px; border-top: 4px solid var(--main-color); }

.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.p-img {
	height: 300px; background: #ddd; border-radius: 10px;
	display: flex; align-items: center; justify-content: center; font-weight: bold;
}

footer { padding: 60px 0; text-align: center; background: #333; color: #fff; }


/* ======================================================================== */
/* NEWSセクション全体 */
/* ======================================================================== */
.news-section {
	padding: 100px 8%;
	background: #fff;
}

.news-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	gap: 80px;
}

/* 左側：タイトルエリア */
.news-header {
	flex: 0 0 200px;
}

.title-wrap {
	display: flex;
	align-items: center;
	gap: 15px;
	position: absolute;
}

.main-title {
	font-weight: 600;
	font-size: 45px;    /* サイトに合わせて調整 */
	line-height: 1;
	letter-spacing: -0.08em; /* わずかに字間を詰めるとより洗練されます */
	color: #000;
	margin: 0;
}

.sub-title-group {
	/* 日本語サブタイトル用 */
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-left: 10px;
}

/* 右側：ニュースリスト */
.news-body {
	flex: 1;
	margin-top: 150px;
}
.news-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.news-item {
	border-bottom: 1px solid #eee;
}

.news-item a {
	display: flex;
	align-items: center;
	padding: 30px 0;
	text-decoration: none;
	color: #333;
	transition: opacity 0.3s;
	position: relative;
	justify-content: space-between;
}

.news-item .date {
	font-size: 14px;
	color: #999;
	width: 120px;
}

.news-item .content-title {
	flex: 1;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	margin-left: 10px;
}

/* ==========================================================================
NEWSセクション：見出し横の円形ボタン
========================================================================== */
.circle-arrow-btn {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid #c9c9c9;
	transition: border-color 0.3s;
	pointer-events: auto;
}

/* 緑の円を描くSVGアニメーション */
.circle-svg {
	position: absolute;
	top: -3px;
	left: -1px;
	width: 48px;
	height: 48px;
	transform: rotate(-90deg);
}
.circle-svg circle {
	fill: none;
	stroke: #fd261f; /* LUCRISグリーン */
	stroke-width: 1.5;
	stroke-dasharray: 144.5; 
	stroke-dashoffset: 144.5;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.circle-arrow-btn:hover .circle-svg circle {
	stroke-dashoffset: 0;
}

/* 中央の矢印入れ替え構造 */
.btn-arrow-box {
	position: relative;
	width: 12px;
	height: 12px;
	overflow: hidden;
}

/* 矢印の共通形状 */
.btn-arrow-icon, .btn-arrow-box::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 6px;
	height: 6px;
	border-top: 2px solid #c9c9c9;
	border-right: 2px solid #c9c9c9;
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ホバーで現れる緑の矢印（左側に待機） */
.btn-arrow-box::before {
	left: -20px;
	border-color: #fd261f;
}

.circle-arrow-btn:hover .btn-arrow-icon {
	left: 20px;
	opacity: 0;
}
.circle-arrow-btn:hover .btn-arrow-box::before {
	left: 0;
}

/* ==========================================================================
NEWSセクション：記事リストの矢印（Hero内と同仕様）
========================================================================== */
.list-arrow-box {
	position: relative;
	width: 30px;
	height: 15px;
	overflow: hidden;
}

.list-arrow-icon, .list-arrow-box::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.list-arrow-box::before {
	left: -40px;
	border-color: #fd261f;
}

.news-item a:hover .list-arrow-icon {
	left: 40px;
	opacity: 0;
}
.news-item a:hover .list-arrow-box::before {
	left: 0;
}

/* 離した瞬間のリセット設定 */
.circle-arrow-btn:not(:hover) .btn-arrow-icon,
.circle-arrow-btn:not(:hover) .btn-arrow-box::before,
.news-item a:not(:hover) .list-arrow-icon,
.news-item a:not(:hover) .list-arrow-box::before {
	transition: none;
}



/* ==========================================================================
COLUMNセクション：6グリッド & 動画再現アニメーション
========================================================================== */
.column-section .title-wrap{
	left: 50px;
}
.column-header{
	position: relative;
}
.column-body{
	margin-top: 50px;
}
.column-section {
	padding: 100px 8%;
}

.column-container {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 70px 0 0 0;
	background-color: #f5f5f5;
	border-radius: 20px;
	overflow: hidden;
}

/* 境界線が交差するグリッドレイアウト */
.column-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 枠線を1pxの隙間で表現 */
	background-color: #d7d7d7; 
	gap: 1px; 
	border-top: 1px solid #d7d7d7;
}

.column-card {
	background: #f5f5f5; /* 背景色をセクションと統一 */
	padding: 30px 35px; /* カード内の余白 */
	transition: background-color 0.4s ease;
}

.column-card a {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* サムネイル：動画のゆっくりとしたズーム */
.card-thumbnail {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 25px;
	background: #fff;
}

.card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.15, 1, 0.3, 1);
}

.column-card:hover .card-thumbnail img {
	transform: scale(1.1);
}
.column-card:hover{
	background: #fff;
	box-shadow: -1px 4px 20px -2px rgba(0, 0, 0, 0.2);
}

/* テキスト：Noto Sans JP 400 ＆ ホバー時の色変化 */
.card-title {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.6;
	color: #333;
	margin: 0;
	flex-grow: 1;
	transition: color 0.4s ease;
	/* 2行でカット */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-date {
	font-weight: 200;
	font-size: 13px;
	color: #888;
	display: block;
	text-align: right;
}

/* 記事間の境界線を維持しつつレスポンシブ化 */
@media (max-width: 1024px) {
	.column-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.column-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
SERVICEセクション
========================================================================== */
.service-section {
	padding-bottom: 120px;
	background: #fff;
}

/* メインビジュアル */
.service-mv {
	height: 60vh;
	min-height: 400px;
	background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('http://lucris.jp/wp-content/uploads/2026/02/top_service2-scaled.jpg') no-repeat center/cover;
	background-attachment: fixed; /* パララックス効果 */
	display: flex;
	align-items: flex-end;
	padding: 0 5% 60px;
	margin-bottom: 80px;
}

.service-mv .main-title {
	font-size: 100px;
	color: #fff;
	margin: 0;
}

.service-mv-lead {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: #fff;
	font-size: 16px;
	line-height: 2;
	margin-top: 20px;
}

/* 共通コンテナ */
.service-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 8%;
}

/* 2カラムグリッド */
.service-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-bottom: 60px;
}

.service-card a {
	text-decoration: none;
	color: inherit;
}

.service-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 30px;
	background: #f5f5f5;
}

.service-img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.15, 1, 0.3, 1);
}

.service-card:hover .service-img img {
	transform: scale(1.08);
}

.service-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 15px;
}

.service-desc {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
	color: #666;
}

/* 横長注目サービス */
.service-featured {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
	overflow: hidden;
	transition: transform 0.4s ease;
}

.service-featured:hover {
	transform: translateY(-5px);
}

.service-featured a { text-decoration: none; color: inherit; }

.featured-flex {
	display: flex;
	align-items: center;
	gap: 40px;
}

.featured-img {
	flex: 0 0 300px;
	height: 200px;
	border-radius: 8px;
	overflow: hidden;
}

.featured-img img { width: 100%; height: 100%; object-fit: cover; }

.featured-info { flex: 1; }

.featured-title { font-size: 22px; font-weight: 700; margin: 15px 0; }

.featured-desc { font-size: 15px; font-weight: 400; color: #666; }

/* 共通パーツ：円形矢印 (決定済みアニメーションを流用) */
.arrow-circle {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 1px solid #ddd;
	border-radius: 50%;
	position: relative;
	vertical-align: middle;
}
/* 主要サービス：4つ表示のためのグリッド */
.service-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 40px; /* 縦の余白を少し広めに設定 */
	margin-bottom: 100px;
}

/* 注目サービス：3つ並べるリスト */
.featured-list {
	display: flex;
	flex-direction: column;
	gap: 30px; /* バナー間の隙間 */
}

/* 注目サービスの横長バナー：カード風の装飾（スクリーンショット 15.47.22.jpg 下部参照） */
.service-featured {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-featured:hover {
	transform: translateY(-5px);
}

/* テキスト：Noto Sans JP 400 */
.service-desc, .featured-desc {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 15px;
	line-height: 1.8;
}

.service-title, .featured-title {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
}

/* 注目サービスの右端矢印コンテナ */
.featured-arrow {
	flex-shrink: 0;
	margin-left: auto;
	padding-right: 20px;
}

/* モバイル対応 */
@media (max-width: 960px) {
	.service-grid { grid-template-columns: 1fr; }
	.featured-flex { flex-direction: column; align-items: flex-start; }
	.featured-img { flex: 0 0 auto; width: 100%; }
	.service-mv .main-title { font-size: 60px; }
}

/* =====================================================
featuredカード全体ホバー時に円ボタンを発火
===================================================== */
/* 1) featured hover中は transition を有効化 */
.service-featured:hover .btn-arrow-icon,
.service-featured:hover .btn-arrow-box::before {
	transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 2) 円の線 */
.service-featured:hover .circle-svg circle {
	stroke-dashoffset: 0;
}

/* 3) 矢印の入れ替え */
.service-featured:hover .btn-arrow-icon {
	left: 20px;
	opacity: 0;
}

.service-featured:hover .btn-arrow-box::before {
	left: 0;
}
.service-featured a .circle-arrow-btn{
	margin-right: 50px;
}

/* =========================================
SERVICEカード hover → 円矢印アニメ
========================================= */
/* 1) featured hover中は transition を有効化 */
.service-card:hover .btn-arrow-icon,
.service-card:hover .btn-arrow-box::before {
	transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.service-card a:hover .circle-svg circle {
	stroke-dashoffset: 0;
}

.service-card a:hover .btn-arrow-icon {
	left: 20px;
	opacity: 0;
}

.service-card a:hover .btn-arrow-box::before {
	left: 0;
}

.soon{
	pointer-events: none !important;
	opacity: 0.3 !important;
}


/* =========================================
Nav Cards（他ページ導線）
========================================= */
.navcards-section{
	padding: 110px 5%;
	background:#fff;
}

.navcards-wrap{
	max-width: 1440px;
	margin: 0 auto;
	display:flex;
	align-items:flex-start;
	gap: 60px;
}

.navcards-title{
	flex: 0 0 240px;
}

.navcards-en{
	margin: 0;
	font-size: 45px;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color:#000;
}

/* 横に並べて、画面が狭い時は横スクロール */
.navcards-track{
	flex:1;
	display:grid;
	grid-template-columns: repeat(4, minmax(220px, 1fr));
	gap: 22px;
}

/* カード */
.navcard{
	display:block;
	text-decoration:none;
	color:#333;
	background:#fff;
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(0,0,0,0.06);
	overflow:hidden;
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.navcard-img{
	aspect-ratio: 16/10;
	background:#f5f5f5;
	overflow:hidden;
}

.navcard-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition: transform .9s cubic-bezier(0.15,1,0.3,1);
}

.navcard:hover .navcard-img img{
	transform: scale(1.06);
}

.navcard-body{
	position:relative;
	padding: 18px 18px 22px;
	min-height: 82px;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap: 12px;
}

.navcard-text{
	margin:0;
	font-size: 14px;
	font-weight: 700;
	color:#666;
	line-height: 1.4;
}

/* ボタン位置をカード右下寄せ */
.navcard-btn{
	width: 42px;
	height: 42px;
	border-radius: 999px;
}

/* 重要：カード全体ホバーで circle-arrow-btn を動かす */
.navcard:hover .circle-svg circle{
	stroke-dashoffset: 0;
}
.navcard:hover .btn-arrow-icon{
	left: 20px;
	opacity: 0;
}
.navcard:hover .btn-arrow-box::before{
	left: 0;
}

/* 既存の transition:none に負ける場合の保険 */
.navcard:hover .btn-arrow-icon,
.navcard:hover .btn-arrow-box::before{
	transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* レスポンシブ：タブレット以下は横スクロール */
@media (max-width: 1100px){
	.navcards-wrap{ flex-direction:column; gap: 30px; }
	.navcards-title{ flex: 0 0 auto; }
	.navcards-track{
		grid-template-columns: repeat(2, 1fr);
		padding-bottom: 8px;
	}
}
@media (max-width: 560px){
	.navcards-en{ font-size: 30px; }
	.navcards-track{ grid-template-columns: repeat(1, auto);}
}


/* ===============================
FOOTER
================================ */

.site-footer{
	background:#fff;
	border-top:1px solid #eee;
	padding:60px 5% 40px;
}

.footer-inner{
	max-width:1400px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:40px;
}

.footer-left img{
	height:60px;
	margin-bottom:14px;
}

.footer-copy{
	font-size:12px;
	color:#999;
}

/* 右側 */

.footer-links{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	gap:28px;
}

.footer-links a{
	font-size:14px;
	color:#333;
	text-decoration:none;
}

.footer-links a:hover{
	text-decoration:underline;
}

/* SP */

@media(max-width:768px){
	.footer-inner{
		flex-direction:column;
		align-items: center;
	}

	.footer-links{
		flex-direction:column;
		gap:12px;
	}
}


/* ==========================================================================
Header / Capsule Nav / Mega Menu (override)
既存の定義より後ろ（ファイル末尾）に追記推奨
========================================================================== */

/* 親基準 */

/* ===== メガ本体：横幅固定＋中央配置（全メガ共通） ===== */
.mega-menu{
	position: absolute;
	top: calc(100% + 18px);
	right: 0px;

	/* ★ここが固定幅（全メガ共通） */
	width: 900px;

	/* ★高さは内容に応じて可変 */
	height: auto;

	background: #fff;
	border-radius: 40px;
	box-shadow: 0 30px 60px rgba(0,0,0,0.12);

	/* 余白は固定（見た目の統一） */
	padding: 56px;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	z-index: 10000;
	min-height: 220px;
}

/* “隙間”で閉じないための透明ブリッジ */
.mega-menu::before{
	content:"";
	position:absolute;
	top:-22px;
	left:0;
	width:100%;
	height:22px;
}

/* hover中は開きっぱなし（li hover / メニュー hover） */
.has-sub:hover .mega-menu,
.has-sub .mega-menu:hover{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ===== 画面が狭いときだけ可変（固定幅のままだと溢れるため） ===== */
@media (max-width: 1180px){
	.mega-menu{
		width: calc(100vw - 32px); /* ほぼ固定に近いが溢れ回避 */
		left: 50%;
		transform: translateX(-50%) translateY(16px);
		padding: 40px;
		border-radius: 28px;
	}
	.has-sub:hover .mega-menu,
	.has-sub .mega-menu:hover{
		transform: translateX(-50%) translateY(6px);
	}
}

/* ===== レイアウト：高さは自然に伸びる ===== */
.mega-menu-inner{
	display:flex;
	gap: 48px;
	align-items: flex-start; /* ★高さ可変に合わせる */
}

/* 左赤カード：高さは「中身に合わせる」＋最小高さだけ持たせる */
.mega-left{ flex: 0 0 240px; }

/* 右カラム：カードの行数が増えれば自然に高さが伸びる */
.mega-right .service-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* ===== SP：縦積み（固定幅の概念が崩れるので自然幅） ===== */
@media (max-width: 768px){
	.mega-menu{
		width: calc(100vw - 24px);
		left: 50%;
		transform: translateX(-50%) translateY(14px);
		padding: 28px;
		border-radius: 22px;
	}
	.has-sub:hover .mega-menu,
	.has-sub .mega-menu:hover{
		transform: translateX(-50%) translateY(6px);
	}
	.mega-menu-inner{
		flex-direction: column;
		gap: 22px;
	}
	.mega-left,
	.mega-center{
		flex: 1 1 auto;
		border-left: none;
		padding-left: 0;
	}
	.mega-right .service-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =====================================================
Mega right width & card size unified
===================================================== */

/* 右カラムの幅を固定 */


/* グリッド構成を固定 */
.mega-right .service-grid{
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

/* カード自体の高さを統一 */
.mega-card{
	display:flex;
	flex-direction: column;
}

/* 画像エリアのサイズ固定 */
.card-img{
	width:100%;
	aspect-ratio: 4 / 3;  /* ← 全カード同じ比率 */
	border-radius:14px;
}

/* テキスト高さも一定に */
.mega-card p{
	min-height: 32px;     /* 1〜2行分確保 */
	display:flex;
	align-items:center;
	justify-content:center;
}


/* ===============================
Mega menu: make mega-right dominant
================================ */

/* 3カラム比率を変更：左/中を細く、右を広く */
.mega-menu-inner{
	display: flex;
	gap: 48px;
	align-items: flex-start;
}

/* 左（赤カード）は少し細く */
.mega-left{ flex: 0 0 220px; }

/* 中（リスト）も細く */
.mega-center{
	flex: 0 0 150px;
}

/* 右側カード：2列で大きく見せる */
.mega-right .service-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* ★2列 */
	gap: 18px;
}

/* サムネを横長＆大きく */
.mega-right .card-img{
	aspect-ratio: 16 / 9;  /* ★横長にして面積UP */
	border-radius: 16px;
	background: #f4f4f4;
	object-fit: cover;
}
.mega-right.service-grid{
	gap: 20px;
	margin-bottom: 0;
}

.mega-card{
	display: grid;
	grid-template-rows: auto 1fr;
	text-decoration: none;
}

.mega-card p{
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 800;
	color: #333;
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 12px;
}

/* pの中に circle-arrow-btn を置く場合の見栄え */
.mega-card p .circle-arrow-btn{
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}








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

/* ==========================================================================
Responsive Settings (Tablet & Smartphone)
========================================================================== */

/* ハンバーガーボタン：PCでは隠す */
.hamburger {
	display: none;
}

/* --- タブレットサイズ (1024px以下) --- */
@media (max-width: 1024px) {
	.logo-content img {
		height: 60px;
	}
	.logo-wrapper {
		padding: 0 30px;
	}
	.capsule-nav {
		margin: 15px 15px 0 0;
		padding: 0 20px;
		height: 50px;
	}
	.nav-items {
		gap: 15px;
	}
	.nav-items > li > a {
		font-size: 11px;
	}
}

/* --- スマホサイズ (768px以下) --- */
@media (max-width: 768px) {
	/* ヘッダー全体：背景を透明にしてL字ロゴを際立たせる */
	.style-header {
		position: fixed;
		background: transparent;
		box-shadow: none;
		pointer-events: auto;
	}

	.header-main-visual-container {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
	}

	/* ロゴエリア：PCのデザイン（L字）を継承 */
	.logo-wrapper {
		background: #fff;
		padding: 10px 30px 10px 20px;
		border-radius: 0 0 30px 0; /* 右下のみ丸める */
		/*         box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); */
		z-index: 10002; /* メニューより上に表示 */
		transition: none;
	}

	.logo-content img {
		height: 40px !important;
		width: auto;
	}

	/* ハンバーガーボタンの設定 */
	.hamburger {
		display: block;
		position: relative;
		top: 10px;
		right: 15px;
		width: 44px;
		height: 44px;
		background: #fff;
		border: none;
		border-radius: 8px;
		z-index: 10002;
		cursor: pointer;
	}

	.hamburger span {
		display: block;
		position: absolute;
		left: 11px;
		width: 22px;
		height: 2px;
		background: #000;
		transition: all 0.3s;
	}
	.hamburger span:nth-child(1) { top: 15px; }
	.hamburger span:nth-child(2) { top: 21px; }
	.hamburger span:nth-child(3) { top: 27px; }

	/* ボタン活性化時(X印) */
	.hamburger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.hamburger.is-active span:nth-child(2) { opacity: 0; }
	.hamburger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* ナビゲーションメニュー（全画面引き出し） */
	.capsule-nav {
		display: flex !important;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		margin: 0 !important;
		padding: 100px 40px !important;
		border-radius: 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		opacity: 0;
		visibility: hidden;
		transition: all 0.4s ease;
		z-index: 10001;
		box-sizing: border-box;
	}

	.capsule-nav.is-active {
		opacity: 1;
		visibility: visible;
	}

	/* メニュー内のリスト項目 */
	.nav-items {
		flex-direction: column;
		gap: 30px;
		width: 100%;
		height: auto;
	}

	.nav-items > li > a {
		font-size: 22px;
		font-weight: 700;
		color: #333;
		padding: 10px 0;
		width: 100%;
	}

	.nav-items > li > a::after {
		display: none; /* ホバー時の赤線をスマホでは消す */
	}

	/* スマホではメガメニューと特定の装飾を非表示 */
	.mega-menu, .style-header::before {
		display: none !important;
	}
}


/* メインビジュアル（Hero）の調整 */
@media (max-width: 768px) {
	.hero {
		padding-left: 5%;
		height: 80vh;
	}

	.hero h1 {
		font-size: 2.2rem; /* 4remから縮小 */
	}

	/* MV内ニュースを画面下部に全幅で配置 */
	.mv-news-container {
		width: 100%;
		bottom: 0;
		border-radius: 20px 20px 0 0;
		padding: 20px;
	}

	.mv-news-item .title {
		font-size: 12px;
	}
}
@media (max-width: 768px) {
	/* メインビジュアル自体の高さを確保 */
	.hero {
		padding-top: 100px; /* ヘッダー分の余白 */
		height: auto;       /* 固定高さ解除 */
		min-height: 85vh;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

	}

	/* 文字が重ならないようにマージンを追加 */
	.hero-content {
		margin-bottom: 200px; /* お知らせ欄との隙間 */
	}

	/* お知らせコンテナの配置調整 */
	.mv-news-container {
		position: absolute;
		width: 100%;
		bottom: 0px;
		margin-left: auto;
		border-radius: 30px 0 0 30px;
		padding: 25px 20px 25px 30px;
		box-sizing: border-box;
	}
}

/* ニュース & コラムセクションの修正 */
@media (max-width: 768px) {
	/* NEWS */
	.news-container {
		flex-direction: column;
		gap: 30px;
	}

	.news-header {
		flex: none;
		height: 80px;
	}

	.news-body {
		margin-top: 0;
	}

	.main-title {
		font-size: 32px;
	}

	/* COLUMN (既に設定がある程度されていますが、余白を微調整) */
	.column-section {
		padding: 60px 5%;
	}

	.column-grid {
		grid-template-columns: 1fr; /* 1カラムに固定 */
	}
}

/* サービスセクション（featuredリスト） */
@media (max-width: 768px) {
	.featured-flex {
		flex-direction: column;
		padding: 20px;
	}

	.featured-img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.featured-info {
		padding: 0;
	}

	/* 矢印ボタンが邪魔になる場合は位置を調整 */
	.service-featured a .circle-arrow-btn {
		margin: 10px 0 0 auto;
	}
}


/* 画像LP */
.img_lp_gr{
	text-align: center;
	margin: 200px 0 100px;
	width: 100%;
}
.img_lp_gr img{
	display: block;
	margin: 0 auto;
	margin-bottom: 30px;
	max-width: 900px;
	width: 95%;
	box-shadow: 0px 11px 31px -8px rgba(0, 0, 0, 0.20);
}


/* ===== CF7: LUCRIS style ===== */
.lucris-form{
	width:min(720px, 100%);
	margin:0 auto;
}

.lucris-field{
	margin: 18px 0;
}

.lucris-label{
	display:flex;
	align-items:center;
	gap:10px;
	font-weight:700;
	letter-spacing:.02em;
	margin:0 0 10px;
}

.lucris-badge{
	display:inline-flex;
	align-items:center;
	height:22px;
	padding:0 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	opacity:.9;
	border:1px solid rgba(255,255,255,.18);
}

/* 入力 */
.lucris-input,
.lucris-select,
.lucris-textarea{
	width:100%;
	border-radius:16px;
	padding:14px 16px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.06);
	backdrop-filter: blur(10px);
	color:inherit;
	outline:none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.lucris-textarea{ min-height: 160px; resize: vertical; }

.lucris-input:focus,
.lucris-select:focus,
.lucris-textarea:focus{
	border-color: rgba(255,255,255,.35);
	box-shadow: 0 0 0 4px rgba(255,255,255,.08);
	background:rgba(255,255,255,.08);
}

/* 同意 */
.lucris-consent .wpcf7-list-item{
	margin:0;
}
.lucris-consent input[type="checkbox"]{
	transform: translateY(2px);
	margin-right:10px;
}

/* 送信ボタン */
.lucris-actions{ margin-top: 26px; }

.lucris-submit{
	width:100%;
	border:none;
	border-radius:999px;
	padding:14px 18px;
	font-weight:800;
	letter-spacing:.06em;
	cursor:pointer;
	transition: transform .15s, box-shadow .15s, opacity .15s;
}

.lucris-submit:hover{
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.lucris-submit:active{
	transform: translateY(0);
	opacity:.9;
}

/* CF7 メッセージ */
.wpcf7 form .wpcf7-response-output{
	margin: 18px 0 0;
	padding: 14px 16px;
	border-radius:16px;
	border:1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.06);
}

.wpcf7 form .wpcf7-not-valid-tip{
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	opacity: .95;
}

/* 送信中 */
.wpcf7 form.submitting .lucris-submit{
	opacity:.65;
	cursor: wait;
}


.lucris-fv{
  position: relative;
  width: 100%;
  height: clamp(240px, 32vw, 420px);
  overflow: hidden;
}

.lucris-fv__bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}

.lucris-fv__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,.10) 100%
  );
}