/*------------------------------
Re・De Ring ヘルプページ
スタイルシート
------------------------------*/

@media screen and (min-width: 768px) {
	:root {
		--spacing-common: 40px;
	}	
}

/*------------------------------共通*/
.bold {
	font-weight: bold;
}
header {
	border-bottom: 1px solid var(--color-l-grey);
}

footer {
	background: var(--color-white);
	padding: 2rem;
	border-top: 1px solid var(--color-l-grey);
}

footer * {
    color: var(--color-black) !important;
    text-align: right !important;
}

ol {
	list-style: decimal;
	margin-left: 1.5em;
}

table {
	width: 100%;
}

th {
	width: 28%;
}

.wired {
	border: 1px solid var(--color-black);
}

.wired a {
	background: var(--color-transparent);
	transition: .3s;
}

.wired a:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.wired a:hover:after {
	border-color: var(--color-white);
}

.flex {
	display: flex;
}

.col3 > * {
	width: calc(33% - var(--spacing-common));
}

.list_disc {
	list-style: disc;
	margin-left: 1.5em;
}

.breadcrumbs {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin: 2em 0;
	padding-left: 3em;
	box-sizing: border-box;
}

.breadcrumbs li + li:before {
	content: "＞";
	display: inline-block;
	margin: 0 .5em;
}

.breadcrumbs a {
	text-decoration: underline;
}

.breadcrumbs a:hover {
	text-decoration: none;
}

.article_ttl {
	padding-bottom: 1em;
	border-bottom: 1px solid var(--color-grey);
}

.help_article  p {
	margin: 1em 0!important;
}

.help_article  * + h3 {
	margin-top: calc(var(--spacing-common) * 1.5);
}

.help_article h3 {
	border-left: 5px solid var(--color-grey);
	padding-left: .5em;
	box-sizing: border-box;
}

.article_img {
	max-width: 960px;
}

.footer_container_ex {
	display: flex;
	justify-content: space-between;
	margin-top: 0;
	padding: 0; 
	width: calc(100% - calc(var(--spacing-common)* 2));
}

@media screen and (max-width:960px) {
	header {
		padding-left: 1em;
	}
	
	.logo {
		width: 128px;
		height: 56px;
	}
}

@media screen and (orientation: portrait) {
	.col3 > * {
		width: 100%;
	}
	.flex {
		flex-wrap: wrap;
		row-gap: 3dvh;
	}
}


/*------------------------------レイアウト*/
[class^="wrap-"] {
    display: flex;
        flex-direction: column;
        gap: 13dvh;
}
[class^="wrap-"] > [class*="bg-"] {
    padding: 10dvh 0;
}

[class^="wrap-"] > .section-title + [class^="section"] {
    margin-top: -5dvh;
}

@media screen and (orientation: landscape) {
    [class^="wrap-"] {
        gap: 15dvh;
    }
    [class^="wrap-"] > [class*="bg-"] {
        padding: 15dvh 0;
    }
}

.intro {
	padding-top: calc(var(--spacing-common)* 3);
}

.step-list {
	margin-top: var(--spacing-common);
}

.step-list > li + li {
	border-top: 1px dashed var(--color-d-grey);
	margin-top: 3dvh;
	padding-top: 3dvh;
}

.step-list li h4 + * {
	margin-top: 1em;
}

.step-list li .img {
	width: 24%;
}

.step-list li .txt {
	width: 72%;
}

.contents_list .btn {
	margin-top: 0;
	margin-bottom: 0;
}

.contents_list .btn p + p {
	margin-top: 0;
}

@media screen and (max-width: 1024px) {
	.step-list li .img {
		width: 32%;
	}

	.step-list li .txt {
		width: 62%;
	}	
}

@media screen and (max-width: 767px) {
	.step-list > li + li {
		margin-top: 5dvh;
		padding-top: 5dvh;
	}
	
	.step-list li .img, .step-list li .txt {
		width: 100%;
	}
	
	.step-list .rev {
		flex-direction: column-reverse;
	}
}