@charset "utf-8";

/* ======================================================
 * layout_sp.css
 * ------------------------------------------------------
 * @media only screen and (max-width: 767px)
 * - Common
 * - Main
 * - Assist
 * - Footer
 * - Clearfix
====================================================== */

@media only screen and (max-width: 767px) {
	/* ------------------------------------------------------
	 * Common
	------------------------------------------------------ */
	.container,
	.Assist,
	.Footer {
		transition-property: margin-left;
		transition-duration: .2s;
		width: 100vw;
	}
	
	/* ------------------------------------------------------
	 * Main
	------------------------------------------------------ */
	
	/* ----- MainBody ----- */
	.MainBody {
		position: relative;
	}
	
	/* ----- container ----- */
	.container {
		padding-top: 20px;
	}
	body#modal .container {
		padding: 30px 15px 15px;
	}
	
	/* contents */
	.contents {
		padding: 0 15px;
	}
	body#modal .contents {
		padding: 0;
	}
	
	/* ------------------------------------------------------
	 * Assist
	------------------------------------------------------ */
	.Assist {
		margin-top: 40px;
	}
	
	/* ------------------------------------------------------
	 * Footer
	------------------------------------------------------ */
	.FooterSimple {
		position: relative;
		margin-top: 40px;
		padding: 29px 18px 20px;
		background-color: #000;
	}
	
	/* footer-copyright */
	.footer-copyright {
		text-align: center;
	}
	.footer-copyright_label {
		font-size: 1rem;
		color: #cbcbcb;
		line-height: 1;
	}
	
	/* ----- Pagetop ----- */
	.pagetop {
		position: absolute;
		display: block;
		width: 40px;
		height: 40px;
		top: -20px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.pagetop a {
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
		text-indent: -9999px;
		overflow: hidden;
		background-color: #888;
		border-radius: 20px;
	}
	.pagetop a:after {
		position: absolute;
		content: "";
		display: block;
		top: 50%;
		left: 0;
		right: 0;
		margin-top: -4px;
		margin-left: auto;
		margin-right: auto;
		width: 14px;
		height: 14px;
		background-image: none;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	/* ------------------------------------------------------
	 * FollowNavi
	------------------------------------------------------ */
	.FollowNavi {
		display: none;
	}
	
	/* ------------------------------------------------------
	 * Clearfix
	------------------------------------------------------ */
	.clearfix::after {
		clear: both;
		content: "";
		display: block;
	}
}