/* reset */
*,::after,::before{box-sizing:border-box}
a,button{color:inherit;cursor:pointer}
a{text-decoration:none}
button{background-color:transparent;border-width:0;padding:0}
figure,p{margin:0}
input::-moz-focus-inner{border:0;padding:0;margin:0}
dd,ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;font-weight:inherit}
cite{font-style:normal}
fieldset{border-width:0;padding:0;margin:0}

/*
==========================================================================
  common
========================================================================== */

:root {
	--color-black: #222;
	--color-blue-1: #008ee0;
	--color-blue-2: #372db0;
	--color-bg: #d1e7fe;
	--px: calc(1rem / 16);
}

html {
	scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
	color: var(--color-black);
	font-family: "Kosugi Maru", sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 1.5;
	letter-spacing: .03em;
	margin: 0;
	padding: 0;
	position: relative;
	background-color: var(--color-bg);
}

img {
	max-width: 100%;
}

@media (max-width: 575px) {
	body {
		background-size: 50px 50px;
	}
}

/*
==========================================================================
  breadcrumb
========================================================================== */

.breadcrumb {
	color: #fff;
	font-size: calc(14 * var(--px));
	font-weight: 400;
	font-family: "Abel",
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		sans-serif;
	line-height: 1;
	display: flex;
	align-items: center;
	padding: 3px 5px;
	overflow-x: auto;
	white-space: nowrap;
	background-color: var(--color-black);
}

.breadcrumb__logo {
	flex-shrink: 0;
	display: block;

	& > img {
		width: 1.7em;
	}
}

.breadcrumb__list {
	display: flex;
	align-items: center;
	margin-left: .3em;
}

.breadcrumb__item:not(:last-child) {
	margin-right: .6em;

	&::after {
		content: "";
		display: inline-block;
		vertical-align: top;
		width: 0;
		height: 1em;
		border-right: 1px solid;
		transform: rotate(30deg);
	}
}

.breadcrumb__link {
	display: inline-block;
	vertical-align: top;
}
a.breadcrumb__link {
	margin-right: .6em;
	padding-bottom: 2px;
	border-bottom: currentColor solid 1px;
}
span.breadcrumb__link {
	padding-bottom: 3px;
}

@media screen and (max-width: 575px) {

	.breadcrumb {
		font-size: calc(12 * var(--px));
	}
}


/*
==========================================================================
  stickybtn
========================================================================== */

.backtotop {
	color: var(--color-black);
	font-size: 12px;
	width: 4em;
	height: 4em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border: currentColor solid 1px;
	border-radius: 50%;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	transition: all ease .3s;
	visibility: hidden;
	opacity: 0;
	
	&::before {
		content: "";
		display: block;
		width: .8em;
		height: .8em;
		margin-top: .35em;
		border-top: currentColor solid 1px;
		border-right: currentColor solid 1px;
		transform: rotate(-45deg);
		transition: all ease .3s;
	}
	&:hover {
		color: var(--color-blue-2);
	}
}

body.scroll300 .backtotop {
	visibility: visible;
	opacity: 1;
}

@media (max-width: 767px) {

	.backtotop {
		bottom: 10px;
		right: 10px;
	}
}


/*
==========================================================================
  hero
========================================================================== */

.main-hero {
	text-align: center;
	width: 100%;
	display: block;
	padding: 20px;
	background-color: #fff;
}

.hero-p1 {
	color: var(--color-blue-1);
	font-size: calc(18 * var(--px));
	display: flex;
	justify-content: center;
	align-items: center;

	& > img {
		width: 1.6em;
		margin-right: .3em;
	}
}

.hero-h1 {
	font-size: calc(27 * var(--px));
	margin-top: .2em;
}

.hero-p2 {
	font-size: calc(12 * var(--px));
	margin-top: 1em;
}

@media screen and (min-width: 600px) {

	.main-hero {
		padding: 40px 20px;
	}

	.hero-p1 {
		font-size: calc(24 * var(--px));
	}

	.hero-h1 {
		font-size: calc(36 * var(--px));
	}

	.hero-p2 {
		font-size: calc(14 * var(--px));
	}
}


/*
==========================================================================
  site-main
========================================================================== */

.site-main {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

@media screen and (max-width: 599px) {
	.site-main {
		padding: 0 16px;
	}
}

/*
==========================================================================
  main-steplist
========================================================================== */

.main-steplist {
	padding: 12px 0;
	margin: 10px 0;
	position: sticky;
	top: 0;
	left: auto;
	right: auto;
	background-color: var(--color-bg);
}

.main-steplist__ol {
	display: flex;
}

.main-steplist__item {
	flex-grow: 1;

	&:not(:last-child) {
		margin-right: .8em;
	}
}

.steplist-item__inner {
	color: #fff;
	font-size: calc(12 * var(--px));
	display: block;
	padding: .5em;
	background-color: #888;
	transition: background-color .2s;

	&.active {
		background-color: var(--color-blue-2);
	}

	&:hover {
		background-color: var(--color-blue-2);
	}

	& > span {
		font-size: 1.4em;
		margin-left: .1em;
	}
}

@media screen and (min-width: 600px) {

	.main-steplist {
		margin: 28px 0;
	}

	.steplist-item__inner {
		font-size: calc(15 * var(--px));
	}
}

/*
==========================================================================
  main-step
========================================================================== */

.main-step {
	margin-bottom: 20px;
	padding-bottom: 40px;
	background-color: #fff;
}

.main-step__headline {
	color: #fff;
	font-size: calc(26 * var(--px));
	padding: .1em 0;
	background-color: var(--color-blue-2);

	& > span {
		font-size: 1.4em;
		margin-left: .1em;
	}
}

.main-step__inner {
	padding: 30px 20px 0;

	img {
		display: block;
		margin: 0 auto;
	}
}

.step-caption {
	color: var(--color-blue-2);
	font-size: calc(20 * var(--px));
}

.step-row {
	margin: 10px auto 0;

	&.maxwidth {
		max-width: 640px;
		margin: 30px auto 0;
	}
	&.flex-end {
		align-items: flex-end;
	}
}

.step-sp {
	margin: 30px auto 0;
}

.step-row__item {
	padding-top: 40px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;

	&:not(:last-child) {
		padding-top: 20px;
		padding-bottom: 40px;
		border-bottom: var(--color-bg) solid 1px;
	}
}

@media screen and (max-width: 599px) {

	.step-row.pc-only {
		display: none;
	}
}

@media screen and (min-width: 600px) {

	.main-step {
		margin-bottom: 40px;
		padding-bottom: 40px;
	}
	.main-step__inner {
		padding: 40px 20px 0;
	}

	.step-caption {
		font-size: calc(24 * var(--px));
	}

	.step-row {
		display: flex;
		margin: 20px auto 0;

		&.maxwidth {
			margin: 40px auto 0;
		}
	}

	.step-sp {
		display: none;
	}

	.step-row__item {
		padding-top: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.step-row__item:not(:last-child) {
		padding-bottom: 20px;
		border-bottom: none;
		border-right: var(--color-bg) solid 1px;
	}
}

.step-row__item__p1 {
	margin-bottom: 20px;

	& > span {
		display: inline-block;
	}

	& > img.pc {
		display: none;
	}
}

@media screen and (min-width: 600px) {

	.step-row__item__p1 > img.pc {
		display: block;
	}
	.step-row__item__p1 > img.sp {
		display: none;
	}
}

.step-row__item__p2 {
	margin-bottom: 20px;
}

.step-row__item__a {
	color: #fff;
	font-size: calc(21 * var(--px));
	display: block;
	width: fit-content;
	margin: 0 auto;
	padding: .1em 2.6em;
	background-color: var(--color-blue-2);
	transition: background-color .2s;

	&:hover {
		background-color: var(--color-black);
	}

	& > span {
		font-size: 1.4em;
		margin: 0 .1em;
	}
}

.step-row__screenshot {
	border: #ddd solid 1px;
}

.step-row__text {
	text-align: left;
}

.step-row__leftcol,
.step-row__rightcol {
	flex-grow: 1;
}

.step-row__rightcol {
	margin-top: 20px;
}

@media screen and (min-width: 600px) {

	.step-row__rightcol {
		margin-top: 0;
		margin-left: 20px;
	}
}

#step1 .step-row {
	align-items: center;
}

#step2 .step-row {
	align-items: center;
}


/*
==========================================================================
  main-link
========================================================================== */

.main-link {
	margin: 30px 0;
}

.main-link__btn {
	color: #fff;
	font-size: calc(16 * var(--px));
	display: block;
	max-width: 30em;
	padding: .8em;
	margin: 0 auto;
	position: relative;
	background-color: var(--color-blue-2);
	transition: background-color .2s;

	&:hover {
		background-color: var(--color-black);
	}

	&::after {
		content: '\3009';
		font-size: 1.2em;
		display: block;
		margin-left: 1.2em;
		position: absolute;
		top: 50%;
		right: .6em;
		transform: translateY(-50%);
	}

	& > span {
		display: block;
	}
	& > .span-2 {
		font-size: .9em;
	}
}

@media screen and (min-width: 600px) {

	.main-link {
		margin: 60px 0;
	}
}


/*
==========================================================================
  footer
========================================================================== */

.site-footer .copyright {
	color: #fff;
	font-size: calc(14 * var(--px));
	font-family: 'Abel', sans-serif;
	font-weight: 400;
	line-height: 1.2;
	padding: .5em 10px .7em;
	background-color: #333;
}
.site-footer .copyright > small {
	font-size: inherit;
}

@media (max-width: 767px) {
	.site-footer .copyright {
		font-size: calc(12 * var(--px));
	}
}