@charset "UTF-8";
/*
	index.css version10
*/

/*	====================================
	リセット & 基本設定
	====================================*/
*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html{scroll-behavior:smooth;} /* スムーススクロール有効化 */
body{
	/*font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;*/
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
	color:#333;
	background-color:#f8fafc;
	line-height:1.7;
}
a{
	text-decoration:none;
	color:inherit;
}
section{
	padding: 80px 0;
	background:linear-gradient(180deg,#f1f5f9 0%,#f8fafc 100%);
	border-bottom:1px solid #e2e8f0;
}

/* Fonts */
.noto-color-emoji-regular{
	font-family:"Noto Color Emoji",sans-serif;
	font-weight:400;
	font-style:normal;
}

/*	====================================
	共通コンテナ
	====================================*/
.container{
	max-width:1100px;
	margin:0 auto;
	padding:0 20px;

	& .section-title{
		text-align:center;
		font-size:2rem;
		position:relative;
		&:not(:has(+ div)){
			margin-bottom:1em;
			&::after{
				content:'';
				display:block;
				width:100px;
				height:4px;
				background-color:#426FBF;
				margin:15px auto 0;
				border-radius:2px;
			}
		}
		& + div{
			margin-bottom:2em;
			font-weight:normal;
			color:#325692;
			text-align:center;
			&::after{
				content:'';
				display:block;
				width:100px;
				height:4px;
				background-color:#426FBF;
				margin:15px auto 0;
				border-radius:2px;
			}
		}
	}
}

/*	====================================
	タイトル
	====================================*/
#Pdftools-SDK-T{display:none;}
header > div{
	& .icon{width:3.2em;}
	& > span span{
		&:first-child{display:inline-block;}
		&:last-child{display:none;}
	}
}

/*	====================================
	グリッドレイアウト
	====================================*/
.grid-3{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	gap:30px;
}
.grid-2{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(450px, 1fr));
	gap:30px;
}
.grid-1{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(600px, 1fr));
	gap:30px;
}

/*	====================================
	ヒーローセクション
	====================================*/
.hero{
	text-align:center;
	& h1{
		color:#000;
		font-size:2.8rem;
		font-weight:700;
		line-height:1.3;
		margin-bottom:24px;
	}
	& p{
		font-size:1.25rem;
		color:#325692;
		max-width:800px;
		margin:0 auto 40px;
	}
	& .hero-badge{
		display:inline-block;
		padding:6px 35px;
		border-radius:5px;
		background-color:rgba(66,111,191,0.2);
		color:#426FBF;
		font-size:0.85rem;
		font-weight:bold;
		margin-bottom:20px;
		letter-spacing:0.05em;
		border:1px solid #426FBF;
	}
}

/*	====================================
	機能一覧
	====================================*/
.functions{}
.func-pdfa{
	background-color:#fff;
	padding:40px;
	border-radius:12px;
	box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
	border:1px solid #e2e8f0;
	& h3{font-size:1.4rem;}
	& div:nth-child(2){
		display:flex;
		gap:1em;
		margin-bottom:1.3em;
		& img{height:100px;}
	}
}
.pdftools-sdk-get-started{
	margin:5px 0;
	text-align:center;
	& > div{
		display:inline-flex;
		flex-direction:column;
		padding:10px;
		border:1px solid rgba(66,111,191,1);
		border-radius:5px;
		background-color:#fff;
		font-weight:bold;
		box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);
		& > div:first-child{}
		& .sdk-langs{
			display:flex;
			justify-content:center;
			column-gap:13px;
			margin-top:.8em;
			& *{
				flex: 0 1 auto;
				padding:0 1em;
				border-radius:3px;
				background-color:#426fdf;
				color:#fff;
				border:1px solid #426fdf;
			}
			& *:hover{
				background-color:#fff;
				color:#426fdf;
			}
		}
	}
}
.func-card{
	background-color:#fff;
	padding:40px;
	border-radius:12px;
	box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
	border:1px solid #e2e8f0;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	transition:transform 0.2s, box-shadow 0.2s;
	&:hover{
		transform:translateY(-4px);
		box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);
	}
	&.cmmn-func:hover{
		transform:translateY(0);
	}
	& h3{
		font-size:1.4rem;
		
		color:#0f172a;
		& img{position:relative;top:6px;left:2px;}
		&:not(:has(+ div)){margin-bottom:15px;}
		& + div{margin:0 0 20px 2em;}
	}
	& ul{
		list-style:none;
		& li{
			font-size:0.95rem;
			color:#475569;
			margin-bottom:8px;
			position:relative;
			padding-left:20px;
			&::before{
				content:"✓";
				color:#426FBF;
				font-weight:bold;
				position:absolute;
				left:0;
			}
		}
	}
	& .btn-link{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		margin-top:30px;
		font-weight:600;
		padding:12px 24px;
		border-radius:6px;
		background-color:#f1f5f9;
		color:#1e293b;
		transition:background-color 0.2s, color 0.2s;
		&:hover{
			background-color:#426FBF;
			color:#fff;
		}
	}

	& .func-grid{
		display:grid;
		grid-template-columns:auto 1fr;
		column-gap:20px;
		& > h3:nth-child(1){
			grid-column:1 / 3;
			grid-row:1 / 2;
		}
		& > img:nth-child(2){
			grid-column:1 / 2;
			grid-row:2 / 4;
			width:200px;
		}
		& > div:nth-child(3){
			grid-column:2 / 3;
			grid-row:2 / 3;
		}
		& > div:nth-child(4){
			grid-column:2 / 3;
			grid-row:3 / 4;
			display:flex;
			flex-direction:column;
			& > a{
				display:inline-flex;
				align-items:center;
				justify-content:center;
				margin-top:auto;
				padding:5px 0 5px 20px;
				background-color:#f1f5f9;
				border-radius:8px;
				font-weight:600;
				transition:background-color .2s,color .2s;
				&:hover{
					background-color:rgba(66,111,191,.9);
					color:#fff;
				}
			}
		}
	}
}

/*	====================================
	コードセクション
	====================================*/
.code-section{
	color:#000;
	& .code-block{
		margin:0 auto;
		padding:24px;
		max-width:700px;
		border-radius:8px;
		background-color:#1e293b;
		color:#e2e8f0;
		overflow-x:auto;
		font-family:'Courier New', Courier, monospace;
		font-size:0.95rem;
		border:1px solid #334155;
	}
}

/*	====================================
	CTA（Stc用アクション）
	====================================*/
.cta{
	color:#000;
	text-align:center;
	& p{
		color:#325692;
		margin-bottom:2em;
		font-size:1.1rem;
	}
}
.btn-group{
	display:flex;
	justify-content:center;
	gap:20px;
	flex-wrap:wrap;
	& .btn-dl-pdf-structure,& .btn-quote-pdf-structure{
		padding:16px 32px;
		border:2px solid #426FDF;
		border-radius:6px;
		font-weight:bold;
		font-size:1.1rem;
	}
	& .btn-dl-pdf-structure{
		background-color:#426FBF;
		color:#FFF;
		box-shadow:0 4px 6px rgba(0,0,0,0.1);
		transition:opacity 0.2s;
		&:hover{opacity:0.9;}
	}
	& .btn-quote-pdf-structure{
	/*	display:none;*/
		background-color:#fff;
		color:#426FDF;
		transition:background-color 0.2s;
		&:hover{background-color:rgba(255,255,255,0.1);}
	}
	& .Pdftools-quote{
		margin:10px 0 -25px;
	}
}
/*	================================
	Site Map
	================================*/
#site-map{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:3em;
	line-height:2;
	color:#0f172a;
	font-size:12px;
	& > div{
		text-align:center;
		& h3{text-decoration:underline;}
		& a{color:#0f172a;text-decoration:none;}
	}
}

/*	====================================
	レスポンシブ対応
	====================================*/
@media (max-width:992px){
	header div{
		& .icon{width:2em;}
		& .logo{width:300px;}
	}
	.grid-1,.grid-2,.grid-3{
		grid-template-columns:1fr;
	}
	.header-nav{
		display:none; /* 簡易のためスマホ時はナビ非表示（必要に応じハンバーガーメニュー等に拡張） */
	}
}
@media (max-width:768px){
	body{}
	header div{
		& .icon{display:none;}
		& .logo{width:250px;}
	}
	.hero{
		& h1{font-size:2rem;}
		& p{font-size:1.1rem;}
	}
	.func-card .func-grid{
		grid-template-columns:1fr;
		& > h3:nth-child(1){
			grid-column:1 / 2;
			grid-row:1 / 2;
		}
		& > img:nth-child(2){
			grid-column:1 / 2;
			grid-row:2 / 3;
		}
		& > div:nth-child(3){
			grid-column:1 / 2;
			grid-row:3 / 4;
		}
		& > div:nth-child(4){
			margin-top:20px;
			grid-column:1 / 2;
			grid-row:5 / 5;
		}
	}
	.cta h2{font-size:1.8rem;}
}