@charset "UTF-8";
/* CSS Document */
/* リバティ公式 */
/* トップページCSS */

	/*共通CSS*/
	/*WordPress対策・全ページ余白なし*/
	* {
		margin: 0;
		padding: 0;
	}
	
	body {
		margin: 0;
		padding: 0;
		color: #000000;
		background: #fff;
		font-family: serif;
	}
	
	img {
		vertical-align: bottom; /*下に余白を作らない*/
		max-width: 100%;
	}
	
	p,h1,h2,h3,h4,span {
		font-family: serif;
	}
	
	a {
		text-decoration: none;
	}
	
	.wrap {
		overflow: hidden;
	}
	
	/*余白を作る*/
	.yohaku {
		width: auto;
		height: auto;
		padding-bottom: 50px;
	}
	
	/*floatを解除する*/
	.clear {
		clear: both;
	}
	
	.all-page {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
	}
	
	/*PC*/
	@media only screen and (min-width: 769px) {
		.pc { display: block !important; }
		.sp { display: none !important; }
		
		/*各ページトップ*/
		.top-head {
			position: relative;
			z-index: 1;
			width: 100%;
			height: auto;
			padding: 100px 0 0 0;
		}
		
		/*グローバルメニュー*/
		header {
			position: fixed;
			z-index: 100;
			width: 100%;
			height: 60px;
			background: #fff;
		}
		
		#logo {
			position: relative;
			z-index: 101;
			width: 140px;
			height: auto;
			margin: 12px auto 0 auto;
		}
		
		/*フッター*/
		footer {
			position: relative;
			z-index: 1;
			width: 100%;
			height: auto;
			padding: 30px 0 0 0;
			background: #fff;
		}
		
		.footer00 {
			position: relative;
			width: 340px;
			height: auto;
			margin: 0 auto 20px auto;
		}
		
		.f01 {
			display: block;
			position: relative;
			color: #000;
			font-size: 11px;
			text-align: center;
		}
		
		.footer-credit {
			text-align: center;
			color: #fff;
			font-size: 12px;
			padding: 3px 0;
			background: #37FF8B;
		}
		
		/*トップページ*/
		#top-keyvisual {
			position: relative;
			z-index: 1;
			width: 800px;
			height: auto;
			padding: 60px 0 60px 0;
			margin: 0 auto;
		}
		
		#top-keyvisual img {
			display: block;
			width: 100%;
			height: auto;
			margin: 0 0 40px 0;
		}
		
		#top-about {
			position: relative;
			width: 700px;;
			height: auto;
			padding: 0 0 30px 0;
			margin: 0 auto;
		}
		
		#top-about div.top-title {
			position: relative;
			left: -50px;
			width: 280px;
			height: auto;
			text-align: center;
		}
		
		#top-about div.top-title h2 {
			color: #fff;
			font-size: 20px;
			padding: 5px 0px;
			width: 200px;
			margin: auto;
		}
		
		#top-about div.top-title::before {
			content: '';/*ボックス作成*/
			z-index: -1;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #ff1844;
			transform: skew(-40deg);
		}
		
		#top-about p {
			font-size: 12px;
			letter-spacing: 1px;
			line-height: 16px;
			text-align: left;
			margin: 20px 0 20px 0;
		}
		
		#top-about img {
			display: block;
			width: 80%;
			height: auto;
			margin: 0 auto;
		}
		
		#top-step {
			position: relative;
			width: 700px;
			height: auto;
			padding: 0 0 30px 0;
			margin: 0 auto;
		}
		
		#top-step div.top-title {
			position: relative;
			left: -50px;
			width: 280px;
			height: auto;
			text-align: center;
		}
		
		#top-step div.top-title h2 {
			color: #fff;
			font-size: 20px;
			padding: 5px 0px;
			width: 200px;
			margin: 0 auto 20px auto;
		}
		
		#top-step div.top-title::before {
			content: '';/*ボックス作成*/
			z-index: -1;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #ff1844;
			transform: skew(-40deg);
		}
		
		#top-step p {
			font-size: 14px;
			font-weight: bold;
			letter-spacing: 1px;
			line-height: 16px;
			text-align: center;
			margin: 20px 0 20px 0;
		}
		
		.top-step01 {
			position: relative;
			z-index: 1;
			width: 300px;
			height: auto;
			padding: 0 0 10px 0;
			margin: 0 auto 20px auto;
			border: solid 8px #ff1844;
		}
		
		.top-step01 h3 {
			position: relative;
			width: 140px;
			height: auto;
			padding: 5px 0;
			color: #FFF;
			background: #ff1844;
			text-align: center;
		}
		
		.top-step01 img {
			display: block;
			width: 90%;
			height: auto;
			margin: 0 auto;
		}
		
		.top-step02 {
			position: relative;
			z-index: 1;
			width: 300px;
			height: auto;
			padding: 0 0 10px 0;
			margin: 0 auto 50px auto;
			border: solid 8px #ff1844;
		}
		
		.top-step02 h3 {
			position: relative;
			width: 140px;
			height: auto;
			padding: 5px 0;
			color: #FFF;
			background: #ff1844;
			text-align: center;
		}
		
		.top-step02 img {
			display: block;
			width: 90%;
			height: auto;
			margin: 0 auto;
		}
		
		#top-last {
			position: relative;
			width: 700px;
			height: auto;
			padding: 0 0 30px 0;
			margin: 0 auto;
		}
		
		#top-last h2 {
			font-size: 14px;
			font-style: italic;
			text-align: center;
			margin: 0 auto 20px auto;
		}
		
		#top-last a {
			display: block;
			width: 100%;
			height: auto;
		}
		
		@keyframes anime {
			0%{
				transform:scale(.95); opacity:1
			}
			90%{
				opacity:.1}to{transform:scale(1.2,1.5); opacity:0
			}
		}
		
		div.button {
			position: relative;
			width: 280px;
			height: auto;
			margin: 0 auto;
			transition: .2s;
		}
		
		div.button:before, div.button:after {
			content: "";
			position: absolute;
			z-index: -10;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 32px;
			background: #ffaaae;
			border: 1px solid #ff999e;
			transform: translate3d(0,0,0);
		}
		
		div.button:before {
			animation: anime 2s ease-out infinite;
		}
		
		div.button:after {
			animation: anime 2s ease-out 1s infinite;
		}
		
		.button a {
			display: block;
			position: relative;
			width: 280px;
			height: auto;
			padding: 15px 0;
			border-radius: 32px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			background: #FF3235;
		}
		
		.button a span {
			display: block;
			position: relative;
			font-family: sans-serif;
		}
		
		.button a span:after {
			content: "";
			position: absolute;
			top: 50%;
			right: 30px;
			width: 8px;
			height: 8px;  
			margin: -4px 0 0 0;
			border-right: 1px solid #fff;
			border-top: 1px solid #fff;
			transform: translateX(5px) rotate(45deg);
		}
		
	}
	
	/*SP*/
	@media only screen and (max-width: 768px) {
		.pc { display: none !important; }
		.sp { display: block !important; }
		
		/*各ページトップ*/
		.top-head {
			position: relative;
			z-index: 1;
			width: 100%;
			height: auto;
			padding: 60px 0 0 0;
		}
		
		/*グローバルメニュー*/
		header {
			position: fixed;
			z-index: 100;
			width: 100%;
			height: 60px;
			background: #fff;
		}
		
		#logo {
			position: relative;
			z-index: 101;
			width: 140px;
			height: auto;
			margin: 12px auto 0 auto;
		}
		
		/*フッター*/
		footer {
			position: relative;
			z-index: 1;
			width: 100%;
			height: auto;
			padding: 30px 0 0 0;
			background: #fff;
		}
		
		.footer00 {
			position: relative;
			width: 340px;
			height: auto;
			margin: 0 auto 10px auto;
		}
		
		.f01 {
			display: block;
			position: relative;
			color: #000;
			font-size: 11px;
			text-align: center;
		}
		
		.footer-credit {
			text-align: center;
			color: #fff;
			font-size: 12px;
			padding: 3px 0;
			background: #000000;
		}
		
		/*トップページ*/
		#top-keyvisual {
			position: relative;
			z-index: 1;
			width: 100%;
			height: auto;
			padding: 60px 0 60px 0;
		}
		
		#top-keyvisual img {
			display: block;
			width: 100%;
			height: auto;
			margin: 0 0 40px 0;
		}
		
		#top-about {
			position: relative;
			width: 90%;
			height: auto;
			padding: 0 0 30px 0;
			margin: 0 auto;
		}
		
		#top-about div.top-title {
			position: relative;
			left: -50px;
			width: 280px;
			height: auto;
			text-align: center;
		}
		
		#top-about div.top-title h2 {
			color: #fff;
			font-size: 20px;
			padding: 5px 0px;
			width: 200px;
			margin: auto;
		}
		
		#top-about div.top-title::before {
			content: '';/*ボックス作成*/
			z-index: -1;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #ff1844;
			transform: skew(-40deg);
		}
		
		#top-about p {
			font-size: 12px;
			letter-spacing: 1px;
			line-height: 16px;
			text-align: left;
			margin: 20px 0 20px 0;
		}
		
		#top-about img {
			display: block;
			width: 80%;
			height: auto;
			margin: 0 auto;
		}
		
		#top-step {
			position: relative;
			width: 90%;
			height: auto;
			padding: 0 0 30px 0;
			margin: 0 auto;
		}
		
		#top-step div.top-title {
			position: relative;
			left: -50px;
			width: 280px;
			height: auto;
			text-align: center;
		}
		
		#top-step div.top-title h2 {
			color: #fff;
			font-size: 20px;
			padding: 5px 0px;
			width: 200px;
			margin: 0 auto 20px auto;
		}
		
		#top-step div.top-title::before {
			content: '';/*ボックス作成*/
			z-index: -1;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: #ff1844;
			transform: skew(-40deg);
		}
		
		#top-step p {
			font-size: 14px;
			font-weight: bold;
			letter-spacing: 1px;
			line-height: 16px;
			text-align: center;
			margin: 20px 0 20px 0;
		}
		
		.top-step01 {
			position: relative;
			z-index: 1;
			width: 300px;
			height: auto;
			padding: 0 0 10px 0;
			margin: 0 auto 20px auto;
			border: solid 8px #ff1844;
		}
		
		.top-step01 h3 {
			position: relative;
			width: 140px;
			height: auto;
			padding: 5px 0;
			color: #FFF;
			background: #ff1844;
			text-align: center;
		}
		
		.top-step01 img {
			display: block;
			width: 90%;
			height: auto;
			margin: 0 auto;
		}
		
		.top-step02 {
			position: relative;
			z-index: 1;
			width: 300px;
			height: auto;
			padding: 0 0 10px 0;
			margin: 0 auto 50px auto;
			border: solid 8px #ff1844;
		}
		
		.top-step02 h3 {
			position: relative;
			width: 140px;
			height: auto;
			padding: 5px 0;
			color: #FFF;
			background: #ff1844;
			text-align: center;
		}
		
		.top-step02 img {
			display: block;
			width: 90%;
			height: auto;
			margin: 0 auto;
		}
		
		#top-last {
			position: relative;
			width: 90%;
			height: auto;
			padding: 0 0 30px 0;
			margin: 0 auto;
		}
		
		#top-last h2 {
			font-size: 14px;
			font-style: italic;
			text-align: center;
			margin: 0 auto 20px auto;
		}
		
		#top-last a {
			display: block;
			width: 100%;
			height: auto;
		}
		
		@keyframes anime {
			0%{
				transform:scale(.95); opacity:1
			}
			90%{
				opacity:.1}to{transform:scale(1.2,1.5); opacity:0
			}
		}
		
		div.button {
			position: relative;
			width: 280px;
			height: auto;
			margin: 0 auto;
			transition: .2s;
		}
		
		div.button:before, div.button:after {
			content: "";
			position: absolute;
			z-index: -10;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 32px;
			background: #ffaaae;
			border: 1px solid #ff999e;
			transform: translate3d(0,0,0);
		}
		
		div.button:before {
			animation: anime 2s ease-out infinite;
		}
		
		div.button:after {
			animation: anime 2s ease-out 1s infinite;
		}
		
		.button a {
			display: block;
			position: relative;
			width: 280px;
			height: auto;
			padding: 15px 0;
			border-radius: 32px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			background: #FF3235;
		}
		
		.button a span {
			display: block;
			position: relative;
			font-family: sans-serif;
		}
		
		.button a span:after {
			content: "";
			position: absolute;
			top: 50%;
			right: 30px;
			width: 8px;
			height: 8px;  
			margin: -4px 0 0 0;
			border-right: 1px solid #fff;
			border-top: 1px solid #fff;
			transform: translateX(5px) rotate(45deg);
		}
		
}