/* =============================================================
   CCSI Free Tools — Design System
   Editorial × Tech Tooling
   =============================================================
   ⚠ 重要：webma.css は html font-size を PC=75% / SP=55% に縮小している。
   そのため本ファイルでは 1rem に頼らない（読みやすさ優先のサイズは px 直書き）。
   rem を使う場合は webma の rem 基準（PC 12px / SP 8.8px）を意識すること。
   ============================================================= */

:root{
	--ft-bg:        #f6f7fb;
	--ft-surface:   #ffffff;
	--ft-surface-2: #fbfcfe;
	--ft-ink:       #0f172a;
	--ft-ink-2:     #1e293b;
	--ft-ink-3:     #475569;
	--ft-ink-4:     #94a3b8;
	--ft-line:      #e6eaf2;
	--ft-line-2:    #eef1f7;
	--ft-accent:    #5268B6;
	--ft-accent-2:  #7B8FD9;
	--ft-accent-ink:#3b4d96;
	--ft-violet:    #8a6cf0;
	--ft-success:   #16a34a;
	--ft-warn:      #d97706;
	--ft-danger:    #dc2626;

	--ft-radius-lg: 18px;
	--ft-radius-md: 12px;
	--ft-radius-sm: 8px;

	--ft-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
	--ft-shadow-md: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -22px rgba(15,23,42,.18);
	--ft-shadow-lg: 0 1px 2px rgba(15,23,42,.04), 0 36px 80px -36px rgba(15,23,42,.32);

	--ft-font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
	--ft-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Source Code Pro", monospace;

	/* webma.css の rem 改竄を回避するため px 直書き */
	--ft-step-0:   18px;       /* body — オンラインメディア標準（NYT/BBC/Bloomberg級） */
	--ft-step-1:   20px;       /* lead */
	--ft-step-2:   22px;       /* h3 */
	--ft-step-3:   26px;       /* h2 small */
	--ft-step-4:   32px;       /* h2 */
	--ft-step-5:   clamp(28px, 3vw, 36px); /* hero eyebrow heading */
	--ft-step-6:   clamp(32px, 3.6vw, 44px); /* hero title */
}

/* ---------- Reset / Base for tool zone --------------------------- */
.ft-zone{
	background: var(--ft-bg);
	color: var(--ft-ink);
	font-family: var(--ft-font-sans);
	font-size: var(--ft-step-0);
	line-height: 1.8;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	max-width: 100vw;
}
.ft-zone *,
.ft-zone *::before,
.ft-zone *::after{ box-sizing: border-box; }

.ft-zone p{ margin: 0 0 1em; }
.ft-zone code{
	font-family: var(--ft-font-mono);
	background: var(--ft-line-2);
	color: var(--ft-ink-2);
	padding: .12em .4em;
	border-radius: 5px;
	font-size: .92em;
}

/* ---------- Hero (white + #5268B6 accent) ------------------------ */
.ft-hero{
	position: relative;
	background: #ffffff;
	color: var(--ft-ink);
	border-bottom: 1px solid var(--ft-line);
	padding: clamp(28px, 3.5vw, 52px) 0 clamp(24px, 3vw, 44px);
}
/* 上端の細いコーポレートカラーアクセントライン */
.ft-hero::before{
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: var(--ft-accent);
}
.ft-hero__inner{
	width: 100%;
	padding: 0 clamp(16px, 4.5vw, 80px);
	position: relative;
	z-index: 1;
}
.ft-hero__crumbs{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--ft-ink-3);
	letter-spacing: .04em;
	margin-bottom: 14px;
}
.ft-hero__crumbs a{
	color: var(--ft-ink-2);
	text-decoration: none;
	transition: color .15s ease;
}
.ft-hero__crumbs a:hover{ color: var(--ft-accent); }
.ft-hero__crumbs svg{ opacity: .45; flex: 0 0 auto; color: var(--ft-ink-4); }
.ft-hero__eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-accent-ink);
	background: rgba(82,104,182,.08);
	border: 1px solid rgba(82,104,182,.18);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.ft-hero__eyebrow::before{
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--ft-accent);
}
.ft-hero__title{
	font-size: var(--ft-step-6);
	line-height: 1.22;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 .7rem;
	color: var(--ft-ink);
}
/* <em> はアクセント色の単色（多色グラデ廃止） */
.ft-hero__title em{
	font-style: normal;
	color: var(--ft-accent);
}
.ft-hero__lead{
	font-size: var(--ft-step-1); /* 19px */
	line-height: 1.7;
	color: var(--ft-ink-3);
	max-width: 72ch;
	margin: 0;
}
.ft-hero__meta{
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	color: var(--ft-ink-3);
	font-size: 16px;
}
.ft-hero__meta dt{
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-ink-4);
	margin-bottom: 4px;
}
.ft-hero__meta dd{ margin: 0; color: var(--ft-ink); font-weight: 600; }

/* ---------- Main shell ----------------------------------------- */
.ft-zone .cd-overlay{ display: none; }
.ft-main{
	background: var(--ft-bg);
	padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 7vw, 96px);
	margin-top: -1px; /* hero との隙間防止 */
}
.ft-shell{
	width: 100%;
	padding: 0 clamp(16px, 4.5vw, 80px);
	display: grid;
	gap: clamp(20px, 3.5vw, 48px);
}
/* テキスト主体の段落だけは可読max-widthで絞る */
.ft-card > p,
.ft-card .ft-intro-content > p,
.ft-card__desc{
	max-width: 80ch;
}

/* ---------- Card ------------------------------------------------ */
.ft-card{
	background: var(--ft-surface);
	border-radius: var(--ft-radius-lg);
	border: 1px solid var(--ft-line);
	box-shadow: var(--ft-shadow-md);
	padding: clamp(24px, 4vw, 44px);
}
.ft-card + .ft-card{ margin-top: clamp(20px, 3vw, 36px); }

.ft-card__heading{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.2rem;
	flex-wrap: wrap;
	margin-bottom: 1.6rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--ft-line);
}
.ft-card__title{
	font-size: 26px;
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0;
	letter-spacing: -.005em;
}
.ft-card__desc{
	font-size: var(--ft-step-0); /* 17px */
	color: var(--ft-ink-3);
	margin: .4rem 0 0;
	line-height: 1.8;
}

/* ---------- Tabs ----------------------------------------------- */
.ft-tabs{
	display: inline-flex;
	background: var(--ft-line-2);
	border-radius: var(--ft-radius-md);
	padding: 5px;
	gap: 4px;
}
.ft-tab{
	appearance: none;
	border: 0;
	background: transparent;
	padding: 12px 22px;
	border-radius: var(--ft-radius-sm);
	cursor: pointer;
	color: var(--ft-ink-3);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
	min-width: 160px;
}
.ft-tab__sub{
	font-size: 12px;
	font-weight: 500;
	color: var(--ft-ink-4);
	letter-spacing: .04em;
	font-family: var(--ft-font-mono);
}
.ft-tab[aria-selected="true"]{
	background: var(--ft-surface);
	color: var(--ft-ink);
	box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 12px 24px -16px rgba(82,104,182,.5);
}
.ft-tab[aria-selected="true"] .ft-tab__sub{ color: var(--ft-accent); }
.ft-tab:focus-visible{ outline: 2px solid var(--ft-accent); outline-offset: 2px; }

/* ---------- Toggles -------------------------------------------- */
.ft-options{
	display: flex;
	gap: 1.2rem 2rem;
	flex-wrap: wrap;
	font-size: var(--ft-step-0); /* 17px */
	color: var(--ft-ink-2);
	align-items: center;
}
.ft-check{
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	cursor: pointer;
	user-select: none;
}
.ft-check input{
	accent-color: var(--ft-accent);
	width: 18px;
	height: 18px;
}

/* ---------- Field / input ------------------------------------- */
.ft-field{ display: flex; flex-direction: column; min-width: 0; }
.ft-field + .ft-field{ margin-top: 1.25rem; }

.ft-field__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .8rem;
	flex-wrap: wrap;
	margin-bottom: .6rem;
}
.ft-label{
	font-size: 1.0625rem; /* 17px */
	font-weight: 700;
	color: var(--ft-ink);
	letter-spacing: .01em;
	margin: 0;
}
.ft-help{
	font-size: .9375rem; /* 15px */
	color: var(--ft-ink-3);
	margin: 0;
}
.ft-counter{
	font-variant-numeric: tabular-nums;
	font-size: .875rem; /* 14px */
	font-family: var(--ft-font-mono);
	color: var(--ft-ink-3);
	background: var(--ft-line-2);
	padding: 3px 10px;
	border-radius: 999px;
}

.ft-input,
.ft-textarea{
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--ft-radius-md);
	border: 1px solid var(--ft-line);
	background: var(--ft-surface-2);
	color: var(--ft-ink);
	font-family: var(--ft-font-mono);
	font-size: 16px;
	line-height: 1.7;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ft-input{ font-family: var(--ft-font-sans); font-size: 17px; }
.ft-input:focus,
.ft-textarea:focus{
	outline: none;
	border-color: var(--ft-accent);
	background: var(--ft-surface);
	box-shadow: 0 0 0 4px rgba(82,104,182,.15);
}
.ft-textarea{
	min-height: 220px;
	resize: vertical;
	word-break: break-all;
}
.ft-textarea--out{ background: #f6f8ff; }
.ft-textarea--mono-out{
	min-height: 360px;
	font-size: 1.0625rem;
	background: #0f172a;
	color: #e2e8f0;
	border-color: #1e293b;
}
.ft-textarea--error{
	border-color: var(--ft-danger);
	box-shadow: 0 0 0 4px rgba(220,38,38,.12);
}

/* ---------- Buttons ------------------------------------------- */
.ft-btn{
	appearance: none;
	border: 0;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	padding: 15px 26px;
	border-radius: var(--ft-radius-md);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	white-space: nowrap;
	letter-spacing: .02em;
	transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.ft-btn:focus-visible{ outline: 2px solid var(--ft-accent); outline-offset: 3px; }
.ft-btn:active{ transform: translateY(1px); }
.ft-btn--primary{
	background: linear-gradient(180deg, #5b73c5 0%, #455ba8 100%);
	color: #fff;
	box-shadow: 0 12px 28px -12px rgba(82,104,182,.6);
}
.ft-btn--primary:hover{ background: linear-gradient(180deg, #6379cc 0%, #4d63b3 100%); box-shadow: 0 16px 36px -14px rgba(82,104,182,.7); }
.ft-btn--ghost{
	background: var(--ft-surface);
	color: var(--ft-ink-2);
	border: 1px solid var(--ft-line);
}
.ft-btn--ghost:hover{ border-color: var(--ft-accent); color: var(--ft-accent); background: #f6f8ff; }
.ft-btn--lg{ font-size: 18px; padding: 18px 32px; }

.ft-iconbtn{
	appearance: none;
	border: 1px solid var(--ft-line);
	background: var(--ft-surface);
	color: var(--ft-ink-2);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: var(--ft-radius-sm);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	cursor: pointer;
	transition: all .15s ease;
}
.ft-iconbtn:hover{ border-color: var(--ft-accent); color: var(--ft-accent); background: #f6f8ff; }
.ft-iconbtn:focus-visible{ outline: 2px solid var(--ft-accent); outline-offset: 2px; }
.ft-iconbtn svg{ flex-shrink: 0; opacity: .85; }

.ft-toolbar{
	display: flex;
	gap: .55rem;
	align-items: center;
	flex-wrap: wrap;
}

/* ---------- Status / messages -------------------------------- */
.ft-status{
	min-height: 1.5em;
	margin: 16px 0 0;
	font-size: 15px;
	color: var(--ft-ink-3);
	display: flex;
	align-items: center;
	gap: 8px;
}
.ft-status[data-state="ok"]{ color: var(--ft-success); }
.ft-status[data-state="error"]{ color: var(--ft-danger); }
.ft-status[data-state="warn"]{ color: var(--ft-warn); }
.ft-status::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .8; }

/* ---------- Result block (SSL / Whois) ----------------------- */
.ft-result{
	margin-top: 1.8rem;
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius-md);
	overflow: hidden;
	background: var(--ft-surface);
}
.ft-result__head{
	padding: 1.1rem 1.4rem;
	border-bottom: 1px solid var(--ft-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--ft-surface-2);
}
.ft-result__title{
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ft-ink);
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}
.ft-result__title svg{ color: var(--ft-accent); }
.ft-result__body{ padding: 1.4rem; }

.ft-summary{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 1.4rem;
}
.ft-stat{
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius-md);
	padding: 1.1rem 1.2rem;
	background: var(--ft-surface-2);
}
.ft-stat__label{
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-ink-4);
	margin: 0 0 .35rem;
}
.ft-stat__value{
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ft-ink);
	font-family: var(--ft-font-mono);
	letter-spacing: -.01em;
	margin: 0;
}
.ft-stat--ok    .ft-stat__value{ color: var(--ft-success); }
.ft-stat--warn  .ft-stat__value{ color: var(--ft-warn); }
.ft-stat--danger .ft-stat__value{ color: var(--ft-danger); }

.ft-pre{
	margin: 0;
	padding: 1.4rem 1.5rem;
	background: #0f172a;
	color: #e2e8f0;
	font-family: var(--ft-font-mono);
	font-size: .98rem;
	line-height: 1.75;
	border-radius: var(--ft-radius-md);
	overflow: auto;
	max-height: 600px;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ---------- Tips / info section ----------------------------- */
.ft-tips{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.2rem;
}
.ft-tip{
	background: var(--ft-surface);
	border-radius: var(--ft-radius-md);
	padding: 1.6rem 1.7rem;
	border: 1px solid var(--ft-line);
}
.ft-tip__icon{
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(82,104,182,.12), rgba(138,108,240,.12));
	color: var(--ft-accent-ink);
	border-radius: 12px;
	margin-bottom: 1rem;
}
.ft-tip__title{
	font-size: 18px;
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0 0 9px;
}
.ft-tip__body{
	font-size: 16px;
	color: var(--ft-ink-3);
	line-height: 1.8;
	margin: 0;
}
.ft-tip__body code{ font-size: .95em; }

/* ---------- Section heading --------------------------------- */
.ft-section-head{
	display: flex;
	align-items: baseline;
	gap: .8rem;
	margin-bottom: 1.2rem;
}
.ft-section-head__eyebrow{
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ft-accent);
	font-weight: 700;
}
.ft-section-head__title{
	font-size: var(--ft-step-3);
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0;
}

/* ---------- Suggestions chips ------------------------------- */
.ft-chips{
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-top: .9rem;
}
.ft-chip{
	appearance: none;
	border: 1px solid var(--ft-line);
	background: var(--ft-surface);
	color: var(--ft-ink-3);
	font: inherit;
	font-size: 14px;
	font-family: var(--ft-font-mono);
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
}
.ft-chip:hover{ border-color: var(--ft-accent); color: var(--ft-accent); background: #f6f8ff; }

/* ---------- Vulnerabilities list ---------------------------- */
.ft-list{
	display: grid;
	gap: .8rem;
}
.ft-item{
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 1rem 1.4rem;
	align-items: center;
	padding: 1.2rem 1.4rem;
	background: var(--ft-surface);
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius-md);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ft-item:hover{
	border-color: var(--ft-accent-2);
	transform: translateY(-1px);
	box-shadow: var(--ft-shadow-md);
}
.ft-item__date{
	font-family: var(--ft-font-mono);
	font-size: .92rem;
	color: var(--ft-ink-3);
	white-space: nowrap;
}
.ft-item__cat{
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ft-accent-ink);
	background: rgba(82,104,182,.1);
	padding: .25rem .7rem;
	border-radius: 999px;
	white-space: nowrap;
}
.ft-item__cat a{ color: inherit; text-decoration: none; }
.ft-item__title{
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.55;
}
.ft-item__title a{
	color: var(--ft-ink);
	text-decoration: none;
	transition: color .15s ease;
}
.ft-item__title a:hover{ color: var(--ft-accent); }
@media (max-width: 600px){
	.ft-item{ grid-template-columns: 1fr; gap: .5rem; padding: 1rem 1.2rem; }
}

/* ---------- Pagination -------------------------------------- */
.ft-zone .pagination{
	display: flex;
	gap: .4rem;
	justify-content: center;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.ft-zone .pagination a,
.ft-zone .pagination span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: var(--ft-radius-sm);
	border: 1px solid var(--ft-line);
	background: var(--ft-surface);
	color: var(--ft-ink-2);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	transition: all .15s ease;
}
.ft-zone .pagination a:hover{ border-color: var(--ft-accent); color: var(--ft-accent); }
.ft-zone .pagination .current{
	background: var(--ft-accent);
	color: #fff;
	border-color: var(--ft-accent);
}

/* ---------- Voice / related list ---------------------------- */
.ft-zone .info-list-wrap{
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: .8rem 1.4rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--ft-line);
}
.ft-zone .info-list-wrap:last-child{ border-bottom: 0; }
.ft-zone .info-list-wrap time{
	font-family: var(--ft-font-mono);
	font-size: 14px;
	color: var(--ft-ink-3);
}
.ft-zone .info-list-wrap .cat-badge a{
	font-size: 13px;
	font-weight: 700;
	color: var(--ft-accent-ink);
	background: rgba(82,104,182,.1);
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}
.ft-zone .info-list-wrap .info-list{ margin: 0; font-size: 15px; }
.ft-zone .info-list-wrap .info-list a{
	color: var(--ft-ink);
	text-decoration: none;
}
.ft-zone .info-list-wrap .info-list a:hover{ color: var(--ft-accent); }

/* ---------- Ad block reset --------------------------------- */
.ft-ads{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
}
@media (min-width: 768px){ .ft-ads{ grid-template-columns: 1fr 1fr; } }

.ft-adslot{
	background: var(--ft-surface);
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius-md);
	padding: 1rem clamp(16px,2.5vw,28px) 1.2rem;
	position: relative;
	overflow: hidden;
}
.ft-adslot__label{
	display: block;
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ft-ink-4);
	margin-bottom: .55rem;
}
.ft-adslot ins.adsbygoogle{ min-height: 90px; }

.ft-adslot--inline{
	margin-top: 1.6rem;
	background: linear-gradient(180deg, #fbfcff 0%, #f4f6fb 100%);
}

/* ---------- Related tools grid -------------------------- */
.ft-related{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}
.ft-related__item{
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius-md);
	background: var(--ft-surface);
	color: var(--ft-ink);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ft-related__item:hover{
	border-color: var(--ft-accent);
	transform: translateY(-2px);
	box-shadow: var(--ft-shadow-md);
	color: var(--ft-ink);
}
.ft-related__icon{
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(82,104,182,.14), rgba(138,108,240,.14));
	color: var(--ft-accent-ink);
	margin-bottom: .35rem;
}
.ft-related__title{
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	color: var(--ft-ink);
}
.ft-related__desc{
	margin: 0;
	font-size: 15px;
	color: var(--ft-ink-3);
	line-height: 1.75;
}
.ft-related__arrow{
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--ft-accent);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ---------- Bootstrap legacy resets within tool zone -------- */
.ft-zone .container-fluid,
.ft-zone .container,
.ft-zone .container-large{
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}
.ft-zone .signage-title{ all: unset; display: block; }
.ft-zone .page-inner{ padding: 0; }
.ft-zone .bg-white{ background: transparent !important; }

/* ---------- Base64 specific I/O grid ----------------------- */
.ft-base64-io{
	display: grid;
	gap: 1.6rem;
	grid-template-columns: 1fr;
}
@media (min-width: 1000px){
	.ft-base64-io{
		grid-template-columns: 1fr auto 1fr;
		align-items: stretch;
	}
}
.ft-base64-actions{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: .8rem;
}
@media (min-width: 1000px){
	.ft-base64-actions{
		flex-direction: column;
		padding-top: 2.4rem;
	}
}

/* ---------- Inline form (Whois / SSL) --------------------- */
.ft-form-inline{
	display: grid;
	grid-template-columns: 1fr;
	gap: .8rem;
}
@media (min-width: 720px){
	.ft-form-inline{ grid-template-columns: 1fr auto; align-items: stretch; }
}
.ft-form-inline .ft-input{
	height: 100%;
}
.ft-form-inline .ft-btn{
	height: 100%;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* ---------- Loader ---------------------------------------- */
.ft-loader{
	display: inline-block;
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: ft-spin .7s linear infinite;
	vertical-align: -3px;
}
@keyframes ft-spin{ to{ transform: rotate(360deg); } }

/* =============================================================
   Single Article Page (Mobile First)
   読み物としての記事ページ。NYT/Bloomberg水準。
   ============================================================= */

.ft-article-page{
	background: #ffffff;
	color: var(--ft-ink);
	overflow-x: clip;
}
.ft-article-page,
.ft-article-page *{
	box-sizing: border-box;
}
.ft-article-page__main{
	min-width: 0; /* grid item でテキストが折返すように */
}
/* 画像・iframe・table の暴走防止 */
.ft-article-page img,
.ft-article-page iframe,
.ft-article-page video,
.ft-article-page embed,
.ft-article-page object{
	max-width: 100%;
	height: auto;
}
.ft-article-page table{
	max-width: 100%;
	overflow-x: auto;
	display: block;
}
@media (min-width: 720px){
	.ft-article-page table{ display: table; }
}
.ft-article-page pre{
	max-width: 100%;
	overflow-x: auto;
}
/* AdSense 暴走防止 */
.ft-article-page .adsbygoogle,
.ft-article-page ins{
	max-width: 100%;
	overflow: hidden;
}
.ft-inline-ad{
	max-width: 100%;
	overflow: hidden;
	margin: clamp(20px, 3vw, 32px) 0;
}

/* ===== H1 (タイトル) — webma.css の 4rem を px で上書き ===== */
.ft-article-page__main h1{
	font-size: 26px;       /* mobile */
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -.005em;
	color: var(--ft-ink);
	margin: 12px 0 16px;
}
@media (min-width: 720px){
	.ft-article-page__main h1{
		font-size: 32px;   /* tablet */
		line-height: 1.25;
	}
}
@media (min-width: 1080px){
	.ft-article-page__main h1{
		font-size: 36px;   /* desktop */
		line-height: 1.2;
	}
}

/* ===== article-header-cat (カテゴリチップ) ===== */
.ft-article-page__main .article-header-cat{
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ft-accent-ink);
	background: rgba(82,104,182,.08);
	padding: 6px 14px;
	border-radius: 999px;
}
.ft-article-page__main .publish-date{
	font-family: var(--ft-font-mono);
	font-size: 15px;
	color: var(--ft-ink-3);
	letter-spacing: .04em;
	display: inline-block;
	margin: 14px 0 0;
}
.ft-article-page__main .ft-article-page__header > br{ display: none; }
.ft-article-page__main .ft-article-page__header hr{
	border: 0;
	border-top: 1px solid var(--ft-line);
	margin: 1.4em 0 1.6em;
}

/* ===== Breadcrumb (既存 .breadcrumb) を本文上に整える ===== */
.ft-article-page .breadcrumb{
	padding: 0;
	margin: 0 0 20px;
	background: transparent;
	font-size: 14px;
	line-height: 1.6;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	scrollbar-width: none;
}
.ft-article-page .breadcrumb::-webkit-scrollbar{ display: none; }
.ft-article-page .breadcrumb ul{
	display: inline-flex !important;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}
.ft-article-page .breadcrumb li{
	padding: 0 1.4em 0 0 !important;
	position: relative;
	white-space: nowrap;
	max-width: none;
}
.ft-article-page .breadcrumb li:last-child{
	padding-right: 0 !important;
	color: var(--ft-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 16em;
}
.ft-article-page .breadcrumb li:not(:last-child)::after{
	content: ">";
	color: var(--ft-ink-4);
	right: .5em !important;
	font-weight: 400;
}
.ft-article-page .breadcrumb a{
	color: var(--ft-ink-2);
	text-decoration: none;
}
.ft-article-page .breadcrumb a:hover{ color: var(--ft-accent); }

/* ===== ccsi-share-float — PC左フロート（grid親が無い環境向け） ===== */
@media (min-width: 1100px){
	.ft-article-page__main .ccsi-share-float{
		position: fixed;
		left: clamp(16px, 3vw, 56px);
		top: 50%;
		transform: translateY(-50%) !important;
		width: 44px;
		grid-column: auto;
		z-index: 40;
	}
}
@media (max-width: 1099px){
	.ft-article-page__main .ccsi-share-float{
		display: none;
	}
}
.ft-article-page__shell{
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 24px 40px !important;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(40px, 5vw, 56px);
	overflow-x: hidden;
}
@media (min-width: 720px){
	.ft-article-page__shell{
		padding: 32px 36px 56px !important;
	}
}
@media (min-width: 1080px){
	.ft-article-page__shell{
		padding: 40px 56px 80px !important;
	}
}
@media (min-width: 1080px){
	.ft-article-page__shell{
		grid-template-columns: minmax(0, 720px) 320px;
		gap: 56px;
		align-items: start;
	}
	.ft-article-page__sidebar{ position: sticky; top: 24px; }
}

/* 本文ラッパー — メディア標準の 18px 統一 */
.ft-article-page .ft-article-body{
	max-width: 760px;
	font-size: 18px;
	line-height: 1.9;
	font-weight: 400;            /* normal — Google Fonts の 400 weight に確実にバインド */
	color: #1e293b;
	letter-spacing: 0;
	word-wrap: break-word;
}
.ft-article-page .ft-article-body p,
.ft-article-page .ft-article-body li{
	font-weight: 400;
}
.ft-article-page .ft-article-body p,
.ft-article-page .ft-article-body li,
.ft-article-page .ft-article-body{
	letter-spacing: 0 !important;
}
.ft-article-body > p{
	margin: 0 0 1.6em;
	font-size: inherit; /* webma.css 等の上書きを防ぐ */
}
.ft-article-body h2{
	font-size: 24px;
	font-weight: 700;
	margin: 2em 0 .8em;
	color: var(--ft-ink);
	letter-spacing: -.005em;
	line-height: 1.4;
}
@media (min-width: 720px){
	.ft-article-body h2{ font-size: 26px; }
}
@media (min-width: 1080px){
	.ft-article-body h2{ font-size: 28px; }
}
.ft-article-body h3{
	font-size: 20px;
	font-weight: 700;
	margin: 1.8em 0 .7em;
	color: var(--ft-ink);
	line-height: 1.45;
}
@media (min-width: 720px){
	.ft-article-body h3{ font-size: 22px; }
}
@media (min-width: 1080px){
	.ft-article-body h3{ font-size: 24px; }
}
.ft-article-body h4{
	font-size: 18px;
	font-weight: 700;
	margin: 1.6em 0 .6em;
	color: var(--ft-ink);
}
@media (min-width: 720px){
	.ft-article-body h4{ font-size: 19px; }
}
.ft-article-body a{
	color: var(--ft-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}
.ft-article-body a:hover{ color: var(--ft-accent-ink); }
.ft-article-body strong{ color: var(--ft-ink); font-weight: 700; }
.ft-article-body ul,
.ft-article-body ol{
	padding-left: 1.5em;
	margin: 1.4em 0;
}
.ft-article-body li{ margin: .4em 0; }
.ft-article-body li::marker{ color: var(--ft-accent); }
.ft-article-body blockquote{
	border-left: 3px solid var(--ft-accent);
	padding: .4em 1.3em;
	margin: 1.6em 0;
	color: var(--ft-ink-2);
	font-style: italic;
	background: #fbfcff;
	border-radius: 0 8px 8px 0;
}
.ft-article-body code{
	font-family: var(--ft-font-mono);
	font-size: .92em;
	background: var(--ft-line-2);
	color: var(--ft-ink);
	padding: .15em .45em;
	border-radius: 5px;
}
.ft-article-body pre{
	background: #0f172a;
	color: #e2e8f0;
	padding: 1.3em 1.4em;
	border-radius: 12px;
	overflow-x: auto;
	font-size: .95rem;
	line-height: 1.7;
	margin: 1.6em 0;
	-webkit-overflow-scrolling: touch;
}
.ft-article-body pre code{
	background: transparent;
	color: inherit;
	padding: 0;
	font-size: 1em;
}
.ft-article-body img,
.ft-article-body figure{
	max-width: 100%;
	margin: 1.6em 0;
	border-radius: 10px;
	height: auto;
	display: block;
}
.ft-article-body figcaption{
	font-size: .9rem;
	color: var(--ft-ink-3);
	margin-top: .55em;
	text-align: center;
}
.ft-article-body table{
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: .98rem;
	border: 1px solid var(--ft-line);
	border-radius: 10px;
	overflow: hidden;
}
.ft-article-body th,
.ft-article-body td{
	padding: .85em 1em;
	border-bottom: 1px solid var(--ft-line);
	text-align: left;
}
.ft-article-body th{
	background: var(--ft-surface-2);
	font-weight: 700;
	color: var(--ft-ink);
}
.ft-article-body tr:last-child td{ border-bottom: 0; }
.ft-article-body hr{
	border: 0;
	border-top: 1px solid var(--ft-line);
	margin: 2em 0;
}

/* =============================================================
   Article Footer (After content: references / author / meta / related / prev-next)
   ============================================================= */

.ft-article-footer{
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 48px);
	margin-top: clamp(40px, 5vw, 64px);
}

/* References / 出典 */
.ft-references{
	background: #fbfcff;
	border: 1px solid var(--ft-line);
	border-left: 3px solid var(--ft-accent);
	border-radius: 0 12px 12px 0;
	padding: 1.4rem 1.6rem;
}
.ft-references__head{
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: .9rem;
}
.ft-references__eyebrow{
	font-family: var(--ft-font-mono);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-accent-ink);
	font-weight: 700;
}
.ft-references__title{
	font-size: 17px;
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0;
}
.ft-references__list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .35rem;
}
.ft-references__list li{
	padding: .4em 0;
	border-bottom: 1px dashed var(--ft-line);
	font-size: 16px;
	color: var(--ft-ink-2);
}
.ft-references__list li:last-child{ border-bottom: 0; }
.ft-references__list a{
	color: var(--ft-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	transition: color .15s ease;
}
.ft-references__list a:hover{ color: var(--ft-accent); text-decoration: underline; }
.ft-references__list a::after{
	content: "↗";
	font-size: .85em;
	color: var(--ft-ink-4);
}

/* Author box — エディトリアル系: 角丸・背景なし、上下細罫線、アイコンは左フロート */
.author_bio_section,
.ft-author{
	padding: 24px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--ft-line);
	border-bottom: 1px solid var(--ft-line);
	border-radius: 0;
}
@media (min-width: 600px){
	.author_bio_section,
	.ft-author{
		padding: 28px 0;
	}
}
.author_bio_section .author_name,
.ft-author__name{
	font-size: 17px;
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0 0 12px;
	letter-spacing: -.005em;
}
.author_bio_section .author_name::before{
	content: "AUTHOR";
	display: block;
	font-family: var(--ft-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-accent);
	font-weight: 700;
	margin-bottom: 4px;
}
/* アバターは左フロート、バイオが回り込む */
.author_bio_section .author_avatar,
.ft-author__avatar img{
	float: left;
	margin: 2px 18px 6px 0;
	width: 64px !important;
	height: 64px !important;
	border-radius: 50%;
	object-fit: cover;
}
.author_bio_section .author_details,
.ft-author__bio{
	font-size: 15px;
	line-height: 1.75;
	color: var(--ft-ink-3);
	margin: 0;
	overflow: hidden; /* float のための clearfix 兼用 */
}
.author_bio_section::after,
.ft-author::after{
	content: "";
	display: table;
	clear: both;
}

/* メタ行：タグ・カテゴリ・更新日を1ブロックに */
.ft-article-meta{
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.2rem 0;
	border-top: 1px solid var(--ft-line);
	border-bottom: 1px solid var(--ft-line);
}
.ft-article-meta__row{
	display: flex;
	flex-wrap: wrap;
	gap: .4em 1rem;
	align-items: baseline;
	font-size: 15px;
	color: var(--ft-ink-3);
}
.ft-article-meta__label{
	font-family: var(--ft-font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-ink-4);
	font-weight: 700;
	flex-shrink: 0;
	min-width: 80px;
}
.ft-article-meta__row strong{ color: var(--ft-ink); font-weight: 600; }
.ft-article-meta__row a{
	color: var(--ft-accent);
	text-decoration: none;
}
.ft-article-meta__row a:hover{ text-decoration: underline; }
.ft-article-meta__tags{
	display: flex; flex-wrap: wrap; gap: .4rem;
}
.ft-article-meta__tag{
	font-size: 14px;
	background: rgba(82,104,182,.08);
	color: var(--ft-accent-ink);
	padding: .25em .8em;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background .15s ease;
}
.ft-article-meta__tag:hover{ background: rgba(82,104,182,.16); }

/* Related Articles wrapper */
.ft-related-articles__head{
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin-bottom: 1.2rem;
}
.ft-related-articles__eyebrow{
	font-family: var(--ft-font-mono);
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ft-accent);
	font-weight: 700;
}
.ft-related-articles__title{
	font-size: 22px;
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0;
}

/* Prev / Next */
.ft-prev-next{
	display: grid;
	gap: .8rem;
	padding: 1.2rem 0;
	border-top: 1px solid var(--ft-line);
	border-bottom: 1px solid var(--ft-line);
}
@media (min-width: 720px){
	.ft-prev-next{ grid-template-columns: 1fr 1fr; gap: 1rem; }
}
.ft-prev-next__item{
	display: flex;
	gap: .9rem;
	align-items: center;
	padding: .7rem .8rem;
	border-radius: 10px;
	text-decoration: none;
	color: var(--ft-ink);
	transition: background .15s ease, transform .12s ease;
	border: 1px solid transparent;
}
.ft-prev-next__item:hover{
	background: #fbfcff;
	border-color: var(--ft-line);
}
.ft-prev-next__item--next{
	flex-direction: row-reverse;
	text-align: right;
}
.ft-prev-next__thumb{
	width: 64px; height: 64px;
	border-radius: 8px;
	flex-shrink: 0;
	background: #f1f5f9;
	overflow: hidden;
}
.ft-prev-next__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-prev-next__body{ min-width: 0; flex: 1; }
.ft-prev-next__label{
	font-family: var(--ft-font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-accent);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: .3em;
}
.ft-prev-next__title{
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ft-ink);
	margin: .25em 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =============================================================
   Single Article Sidebar (white + accent)
   ============================================================= */

/* サイドバー全体：PCで本文との縦罫線セパレーター */
.ft-sidebar{
	display: flex;
	flex-direction: column;
	gap: 32px;
}
@media (min-width: 1080px){
	.ft-article-page__sidebar{
		border-left: 1px solid var(--ft-line);
		padding-left: 32px;
	}
}

/* 各ブロック：上端の細いアクセントライン（メディアサイト的シグナル） */
.ft-sb{
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 14px 0 0;
	position: relative;
}
.ft-sb::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 2px;
	background: var(--ft-accent);
}
.ft-sb__head{
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ft-line);
}
.ft-sb__eyebrow{
	font-family: var(--ft-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ft-accent);
	font-weight: 700;
}
.ft-sb__title{
	font-size: 15px;
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0;
	letter-spacing: .01em;
}

/* 検索 */
.ft-sb-search{ display: flex; gap: .4rem; }
.ft-sb-search input[type="search"],
.ft-sb-search input[type="text"]{
	flex: 1;
	padding: 10px 13px;
	border: 1px solid var(--ft-line);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	color: var(--ft-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ft-sb-search input:focus{
	outline: none;
	border-color: var(--ft-accent);
	box-shadow: 0 0 0 3px rgba(82,104,182,.15);
}
.ft-sb-search button[type="submit"]{
	padding: 0 .9rem;
	border: 1px solid var(--ft-accent);
	background: var(--ft-accent);
	color: #fff;
	border-radius: 10px;
	font-size: .92rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

/* サイドバー内の記事リスト（カテゴリハブ・脆弱性フィード等） */
.ft-sb-list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.ft-sb-list a{
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 11px;
	text-decoration: none;
	color: var(--ft-ink);
	padding: 10px 0;
	border-bottom: 1px solid var(--ft-line);
	transition: color .15s ease;
}
.ft-sb-list a:last-child{ border-bottom: 0; }
.ft-sb-list a:hover .ft-sb-list__title{ color: var(--ft-accent); }
.ft-sb-list__thumb{
	width: 52px; height: 52px;
	border-radius: 6px;
	background: #f1f5f9;
	overflow: hidden;
	flex-shrink: 0;
}
.ft-sb-list__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-sb-list__noimg{
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ft-ink-4);
	font-family: var(--ft-font-mono);
	font-size: .65rem;
}
.ft-sb-list__body{ min-width: 0; }
.ft-sb-list__title{
	font-size: 13px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ft-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s ease;
	margin: 0;
}
.ft-sb-list__date{
	font-family: var(--ft-font-mono);
	font-size: 11px;
	color: var(--ft-ink-4);
	display: block;
	margin-top: .3em;
}

/* タグ chips */
.ft-sb-tags{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.ft-sb-tag{
	font-size: 12px;
	background: rgba(82,104,182,.08);
	color: var(--ft-accent-ink);
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s ease;
}
.ft-sb-tag:hover{ background: rgba(82,104,182,.16); }

/* 既存 sb-* クラスをft-sb-*相当の見た目に上書き（互換維持） */
.ft-zone .sb-block,
.site-sidebar .sb-block{
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 14px 0 0;
	margin-bottom: 32px;
	position: relative;
}
.ft-zone .sb-block::before,
.site-sidebar .sb-block::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 2px;
	background: var(--ft-accent);
}
.ft-zone .sb-block .sb-title,
.site-sidebar .sb-title{
	font-size: 15px;
	font-weight: 700;
	color: var(--ft-ink);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ft-line);
	letter-spacing: .01em;
}
.ft-zone .sb-list,
.site-sidebar .sb-list{
	list-style: none;
	padding: 0;
	margin: 0;
}
.ft-zone .sb-list__item,
.site-sidebar .sb-list__item{
	padding: .55rem 0;
	border-bottom: 1px dashed var(--ft-line);
}
.ft-zone .sb-list__item:last-child,
.site-sidebar .sb-list__item:last-child{ border-bottom: 0; }
.ft-zone .sb-link,
.site-sidebar .sb-link{
	color: var(--ft-ink);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.55;
	display: block;
}
.ft-zone .sb-link:hover,
.site-sidebar .sb-link:hover{ color: var(--ft-accent); }
.ft-zone .sb-tags__wrap,
.site-sidebar .sb-tags__wrap{ display: flex; flex-wrap: wrap; gap: .4rem; }
.ft-zone .sb-tag,
.site-sidebar .sb-tag{
	font-size: 12px;
	background: rgba(82,104,182,.08);
	color: var(--ft-accent-ink);
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
}
.ft-zone .sb-tag:hover,
.site-sidebar .sb-tag:hover{ background: rgba(82,104,182,.16); }

/* ---------- Visually hidden ------------------------------- */
.ft-sr{
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================
   Category / Archive (re-uses ft-zone shell)
   ============================================================= */

/* Hero meta line */
.ft-hero__stats{
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	color: var(--ft-ink-3);
	font-size: 15px;
	font-family: var(--ft-font-mono);
}
.ft-hero__stats strong{ color: var(--ft-ink); font-weight: 600; }
.ft-hero__stats span + span::before{
	content: "";
	display: inline-block;
	width: 4px; height: 4px;
	background: var(--ft-ink-4);
	border-radius: 50%;
	margin: 0 .8rem 3px;
	vertical-align: middle;
}

/* Article card grid */
.ft-articles{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}
.ft-article{
	background: var(--ft-surface);
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	text-decoration: none;
	color: inherit;
}
.ft-article:hover{
	border-color: var(--ft-accent-2);
	transform: translateY(-3px);
	box-shadow: var(--ft-shadow-md);
	color: inherit;
}
.ft-article__media{
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
	overflow: hidden;
}
.ft-article__media img{
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.ft-article:hover .ft-article__media img{ transform: scale(1.04); }
.ft-article__noimg{
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.4);
	font-family: var(--ft-font-mono);
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ft-article__cat{
	position: absolute;
	left: 14px; top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(15,23,42,.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	letter-spacing: .04em;
}
.ft-article__cat a{ color: inherit; text-decoration: none; }
.ft-article__body{
	padding: 1.2rem 1.4rem 1.4rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: .6rem;
}
.ft-article__date{
	font-family: var(--ft-font-mono);
	font-size: 14px;
	color: var(--ft-ink-4);
	letter-spacing: .04em;
}
.ft-article__title{
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ft-ink);
	letter-spacing: -.005em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ft-article__excerpt{
	margin: 0;
	color: var(--ft-ink-3);
	font-size: 15px;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ft-article__readmore{
	margin-top: auto;
	padding-top: 10px;
	color: var(--ft-accent);
	font-weight: 700;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Description card */
.ft-cat-intro{ font-size: 1.02rem; color: var(--ft-ink-3); line-height: 1.85; }
.ft-cat-intro p{ max-width: 80ch; }

/* Wrapper for legacy ccsi-p08 within ft-zone — soften their look */
.ft-zone .ccsi-p08{ background: transparent; }
.ft-zone .ccsi-p08__head{ padding-bottom: 1rem; }
.ft-zone .ccsi-p08__title{ color: var(--ft-ink); }
.ft-zone .ccsi-p08__ja{ font-size: var(--ft-step-3); font-weight: 700; letter-spacing: -.005em; }
.ft-zone .ccsi-tabs__tab{
	font-family: var(--ft-font-mono);
	font-weight: 600;
	color: var(--ft-ink-3);
	border: 1px solid var(--ft-line);
	background: var(--ft-surface);
	padding: .55rem 1rem;
	border-radius: var(--ft-radius-sm);
	cursor: pointer;
	margin-right: .4rem;
	font-size: .9rem;
	transition: all .15s ease;
}
.ft-zone .ccsi-tabs__tab.is-active,
.ft-zone .ccsi-tabs__tab[aria-selected="true"]{
	background: var(--ft-accent);
	color: #fff;
	border-color: var(--ft-accent);
}

/* =============================================================
   サイドバー文脈での ccsi-sidebar-p08 上書き
   （元CSSは記事ページの広い枠を想定している。320pxの狭幅向けに圧縮）
   ============================================================= */

.ft-sidebar .ccsi-sidebar-p08,
.site-sidebar .ccsi-sidebar-p08{
	margin-top: 0;
	max-width: 100%;
	overflow: hidden;
}
.ft-sidebar .ccsi-sidebar-p08__head,
.site-sidebar .ccsi-sidebar-p08__head{
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ft-line);
}
.ft-sidebar .ccsi-sidebar-p08__title,
.site-sidebar .ccsi-sidebar-p08__title{
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .02em;
	color: var(--ft-ink);
	-webkit-line-clamp: unset;
	overflow: visible;
}
.ft-sidebar .ccsi-sidebar-p08__en,
.site-sidebar .ccsi-sidebar-p08__en{
	font-size: 11px !important;
	font-weight: 700;
	color: var(--ft-accent);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ft-sidebar .ccsi-sidebar-p08__ja,
.site-sidebar .ccsi-sidebar-p08__ja{
	font-size: 14px !important;
	font-weight: 700;
	color: var(--ft-ink);
}
.ft-sidebar .ccsi-sidebar-p08__all,
.site-sidebar .ccsi-sidebar-p08__all{
	font-size: 12px;
	font-weight: 700;
}

/* タブ：細く・小さく */
.ft-sidebar .ccsi-tabs__list,
.site-sidebar .ccsi-tabs__list{
	display: flex;
	gap: 4px;
	margin: 0 0 12px;
	flex-wrap: wrap;
}
.ft-sidebar .ccsi-tabs__tab,
.site-sidebar .ccsi-tabs__tab{
	border: 1px solid var(--ft-line);
	background: #fff;
	padding: 5px 10px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 12px;
	color: var(--ft-ink-3);
	cursor: pointer;
}
.ft-sidebar .ccsi-tabs__tab.is-active,
.ft-sidebar .ccsi-tabs__tab[aria-selected="true"],
.site-sidebar .ccsi-tabs__tab.is-active,
.site-sidebar .ccsi-tabs__tab[aria-selected="true"]{
	background: var(--ft-accent);
	color: #fff;
	border-color: var(--ft-accent);
}

/* Top3 グリッドはサイドバーでは使わない（top_n=0 の前提で空にする） */
.ft-sidebar .ccsi-sidebar-p08__top3,
.site-sidebar .ccsi-sidebar-p08__top3{
	display: none;
}

/* 4位以下リストを軽量化 */
.ft-sidebar .ccsi-sidebar-p08__list,
.site-sidebar .ccsi-sidebar-p08__list{
	border-top: 0;
}
.ft-sidebar .ccsi-sidebar-p08__item,
.site-sidebar .ccsi-sidebar-p08__item{
	border-bottom: 1px solid var(--ft-line);
}
.ft-sidebar .ccsi-sidebar-p08__link,
.site-sidebar .ccsi-sidebar-p08__link{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
}
.ft-sidebar .ccsi-sidebar-p08__rank,
.site-sidebar .ccsi-sidebar-p08__rank{
	width: auto;
	height: auto;
	border: 0;
	background: transparent;
	color: var(--ft-accent);
	font-size: 22px;
	font-weight: 800;
	font-family: var(--ft-font-mono);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1;
	flex: 0 0 auto;
	width: 28px;
	text-align: left;
}
.ft-sidebar .ccsi-sidebar-p08__thumb,
.site-sidebar .ccsi-sidebar-p08__thumb{
	width: 52px;
	height: 38px;
	border-radius: 6px;
	flex: 0 0 auto;
}
.ft-sidebar .ccsi-sidebar-p08__body,
.site-sidebar .ccsi-sidebar-p08__body{
	flex: 1;
	min-width: 0;
	gap: 4px;
}
.ft-sidebar .ccsi-sidebar-p08__metarow,
.site-sidebar .ccsi-sidebar-p08__metarow{
	font-size: 11px;
	gap: 8px;
}
.ft-sidebar .ccsi-sidebar-p08__metarow .ccsi-sidebar-p08__views,
.ft-sidebar .ccsi-sidebar-p08__metarow .ccsi-sidebar-p08__date,
.site-sidebar .ccsi-sidebar-p08__metarow .ccsi-sidebar-p08__views,
.site-sidebar .ccsi-sidebar-p08__metarow .ccsi-sidebar-p08__date{
	font-size: 11px;
	color: var(--ft-ink-4);
}
.ft-sidebar .ccsi-sidebar-p08 .ccsi-sidebar-p08__title,
.site-sidebar .ccsi-sidebar-p08 .ccsi-sidebar-p08__title{
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ft-ink);
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ft-sidebar .ccsi-sidebar-p08__go,
.site-sidebar .ccsi-sidebar-p08__go{
	display: none; /* 矢印アイコンは省略してすっきり */
}

/* No results message */
.ft-empty{
	padding: 3rem 1.4rem;
	text-align: center;
	color: var(--ft-ink-4);
	background: var(--ft-surface-2);
	border: 1px dashed var(--ft-line);
	border-radius: var(--ft-radius-md);
}

/* =============================================================
   Mobile overrides — sub 720px / sub 480px
   ============================================================= */
@media (max-width: 720px){
	/* Hero: 余白だけ圧縮、フォントサイズはメディア標準を維持 */
	.ft-hero{
		padding: 24px 0 26px;
	}
	.ft-hero__crumbs{ margin-bottom: 12px; gap: 6px; flex-wrap: wrap; }
	.ft-hero__crumbs svg{ width: 13px; height: 13px; }
	.ft-hero__eyebrow{
		margin-bottom: 14px;
	}
	.ft-hero__title{
		font-size: 28px;
		line-height: 1.25;
		margin-bottom: 12px;
	}
	.ft-hero__lead{
		font-size: 16px;
		line-height: 1.75;
	}
	.ft-hero__stats{
		margin-top: 14px;
		gap: 14px;
	}
	.ft-hero__stats span + span::before{ margin: 0 8px 2px; }

	/* Card: padding を一段詰める */
	.ft-card{
		padding: 20px 18px;
		border-radius: 14px;
	}
	.ft-card__heading{
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		margin-bottom: 20px;
		padding-bottom: 18px;
	}
	.ft-card__title{ font-size: 22px; }
	.ft-card__desc{ font-size: 16px; line-height: 1.75; }

	/* Tabs: 等分・コンパクトに */
	.ft-tabs{
		display: flex;
		width: 100%;
		padding: 4px;
	}
	.ft-tab{
		flex: 1 1 0;
		min-width: 0;
		padding: 11px 9px;
		font-size: 15px;
	}

	/* Options */
	.ft-options{ gap: 14px 20px; }

	/* Field / textarea */
	.ft-field__head{ gap: 8px; }
	.ft-textarea{
		min-height: 170px;
		padding: 14px 15px;
		border-radius: 10px;
	}
	.ft-textarea--mono-out{ min-height: 280px; }
	.ft-input{ padding: 14px 15px; }

	/* Buttons: 全幅 + タップ性 (min 48px height) */
	.ft-btn{
		padding: 15px 20px;
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}
	.ft-btn--lg{ padding: 16px 22px; min-height: 52px; }
	.ft-iconbtn{
		min-height: 40px;
	}

	/* Inline form (whois / ssl / dns) は縦積み */
	.ft-form-inline{ grid-template-columns: 1fr; gap: 10px; }

	/* Toolbar の貼付け/クリアなどは折返し */
	.ft-pane__tools, .ft-toolbar{ flex-wrap: wrap; gap: 6px; }

	/* Base64 / URL の3カラムを完全に縦積み */
	.ft-base64-io{ grid-template-columns: 1fr; gap: 16px; }
	.ft-base64-actions{
		flex-direction: row;
		padding: 0;
		justify-content: stretch;
	}
	.ft-base64-actions .ft-btn{ flex: 1 1 0; }

	/* Tips / related / DNS results を1カラム化 */
	.ft-tips, .ft-related{ grid-template-columns: 1fr; gap: 14px; }
	.ft-tip, .ft-related__item{ padding: 21px 22px; }
	/* タイポはデスクトップと同等を維持 */

	/* JWT セグメンツも縦積み */
	.ft-jwt-segments{ grid-template-columns: 1fr !important; }
	.ft-jwt-seg pre{ padding: 16px 18px; font-size: 15px; }
	.ft-jwt-claims{ grid-template-columns: 1fr; }

	/* Articles grid: 1fr */
	.ft-articles{ gap: 18px; }
	.ft-article__title{ font-size: 18px; }
	.ft-article__excerpt{ font-size: 15px; }

	/* Hash result rows */
	.ft-hash-row{
		grid-template-columns: 76px 1fr auto;
		gap: 10px;
		padding: 10px 12px;
	}
	.ft-hash-row__alg{ font-size: 15px; }
	.ft-hash-row__value{ font-size: 15px; }

	/* Security headers grade */
	.ft-sh-grade{ grid-template-columns: 1fr; gap: 14px; padding: 20px; }
	.ft-sh-grade__letter{ width: 76px; height: 76px; font-size: 38px; border-radius: 18px; }
	.ft-sh-row{
		grid-template-columns: 26px 1fr auto;
		gap: 10px;
		padding: 14px 16px;
	}
	.ft-sh-row__icon{ width: 22px; height: 22px; font-size: 13px; }

	/* Result card のヘッダー */
	.ft-result__head{ padding: 14px 16px; gap: 8px; }
	.ft-result__body{ padding: 16px; }
	.ft-summary{ grid-template-columns: 1fr; gap: 10px; }

	/* DNS result block */
	.ft-dns-block__row{
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 11px 14px;
	}

	/* Section heading */
	.ft-section-head{ flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
	.ft-section-head__title{ font-size: 22px; }

	/* Pagination touch target */
	.ft-zone .pagination a,
	.ft-zone .pagination span{
		min-width: 44px; height: 44px; font-size: 15px;
	}

	/* Footer (site footer) */
	.ccsi-footer__inner{ padding: 40px 18px 0; }
	.ccsi-footer__grid{ gap: 32px; padding-bottom: 36px; }
	.ccsi-footer__bar{ padding: 21px 0 24px; gap: 12px; }
	.ccsi-footer__legal{ gap: 14px 18px; }
	.ccsi-footer__legal a, .ccsi-footer__copy{ font-size: 14px; }
	.ccsi-footer__desc{ font-size: 15px; }
	.ccsi-pagetop{ width: 48px; height: 48px; right: 14px; bottom: 14px; }

	/* AdSense slot */
	.ft-adslot{ padding: 14px 16px 18px; }

	/* Free tool main */
	.ft-main{ padding: 18px 0 36px; }
}

@media (max-width: 480px){
	.ft-hero__title{ font-size: 25px; }
	.ft-hero__lead{ font-size: 15px; }
	.ft-card{ padding: 16px 16px; }
	.ft-card__title{ font-size: 20px; }
	.ft-textarea{ min-height: 150px; }
	/* タップ時にiOSでズームしないよう16px下限を保つ */
	.ft-tab__sub{ display: none; }
	.ft-iconbtn span{ display: none; }
	.ft-iconbtn{ padding: 9px 10px; min-height: 40px; }
	.ft-iconbtn svg{ opacity: 1; width: 18px; height: 18px; }
	.ft-article__title{ font-size: 17px; }
	.ft-tip__title{ font-size: 17px; }
	.ft-related__title{ font-size: 17px; }
	.ft-section-head__title{ font-size: 20px; }
}