/* Generated by Page-Specific CSS & JavaScript Assets; post: 14 */
/* ==========================================================
   sbcc
   SSLサーバー証明書 更新未完了 ハウツー記事
   ========================================================== */


/* ==========================================================
   01. Base
   ========================================================== */

.sbcc-ssl-guide {
	--sbcc-ssl-text: #292929;
	--sbcc-ssl-subtext: #616161;
	--sbcc-ssl-line: #d9d9d9;
	--sbcc-ssl-soft: #f7f7f7;
	--sbcc-ssl-marker: #fff2a8;
	--sbcc-ssl-safe: #edf7f1;
	--sbcc-ssl-safe-line: #74a985;
	--sbcc-ssl-action: #eef5fa;
	--sbcc-ssl-action-line: #668aa2;
	--sbcc-ssl-warning: #fff8e8;
	--sbcc-ssl-warning-line: #c39745;
	--sbcc-ssl-danger: #fff0f0;
	--sbcc-ssl-danger-line: #b96868;

	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--sbcc-ssl-text);
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.95;
}

.sbcc-ssl-guide *,
.sbcc-ssl-guide *::before,
.sbcc-ssl-guide *::after {
	box-sizing: border-box;
}

.sbcc-ssl-guide h2,
.sbcc-ssl-guide h3,
.sbcc-ssl-guide h4,
.sbcc-ssl-guide p,
.sbcc-ssl-guide ul,
.sbcc-ssl-guide ol {
	margin-top: 0;
}

.sbcc-ssl-guide h2,
.sbcc-ssl-guide h3,
.sbcc-ssl-guide h4 {
	color: inherit;
	padding: 0;
	font-weight: 700;
	word-break: normal;
	overflow-wrap: break-word;
}

.sbcc-ssl-guide p {
	margin-bottom: 0;
}

.sbcc-ssl-guide p + p {
	margin-top: 26px;
}

.sbcc-ssl-guide a {
	word-break: break-word;
}

.sbcc-ssl-guide code {
	display: inline;
	padding: 0.12em 0.38em;
	border-radius: 3px;
	background: var(--sbcc-ssl-soft);
	font-family: Consolas, Monaco, monospace;
	font-size: 0.92em;
}

.sbcc-ssl-guide mark {
	padding: 0.05em 0.18em;
	background:
		linear-gradient(
			transparent 55%,
			var(--sbcc-ssl-marker) 55%
		);
	color: inherit;
}


/* ==========================================================
   02. Container
   ========================================================== */

.sbcc-ssl-guide__container {
	width: calc(100% - 48px);
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
}


/* ==========================================================
   03. Intro
   ========================================================== */

.sbcc-ssl-guide__intro {
	padding-top: 46px;
	padding-bottom: 46px;
	font-size: clamp(1.04rem, 1.5vw, 1.14rem);
}

.sbcc-ssl-guide__intro p + p {
	margin-top: 26px;
}


/* ==========================================================
   04. First summary
   ========================================================== */

.sbcc-ssl-guide__summary-box {
	margin-bottom: 54px;
	padding: 30px 34px;
	border: 2px solid var(--sbcc-ssl-text);
}

.sbcc-ssl-guide__summary-label {
	margin-bottom: 8px;
	color: var(--sbcc-ssl-subtext);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.sbcc-ssl-guide__summary-main {
	margin: 0;
	font-size: clamp(1.16rem, 2vw, 1.38rem);
	line-height: 1.7;
}

.sbcc-ssl-guide__summary-main + p {
	margin-top: 18px;
}


/* ==========================================================
   05. Sections
   ========================================================== */

.sbcc-ssl-guide__section {
	padding-top: 72px;
	padding-bottom: 72px;
}

.sbcc-ssl-guide__section + .sbcc-ssl-guide__section {
	border-top: 1px solid var(--sbcc-ssl-line);
}

.sbcc-ssl-guide__section > h2 {
	margin-bottom: 34px;
	font-size: clamp(1.6rem, 2.65vw, 2.12rem);
	line-height: 1.55;
}

.sbcc-ssl-guide__section > h3 {
	margin-top: 48px;
	margin-bottom: 24px;
	font-size: clamp(1.25rem, 2vw, 1.48rem);
	line-height: 1.55;
}

.sbcc-ssl-guide__section > h4 {
	margin-top: 38px;
	margin-bottom: 18px;
	font-size: 1.08rem;
	line-height: 1.6;
}


/* ==========================================================
   06. Category label
   ========================================================== */

.sbcc-ssl-guide__category-label {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 12px;
	border-left: 4px solid;
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1.5;
}

.sbcc-ssl-guide__category-label--safe {
	background: var(--sbcc-ssl-safe);
	border-color: var(--sbcc-ssl-safe-line);
}

.sbcc-ssl-guide__category-label--action {
	background: var(--sbcc-ssl-action);
	border-color: var(--sbcc-ssl-action-line);
}

.sbcc-ssl-guide__category-label--stop {
	background: var(--sbcc-ssl-danger);
	border-color: var(--sbcc-ssl-danger-line);
}


/* ==========================================================
   07. Mail Box
   ========================================================== */

.sbcc-ssl-guide__mail-box {
	margin-top: 38px;
	margin-bottom: 38px;
	padding: 30px 32px;
	background: var(--sbcc-ssl-soft);
	border-left: 4px solid var(--sbcc-ssl-text);
}

.sbcc-ssl-guide__mail-box-label {
	margin-bottom: 18px;
	font-size: 0.84rem;
	font-weight: 700;
}

.sbcc-ssl-guide__mail-box ul {
	margin: 0;
	padding-left: 1.5em;
}

.sbcc-ssl-guide__mail-box li + li {
	margin-top: 8px;
}


/* ==========================================================
   08. Steps
   ========================================================== */

.sbcc-ssl-guide__steps {
	margin-top: 42px;
	border-top: 1px solid var(--sbcc-ssl-line);
}

.sbcc-ssl-guide__step {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 24px;
	padding-top: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--sbcc-ssl-line);
}

.sbcc-ssl-guide__step-number {
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.sbcc-ssl-guide__step-content h3 {
	margin: 0 0 12px;
	font-size: 1.2rem;
	line-height: 1.55;
}

.sbcc-ssl-guide__step-content p {
	margin-bottom: 0;
}

.sbcc-ssl-guide__step-content p + p {
	margin-top: 16px;
}


/* ==========================================================
   09. Safe Box
   ========================================================== */

.sbcc-ssl-guide__safe-box {
	margin-top: 42px;
	padding: 30px 32px;
	background: var(--sbcc-ssl-safe);
	border: 1px solid var(--sbcc-ssl-safe-line);
}

.sbcc-ssl-guide__safe-box h3 {
	margin-bottom: 16px;
	font-size: 1.18rem;
}

.sbcc-ssl-guide__safe-box p + p {
	margin-top: 16px;
}


/* ==========================================================
   10. Procedure Box
   ========================================================== */

.sbcc-ssl-guide__procedure-box {
	margin-top: 40px;
	margin-bottom: 44px;
	padding: 32px;
	border: 1px solid var(--sbcc-ssl-action-line);
	background: var(--sbcc-ssl-action);
}

.sbcc-ssl-guide__procedure-box h3 {
	margin-bottom: 20px;
	font-size: 1.2rem;
}

.sbcc-ssl-guide__procedure-box ol {
	margin: 0;
	padding-left: 1.6em;
}

.sbcc-ssl-guide__procedure-box li {
	padding-left: 4px;
}

.sbcc-ssl-guide__procedure-box li + li {
	margin-top: 10px;
}


/* ==========================================================
   11. Check Box
   ========================================================== */

.sbcc-ssl-guide__check-box {
	margin-top: 34px;
	padding: 28px 30px;
	background: var(--sbcc-ssl-soft);
	border: 1px solid var(--sbcc-ssl-line);
}

.sbcc-ssl-guide__check-box h4 {
	margin-bottom: 16px;
	font-size: 1rem;
}

.sbcc-ssl-guide__check-box ul {
	margin: 0;
	padding-left: 1.5em;
}

.sbcc-ssl-guide__check-box li + li {
	margin-top: 7px;
}


/* ==========================================================
   12. Cause Grid
   ========================================================== */

.sbcc-ssl-guide__cause-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-top: 42px;
}

.sbcc-ssl-guide__cause-card {
	min-width: 0;
	padding: 28px;
	border: 1px solid var(--sbcc-ssl-line);
}

.sbcc-ssl-guide__cause-number {
	margin-bottom: 8px;
	color: var(--sbcc-ssl-subtext);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.sbcc-ssl-guide__cause-card h3 {
	margin-bottom: 14px;
	font-size: 1.16rem;
	line-height: 1.5;
}

.sbcc-ssl-guide__cause-card p:last-child {
	margin-bottom: 0;
}


/* ==========================================================
   13. Danger
   ========================================================== */

.sbcc-ssl-guide__danger-box {
	margin-top: 38px;
	margin-bottom: 38px;
	padding: 32px;
	background: var(--sbcc-ssl-warning);
	border: 1px solid var(--sbcc-ssl-warning-line);
}

.sbcc-ssl-guide__danger-box h3 {
	margin-bottom: 20px;
	font-size: 1.18rem;
	line-height: 1.55;
}

.sbcc-ssl-guide__danger-box ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbcc-ssl-guide__danger-box li {
	padding: 6px 11px;
	border: 1px solid var(--sbcc-ssl-warning-line);
	background: #fff;
	font-size: 0.9rem;
}

.sbcc-ssl-guide__marker-danger {
	background:
		linear-gradient(
			transparent 55%,
			#ffd6d6 55%
		) !important;
}


/* ==========================================================
   14. Stop Box
   ========================================================== */

.sbcc-ssl-guide__stop-box {
	margin-top: 40px;
	padding: 32px;
	background: var(--sbcc-ssl-danger);
	border: 2px solid var(--sbcc-ssl-danger-line);
}

.sbcc-ssl-guide__stop-box h3 {
	margin-bottom: 20px;
	font-size: 1.2rem;
	line-height: 1.55;
}

.sbcc-ssl-guide__stop-box ul {
	margin: 0;
	padding-left: 1.5em;
}

.sbcc-ssl-guide__stop-box li + li {
	margin-top: 9px;
}

.sbcc-ssl-guide__stop-box ul + p {
	margin-top: 26px;
}


/* ==========================================================
   15. Flow summary
   ========================================================== */

.sbcc-ssl-guide__flow-summary {
	max-width: 720px;
	margin: 44px auto 0;
}

.sbcc-ssl-guide__flow-summary-item {
	padding: 28px 30px;
	border: 1px solid var(--sbcc-ssl-line);
}

.sbcc-ssl-guide__flow-summary-item > span {
	display: block;
	margin-bottom: 8px;
	color: var(--sbcc-ssl-subtext);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.sbcc-ssl-guide__flow-summary-item h3 {
	margin-bottom: 12px;
	font-size: 1.18rem;
}

.sbcc-ssl-guide__flow-summary-item p {
	margin-bottom: 0;
}

.sbcc-ssl-guide__flow-arrow {
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: center;
	font-size: 1.3rem;
	line-height: 1;
}


/* ==========================================================
   16. Conclusion
   ========================================================== */

.sbcc-ssl-guide__conclusion {
	padding-bottom: 84px;
}

.sbcc-ssl-guide__conclusion-box {
	margin-top: 38px;
	margin-bottom: 38px;
	padding: 32px;
	border: 2px solid var(--sbcc-ssl-text);
}

.sbcc-ssl-guide__conclusion-box h3 {
	margin-bottom: 20px;
	font-size: 1.2rem;
}

.sbcc-ssl-guide__conclusion-box ol {
	margin: 0;
	padding-left: 1.55em;
}

.sbcc-ssl-guide__conclusion-box li {
	padding-left: 5px;
}

.sbcc-ssl-guide__conclusion-box li + li {
	margin-top: 12px;
}


/* ==========================================================
   17. Article notice
   ========================================================== */

.sbcc-ssl-guide__notice {
	margin-top: 20px;
	margin-bottom: 64px;
	padding: 28px 30px;
	background: var(--sbcc-ssl-soft);
	border-top: 1px solid var(--sbcc-ssl-line);
	border-bottom: 1px solid var(--sbcc-ssl-line);
	color: var(--sbcc-ssl-subtext);
	font-size: 0.88rem;
	line-height: 1.85;
}

.sbcc-ssl-guide__notice h2 {
	margin-bottom: 16px;
	color: var(--sbcc-ssl-text);
	font-size: 1rem;
}

.sbcc-ssl-guide__notice p + p {
	margin-top: 14px;
}


/* ==========================================================
   18. Tablet
   ========================================================== */

@media (max-width: 800px) {

	.sbcc-ssl-guide__container {
		width: calc(100% - 40px);
	}

	.sbcc-ssl-guide__cause-grid {
		grid-template-columns: 1fr;
	}

}


/* ==========================================================
   19. Smartphone
   ========================================================== */

@media (max-width: 640px) {

	.sbcc-ssl-guide {
		line-height: 1.9;
	}

	.sbcc-ssl-guide__container {
		width: calc(100% - 32px);
	}

	.sbcc-ssl-guide__intro {
		padding-top: 34px;
		padding-bottom: 36px;
	}

	.sbcc-ssl-guide__summary-box {
		margin-bottom: 38px;
		padding: 24px 22px;
	}

	.sbcc-ssl-guide__section {
		padding-top: 54px;
		padding-bottom: 54px;
	}

	.sbcc-ssl-guide__section > h2 {
		margin-bottom: 26px;
	}

	.sbcc-ssl-guide__step {
		grid-template-columns: 1fr;
		gap: 8px;
		padding-top: 26px;
		padding-bottom: 26px;
	}

	.sbcc-ssl-guide__mail-box,
	.sbcc-ssl-guide__safe-box,
	.sbcc-ssl-guide__procedure-box,
	.sbcc-ssl-guide__check-box,
	.sbcc-ssl-guide__danger-box,
	.sbcc-ssl-guide__stop-box,
	.sbcc-ssl-guide__conclusion-box {
		padding: 24px 22px;
	}

	.sbcc-ssl-guide__cause-card {
		padding: 24px 22px;
	}

	.sbcc-ssl-guide__danger-box ul {
		display: block;
	}

	.sbcc-ssl-guide__danger-box li {
		width: 100%;
	}

	.sbcc-ssl-guide__danger-box li + li {
		margin-top: 8px;
	}

	.sbcc-ssl-guide__flow-summary-item {
		padding: 24px 22px;
	}

	.sbcc-ssl-guide__notice {
		padding: 24px 22px;
	}

}