/* CSS Document */

@media (min-width:751px){
	.f14 { font-size: 14px; }
	.f16 { font-size: 16px; }
	.f20 { font-size: 20px; }
	#p1 { background: url("../../images/index/plan_bg.gif") repeat; padding: 55px 0 80px;
		border-bottom: #d4d4d4 1px solid; }
	#p1 .mainh2 { position: relative; z-index: 2; }
	#p1 ul li { border: #3b6138 1px solid; padding: 32px; position: relative; background-color: #ffffff; }
	#p1 ul li:first-child { width: 1100px; height: 480px; margin-bottom: 30px;
		background: url("../images/ranking/bg_rank1.svg") right top no-repeat #ffffff; }
	#p1 ul li:nth-child(2),#p1 ul li:last-child { width: 545px; height: 465px; float: left; }
	#p1 ul li:last-child { float: right; }
	#p1 ul li:first-child h3 { font-size: 26px; line-height: 37px; padding-left: 100px; }
	#p1 ul li:nth-child(2) h3,#p1 ul li:last-child h3 { font-size: 22px; line-height: 32px; padding: 10px 0; }
	#p1 ul li .rank { position: absolute; top:-2px; left: 10px; z-index: 4; }
	#p1 ul li .bg { position: absolute; top:0; right: 0; }
	#p1 ul li:first-child .left { position: absolute; left: 32px; bottom: 32px; }
	#p1 ul li:first-child .left .popular { position: absolute; top:-10px; right: -12px;
		-moz-animation: ppl 2s linear 0s infinite forwards;
		-webkit-animation: ppl 2s linear 0s infinite forwards;
		-o-animation: ppl 2s linear 0s infinite forwards;
		-ms-animation: ppl 2s linear 0s infinite forwards;
	 }
	#p1 ul li:first-child .right { position: absolute; right: 32px; bottom: 45px; width: 480px;
		height: 308px; }
	#p1 ul li:first-child .right .img1 { position: absolute; top:0; left: 60px; }
	#p1 ul li:first-child .right .img2 { position: absolute; top:0; right: 25px; }
	#p1 ul li:first-child .right .txt { width: 483px; height: 115px; position: absolute; padding: 10px 20px; 
		background: url("../images/ranking/bg_txt.svg") right bottom no-repeat; bottom: 0; right: 0; }
	#p1 ul li:first-child .right .txt .price { margin-bottom: 10px; }
	#p1 ul li:nth-child(2) .price,#p1 ul li:last-child .price { text-align: right; }
	
	#plan { padding-bottom: 100px; }
	#plan h4.ch4 { background: url(../../images/hline.svg) left bottom no-repeat;
    height: 43px;
    font-size: 30px;
    margin-bottom: 30px;
    line-height: 28px;
    position: relative; }
	#plan ul { width: 1120px; margin: 0 auto 60px; }
	#plan ul li { width: 340px; height: 335px; box-shadow: 0 5px 0 2px #D7D7D7; border-radius: 10px;
		background: #ffffff; position: relative; float: left; margin-right: 40px; /*overflow: hidden;*/ }
	#plan ul li:last-child { margin-right: 0; }
	#plan ul li a { display: block; position: relative; width: 340px; height: 335px; }
	#plan ul li a:after { content: ""; width: 340px; height: 220px; position: absolute; top:0; left: 0;
		background: url("../../images/icon_arrow.svg") center center no-repeat rgba(0,0,0,0.3); opacity: 0;
		border-radius:10px 10px 0 0;
		-webkit-transition: 0.3s ease-in-out;
		   -moz-transition: 0.3s ease-in-out;
			 -o-transition: 0.3s ease-in-out;
				transition: 0.3s ease-in-out; 
		}
	#plan ul li a:hover { opacity: 1; }
	#plan ul li a:hover:after { opacity: 1; }
	#plan ul li a .photo { width: 340px; height: 220px; overflow: hidden; border-radius:10px 10px 0 0;
		 margin-bottom: 20px; }
	#plan ul li a img { width: 340px; }
	#plan ul li h4 { width: 280px; margin: 0 auto 15px; font-size: 15px; line-height: 24px;
		/*padding-left: 45px;*/ }
	/*#plan ul li:first-child h4 { background: url("../../images/index/p1.svg") left center no-repeat; }
	#plan ul li:nth-child(2) h4 { background: url("../../images/index/p2.svg") left center no-repeat; }
	#plan ul li:last-child h4 { background: url("../../images/index/p3.svg") left center no-repeat; }*/
	#plan ul li p { width: 280px; margin: 0 auto; font-size: 15px; line-height: 24px; margin-bottom: 5px; }
	#plan ul li a .arrow { width: 40px; height: 40px; background: #191919; color: #ffffff; text-align: center;
		line-height: 38px; border-radius: 20px; position: absolute; bottom: -20px; left: 50%; margin-left: -20px;
		font-size: 26px;
		-webkit-transition: 0.3s ease-in-out;
		   -moz-transition: 0.3s ease-in-out;
			 -o-transition: 0.3s ease-in-out;
				transition: 0.3s ease-in-out; 
	 }
	#plan ul li a .arrow i { padding-left: 4px; }
	#plan ul li a:hover .arrow { background: #007143; }
	#plan .pbn { width: 700px; margin: 60px auto; display: block; }


	#p3 { padding: 0 0 90px; }
	#p3 p.lead { text-align: left; font-size: 26px; line-height: 37px; margin-bottom: 25px; }
	#p3 .kitchen { width: 1100px; height: 343px; margin-bottom: 60px; position: relative; }
	#p3 .kitchen a { width: 1100px; height: 343px; position: relative; display: block; }
	#p3 .kitchen .left { position: absolute; left: 0; top:0; }
	#p3 .kitchen .right { position: absolute; right: 0; top:0; width: 510px;
		height: 308px; }
	#p3 .kitchen .right .img1 { position: absolute; top:0; left: 75px; }
	#p3 .kitchen .right .img2 { position: absolute; top:0; right: 50px; }
	#p3 .kitchen .right .txt { width: 510px; height: 113px; position: absolute; padding: 10px 20px; 
		background: #ffffff; bottom: 0; right: 0; }
	#p3 .kitchen .right .txt .price { margin-bottom: 10px; }
	#p3 ul { width: 790px; margin: 0 auto; }
	#p3 ul li { float: left; }
	#p3 ul li:last-child { float: right; }

	#rsv { margin: 100px auto 200px; }

}
	@-moz-keyframes ppl { 0% { top: -10px; } 50% { top: 3px; } 100% { top: -10px; } }
	@-webkit-keyframes ppl { 0% { top: -10px; } 50% { top: 3px; } 100% { top: -10px; } }
	@-o-keyframes ppl { 0% { top: -10px; } 50% { top: 3px; } 100% { top: -10px; } }
	@-ms-keyframes ppl { 0% { top: -10px; } 50% { top: 3px; } 100% { top: -10px; } }

@media (max-width:750px){
	.f14 { font-size: 3vw; }
	.f16 { font-size: 3.4vw; }
	.f20 { font-size: 3.7vw; }
	#p1 { background: url("../../images/index/plan_bg.gif") repeat; padding: 8vw 0 10vw;
		border-bottom: #d4d4d4 1px solid; }
	#p1 .mainw { width: 88vw; }
	#p1 .mainh2 { position: relative; z-index: 2; }
	#p1 ul li { border: #3b6138 1px solid; padding: 4vw; position: relative; background-color: #ffffff;
		margin-bottom: 6vw; }
	#p1 ul li:first-child { background: url("../images/ranking/bg_rank1.svg") right top no-repeat #ffffff;
		background-size: 20vw auto; }
	#p1 ul li:first-child h3 { font-size: 3.9vw; line-height: 6vw; padding-left: 21vw; }
	#p1 ul li:nth-child(2) h3,#p1 ul li:last-child h3 { font-size: 3.7vw; line-height: 6vw; padding: 4vw 0; }
	#p1 ul li .rank { position: absolute; top:-1vw; left: 2vw; z-index: 4; width: 20vw; }
	#p1 ul li .bg { position: absolute; top:0; right: 0; width: 15vw; }
	#p1 ul li:first-child .left { width: 100%; position: relative; margin: 2vw 0 4vw; }
	#p1 ul li:first-child .left .popular { position: absolute; top:-2vw; right: -2vw; width: 20vw; }
	#p1 ul li:first-child .right { width: 100%; }
	#p1 ul li:first-child .right .img1 { float: left; width: 38vw; }
	#p1 ul li:first-child .right .img2 { float: right; width: 38vw; }
	#p1 ul li:first-child .right .txt { padding: 4vw; margin-top: 6vw; 
		background: url("../images/ranking/bg_txt_top_sp.svg") right top no-repeat,url("../images/ranking/bg_txt_bottom_sp.svg") right bottom no-repeat;
		background-size: 100% auto; }
	#p1 ul li:first-child .right .txt .price { margin-bottom: 2vw; }
	#p1 ul li:first-child .right .txt .price .f20 { display: inline-block; padding-left: 25vw; }
	#p1 ul li:nth-child(2) .price,#p1 ul li:last-child .price { text-align: right; margin-bottom: 0; }
	
	#plan h4.ch4 { background: url(../../images/hline.svg) left bottom no-repeat;
    margin-bottom: 4vw;
    line-height: 5.4vw;
    position: relative;
    height: 9vw;
    font-size: 6vw; }
	#plan ul { width: 92vw; margin: 0 auto; }
	#plan ul li { width: 92vw; height: 34vw; box-shadow: 0 1vw 0 1vw #D7D7D7; border-radius: 2vw;
		background: #ffffff; position: relative; margin-bottom: 12vw; }
	#plan ul li a { display: block; position: relative; width: 92vw; height: 34vw; }
	#plan ul li a .photo { width: 46vw; height: 34vw; float: left; border-radius: 2vw 0 0 2vw; overflow: hidden; }
	#plan ul li a img { height: 34vw; float: left; }
	#plan ul li .detail { width: 42vw; float: right; padding: 4.6vw 3vw 0 0; }
	#plan ul li h4 { font-size: 3.8vw; /*padding-top: 7vw;*/ }
	
	#plan ul li a .arrow { width: 9.4vw; height: 9.4vw; background: #191919; color: #ffffff; text-align: center;
		line-height: 9vw; border-radius: 4.7vw; position: absolute; bottom: -4.7vw; left: 50%; margin-left: -4.7vw;
		font-size: 4vw;
	 }
	#plan ul li a .arrow i { padding-left: 1vw; }
	#plan a.pbtn { display: block; width: 34vw; height: 34vw; /*margin: 0 auto;*/
		line-height: 5.3vw; padding-top: 10vw; color: #191919; font-size: 3.7vw; border-radius: 17vw;
		 background: #C7CF26; text-align: center; position: absolute; bottom: -17vw; left: 50%;
		 margin-left: -17vw; }
	#plan a.pbn { display: block; }


	#p3 { padding: 0 0 12vw; }
	#p3 p.lead { text-align: left; font-size: 4vw; line-height: 6vw; margin-bottom: 4vw; }
	#p3 .kitchen .left { width: 100%; position: relative; margin: 2vw 0 4vw; }
	#p3 .kitchen .right { width: 80vw; margin: 0 auto; }
	#p3 .kitchen .right .img1 { float: left; width: 38vw; }
	#p3 .kitchen .right .img2 { float: right; width: 38vw; }
	#p3 .kitchen .right .txt { padding: 4vw; margin-top: 6vw; 
		background: #ffffff; }
	#p3 .kitchen .right .txt .price { margin-bottom: 2vw; }

	#p3 ul { width: 80vw; margin: 6vw auto; }
	#p3 ul li { margin-bottom: 2vw; }
	#p3 ul li .cbtn1 { width: 80vw; }

	#rsv { border-top: #007143 4px solid; padding-top: 7.3vw; padding-bottom: 8.6vw;
		background: url("../../images/db.jpg") left top repeat; margin-bottom: 13vw; }
	#rsv h2 { color: #007143; font-size: 6.4vw; text-align: center; }
	ul.links li:first-child a { display: block; width: 92vw; height: 14vw; line-height: 14vw; text-align: center;
		background: #C9D126; color: #191919; margin: 4vw auto; font-size: 3.4vw; position: relative; }
	ul.links li:first-child a:after { content: "\f105"; font-family: FontAwesome; position: absolute; right: 4vw; }
	ul.links li:last-child a { color: #231815; }
	ul.links li:last-child a:before { content: "\f0da"; font-family: FontAwesome; padding-right: 2vw;
		color: #ABABAB; }
	.searchform p { font-size: 3.2vw; width: 92vw; margin: 4vw auto; text-align: center; }
	.searchform p strong a { font-size: 7vw; color: #007143; display: inline-block; padding-left: 1vw; }
	.searchform p strong i { padding-right: 1vw; }

	
}