@charset "utf-8";
/*
* CONTENTS
******************************************************/
.howto {
	padding: 40px 20px;
	max-width: 540px;
	margin: auto;
}
@media print, screen and (min-width: 1140px) {
	.howto {
		max-width:100%;
		padding: 70px 0;
	}
	.howto__content {
		max-width:var(--content-size);
		margin: auto;
	}
	.howto__content-inner {
		max-width:var(--content-size-small);
		margin: auto;
	}
}
/*
* MV TEXT
******************************************************/
.Mainvisual__heading.as_howto {
	font-size:var(--font-size-heading);
}
@media print, screen and (min-width: 1140px) {
	.Mainvisual__heading.as_howto {
		font-size:var(--font-size-mv);
	}
}

/*
* BUTTON LINKS
******************************************************/
.howto__button-links {
	margin: 0 0 40px 0;
}
.howto__button-link {
	position: relative;
	width: 340px;
    margin: auto;
	padding: 0 0 24px 0;
}
.howto__button-link a {
	display: block;
	width: 100%;
    padding: 10px 1em;
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    border-radius: 36px;
    background: var(--color-default);
    color: var(--color-text-gray);
    border: 1px solid var(--color-text-gray);
	transition: var(--transition-base);
	text-align: center;
}
.howto__button-link a:hover {
	background: var(--color-secondary);
	color: var(--color-default);
	border: 1px solid var(--color-secondary);
}
.howto__button-link::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 12px solid var(--color-text-gray);
    border-bottom: 0;
    position: absolute;
    right: 12px;
    top: 16px;
}
.howto__button-link:hover::after {
	border-top: 12px solid var(--color-default);
}
@media print, screen and (min-width: 1140px) {
	.howto__button-links {
        margin: 0 auto 70px;
	}
	.howto__button-link {
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0 0 40px 0;
	}
	.howto__button-link a {
		padding: 12px 2em;
		font-size: var(--font-size-lm);
		font-weight: var(--font-bold);
		border-radius: 50px;
	}
	.howto__button-link::after {
		border-right: 14px solid transparent;
		border-left: 14px solid transparent;
		border-top: 24px solid var(--color-text-gray);
		right: 24px;
		top: 20px;
	}
	.howto__button-link:hover::after {
		border-top: 24px solid var(--color-default);
	}
}

/*
* HEADING
******************************************************/
.howto-mv-heading {
	font-size: 60px;
}
.howto__heading {
    background: var(--color-secondary);
    color: var(--color-default);
    font-size: var(--font-size-df);
    font-weight: var(--font-bold);
    text-align: center;
    padding: 24px 12px;
	margin: 0 -20px;
}
.heading-top-fixed {
	padding: 70px 0;
}
.howto__heading h2 {
	font-size: var(--font-size-md);
	font-weight:var(--font-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}
.howto__heading h2 span {
	font-size: var(--font-size-df);
	font-weight: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}
.howto__heading p {
	font-size: var(--font-size-sm);
    margin: 4px 0 0 0;
}
.howto__heading p a {
	color: var(--color-secondary);
	text-decoration: underline;
}
@media print, screen and (min-width: 1140px) {
	.howto-mv-heading {
		font-size: var(--font-size-mv);
	}
	.howto__heading {
        font-size: var(--font-size-lg);
        padding: 12px;
		margin: 0;
	}
	.heading-top-fixed {
		padding: 100px 0 0 0;
	}
	.howto__heading h2 {
		font-size: var(--font-size-lm);
	}
	.howto__heading h2 span {
		font-size: var(--font-size-lm);
	}
	.howto__heading p {
		font-size: var(--font-size-md);
	}
}

/*
* DESCRIPTION
******************************************************/
.howtoDesc {
	margin: 30px auto;
}
.howtoDesc p {
	font-size: var(--font-size-md);
	font-weight:var(--font-bold);
	color: var(--color-text-gray);
	text-align: center;
	line-height: 1.3;
	margin: 0 0 1em 0;
}
.howtoDesc p span {
	color: var(--color-secondary);
}
.howtoDesc p a {
	text-decoration: underline;
	color: var(--color-secondary);
}
@media print, screen and (min-width: 1140px) {
	.howtoDesc p {
		font-size: var(--font-size-lm);
	}
}

/*
* LIST
******************************************************/
.howto__list {
	padding: 0;
	margin: 0 -30px;
}
.list-border {
	border-bottom: 1px solid var(--color-primary);
}
.balloon-border {
	position: relative;
	min-width: 120px;
	max-width: 100%;
	color: var(--color-primary);
	background: var(--color-default);
	border-bottom: solid 1px var(--color-primary);
	box-sizing: border-box;
}
.balloon-border:before {
	content: "";
    position: absolute;
    bottom: -59px;
    left: 50%;
    margin-left: -40px;
    border: 40px solid transparent;
    border-top: 20px solid var(--color-default);
    z-index: 2;
}
.balloon-border:after {
	content: "";
    position: absolute;
    bottom: -60px;
    left: 50%;
    margin-left: -40px;
    border: 40px solid transparent;
    border-top: 20px solid var(--color-primary);
    z-index: 1;
}
.howto__list--heading {
    display: grid;
    grid-template-columns: 50px 1fr;
}
/*
.circle_number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-secondary);
    text-align: center;
    box-sizing: border-box;
    color: var(--color-default);
    font-weight: var(--font-bold);
    font-size: var(--font-size-ls);
    padding: 5px 0 0 0;
	margin: 6px 0 0 0;
}*/
.circle_number img {
	width:40px
}
.howto__list--heading--desc {
	font-weight: var(--font-bold);
}
.howto__list--heading--desc h3 {
    font-size: var(--font-size-lm);
    line-height: 1.5;
}
.howto__list--heading--desc h3 span {
	display: block;
}
.howto__list--heading--desc p {
	font-size: var(--font-size-df);
	line-height: 1.5;
}
.howto__list--content {
	margin: 14px;
}
@media print, screen and (min-width: 1140px) {
	.howto__lists {
		max-width: 940px;
		margin: auto;
		border-top: 1px solid var(--color-primary);
	}
	.howto__list {
        padding: 0 0 40px 0;
		margin: 0;
	}
	.balloon-border {
		margin: 0;
	}
	.balloon-border:before {
		bottom: -79px;
		left: 50%;
		margin-left: -50px;
		border: 50px solid transparent;
		border-top: 30px solid var(--color-default);
	}
	.balloon-border:after {
		bottom: -80px;
		left: 50%;
		margin-left: -50px;
		border: 50px solid transparent;
		border-top: 30px solid var(--color-primary);
	}
	.circle_number {
		width: 70px;
		height: 70px;
		font-size: 40px;
	}
	.circle_number img {
		width:70px
	}
	.howto__list--heading {
		grid-template-columns: 100px 1fr;
	}
	.howto__list--heading--desc h3 {
        font-size: var(--font-size-lg);
	}
	.howto__list--heading--desc h3 span {
		display: inline-block;
	}
	.howto__list--heading--desc p {
        font-size: var(--font-size-ml);
		margin: 6px 0 0 0;
	}
	.howto__list--content {
		margin: 26px auto;
	}
	.howto__list--content img {
		margin: auto;
		text-align: center;
	}
}