@charset "utf-8";

/*---------------------------------------*/
/*----- smart phone CSS lower 1020px -----*/
/*---------------------------------------*/

@media (max-width : 1020px){
	/* header */
	.header_rogo {width:20vw; max-width:240px; padding:0px 0px 0px 0px;  position:absolute; top:0px; left:0px; opacity:0; }
	.header_rogo img {width:100%; position:absolute; top:0; bottom:0; left:10px; }
	#sp_navi ul li a {padding:52px 1.5vw 52px 1.5vw; font-size:1.5vw; letter-spacing:0px; }
	/* /header */
	
	/* top */
	.header_rogo_top {width:20vw; max-width:240px; padding:0px 0px 0px 0px;  position:absolute; top:0px; left:0px; opacity:0; }
	.header_rogo_top img {width:100%; position:absolute; top:0; bottom:0; left:10px; }
	/* /top */
}



/*---------------------------------------*/
/*----- smart phone CSS lower 720px -----*/
/*---------------------------------------*/

@media (max-width : 720px){
	/* header */
	header {height:auto; background-color:transparent; }
	header.btnhidden {height:100%; background-color:rgba(255,255,255,0.85); }
	#sp_navi {display:none; width:100%; max-width:inherit; height:100%; }
	#header_rogosp {display:block; }
	#header_rogopc {display:none; }
	.header_rogo {width:70%; padding:20px 20px 20px 20px;  position:fixed; top:0px; left:0px; opacity:0; }
	.header_rogo img {width:100%; position:relative; top:inherit; bottom:inherit; left:inherit; }
	#sp_navi ul {display:block; height:100%; margin:0px auto 0px auto; }
	#sp_navi ul li {display:table; vertical-align:inherit; height:12%; position:relative; opacity:0; animation-name: fadeInDownCustom; }
	@keyframes fadeInDownCustom{
		20%{opacity:0;-webkit-transform:translate3d(0,0%,0);transform:translate3d(0,0%,0)}
		100%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}
	}
	
	#sp_navi ul li img {display:block; width:100%; height:70%; margin:auto; }
	#sp_navi ul li a {display:table-cell; vertical-align:middle; padding:0px 20px 0px 20px; font-size:36px; line-height:120%; letter-spacing:2px; text-align:left; position:relative; text-decoration:none; animation-duration: 1.2s; animation-timing-function: linear;}
	
	.sp_btn {display:block; width:50px; height:50px; margin:0px 0px 0px auto; padding:0px; z-index:9998; position:relative; }
	.sp_btnopen {display:block; width:30px; height:30px; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer; }
	.sp_btnopen:after {content:""; display:block; width:100%; height:20%; margin:auto; border-top:2px #292929 solid; border-bottom:2px #292929 solid; position:absolute; top:0; bottom:0; left:0; right:0; }
	.sp_btnclose {display:none; width:30px; height:30px; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; cursor:pointer; }
	.sp_btnclose:after {content:""; display:block; width:100%; height:2px; margin:auto; background-color:#292929; position:absolute; top:0; bottom:0; left:0; right:0; }
	/* /header */

	/* top */
	.header_rogo_top {width:70%; padding:20px 20px 20px 20px;  position:fixed; top:0px; left:0px; opacity:0; }
	.header_rogo_top img {width:100%; position:relative; top:inherit; bottom:inherit; left:inherit; }
	/* /top */
}



/*---------------------------------------*/
/*----- smart phone CSS lower 640px -----*/
/*---------------------------------------*/

@media (max-width : 640px){
	/* common */
	.pc_only {display:none;}
	.sp_only {display:block;}
	.pcin_only {display:none;}
	.spin_only {display:inline;}
	
	.cont {min-width:inherit; max-width:inherit;}
	.contin {width:auto; margin:0px 20px;}
	
	#page-top {bottom:30px; right: 20px;}
	#page-top a {width:32px; height:32px;}
	/* /common */



	/* header */
	#sp_navi ul li a {font-size:9vw; }
	/* /header */



	/* footer */
	div#map {opacity:0; } 
	div#map > div {padding:120px 0px 120px 0px; }
	div#map iframe {width:100%; height:320px; }
	
	footer {}
	footer > div {padding:80px 0px 80px 0px; }
	.footer_rogo {display:block; width:100%; float:inherit; padding:40px 0px 0px 0px; opacity:0; }
	.footer_rogo img {width:80%; margin:0px auto; }
	footer ul {display:block; float:inherit; width:100%; }
	footer ul:after {content:""; display:block; width:100%; clear:both; }
	footer ul li {display:block; vertical-align:inherit; text-align:center; opacity:0; }
	footer ul li a {display:block; padding:20px 12px 20px 12px; font-size:9vw; line-height:120%; letter-spacing:1px; }
	footer ul li.footer_rogo_mark1 {width:48%; float:left; }
	footer ul li.footer_rogo_mark1 img {display:block; margin:20px 0px 0px auto; }
	footer ul li.footer_rogo_mark2 {width:48%; float:right; }
	footer ul li.footer_rogo_mark2 img {display:block; margin:20px auto 0px 0px; }
	/* /footer */



	/* top */
	div#top_title {}
	div#top_title > div {padding:240px 0px 240px 0px; }
	div#top_title a#title_rogo {opacity:0; }
	div#top_title a#title_rogo span {width:100%; padding:14px 0px; font-size:5vw; line-height:120%; letter-spacing:3px; }
	div#top_title img {width:80%; }
	
	div#top_about {position:relative; }
	.top_about_back {display:block; width:100%; height:auto; padding:110% 0px 0px 0px; position:absolute; top:0px; right:0px; z-index:0; opacity:0; }
	.top_about_cap {position:relative; }
	div#top_about h1 {display:table; width:auto; height:auto; float:inherit; margin:0px auto; }
	div#top_about h1 strong {display:table-cell; vertical-align:top; padding:80px 0px 80px 0px; opacity:0; }
	div#top_about h1 img {display: block; width:100%; max-width:60px; }
	.top_about_caps {display:block; width:100%; float:inherit; padding:40px 0px 60px 0px; }
	div#top_about h2 {font-size:18px; line-height:120%; letter-spacing:1px; font-weight:normal; text-align:left; opacity:0; }
	div#top_about h3 {padding:80px 0px 50px 0px; font-size:14px; line-height:180%; letter-spacing:1px; opacity:0; }
	
	.top_more_btn {display:inline-block; padding:3px 3px 6px 3px; font-size:14px; line-height:120%; letter-spacing:1px; opacity:0; }
	
	div#top_news {}
	div#top_news > div {padding:60px 0; }
	div#top_news h2 {font-size:18px; line-height:120%; letter-spacing:1px; opacity:0; }
	div#top_news ul {padding:40px 0px 40px 0px; }
	div#top_news ul li {padding:0px 0px 0px 0px; opacity:0; }
	div#top_news ul li a {padding:12px 10px 12px 10px; }
	div#top_news ul li a span {padding:0px 10px 0px 0px; }
	
	div#top_blog {}
	div#top_blog > div {padding:60px 0; }
	div#top_blog h2 {font-size:18px; line-height:120%; letter-spacing:1px; opacity:0; }
	div#top_blog ul {padding:40px 0px 40px 0px; }
	div#top_blog ul li {padding:0px 0px 0px 0px; opacity:0; }
	div#top_blog ul li a {padding:12px 10px 12px 10px; }
	div#top_blog ul li a span {padding:0px 10px 0px 0px; }
	
	div#top_gallery {}
	div#top_gallery > div {padding:60px 0; }
	div#top_gallery h2 {font-size:18px; line-height:120%; letter-spacing:1px; opacity:0; }
	.top_gallery_img {display:table; width:100%; margin:80px 0px 80px auto; }
	.top_gallery_img li {display:table-cell; vertical-align:middle; width:33.3%; padding:48% 0px 0px 0px; opacity:0; }
	
	div#top_sale {}
	div#top_sale > div {padding:40px 0;}
	div#top_sale a {display:block; width:100%; margin:0px auto; padding:60px 20px 60px 20px; font-size:10vw; line-height:120%; letter-spacing:1px; }
	
	div#top_outlink {opacity:0; }
	div#top_outlink > div {padding:0px 0px 40px 0px;}
	div#top_outlink dl {display:block; width:100%; margin:0px auto; }
	div#top_outlink dl dd {display:block; vertical-align:inherit; width:100%; }
	div#top_outlink dl dd a {display:block; width:100%; margin:0px auto; padding:20px 20px 20px 20px; color:#FFF; font-size:24px; line-height:120%; letter-spacing:1px; font-weight:bold; text-align:center; text-decoration:none; text-shadow:1px 1px 3px rgba(0,0,0,0.7); animation-duration: 0.3s; }
	div#top_outlink dl dd h3 {}
	div#top_outlink dl dd h3 img {width:60px; margin:0px auto; vertical-align:-4px; }
	div#top_outlink dl dd h3 strong {font-size:14px; line-height:120%; }
	div#top_outlink dl dt {display:block; vertical-align:inherit; width:2%; height:10px; }
	
	div#top_contact {}
	div#top_contact > div {padding:60px 0;}
	div#top_contact h2 {font-size:18px; line-height:120%; letter-spacing:1px; font-weight:normal; text-align:left; opacity:0; }
	.top_form {display:block; width:100%; margin:80px auto 40px auto; opacity:0; }
	.formtable {width:100%; }
	.formtable th {display: block; vertical-align:top; width:auto; padding:14px 16px 5px 0px; font-size:14px; line-height:120%; letter-spacing:1px; font-weight:normal; text-align:left; }
	.formtable td {display: block; vertical-align:top; padding:5px 0px 14px 0px; }
	.formtable td input[type="text"] {width:100%; padding:10px; font-size:16px; }
	.formtable td textarea {width:100%; height:90px; padding:10px; font-size:16px; }
	.reqred {display:block; padding:0px 10px; font-size:14px; line-height:120%; letter-spacing:1px; }
	.messagebox {padding:20px 20px 20px 20px; text-align:left; }
	.top_form input[type="button"] {display:block; width:80%; margin:20px auto 20px auto; padding:24px 10px 24px 10px; font-size:14px; line-height:120%; letter-spacing:1px; }
	
	div.instaw {display:none; }
	div.instawsp {display:block; width:90%; margin:0px auto; padding:250% 0px 0px 0px; overflow:hidden; }
	div.instawsp iframe {height:100% !important; position:absolute; left:0px; top:0px; }
	/* /top */
	
	
	
	/* gallery */
	ul.gallery {width:100%; padding:40px 0px 40px 0px; }
	ul.gallery li {display:block; float:inherit; }
	ul.gallery_col3 li {width:100%; }
	ul.gallery_col4 li {width:100%; }
	ul.gallery li a {padding:20px; }
	ul.gallery li a p {width:100%; margin:0px auto; padding-top:66.67%; }
	ul.gallery li a p img {width:100%;}
	ul.gallery li a strong {padding:8px 0px 8px 0px; }
	
	.more_btn {display:inline-block; padding:3px 3px 6px 3px; font-size:14px; line-height:120%; letter-spacing:1px; opacity:0; }
	/* /gallery */
	
	
	
	/* about */
	section.about {width:100%; margin:40px auto 0px auto; background-image:none; }
	section.about article {display:block; width:100%; padding:40px 0px 40px 0px; }
	section.about article.about_grad {background: rgba(0,0,0,0);
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%);}
	section.about article h3 {padding:0px 0px 40px 0px; color:#292929; text-shadow:none; }
	section.about article h3 span {font-size:14px; line-height:160%; letter-spacing:0px; }
	section.about article h3 strong {font-size:32px; line-height:120%; letter-spacing:1px; }
	section.about article h4 {padding:0px 0px 20px 0px; color:#292929; font-size:16px; line-height:180%; letter-spacing:0px; text-align:justify; text-justify:inter-ideograph; text-shadow:none; }
	section.about article h4 .lb {display: none;}
	section.about article p {display:block; }
	section.about article h5 {padding:20px 0px 0px 0px; color:#292929; font-size:16px; line-height:180%; letter-spacing:0px; text-align:justify; text-justify:inter-ideograph; text-shadow:none; }
	/* /about */
	
	
	
	/* blog */
	article#blog_sales {float:inherit; width:100%; padding:20px 0px 20px 0px; }
	article#blog_sales h2 {padding:10px 0px 10px 0px; font-size:16px; line-height:120%; letter-spacing:0px; }
	article#blog_sales p {width:100%; margin:0px auto; padding:100% 0px 0px 0px; }
	/* /blog */
}