@charset "utf-8";

#start-options {
	width: 100%;
	max-width: 736px;
	margin: 7.5em auto 1em;
	padding: 0 var(--padding);
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 1fr 1fr;
}

.start-card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 2em;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.start-card h2 {
	color: var(--green);
	font-size: 1.5em;
	font-weight: 700;
	margin-bottom: 0.5em;
}

.start-card p {
	font-size: 0.85em;
	margin-bottom: 1em;
	text-align: left;
	flex-grow: 1;
}

.start-card .btn-group {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.start-card .btn-main {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--green);
	color: var(--white);
	padding: 1em;
	border-radius: 3em;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.2s ease-in-out;
}

.start-card .btn-sub {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--white);
	color: var(--green);
	border: 2px solid var(--green);
	padding: 0.85em; /* Compensate for border */
	border-radius: 3em;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.2s ease-in-out;
}

.start-card .btn-main:hover,
.start-card .btn-sub:hover {
	opacity: 0.8;
}

@media all and (max-width: 736px) {
	#start-options {
		grid-template-columns: 1fr;
		margin: 5.5em auto 1em;
	}
	
	.start-card {
		padding: 1.5em;
	}
}


.install-guide {
	width: min(100% - (var(--padding) * 2), 736px);
	margin: 6.6em auto 0;
	padding: 1.1em 1.1em;
	border: 0;
	border-radius: 1em;
	background: var(--white);
	box-sizing: border-box;
}

.install-guide[hidden],
.install-guide .install-guide-panel[hidden] {
	display: none !important;
}

.install-guide-head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.75em;
	background: var(--orange);
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 1em;
}

.install-guide-icon {
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	line-height: 1;
	flex: 0 0 auto;
}

.install-guide-title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
}

.install-guide-body {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.8;
	color: #000;
}

.install-guide-body-strong {
	font-weight: 700;
}

.install-guide-steps {
	margin: 0.8em 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55em;
}

.install-guide-step {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
}

.install-guide-step-no {
	width: 1.7em;
	height: 1.7em;
	border-radius: 999px;
	background: var(--green);
	border: 0;
	color: var(--white);
	font-size: 0.9em;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-top: 0.05em;
}

.install-guide-step-text {
	flex: 1 1 auto;
	min-width: 0;
	color: #000;
}

.install-guide-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	height: 1.8em;
	padding: 0 0.45em;
	margin: 0 0.12em;
	border-radius: 0.55em;
	background: transparent;
	border: 0;
	font-weight: 700;
	color: var(--green);
	vertical-align: middle;
	box-sizing: border-box;
}

.install-guide-note {
	margin: 0.8em 0 0;
	font-size: 0.88em;
	line-height: 1.7;
	color: #000;
}

body.has-install-guide #start-options {
	margin-top: 1em;
}


.install-guide-share-icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin: 0 0.12em;
	vertical-align: -0.18em;
	background: var(--green);
	-webkit-mask: url('/images/common/share.svg') center / contain no-repeat;
	mask: url('/images/common/share.svg') center / contain no-repeat;
}

body.is-install-guide-only #start-options,
body.is-install-guide-only #content .tabs,
body.is-install-guide-only #content .tab-content-area {
	display: none !important;
}

@media all and (max-width: 736px) {
	.install-guide {
	width: min(100% - (var(--padding) * 2), 736px);
	margin: 6.6em auto 0;
	padding: 1.1em 1.1em;
	border: 0;
	border-radius: 1em;
	background: var(--white);
	box-sizing: border-box;
}