/* ==========================================================
	common.css
	全てのページで共通で使用できるクラス
	========================================================== */
@import url("https://googleapis.com");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=chevron_left,chevron_right,keyboard_double_arrow_up,mail");
:root {
	--p: rgba(35,107,170,1);
	--pd: rgba(44,62,80,1);
	--td: rgba(34,34,34,1);
	--tm: rgba(102,102,102,1);
	--bg: rgba(241,240,236,1);
	--wh: rgba(255,255,255,1);
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	color: var(--td);
	line-height: 1.7;
	background: var(--wh);
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--p);
	text-decoration: none;
}
footer a {
	color: var(--wh);
}
a:hover {
	text-decoration: underline;
}
p {
	text-align: justify;
}

/* ---------- すべての横幅と左端の余白の基準を統一 ---------- */

.pd-container {
	max-width: 1140px;
	margin: 0 auto;
	padding:0 30px;
	width: 100%;
}

/* ---------- ナビゲーション ---------- */

.pd-global-nav-list a {
	color: var(--tm);
	font-weight: 600;
}
.pd-global-nav-list a:hover {
	text-decoration: none;
	color: var(--tm);
}
.pd-global-nav-list a::after {
	background-color: var(--tm);
}

/* ---------- ヘッダーお問い合わせボタン ---------- */

.pd-header-nav-area a.pd-header-cta-button { 
	background-color: var(--p) !important; 
	color: var(--wh) !important; 
	padding: 12px 32px; 
	font-size: 1rem; 
	font-weight: 700; 
	border-radius: 30px; 
	text-decoration: none; 
	display: inline-flex; 
	align-items: center;
	gap: 8px; 
	box-shadow: 0 4px 6px rgba(0, 91, 172, 0.15);
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
	will-change: transform, background-color, box-shadow;
	transform: translateZ(0);
}
.pd-header-nav-area a.pd-header-cta-button:hover { 
	background-color: var(--pd) !important; 
	color: var(--wh) !important;
	transform: translateY(-3px) translateZ(0) !important; 
	box-shadow: 0 8px 16px rgba(0, 61, 117, 0.25) !important;
	opacity: 1;
}
.pd-drawer-cta-btn {
	background-color: var(--p) !important; 
	color: var(--wh) !important; 
}

/* ---------- メインビジュアル ---------- */

.pd-content-wrapper {
	flex: 1 0 auto;
	padding-top: 0;
	padding-bottom: 0;
}
.pd-hero { 
	background: /*linear-gradient(rgba(0,40,90,0.55), rgba(0,25,60,0.8)), */url('../../images/main/home_main_01.jpg') center/cover; 
	color: var(--wh); 
	padding: 60px 0 70px 0;
	text-align: center;
}
.pd-hero-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 30px;
	width: 100%;
}
.pd-hero h1 {
	font-size: 6.67rem;
	font-weight: 800;
	margin-bottom: 30px;
	line-height: 1.4;
	text-align: left;
	text-align: justify;
	white-space: nowrap;
}
.pd-dot-text {
	text-emphasis: filled dot var(--wh);
	-webkit-text-emphasis: filled dot var(--wh);
	text-emphasis-position: over right;
	-webkit-text-emphasis-position: over right;
}
.pd-hero h1 span.pd-hero-small-text {
	font-family: "Shippori Mincho", serif;
	font-size: 4rem;
	font-weight: 600;
	letter-spacing: -0.06em;
	margin: 0 10px;
	text-emphasis: none;
	-webkit-text-emphasis: none;
}
.pd-hero p {
	max-width: 100%;
	margin: 0 auto 55px;
	opacity: 0.95;
	font-family: "Shippori Mincho", serif;
	font-size: 1.67rem;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.05em;
	text-align: left;
}
.pd-hero-banner { 
	display: block;
	background-color: rgba(35,107,170, 1);
	color: var(--wh);
	padding: 20px 0;
	width: 100%;
	max-width: 100%;
	font-family: "Jost", sans-serif;
	font-size: 1.67rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	border-radius: 0px;
	border: none;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
	user-select: none;
	pointer-events: none;
}

/* ---------- 共通見出し ---------- */

.pd-section-heading { text-align: left; margin-bottom: 40px; width: 100%; }
.pd-section-subtitle {
	font-family: "Jost", sans-serif;
	font-size: 1rem;
	color: var(--p);
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 8px;
}
.pd-section-title {
	font-family: "Shippori Mincho", serif;
	font-size: 1.9rem;
	font-weight: 700;
	display: inline-block;
	position: relative;
	padding-bottom: 15px;
}
.pd-section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 35px;
	height: 3px;
	background: var(--p);
}


/* ---------- EM設備 ---------- */

.pd-company-section {
	padding: 100px 0;
	overflow-x: hidden;
	background: var(--wh);
}
.pd-company-layout {
	display: flex;
	gap: 100px;
	align-items: center;
	width: 100%;
}
.pd-company-content {
	width: 50%;
	flex: none;
	text-align: left;
}
.pd-company-content p {
	margin-bottom: 20px;
	color: var(--tm);
	font-size: 1rem;
}
.pd-company-image {
	flex: 1;
	margin-right: calc(-50vw + 50%);
	display: block;
}
.pd-company-image img {
	width: 100%;
	height: auto;
	border-radius: 4px 0 0 4px;
	display: block;
	object-fit: cover;
}


/* ---------- 事業内容 ---------- */

.pd-business-section {
	background: var(--bg);
	padding: 100px 0;
	border-top: 1px solid #edf2f6;
}
.pd-section-intro {
	margin: -20px 0 40px;
	color: var(--tm);
	font-size: 1rem;
	text-align: left;
}
.pd-business-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px 30px;
}
.pd-business-card {
	background: var(--wh);
	border: 1px solid #eef2f5;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.02);
	border-radius: 6px;
}
.pd-business-card-image {
		width: 100%;
		height: auto;
		line-height: 1;
}
.pd-business-card-image img {
	width: 100%;
}
.pd-business-card-body { padding: 30px 25px; }
.pd-business-card h3 {
	font-size: 1.25rem;
	color: var(--td);
	margin-bottom: 12px;
	font-weight: 700;
}
.pd-business-card p { font-size: 1rem; color: var(--tm); }

/* ---------- 対応プロジェクト ---------- */

.pd-projects-section {
	background: linear-gradient(180deg, rgba(35,107,170,1), rgba(44,62,80,1));
	padding: 100px 0;
	color: var(--wh);
}
.pd-area-text {
	text-align: left;
	margin-bottom: 60px;
	padding-bottom: 60px;
	border-bottom: 1px solid var(--wh);
	background:  url('../../images/home/home_areas.png') right/auto 90% no-repeat;
}
.pd-area-text p {
	margin-bottom: 1rem;
	font-size: 1rem;
	opacity: 0.95;
}
.pd-area-text p:last-child {
	margin-bottom: 0;
}
.pd-area-text .pd-section-subtitle, .pd-projects-inner .pd-section-subtitle {
	color: var(--wh);
	opacity: 0.8;
}
.pd-area-text .pd-section-title::after, .pd-projects-inner .pd-section-title::after {
	background: var(--wh);
}
.pd-project-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 30px;
}
.pd-project-card {
	background: var(--wh);
	border: 1px solid rgba(255,255,255,0.1);
	text-align: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	border-radius: 6px;
	overflow: hidden;
}
.pd-project-image {
	width: 100%;
	height: auto;
}
.pd-project-image img {
	width: 100%;
}
.pd-project-card h3 {
	padding: 22px 15px;
	font-size: 1rem;
	color: var(--td);
	font-weight: 700;
	line-height: 1.5;
}

/* ---------- 3列カードデザイン ---------- */

.pd-clients-section, .pd-archive-section { 
	background: var(--bg);
	padding: 100px 0; 
	width: 100%; 
	clear: both; 
}
.pd-archive-grid { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 50px 30px;
	width: 100%; 
}
.pd-archive-card { 
	background: var(--wh);
	border: 1px solid rgba(0,0,0,0.04);
	border-radius: 6px;
	display: flex; 
	flex-direction: column; 
	text-align: left; 
	text-decoration: none; 
	color: inherit; 
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.pd-archive-card-image { 
	width: 100%; 
	background: rgba(0,0,0,0.05); 
	overflow: hidden; 
	margin-bottom: 22px; 
	transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 
	will-change: transform;
}
.pd-archive-card-image img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
}
.pd-archive-card:hover .pd-archive-card-image { 
	transform: scale(1.03); 
}
.pd-archive-card-title { 
	font-size: 1.2rem; 
	font-weight: 800; 
	color: var(--p); 
	margin-bottom: 12px; 
	padding: 0 20px; 
	letter-spacing: 0.02em;
	transition: color 0.3s ease;
}
.pd-archive-card:hover .pd-archive-card-title { 
	color: var(--pd);
}
.pd-archive-card-description { 
	font-size: 0.9rem; 
	color: #555555; 
	line-height: 1.75; 
	padding: 0 20px 25px; 
	text-align: justify; 
}

/* ---------- 「実績を詳しく見る」ボタン ---------- */

.pd-archive-more-button-wrap { text-align: center; }
.pd-archive-more-button { border: 1px solid #333; padding: 12px 55px; font-size: 0.9rem; font-weight: 600; background: transparent; cursor: pointer; border-radius: 25px; transition: all 0.5s ease; color: #333; }
.pd-archive-more-button:hover { background: #333; color: var(--wh); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.pd-clients-section .pd-archive-more-button-wrap {
	margin-top: 50px;
}
.pd-clients-section .pd-archive-more-button {
	display: inline-block;
	text-decoration: none;
	text-align: center;
}

/* ---------- 会社概要 ---------- */

.pd-company-profile-section {
	background: rgba(255,255,255,1);
	padding: 100px 0;
	border-top: 1px solid #edf2f6;
}
.pd-company-profile-layout {
	display: flex;
	gap: 50px;
	align-items: flex-start;
	width: 100%;
}
.pd-company-profile-intro {
	flex: 0.8;
}
.pd-company-profile-table-wrap {
	flex: 2.2;
	width: 100%;
}
.pd-company-profile-table {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
}
.pd-company-profile-row {
	background: rgba(255,255,255,1);
	align-items: center;
	border-radius: 6px;
	overflow: hidden;
}
.pd-company-profile-label {
	background: rgba(255,255,255,1);
	padding: 0 0 0 0;
	color: var(--td);
	font-weight: 800;
	flex-shrink: 0;
}
.pd-company-profile-value {
	padding: 0 0 1rem 0;
	color: var(--td);
}
.pd-company-profile-row.pd-company-profile-row--full {
	grid-column: span 2;
}
.pd-company-profile-row.pd-company-profile-row--full .pd-company-profile-label {
	width: 15%;
}

/* ---------- お問い合わせ ---------- */

.pd-contact-cta {
	background: var(--p);
	color: var(--wh);
	text-align: center;
	padding: 80px 20px;
}
.pd-contact-cta h2 {
	font-family: "Shippori Mincho", serif;
	font-size: 1.9rem;
	font-weight: 700;
	margin-bottom: 15px;
}
.pd-contact-cta p {
	margin-bottom: 35px;
	opacity: 0.9;
	font-size: 1rem;
}
.pd-contact-cta-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wh);
	color: var(--pd);
	padding: 16px 65px;
	font-weight: 700;
	font-size: 1rem;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 6px 15px rgba(0,0,0,0.15);
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pd-contact-cta-button:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.25);
	opacity: 1;
	text-decoration: none;
}
.pd-contact-cta-button .material-icons {
	font-size: 1.3rem;
	line-height: 1;
}
footer {
	background:  var(--pd);
	color:  var(--wh);
	padding: 50px 20px 30px;
	text-align: center;
	font-size: 1rem;
}

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

@media (max-width: 992px) { 
	.pd-project-grid, .pd-client-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.pd-company-profile-layout {
		flex-direction: column;
		gap: 40px;
	}
	.pd-company-profile-table {
		grid-template-columns: 1fr;
	}
	.pd-company-profile-row.pd-company-profile-row--full {
		grid-column: span 1;
	}
	.pd-company-profile-row.pd-company-profile-row--full .pd-company-profile-label {
		width: 30%;
	}
	.pd-header-cta-button {
		width: 100%;
		text-align: center;
		border-radius: 30px;
		justify-content: center;
	}
	.pd-hero h1 {
		font-size: 5.6rem;
	}
	.pd-hero h1 span.pd-hero-small-text {
		font-size: 2.8rem;
	}
	.pd-hero p {
		font-size: 1.1rem;
	}
}
@media (max-width: 768px) {
	.pd-hero h1 {
		font-size: 3.4rem;
	}
	.pd-hero h1 span.pd-hero-small-text {
		font-size: 2.1rem;
	}
	.pd-company-layout {
		flex-direction: column;
		gap: 40px;
	}
	.pd-company-content {
		width: 100%;
	}
	.pd-company-image {
		margin-right: 0;
		width: 100%;
	}
	.pd-company-image img {
		border-radius: 4px;
	}
	.pd-project-grid, .pd-client-grid {
		grid-template-columns: 1fr;
	}
	.pd-company-profile-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.pd-company-profile-label {
		width: 100% !important;
		border-right: none;
		/*border-bottom: 1px solid #f4f7f9;
		background: #fafbfc;
		padding: 12px 20px;*/
		padding: 6px 0px;
	}
	.pd-company-profile-value {
		/*padding: 15px 20px;*/
		padding: 6px 0px;
	}
	.pd-area-text {
		background-size: 100%;
	}
	.pd-area-text h2 {
		font-size: 1.8rem;
	}
	.pd-projects-inner .pd-section-title {
		font-size: 1.8rem;
	}
}
 @media screen and (max-width:430px) , (orientation:portrait){
	.pd-hero-inner {
		text-align: center;
	}
	.pd-hero h1 {
		display: inline-block;
		writing-mode: vertical-rl;
	}
	.pd-dot-text {
		text-emphasis: filled circle var(--wh);
	}
	.pd-hero-inner p {
		text-align: justify;
	}
	.pd-hero-inner p br {
		display: none;
	}
	.pd-hero-inner .pd-hero-banner {
		padding: 20px 10px;
		font-size: 1.5rem;
	}
}