@media (max-width:820px) {
	header > div, main > div,
	header > div > div, main > div > div {
		width:100%;
	}
	
	main li:first-child + li {
		margin-left:0;
		padding:78px 244px 0 0;
	}
}

@media (min-width:480px) and (max-width:820px) {
	main li, main li:first-child + li {
		width:200px;
	}

	main li:first-child + li {
		text-align:right;
	}
		
	main li + li:before,
	main li + li + li::before	{
		top:-28px;
		left:236px;
	}

	main li + li + li::before {
		top:13px;
	}
	
	main ul {
		padding:36px 0;
		margin:0 auto;
		width:444px;
	}
	
	main li:first-child + li figure {
		left:auto;
		right:0;
	}
}

@media (max-width:479px) {
	header {
		padding:24px 0;
	}
	
	header span {
		width:100%;
		display:block;
		line-height:36px;
		float:left;
	}
	
	header > div > div > span + span::before {
		display:none;
	}
	
	header figure {
		float:none;
		width:auto;
		padding-left:36px;
		padding-right:36px;
		padding-bottom:18px;
	}
	
	header figure img {
		width:100%;
		height:auto;
	}
	
	header span a {
		display:block;
	}
	
	main ul {
		padding:24px 22px 0;
	}

	main ul li,
	main ul li:first-child + li {
		width:auto;
	}
	
	main ul li {
		padding:20px 0 0 110px;
		height:107px;
	}

	main ul li:first-child + li {
		margin:0;
		padding:20px 0 0 110px;
	}
	
	main li figure {
		border:2px solid #373736;
		width:100px;
		height:100px;
	}
	
	main li figure img {
		width:96px;
		height:96px;
	}
	
	main li + li:before,
	main li + li + li:before	{
		top:-20px;
		transform:none;
		height:14px;
		left:50px;
		right:auto;
		border-left:2px dotted #000;
	}
	
	main li,
	main li + li + li {
		padding-top:16px;
	}
	
	main li + li {
		margin-top:0;
	}
}

@media (max-width:320px) {
	main ul {
		padding-left:12px;
		padding-right:12px;
	}

	main ul li {
		height:112px;
	}
	
	main ul li:first-child {
		padding-top:16px;
	}
	
	main ul li:first-child + li {
		height:108px;
	}
}