@charset "utf-8";
/* CSS Document */

/* -------------------------------------
	base
------------------------------------- */
body {
	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #000;
}
#wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}
a,
a:visited {
	color: #000;
	text-decoration: none;
}

/* -------------------------------------
	header
------------------------------------- */
#header {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 10;
}
.logo {
	position: absolute;
	top: 40px;
	left: 40px;
}
.nav_toggle {
	display: block;
	width: 50px;
	height: 50px;
	position: fixed;
	top: 25px;
	right: 40px;
	z-index: 9999;
}
.nav_toggle > span {
	display: block;
	width: 50px;
	height: 3px;
	background: #337f7f;
	border-radius: 1.5px;
	position: absolute;
}
.nav_toggle > span:nth-child(1) {
	top: 9px;
	transition: 0.5s ease 0.5s;
}
.nav_toggle > span:nth-child(2) {
	top: 24px;
	opacity: 1;
	transition: opacity 0.5s ease 0.8s;
}
.nav_toggle > span:nth-child(3) {
	top: 39px;
	transition: 0.5s ease 0.5s;
}
.nav_toggle.active > span {
	background: #fff;
}
.nav_toggle.active > span:nth-child(1) {
	background: #fff;
	transform: rotate(225deg);
	top: 24px;
	transition: background 0.5s ease, transform 0.5s ease 0.5s, top 0.5s ease 0.5s;
}
.nav_toggle.active > span:nth-child(2) {
	background: #fff;
	opacity: 0;
	transition: background 0.5s ease, opacity 0.5s ease 0.5s;
}
.nav_toggle.active > span:nth-child(3) {
	background: #fff;
	transform: rotate(-225deg);
	top: 24px;
	transition: background 0.5s ease, transform 0.5s ease 0.5s, top 0.5s ease 0.5s;
}
.g_nav {
	width: 240px;
	height: 100%;
	background: rgba(13,110,110,.8);
	position: fixed;
	top: 0;
	right: 0;
	overflow-y: scroll;
	transform: perspective(1000px) rotateY(-90deg);
	opacity: 1;
	transition: transform 0.5s ease, opacity 0.5s ease;
	transform-origin: center right;
}
.g_nav.on {
	opacity: 1;
	transform: rotateY(0);
	transition: 0.5s ease;
}
.g_nav ul {
	margin-top: 100px;
}
.g_nav a {
	display: block;
	padding: 36px 0 30px 70px;
	color: #fff;
	font-size: 1.14rem;
	font-weight: bold;
	font-family: "Rounded Mplus 1c";
	position: relative;
}
.g_nav a span {
	display: block;
	width: 42px;
	height: 43px;
	background: url(../img/span_bg.png) center /cover no-repeat;
	color: #000;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	line-height: 46px;
	position: absolute;
	top: 0;
	left: 20px;
	bottom: 0;
	margin: auto;
}
.g_nav a:hover {
	background: rgba(255,255,255,.2);
	transition: 0.3s ease;
}

/* -------------------------------------
	mv_area
------------------------------------- */
.mv_wrap {
	background: #edf6f5;
	position: relative;
}
.mv,
.clouds,
.customers {
	width: 100%;
	height: 600px;
	position: absolute;
	top: 0;
}
.customers {
	opacity: 0;
}
.mv_wrap.on .customers {
	opacity: 1;
	transition: 2s ease;
}
.mv {
	opacity: 0;
}
.mv_wrap.on .mv {
	opacity: 1;
	transition: 1.5s ease 0.5s;
}
.clouds > div {
	position: absolute;
	left: 50%;
}
.clouds > div:nth-child(1) {
	width: 78px;
	height: 52px;
	background: url(../img/cloud_010.gif) no-repeat;
	top: 80px;
	margin-left: -256px;
	animation: fluffy1 3s ease infinite;
}
.clouds > div:nth-child(2) {
	width: 110px;
	height: 67px;
	background: url(../img/cloud_020.gif) no-repeat;
	top: 108px;
	margin-left: 180px;
	animation: fluffy2 5.4s ease infinite;
}
.clouds > div:nth-child(3) {
	width: 142px;
	height: 87px;
	background: url(../img/cloud_030.gif) no-repeat;
	top: 478px;
	margin-left: -740px;
	animation: fluffy3 4s ease infinite;
}
.clouds > div:nth-child(4) {
	width: 156px;
	height: 94px;
	background: url(../img/cloud_040.gif) no-repeat;
	top: 150px;
	margin-left: 630px;
	animation: fluffy4 3s ease infinite;
}
@keyframes fluffy1 {
	0% {
		top: 75px;
	}
	50% {
		top: 85px;
	}
	100% {
		top: 75px;
	}
}
@keyframes fluffy2 {
	0% {
		top: 118px;
	}
	50% {
		top: 98px;
	}
	100% {
		top: 118px;
	}
}
@keyframes fluffy3 {
	0% {
		top: 468px;
	}
	50% {
		top: 488px;
	}
	100% {
		top: 468px;
	}
}
@keyframes fluffy4 {
	0% {
		top: 145px;
	}
	50% {
		top: 155px;
	}
	100% {
		top: 145px;
	}
}
.customers > div {
	position: absolute;
	left: 50%;
}
.customers > div:nth-child(1) {
	width: 336px;
	height: 336px;
	background: url(../img/customer_010.png) center /cover no-repeat;
	top: 96px;
	margin-left: -800px;
	animation: fluffy5 4s ease infinite;
}
.customers > div:nth-child(2) {
	width: 196px;
	height: 196px;
	background: url(../img/customer_020.png) center /cover no-repeat;
	top: 110px;
	margin-left: -412px;
	animation: fluffy6 3s ease infinite;
}
.customers > div:nth-child(3) {
	width: 196px;
	height: 196px;
	background: url(../img/customer_030.png) center /cover no-repeat;
	top: 330px;
	margin-left: -480px;
	animation: fluffy7 2.2s ease infinite;
}
.customers > div:nth-child(4) {
	width: 236px;
	height: 236px;
	background: url(../img/customer_040.png) center /cover no-repeat;
	top: 82px;
	margin-left: 335px;
	animation: fluffy8 3.8s ease infinite;
}
.customers > div:nth-child(5) {
	width: 196px;
	height: 196px;
	background: url(../img/customer_050.png) center /cover no-repeat;
	top: 330px;
	margin-left: 262px;
	animation: fluffy9 2s ease infinite;
}
.customers > div:nth-child(6) {
	width: 296px;
	height: 296px;
	background: url(../img/customer_060.png) center /cover no-repeat;
	top: 290px;
	margin-left: 490px;
	animation: fluffy10 3.4s ease infinite;
}
@keyframes fluffy5 {
	0% {
		top: 98px;
	}
	50% {
		top: 94px;
	}
	100% {
		top: 98px;
	}
}
@keyframes fluffy6 {
	0% {
		top: 107px;
	}
	50% {
		top: 113px;
	}
	100% {
		top: 107px;
	}
}
@keyframes fluffy7 {
	0% {
		top: 328px;
	}
	50% {
		top: 332px;
	}
	100% {
		top: 328px;
	}
}
@keyframes fluffy8 {
	0% {
		top: 82px;
	}
	50% {
		top: 78px;
	}
	100% {
		top: 82px;
	}
}
@keyframes fluffy9 {
	0% {
		top: 335px;
	}
	50% {
		top: 330px;
	}
	100% {
		top: 335px;
	}
}
@keyframes fluffy10 {
	0% {
		top: 293px;
	}
	50% {
		top: 287px;
	}
	100% {
		top: 293px;
	}
}

.mv h1 {
	text-align: center;
	margin-top: 176px;
}

/* outline */
.outline {
	padding: 600px 0 224px;
	position: relative;
	background: url(../img/town.png) center bottom 100px no-repeat;
}
.outline::after {
	content: '';
	display: block;
	width: 724px;
	height: 206px;
	background: url(../img/people.png) center /cover no-repeat;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -362px;
}
.outline h2 {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.75;
	opacity: 0;
}
.outline.on h2 {
	opacity: 1;
	transition: 2s ease;
}
.outline h2 span {
	background: url(../img/under_bar.gif) bottom repeat-x;
}
.outline h2 img {
	margin-top: 10px;
}
.collabo {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px);
}
.outline.on .collabo {
	opacity: 1;
	transform: translateY(0);
	transition: 1s ease 0.7s;
}
.collabo > li {
	width: 260px;
	height: 260px;
	margin: 0 65px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	text-align: center;
	position: relative;
}
.collabo > li:nth-child(1) {
	margin-left: 0;
}
.collabo > li:nth-child(2)::before,
.collabo > li:nth-child(2)::after {
	content: '';
	display: block;
	background: #000;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.collabo > li:nth-child(2)::before {
	width: 50px;
	height: 10px;
	left: -90px;
}
.collabo > li:nth-child(2)::after {
	width: 10px;
	height: 50px;
	left: -70px;
}
.collabo > li:last-child {
	margin-right: 0;
	background: #337f7f;
	color: #fff;
}
.collabo > li:last-child::before,
.collabo > li:last-child::after {
	content: '';
	display: block;
	width: 50px;
	height: 10px;
	background: #000;
	position: absolute;
	left: -90px;
}
.collabo > li:last-child::before {
	top: 113px;
}
.collabo > li:last-child::after {
	top: 137px;
}
.collabo > li:nth-child(1) p,
.collabo > li:nth-child(2) p {
	padding: 55px 0 20px;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.4;
	position: relative;
}
.collabo > li:nth-child(1) p::after,
.collabo > li:nth-child(2) p::after {
	content: '';
	display: block;
	width: 54px;
	height: 6px;
	background: url(../img/dotted.gif) center /cover no-repeat;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.collabo > li:nth-child(1) p strong,
.collabo > li:nth-child(2) p strong {
	font-size: 1.8rem;
	color: #f6b90f;
	font-family: "Rounded Mplus 1c";
}
.collabo > li:nth-child(1) p strong {
	margin-right: 5px;
}
.collabo > li:nth-child(1) img,
.collabo > li:nth-child(2) img {
	margin-top: 15px;
}
.collabo > li:last-child p {
	margin-top: 60px;
	font-size: 1.8rem;
	font-weight: bold;
	font-family: "Rounded Mplus 1c";
	line-height: 1.5;
}
.collabo > li:last-child img {
	margin-top: 3px;
	margin-left: -5px;
}

/* -------------------------------------
	contents
------------------------------------- */
.contents {
	width: 1080px;
	margin: 80px auto 50px;
}
.onerank_list > li {
	transform: translateY(20px);
	opacity: 0;
}
.onerank_list > li.on {
	transform: translateY(0);
	opacity: 1;
	transition: 1s ease;
}
.onerank_list > li + li {
	margin-top: 50px;
}
.onerank_list > li a {
	display: block;
	height: 300px;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,.1);
	overflow: hidden;
	transform: scale(1,1);
	transition: transform 0.5s ease;
}
.onerank_list > li:nth-child(1) a {
	background: url(../img/vol8.jpg) center /cover no-repeat;
}
.onerank_list > li:nth-child(2) a {
	background: url(../img/vol7.jpg) center /cover no-repeat;
}
.onerank_list > li:nth-child(3) a {
	background: url(../img/vol6.jpg) center /cover no-repeat;
}
.onerank_list > li:nth-child(4) a {
	background: url(../img/vol5.jpg) center /cover no-repeat;
}
.onerank_list > li:nth-child(5) a {
	background: url(../img/vol4.jpg) center /cover no-repeat;
}
.onerank_list > li:nth-child(6) a {
	background: url(../img/vol3.jpg) center /cover no-repeat;
}
.onerank_list > li:nth-child(7) a {
	background: url(../img/vol2.jpg) center /cover no-repeat;
}
.onerank_list > li:nth-child(8) a {
	background: url(../img/vol1.jpg) center /cover no-repeat;
}

.onerank_list > li a > div {
	box-sizing: border-box;
	width: 360px;
	height: 100%;
	padding-top: 20px;
	background: rgba(13,110,110,.7);
	color: #fff;
	text-align: center;
}
.onerank_list > li:nth-child(2n - 1) a > div {
	float: right;
}
.onerank_list h3 {
	margin-bottom: 12px;
	font-size: 2rem;
	font-weight: bold;
	font-family: "Rounded Mplus 1c";
}
.onerank_list h3 span {
	display: block;
	width: 60px;
	height: 63px;
	margin: 0 auto 10px;
	background: url(../img/span_bg.png) no-repeat;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	text-align: center;
	line-height: 68px;
}
.onerank_list img {
	margin-top: 5px;
}
.onerank_list > li a > div > span {
	display: block;
	max-width: 260px;
	height: 48px;
	background: #000;
	margin: 30px auto 0;
	font-family: "Rounded Mplus 1c";
	font-size: 1.14rem;
	line-height: 48px;
	transition: 0.5s ease;
}
.onerank_list > li a > div > span i {
	padding-left: 30px;
	background: url(../img/icon_blank_030.png) center left /9px 14px no-repeat;
}
.onerank_list > li a:hover {
	transform: scale(1.015,1.015);
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	transition: 0.5s ease;
}
.onerank_list > li a:hover > div > span {
	background: #fff;
	color: #000;
	transition: 0.5s ease;
}
.onerank_list > li a:hover > div > span i {
	background-image: url(../img/icon_blank_010.png);
}
.about {
	display: flex;
	justify-content: space-between;
	margin-top: 100px;
	padding: 50px;
	background: #f6f6f6;
}
.about > div {
	width: calc(100% - (260px + 50px));
}
.about h3 {
	margin-bottom: 10px;
	padding-bottom: 10px;
	background: url(../img/h3_dotted.gif) bottom repeat-x;
	font-size: 1.7rem;
	font-weight: bold;
	font-family: "Rounded Mplus 1c";
	color: #005a49;
	line-height: 1.2;
}
.about h3 span {
	font-size: 1rem;
	color: #000;
}
.about p {
	margin-bottom: 10px;
	line-height: 1.5;
}
.about a {
	display: block;
	box-sizing: border-box;
	height: 48px;
	background: #fff;
	border: 1px solid #005a49;
	font-family: "Rounded Mplus 1c";
	color: #005a49;
	font-size: 1.14rem;
	font-weight: bold;
	line-height: 48px;
	text-align: center;
	transition: 0.3s ease;
}
.about a span {
	padding-left: 30px;
	background: url(../img/icon_blank_010.png) center left /9px 14px no-repeat;
}
.about a:hover {
	background: #005a49;
	color: #fff;
	transition: 0.3s ease;
}
.about a:hover span {
	background-image: url(../img/icon_blank_030.png);
	transition: 0.3s ease;
}
.about > figure {
	width: 260px;
}
.about > figure img {
	width: 100%;
}

/* -------------------------------------
	footer
------------------------------------- */
#footer {
	height: 50px;
	background: #337f7f;
	font-size: 0.85rem;
	color: #fff;
	line-height: 50px;
	text-align: center;
}

@media(max-width:1080px) {
	/* -------------------------------------
		header
	------------------------------------- */
	.logo {
		top: 20px;
		left: 20px;
	}
	.nav_toggle {
		top: 10px;
		right: 20px;
	}
	
	/* -------------------------------------
		mv_area
	------------------------------------- */
	.mv,
	.clouds,
	.customers {
		height: 75vw;
		margin-top: 5vw;
	}
	.mv h1 {
		margin-top: 18vw;
	}
	.mv h1 img {
		width: 70%;
	}
	.clouds > div {
		background-size: contain!important;
	}
	.clouds > div:nth-child(1) {
		width: 8vw;
		height: 6vw;
		margin-left: -3vw;
		animation: fluffy1_sp 3.8s ease infinite;
	}
	.clouds > div:nth-child(2) {
		margin-left: 32vw;
		width: 13vw;
		animation: fluffy2_sp 4.2s ease infinite;
	}
	.clouds > div:nth-child(3) {
		margin-left: -53vw;
		width: 15vw;
		height: 11vw;
		animation: fluffy3_sp 3.6s ease infinite;
	}
	.clouds > div:nth-child(4) {
		width: 13vw;
		height: 10vw;
		margin-left: -15vw;
		animation: fluffy4_sp 5s ease infinite;
	}
	
	.customers > div:nth-child(1) {
		width: 29vw;
		height: 29vw;
		margin-left: -57vw;
		animation: fluffy5_sp 4s ease infinite;
	}
	.customers > div:nth-child(2) {
		width: 18vw;
		height: 18vw;
		margin-left: -26vw;
		animation: fluffy6_sp 3s ease infinite;
	}
	.customers > div:nth-child(3) {
		width: 23vw;
		height: 23vw;
		margin-left: -38vw;
		animation: fluffy7_sp 5s ease infinite;
	}
	.customers > div:nth-child(4) {
		width: 18vw;
		height: 18vw;
		margin-left: 10vw;
		animation: fluffy8_sp 3.5s ease infinite;
	}
	.customers > div:nth-child(5) {
		width: 21vw;
		height: 21vw;
		margin-left: 0;
		animation: fluffy9_sp 4s ease infinite;
	}
	.customers > div:nth-child(6) {
		width: 30vw;
		height: 30vw;
		margin-left: 26vw;
		animation: fluffy10_sp 4.5s ease infinite;
	}
	.outline {
		padding: 80vw 0 160px;
		background-size: 150% auto;
	}
	.outline h2 img {
		width: 88vw;
		max-width: 658px;
	}
	.collabo {
		display: block;
		margin-top: 10px;
		padding: 10px 0;
		overflow: hidden;
		text-align: center;
	}
	.collabo > li {
		display: inline-block;
		margin: 0 40px;
	}
	.collabo > li:nth-child(2) {
		margin-right: 0;
	}
	.collabo > li:last-child {
		display: block;
		margin: 0 auto;
	}
	.collabo > li:nth-child(2)::before {
		left: -65px;
	}
	.collabo > li:nth-child(2)::after {
		left: -45px;
	}
	.collabo > li:last-child p {
		margin-top: 0;
		padding-top: 60px;
	}
	.collabo > li:last-child {
		margin-top: 60px;
	}
	.collabo > li:last-child::before,
	.collabo > li:last-child::after {
		width: 10px;
		height: 50px;
		top: -60px;
		left: 50%;
	}
	.collabo > li:last-child::before {
		margin-left: 5px;
	}
	.collabo > li:last-child::after {
		margin-left: -15px;
	}
	
	/* -------------------------------------
		content
	------------------------------------- */
	.contents {
		width: 92vw;
	}
	.onerank_list > li:nth-child(2n) a {
		background-position: right center;
	}
	.onerank_list > li:nth-child(2n - 1) a {
		background-position: left center;
	}
	.about {
		padding: 30px;
	}
	.about > div {
		width: calc(100% - (260px + 30px));
	}
	.about h3 {
		font-size: 1.42rem;
		line-height: 1.4;
	}
	.about h3 span {
		font-size: 0.85rem;
	}
}
@keyframes fluffy1_sp {
	0% {
		top: 4vw;
	}
	50% {
		top: 5vw;
	}
	100% {
		top: 4vw;
	}
}
@keyframes fluffy2_sp {
	0% {
		top: 12vw;
	}
	50% {
		top: 11vw;
	}
	100% {
		top: 12vw;
	}
}
@keyframes fluffy3_sp {
	0% {
		top: 46vw;
	}
	50% {
		top: 47vw;
	}
	100% {
		top: 46vw;
	}
}
@keyframes fluffy4_sp {
	0% {
		top: 58vw;
	}
	50% {
		top: 57vw;
	}
	100% {
		top: 58vw;
	}
}
@keyframes fluffy5_sp {
	0% {
		top: 10vw;
	}
	50% {
		top: 11vw;
	}
	100% {
		top: 10vw;
	}
}
@keyframes fluffy6_sp {
	0% {
		top: 7vw;
	}
	50% {
		top: 8vw;
	}
	100% {
		top: 7vw;
	}
}
@keyframes fluffy7_sp {
	0% {
		top: 44vw;
	}
	50% {
		top: 43vw;
	}
	100% {
		top: 44vw;
	}
}
@keyframes fluffy8_sp {
	0% {
		top: 8vw;
	}
	50% {
		top: 7vw;
	}
	100% {
		top: 8vw;
	}
}
@keyframes fluffy9_sp {
	0% {
		top: 48vw;
	}
	50% {
		top: 47vw;
	}
	100% {
		top: 48vw;
	}
}
@keyframes fluffy10_sp {
	0% {
		top: 32vw;
	}
	50% {
		top: 31vw;
	}
	100% {
		top: 32vw;
	}
}
@media(max-width:640px) {
	/* -------------------------------------
		header
	------------------------------------- */
	.logo {
		width: 32vw;
	}
	.logo img {
		width: 100%;
	}
	.nav_toggle {
		width: 40px;
		height: 40px;
		top: 0.8vw;
		right: 3vw;
	}
	.nav_toggle > span {
		width: 36px;
		height: 2px;
		left: 2px;
	}
	.nav_toggle > span:nth-child(1) {
		top: 9px;
	}
	.nav_toggle > span:nth-child(2) {
		top: 19px;
	}
	.nav_toggle > span:nth-child(3) {
		top: 29px;
	}
	.g_nav ul {
		margin-top: 60px;
	}
	.g_nav a {
		padding: 25px 0 25px 70px;
		font-size: 1rem;
	}
	
	.outline {
		padding-bottom: 13vw;
	}
	.outline h2 {
		font-size: 2.8vw;
	}
	.outline h2 img {
		width: 88vw;
	}
	.collabo > li {
		width: 40vw;
		height: 40vw;
		margin: 0 5vw;
	}
	.collabo > li:nth-child(2)::before {
		left: -9.5vw;
		width: 8vw;
		height: 1.6vw;
	}
	.collabo > li:nth-child(2)::after {
		left: -6.7vw;
		width: 1.6vw;
		height: 8vw;
	}
	.collabo > li:last-child {
		margin-top: 10vw;
	}
	.collabo > li:last-child::before,
	.collabo > li:last-child::after {
		width: 1.6vw;
		height: 8vw;
		top: -11vw;
	}
	.collabo > li:last-child::before {
		margin-left: 1.2vw;
	}
	.collabo > li:last-child::after {
		margin-left: -3.2vw;
	}
	.collabo > li:nth-child(1) p,
	.collabo > li:nth-child(2) p {
		padding: 8vw 0 4vw;
		font-size: 3vw;
	}
	.collabo > li:last-child p {
		margin-top: 8vw;
		padding-top: 8vw;
		font-size: 4vw;
	}
	.collabo > li:nth-child(1) p::after,
	.collabo > li:nth-child(2) p::after {
		width: 8vw;
		height: 1vw;
		background-size: contain;
	}
	.collabo > li:nth-child(1) p strong,
	.collabo > li:nth-child(2) p strong {
		font-size: 4vw;
	}
	.collabo > li:nth-child(1) p strong {
		margin-left: 3px;
	}
	.collabo > li:nth-child(1) img,
	.collabo > li:nth-child(2) img {
		width: 80%;
	}
	.collabo > li:last-child img {
		width: 108%;
		margin-left: -4%;
	}
	.outline::after {
		width: 80vw;
		height: 22.7624vw;
		margin-left: -40vw;
	}
	
	/* -------------------------------------
		contents
	------------------------------------- */
	.contents {
		width: 88vw;
		margin-top: 40px;
	}
	.onerank_list > li + li {
		margin-top: 20px;
	}
	.onerank_list > li a {
		height: auto;
		padding-top: 36vw;
		background-size: 151%!important;
		background-position: left top!important;
	}
	.onerank_list > li:nth-child(2n) a {
		background-position: right top!important;
	}
	.onerank_list > li a > div {
		width: 100%;
		height: auto;
		padding-bottom: 20px;
		background: #337f7f;
		float: none!important;
	}
	.onerank_list h3 {
		font-size: 7vw;
	}
	.onerank_list h3 span {
		width: 13vw;
		height: 14vw;
		background-size: contain;
		margin-top: -38px;
		font-size: 3vw;
		line-height: 15vw;
	}
	.onerank_list p {
		font-size: 12px;
	}
	.onerank_list img {
		margin-top: 2px;
		width: 54vw;
		max-width: 225px;
	}
	.onerank_list > li a > div > span {
		width: 80vw;
		height: 40px;
		margin-top: 3vw;
		line-height: 40px;
		font-size: 12px;
	}
	.about {
		margin-top: 60px;
		padding: 20px;
		display: block;
	}
	.about > div {
		width: 100%;
	}
	.about h3 {
		font-size: 1.14rem;
	}
	.about > figure {
		width: 100%;
		margin-top: 30px;
	}
}