@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap');
/*--------------------------------------
全体
--------------------------------------*/
.breadcrumb {
	max-width: 100%;
}
.contents {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 3.6vw;
    line-height: 1.5em;
	color: #222;
	padding: 10vw 0;
	
	& a {
		text-decoration: none;
		color: inherit;
	}
	& .inner {
		width: 90vw;
		margin: 0 auto;
	}
	& img {
		width: 100%;
	}
}
/*--------------------------------------
見出し
--------------------------------------*/
.contents h2 {
	font-size: 6.4vw;
	line-height: 1.3em;
	font-weight: 900;
	text-align: center;
	margin-bottom: 5vw;
}
.contents h3 {
	text-align: center;
	font-size: 5.0vw;
	line-height: 1.3em;
	font-weight: 700;
	margin-bottom: 8vw;
}

/*--------------------------------------
ナビ
--------------------------------------*/
#navi {
	width: 100%;
	background-color: #fff;
	
	& ul {
		width: 90vw;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		
		& li {
			width: 49%;
			font-size: 3.8vw;
			line-height: 1.5em;
			font-weight: 700;
			text-align: center;

			& a {
				display: block;
				padding: 2vw 0 3.5vw;
				background-color: #ffe500;
				border-radius: 7px;
				box-shadow: 2px 2px 0 rgba(0 0 0 / 20%);
				position: relative;
			}
			& a:after {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: "\f107";
				line-height: 1.0em;
				position: absolute;
				right: 0;
				left: 0;
				margin: 0 auto;
				bottom: 0;
			}
		}
	}
	&.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		padding: 5px 0 7px;
		box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
		
		& li {
			font-size: 3.2vw;
			line-height: 1.2em;
			
			& a {
				padding: 1vw 0;
			}
			& a:after {
				right: 1vw;
				top: 3vw;
				left: auto;
				bottom: auto;
			}
		}
	}
}
.fix-navi:has(.fixed) {
	height: 12.7vw;
}

/*--------------------------------------
フロー
--------------------------------------*/
#regist,#howto {
	padding: 10vw 0;
}
.flow-list {
	width: 100%;
	
	& li {
		padding: 0 3vw 5vw;
		background-color: #f7f7f7;
		margin-bottom: 5vw;
		
		&:before {
			display: block;
			font-size: 12vw;
			line-height: 1.8em;
			color: #888;
			text-align: center;
		}
		
		&:last-child {
			border-bottom: none;
		}
		
	}
	& .text {
		& h4 {
			font-size: 4.0vw;
			line-height: 1.5;
			font-weight: 700;
			color: #f00;
			margin-bottom: 2vw;
		}
		& p {
			font-size: 3.6vw;
			font-weight: 500;
		}
	}
	
	& .img {
		width: 80vw;
		margin: 3vw auto 0;
		
		& img {
			padding: 3vw;
			background-color: #fff;
		}
	}
}
/*番号*/
#regist .flow-list li{
	&:nth-child(1):before {content: "①";}
	&:nth-child(2):before {content: "②";}
	&:nth-child(3):before {content: "③";}
	&:nth-child(4):before {content: "④";}
	&:nth-child(5):before {content: "⑤";}
}
#howto .flow-list li{
	&:nth-child(1):before {content: "①②";}
	&:nth-child(2):before {content: "③";}
	&:nth-child(3):before {content: "④";}
	&:nth-child(4):before {content: "⑤";}
}