@media screen and (max-width: 1220px) {

#otorihiki {position:fixed !important;top:0;right:20px;background:#1a1a1a;color:#FFF;z-index:9999 !important;width:100px;height:206px;}
.top_headimg {position: relative;height:640px;background-repeat: no-repeat;background-position: top center;background-size:76% auto;}
.fh5co-hero {position: relative;height: 640px;}

.pc_only ul li {padding:30px 0 0 !important;}
#logo {position:relative;z-index:10;margin:40px 30px 0 0;float:right;width:90px;}

.page-section .type ul {width:50%;float:right;overflow:hidden;font-size:12px;}

}

@media screen and (max-width: 1024px) {


.top_headimg {position: relative;height:510px;background-repeat: no-repeat;background-position:top center;background-size:70% auto;}
.fh5co-hero {position: relative;height: 510px;}

.pc_only ul li {padding:20px 0 0 !important;}
.pc_only ul li a:hover {background:url(images/nav_imgover.png) no-repeat center bottom;background-size:26px auto;}
.pc_only ul li.navfirst {margin-left:0;}
#menu-wrap .sf-menu a {font-size:13px;padding:0;color:#1a1a1a;margin-right:0;}
.page-section .type img {float:left;margin:0 10px 0 0;width:40%;}
.page-section .type ul {width:55%;float:right;overflow:hidden;font-size:12px;}
.page-section .type ul li {width:36%;margin:0 15px 2px 0;float:left;list-style-type: disc;}

}


@media screen and (max-width: 768px) {


.pc_only {display: none;}
.sp_only {display: block;}

	
	
.top_headimg {position: relative;height:600px;background-repeat: no-repeat;background-position: center center;background-size:45% auto;}
.fh5co-hero {position: relative;height: 600px;}
.fh5co-hero-page {position: relative;height: 120px;}


.top {text-align: center;}
#logo {position:relative;z-index:10;margin:20px 0 0 0;float:left;}
#logo a {width:220px;display:block;}

#otorihiki {position:fixed !important;top:auto;bottom:0;right:0;background:#1a1a1a;color:#FFF;z-index:9999 !important;width:100%;height:auto;}
#otorihiki a {color:#FFF;}
#otorihiki span {display:none;}
#otorihiki ul {overflow:hidden;padding:0;margin:0;list-style:none;}
#otorihiki ul li{float:left;width:50%;margin:0;}
#otorihiki ul li:first-child {background:#1a1a1a;}
#otorihiki ul li:last-child {background:#970000;}
#otorihiki ul li img {width:100%;}


#work-section,
#services-section,
#content-section,
#info-section,
#work-section_2,
.page-section {
padding: 4em 0;
}


#work-section {background: url(images/work_section_bg.jpg) no-repeat center top;background-size:1000px auto; padding:340px 0 0;}
#work-section_cont {width:74%;margin:0 auto;}
#work-section h3 {float:right;}
#work-section h3 img {width:80%;margin-left:50px;}
#work-section p {padding-top:100px;}



#services-section_cont {width:74%;margin:0 auto 80px;overflow:hidden;}
#services-section h3 {float:left;margin-right:40px;}
#services-section h3 img {width:80%;}
#services-section p {padding:30px 0 0;}
.services {margin-bottom: 1em;text-align: center;}
.services img {width:100%;}
.services h4 {margin: 20px auto 25px;display: inline-block;color:#444;}


#info-section {text-align:left;border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
#info-section h3 {color:#333;}
#info-section p {}
#info-section .news {margin: 0 0 0 60px;}
#info-section .facebook {margin: 0 60px 0 0;}


#footer .footer-menu {text-align: center;float: left;}
#footer .footer-menu li {margin: 0 0 0 7px;}
#menu-wrap {display: none;}

.nav-toggle {display: block;top: 0px;margin-top: 2.5em;}
.row-top-padded-lg {padding-top: 2em;}
.row-bottom-padded-lg {padding-bottom: 2em;}
.row-bottom-padded-md {padding-bottom: 2em;}
.row-top-padded-md {padding-top: 2em;}
.row-bottom-padded-sm {padding-bottom: 2em;}
.row-top-padded-sm {padding-top: 2em;}



.page-section h2 {margin-bottom:30px;font-size:24px !important;}
.page-section .itemlist {margin:0 10px 30px;}
.page-section .itemlist h3 {border-top:solid 2px #444;border-bottom:solid 1px #444;padding:10px 0;font-size:18px;}
.page-section .itemlist h3 span {display:block;font-size:14px;margin:0 0 5px;}
.page-section p.price {text-align:right;margin:0 0 20px;font-size:16px;}
.page-section .type {overflow:hidden;margin:0 0 20px;text-align:center;}
.page-section .type img {float:none;margin:0 auto 20px;width:40%;}
.page-section .type ul {width:100%;float:none;overflow:hidden;padding:0 0 0 20px;}
.page-section .type ul li {width:44%;margin:0 10px 2px 0;float:left;list-style-type: disc;}
.page-section .type .gift {width:100%;float:none;font-size: 12px;}
.page-section .type .gift img {width:40%;float:left;}


.page-section .trade {margin-bottom:50px;}
.page-section .trade h3 {border-top:solid 2px #444;border-bottom:solid 1px #444;padding:25px 20px;font-size:20px;text-align:left !important;}
.page-section .trade h3 span {display:inline-block;margin:0 0 5px;font-size:12px;}
.page-section .trade p {text-align:left !important;margin:0 20px;}

.kaihatsu {width:96%;margin:30px auto;overflow:hidden;}
.kaihatsu h4 {border-bottom:double 4px #1a1a1a;color:#1a1a1a;padding:8px 15px;margin:0 auto 30px;text-align:center;}
.kaihatsu ul {width:95%;text-align:left !important;margin:0 auto 50px;}
.kaihatsu div {overflow: hidden;width:100%;margin: 0 auto;text-align:center;}
.kaihatsu div img {float:none;margin:0 auto 20px;}
.kaihatsu div dl {width:90%;float:left;text-align:left !important;margin:0 0 0 20px;}
.kaihatsu div dl dt {font-weight: 700;margin:0 0 5px;}
.kaihatsu div dl dd {margin:0 0 15px;}
.profile {background:#1a1a1a;color:#FFF;text-align:center;padding:40px 20px;font-size:12px;}
.profile img {width:80%;margin:auto;}
.profile p {width:80%;margin:20px auto 0;text-align:left !important;}
.profile a{color:#fff;}
#contactform {width:90%;margin:0 auto 80px;}
#contactform dl.contact-Form {width:100%;margin:0 auto 0;}
#contactform dl.contact-Form dt {font-weight:100;margin-bottom:15px;}
#contactform dl.contact-Form dd {margin-bottom:15px;} 
#contactform dl.contact-Form dd input {padding:5px;width:90%;}
#contactform dl.contact-Form dd textarea {width:100%;padding:5px;}
#contactform dl.contact-Form dd select{padding:5px;}

#post-contents {border-top:double 4px #1a1a1a;padding:40px 0;overflow:hidden;width:85%;margin:0 auto;}
.postlistbox {padding:30px; margin:0 auto 20px;border:solid 1px #ccc;min-height:180px;}

#offcanvas-menu ul li {
padding: 0;
margin: 0 0 5px 0;
list-style: none;
width:100%;
border-bottom: solid 1px #555;
}
#offcanvas-menu ul li a {
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
}

.facebook {overflow: hidden;padding:0;}


}


@media screen and (max-width: 480px) {

.col-xxs-12 {float: none;width: 100%;}
.top_headimg {position: relative;height:420px;background-repeat: no-repeat;background-position: center center;background-size:60% auto;}
.fh5co-hero {position: relative;height: 420px;}
.fh5co-hero-page {position: relative;height: 120px;}

#logo {position:relative;z-index:10;margin:10px 0 0 0;width:80px;}

#work-section {background: url(images/work_section_bg.jpg) no-repeat center top;background-size:700px auto; padding:220px 0 0;}
#work-section_cont {width:84%;margin:0 auto;}
#work-section h3 {float:right;width:40%;}
#work-section h3 img {width:95%;margin-left:0;float:right;}
#work-section p {padding-top:100px;}



#services-section_cont {width:84%;margin:0 auto 80px;overflow:hidden;}
#services-section h3 {float:left;margin-right:20px;}
#services-section h3 img {width:80%;float:left;}
#services-section p {padding:30px 0 0;}
.services {margin-bottom: 1em;text-align: center;}
.services img {width:100%;}
.services h4 {margin: 20px auto 25px;display: inline-block;color:#444;}

.col-md-3 {width: 50%;float:left;}


#info-section {text-align:left;border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
#info-section h3 {color:#333;}
#info-section p {}
#info-section .news {margin: 0 auto 30px;width:84%;}
#info-section .facebook {width:84%;margin-left: auto;margin-right: auto;}


.about-us {text-align:left;width:84%;margin-left: auto;margin-right: auto;}
.about-us h2 {width:80%;margin: 0 0 30px 0;}
.about-us p {margin: 0 0 30px 0;}
.about-us h2 img {width:100%;}
.img_map {padding:20px 0 0 0;}
.btn_contactform {width:200px;margin: 0 0 0 0;}
.btn_contactform a:hover {opacity:0.7;}
.btn_contactform a img {width:100%;}


#footer .footer-menu li {width:100%;display:block;text-transform: uppercase;padding:0;margin:0;}
#footer .footer-menu li a {width:100%;display:block;float:left;border-right:none;padding:0;margin:0;font-size: 12px;text-align:left;}
#footer .footer-menu li:first-child a {border-left:none;} 
#footer .footer-menu li:first-child {margin-left: 0;}

}




@media screen and (max-width: 320px) {

.col-xxs-12 {float: none;width: 100%;}

}