/*******************************************************************************
 * APIマニュアル用CSS
 *******************************************************************************/

:root{
	--main:					#0f6b78;
	--dark:					#0b1f3a;
	--navy:					#081a33;
	--accent:				#19c2b0;
	--bg:					#f5f7fa;
	--text:					#23343b;
}

*{
	box-sizing:				border-box;
}

body{
	margin:					0;
	font-family:			-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
	background:				var( --bg );
	color:					var( --text );
	line-height:			1.75;
}

header{
	background:				linear-gradient(135deg,#081a33 0%,#0b1f3a 58%,#123d66 100%);
	color:					#fff;
	padding:				44px 24px;
	border-bottom:			4px solid var( --accent );
}

.container{
	width:					min( 1760px, 96% );
	margin:					0 auto;
}

.hero{
	display:				flex;
	align-items:			center;
	justify-content:		space-between;
	gap:					32px;
}

.hero img{
	max-width:				210px;
	height:					auto;
	background:				transparent;
	border-radius:			0;
	padding:				0;
	display:				block;
}

h1,h2,h3{
	margin-top:				0;
	line-height:			1.35;
}

h2{
	border-left:			6px solid var( --accent );
	padding-left:			12px;
	margin-top:				34px;
}

a{
	color:					var( --main );
	text-decoration:		none;
}

.card-grid{
	display:				grid;
	grid-template-columns:	repeat(auto-fit,minmax(280px,1fr));
	gap:					20px;
}

.card{
	background:				#fff;
	border-radius:			18px;
	padding:				24px;
	box-shadow:				0 8px 24px rgba(0,0,0,.08);
	border:					1px solid rgba(11,31,58,.08);
}

table{
	width:					100%;
	border-collapse:		collapse;
	margin:					18px 0 28px;
	background:				#fff;
}

th,td{
	border:					1px solid #dbe5e7;
	padding:				10px 12px;
	vertical-align:			top;
}

th{
	background:				#e9f2f4;
	color:					#0b1f3a;
}

.endpoint{
	background:				#0b1f3a;
	color:					#fff;
	padding:				16px;
	border-radius:			12px;
	font-family:			ui-monospace,SFMono-Regular,Consolas,monospace;
	overflow:				auto;
}

.code{
	background:				#1e293b;
	color:					#f8fafc;
	border-radius:			12px;
	padding:				18px;
	overflow:				auto;
	font-family:			ui-monospace,SFMono-Regular,Consolas,monospace;
}

.note{
	background:				#fff7df;
	border-left:			5px solid #ffca28;
	padding:				16px;
	margin:					20px 0;
}

.badge{
	display:				inline-block;
	padding:				6px 12px;
	border-radius:			999px;
	background:				#dff7f4;
	color:					#0b4f58;
	font-size:				13px;
	margin-bottom:			12px;
}

.param-child td:nth-child(2),
.param-child td:nth-child(3){
	padding-left:			28px;
}

.param-parent{
	background:				#fbfdff;
	font-weight:			600;
}

.small{
	color:					#60717c;
	font-size:				14px;
}

.nav{
	display:				flex;
	gap:					14px;
	flex-wrap:				wrap;
	margin:					24px 0 0;
}

.nav a{
	color:					#fff;
	border:					1px solid rgba(255,255,255,.35);
	padding:				8px 12px;
	border-radius:			999px;
}

footer{
	margin-top:				64px;
	padding:				24px;
	text-align:				center;
	color:					#666;
}

.back-link-wrap{
	margin:					28px 0 8px;
}

.back-link{
	display:				inline-flex;
	align-items:			center;
	gap:					10px;
	background:				linear-gradient(135deg,#ffe3d6 0%,#ffd2c2 100%);
	color:					#8a2f14;
	border:					2px solid #ffb79d;
	padding:				14px 22px;
	border-radius:			999px;
	box-shadow:				0 6px 18px rgba(255,140,92,.22);
	font-weight:			700;
	font-size:				15px;
	transition:				all .18s ease;
}

.back-link:hover{
	background:				linear-gradient(135deg,#ffd8c8 0%,#ffc6b0 100%);
	transform:				translateY(-1px);
	box-shadow:				0 10px 22px rgba(255,140,92,.28);
}

.back-link::before{
	content:				"←";
	font-size:				18px;
	line-height:			1;
	font-weight:			800;
}

.curl-card{
	margin:					24px 0;
}

.curl-head{
	display:				flex;
	align-items:			center;
	justify-content:		space-between;
	gap:					16px;
	flex-wrap:				wrap;
	margin-bottom:			12px;
}

.copy-button{
	border:					0;
	background:				#ffe3d6;
	color:					#8a2f14;
	border:					2px solid #ffb79d;
	border-radius:			999px;
	padding:				8px 14px;
	font-weight:			700;
	cursor:					pointer;
}

.copy-button:hover{
	background:				#ffd2c2;
}

.curl-note{
	color:					#60717c;
	font-size:				14px;
	margin-top:				8px;
}

.form-grid{
	display:				grid;
	grid-template-columns:	repeat(auto-fit,minmax(240px,1fr));
	gap:					16px;
	margin:					16px 0 24px;
}

.form-row{
	display:				flex;
	flex-direction:			column;
	gap:					6px;
}

.form-row label{
	font-weight:			700;
	color:					#0b1f3a;
}

.form-row input,
.form-row textarea,
.form-row select{
	width:					100%;
	border:					1px solid #cfdde2;
	border-radius:			10px;
	padding:				10px 12px;
	font-size:				14px;
	font-family:			inherit;
	background:				#fff;
}

.form-row textarea{
	min-height:				120px;
	resize:					vertical;
	font-family:			ui-monospace,SFMono-Regular,Consolas,monospace;
}

.checkbox-row{
	flex-direction:			row;
	align-items:			center;
	gap:					10px;
	margin-top:				28px;
}

.checkbox-row input{
	width:					auto;
}

.button-row{
	display:				flex;
	gap:					10px;
	flex-wrap:				wrap;
	margin-top:				12px;
}

.download-button{
	border:					0;
	background:				#e6f4ff;
	color:					#124469;
	border:					2px solid #a9d5f5;
	border-radius:			999px;
	padding:				8px 14px;
	font-weight:			700;
	cursor:					pointer;
}

.download-button:hover{
	background:				#d5ecff;
}

.common-input-card{
	border:					2px solid rgba(25,194,176,.28);
}

/* curl command builder refinements */

.param-form{
	display:				block;
	margin:					18px 0 0;
}

.param-row{
	display:				grid;
	grid-template-columns:	220px 1fr;
	align-items:			center;
	gap:					14px;
	padding:				10px 0;
	border-bottom:			1px solid #edf2f4;
}

.param-row:last-child{
	border-bottom:			0;
}

.param-row label{
	font-weight:			700;
	color:					#0b1f3a;
}

.param-row input,
.param-row textarea,
.param-row select{
	width:					100%;
	border:					1px solid #cfdde2;
	border-radius:			10px;
	padding:				10px 12px;
	font-size:				14px;
	font-family:			inherit;
	background:				#fff;
}

.param-row textarea{
	min-height:				150px;
	resize:					vertical;
	font-family:			ui-monospace,SFMono-Regular,Consolas,monospace;
}

.param-row .checkbox-field{
	display:				flex;
	align-items:			center;
	gap:					10px;
}

.param-row .checkbox-field input{
	width:					auto;
}

.required-note{
	display:				block;
	color:					#b84a20;
	font-size:				13px;
	font-weight:			700;
	margin-top:				4px;
}

.button-row{
	margin-bottom:			10px;
}

.validation-message{
	color:					#b84a20;
	font-weight:			700;
	font-size:				14px;
	margin:					8px 0 0;
}

@media (max-width:720px){
	.param-row{
		grid-template-columns:	1fr;
		gap:					6px;
	}
}

/* Full HD content width adjustments */

@media (min-width: 1280px){
	.container{
		width:					min( 1760px, 96% );
	}

	table{
		font-size:				15px;
	}

	th,td{
		padding:				11px 14px;
	}
}

@media (min-width: 1600px){
	.card{
		padding:				30px;
	}
}

/* Required / Optional badges */

.required-badge,
.optional-badge{
	display:				inline-flex;
	align-items:			center;
	justify-content:		center;
	min-width:				64px;
	padding:				5px 12px;
	border-radius:			999px;
	font-size:				13px;
	font-weight:			800;
	letter-spacing:			.02em;
}

.required-badge{
	background:				linear-gradient(135deg,#ff6b6b 0%,#e53935 100%);
	color:					#fff;
	box-shadow:				0 4px 12px rgba(229,57,53,.28);
	border:					1px solid rgba(183,28,28,.18);
}

.optional-badge{
	background:				#eef3f6;
	color:					#51606b;
	border:					1px solid #d4dee5;
}

/* curl_examples form badges */

.field-required,
.field-optional{
	display:				inline-flex;
	align-items:			center;
	justify-content:		center;
	margin-left:			8px;
	padding:				2px 8px;
	border-radius:			999px;
	font-size:				11px;
	font-weight:			800;
	vertical-align:			middle;
	line-height:			1.4;
}

.field-required{
	background:				#e53935;
	color:					#fff;
}

.field-optional{
	background:				#eef3f6;
	color:					#5d6b76;
	border:					1px solid #d4dee5;
}

/* Compact curl form controls */

.input-xs{
	max-width:				140px;
}

.input-sm{
	max-width:				220px;
}

.input-md{
	max-width:				360px;
}

.input-lg{
	max-width:				640px;
}

.select-sm{
	max-width:				260px;
}

.datetime-sm{
	max-width:				280px;
}

textarea.input-lg{
	width:					100%;
}

/* Preserve indentation for code display */
.code,
.code pre,
pre{
	white-space:		pre-wrap;
	tab-size:		4;
	word-break:		break-word;
	font-family:	ui-monospace, SFMono-Regular, Consolas, monospace;
}

.code{
	overflow:		auto;
}

.code pre{
	margin:			0;
}