/* media
----------------------------------------------------------------------------*/

@media screen and (max-width: 1160px) {
	body,
	html {
		font-size: 48px;
	}
}

@media screen and (max-width: 1024px) {
	body,
	html {
		font-size: 46px;
	}
}

@media screen and (max-width: 900px) {
	body,
	html {
		font-size: 44px;
	}
}

@media screen and (max-width: 768px) {
	body,
	html {
		font-size: 52px;
	}

	.pc {
		display: none;
	}

	.mobile {
		display: block;
	}

	.container {
		/* width: calc(100% - 30px); */
		width: calc(100vw - 30px);
		padding-left: 15px;
		padding-right: 15px;
	}

	/* header ***********************************************/
	header .container {
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: rgba(37, 37, 37, 1);
	}

	h1 {
		margin-left: 0;
	}

	/** navBox ***********************************************/
	.navBox {
		width: 100%;
		position: absolute;
		left: 0;
		top: 100%;
		background-color: rgba(37, 37, 37, 0.8);
		display: none;
	}

	.navBox > .flexBox {
		display: block;
	}

	.navBox a {
		color: rgba(255, 255, 255, 0.9);
		line-height: 3;
		font-weight: 300;
		padding: 0 1em;
	}

	nav {
		width: 100%;
	}

	.navlist {
		display: block;
		text-align: center;
	}

	.secList {
		position: inherit;
		width: 100%;
	}

	.secList ul {
		display: block;
		-webkit-box-shadow: none;
		box-shadow: none;
		padding: 0.3rem 0;
	}

	.langSelec {
		width: auto;
		position: relative;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.langSelec > a {
		margin: 0;
		width: auto;
		padding-right: 1.5em;
		text-align: center;
	}

	.langSelec > a:after {
		right: calc(50% - 3em);
	}

	.langList {
		-webkit-box-shadow: none;
		box-shadow: none;
		position: inherit;
		width: auto;
		text-align: center;
		padding: 0.2rem 0;
	}

	.langList a:hover {
		background-color: transparent;
		color: rgba(255, 255, 255, 0.9);
		text-decoration: underline;
	}

	/* navBtn */
	.navBtn {
		position: fixed;
		top: 8px;
		right: 15px;
		padding: 8px 10px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 5px;
		cursor: pointer;
	}

	.navBtn span {
		display: block;
		width: 20px;
		height: 2px;
		background-color: #ffffff;
		position: relative;
		margin-top: 6px;
		margin-bottom: 6px;
	}

	.navBtn span:before,
	.navBtn span:after {
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		background-color: #ffffff;
		position: absolute;
		left: 0;
	}

	.navBtn span:before {
		top: -6px;
	}

	.navBtn span:after {
		bottom: -6px;
	}

	/* footer ***********************************************/
	footer .container {
		height: auto;
		padding-bottom: 0.2rem;
		padding-top: 0.2rem;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		line-height: 1.7;
	}

	.logo_foot {
		width: 1.6rem;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
	}

	footer p {
		font-size: 0.24rem;
		text-align: right;
		padding-left: 0.2rem;
		width: calc(100% - 1.8rem);
	}

	.privacy {
		font-size: 0.24rem;
		text-align: right;
	}

	/** main *************************************************/

	.fullArrow {
		font-size: 28px;
	}
}

@media screen and (max-width: 640px) {
	body,
	html {
		font-size: 50px;
	}
}

@media screen and (max-width: 480px) {
	body,
	html {
		font-size: 48px;
	}
	.fullArrow {
		left: 21px;
		font-size: 20px;
	}
	#pp-nav.left {
		left: 8px;
	}
	#pp-nav span,
	.pp-slidesNav span {
		width: 6px;
		height: 6px;
	}
}

@media screen and (max-width: 319px) {
	body,
	html {
		font-size: 46px;
	}
}