@charset "utf-8";

.help-layout main {
    z-index: auto;
    width: 100%;
}
@media (min-width: 1200px) {
    .help-layout {
        max-width: 78rem;
    }
    .help-layout main {
        max-width: calc(78rem - 300px - 3rem);
    }
}

.text-light-blue {
    color: #75d6ff;
}
.text-blue {
    color: #1d9df2;
}

.bg-help-title {
	background-color: #0063e4;
    background: linear-gradient(18deg, rgba(0,90,200,1), rgba(0,210,207,1) 120%);
}
.help-subtitle {
    font-size: 1.5rem;
}
@media (min-width: 641px) {
    .help-subtitle {
        font-size: 2rem;
    }
}

.query {
    position: relative;
}
input[name="q"] {
	outline: none;
	border: none;
	border-bottom: .25rem solid #75d6ff;
	background-color: transparent;
	color: #75d6ff;
    font-size: 1.5rem;
    font-weight: bold;
	-webkit-appearance: none;
	border-radius: 0;
	margin: 0;
	padding: .25rem;
	padding-right: calc(1em + .75rem);
	padding-left: 0;
	width: 100%;
	transition: all .2s;
}
input[name="q"]:focus {
	border-color: #fff;
	color: #fff;
	transition: all .2s;
}
input[name="q"]::placeholder {
    color: inherit;
}
input[name="q"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
input[name="q"] ~ .icon {
    position: absolute;
    right: .25rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 1em;
    text-align: center;
	color: #75d6ff;
    font-size: 1.5rem;
    text-decoration: none;
	transition: all .2s;
}
input[name="q"]:focus ~ .icon {
	border-color: #fff;
	color: #fff;
	transition: all .2s;
}
@media (min-width: 641px) {
    input[name="q"] {
        font-size: 2rem;
    }
    input[name="q"] ~ .icon {
        font-size: 2rem;
    }
}

.help-index-title {
    font-size: 1.5rem;
    font-weight: bold;
}
.help-index {
    column-count: 1;
    column-gap: 5rem;
    margin: 1rem 0;
}
.help-index li {
    padding-bottom: 1em;
    break-inside: avoid;
    list-style: disc;
}
.help-index li:last-child {
    padding-bottom: 0;
}
@media (min-width: 641px) {
    .help-index {
        column-count: 2;
    }
}

.help-content-title {
    font-size: 1.5rem;
    font-weight: bold;
}
@media (min-width: 641px) {
    .help-content-title {
        font-size: 2rem;
    }
}

ul.info li {
    padding-bottom: 1em;
    break-inside: avoid;
    list-style: disc;
}
ul.info li:last-child {
    padding-bottom: 0;
}
ol.info li {
    padding-bottom: 1em;
    break-inside: avoid;
}
ol.info li:last-child {
    padding-bottom: 0;
}

.device-select input[type="radio"] {
    display: none;
}
.step-index {
    display: none;
    counter-reset: step-counter;
    list-style: none;
    padding-left: 2.5rem;
}
input[name="device"][value="mobile"] ~ .help-steps > .steps-mobile {
    display: block;
}
input[name="device"][value="tablet"] ~ .help-steps > .steps-tablet {
    display: block;
}
input[name="device"][value="laptop"] ~ .help-steps > .steps-laptop {
    display: block;
}
.device-select i.fas {
    width: 2em;
    height: 2em;
    margin: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    background-color: #ccc;
}
input[name="device"][value="mobile"] ~ .device-select > .icon-mobile {
    background-color: #36bdf4;
}
input[name="device"][value="tablet"] ~ .device-select > .icon-tablet {
    background-color: #36bdf4;
}
input[name="device"][value="laptop"] ~ .device-select > .icon-laptop {
    background-color: #36bdf4;
}
.step-index li {
    padding-bottom: 1em;
}
.step-index li:last-child {
    padding-bottom: 0;
}
.step-index > li:before {
    counter-increment: step-counter;
    content: counter(step-counter);
    border-radius: 50%;
    position: relative;
    margin-left: -2.5rem;
    margin-right: 0.75rem;
    float: left;
    font-size: 80%;
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    background-color: #00796b;
}

.circle-spinner,
.circle-spinner:after {
	border-radius: 50%;
	width: 1em;
	height: 1em;
}
.circle-spinner {
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	position: relative;
	text-indent: -9999em;
	border-top: .125em solid rgba(0, 0, 0, 0.2);
	border-right: .125em solid rgba(0, 0, 0, 0.2);
	border-bottom: .125em solid rgba(0, 0, 0, 0.2);
	border-left: .125em solid #1d9df2;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: circle-spinner 1.1s infinite linear;
	animation: circle-spinner 1.1s infinite linear;
}
.circle-spinner.suspended {
	-webkit-animation: initial;
	animation: initial;
}
@-webkit-keyframes circle-spinner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes circle-spinner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* 幅の設定 */
.w-responsive {
    width: 100%;
}
@media (min-width: 992px) {
    .w-responsive {
        width: 50%;
    }
}

.fs-mobile-shrink {
    font-size: 0.5rem;
}
@media (min-width: 768px) {
    .fs-mobile-shrink {
        font-size: inherit;
    }
}

/* Q&A */
.qa dt {
    float: left;
    width: 1.5em;
    font-weight: bold;
    clear: left;
}
.qa dd {
    margin-left: 1.5em;
}

/* サイドバー */
aside.d-none.d-xl-block {
    width: calc(320px + 2rem);
}