/*
Theme Name: HRJ
Theme URI: http://underscores.me/
Author: 4eyes
Author URI: http://underscores.me/
Description: for www.hukurokuju.com/
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/


@import './css/base.css';
@import './css/general_classes.css';
@import './css/colorbox.css';
@import url('http://fonts.googleapis.com/css?family=Special+Elite');

html, body {
	color: #000;
	height: 100%;
	min-height: 100%;
}

/* ---------------------------------
*    Structure
*/

#wrap {
	width: 100%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
	background: url('./images/bg-brick.gif') 0 0;
	padding: 2em 0;
}

#container {
	width: 1320px;
	margin: 0 auto;
}

#paper {
	background: url('./images/bg-paper.png') repeat-y 0 0;
}

#contents {
	width: 85%;
	margin: 0 auto;
	padding: 4em 0 0;
}

#footer {
	clear: both;
	width: 100%;
	height: 280px;
	background: url('./images/bg-paper-footer.png') no-repeat 0 0;
}

/* ---------------------------------
*    Header
*/

#header {
	background: url('./images/bg-paper-head.png') no-repeat 0 0;
	height: 475px;
}

#header .line {
	display: block;
	width: 85%;
	border: none;
	background: url('./images/line-grunge.png') transparent repeat-x 0 0;
	height: 2px;
	margin: 0 auto;
}

/* Logo */

#mainLogo {
	padding-top: 4em;

}

#mainLogo a{
	text-indent: -999em;
	background: url('./images/logo-main-pc.png') no-repeat 0 0;
	width: 780px;
	height: 281px;
	display: block;
	margin: 0 auto;
}

/* Nav */

#globalNav {
	margin: 1em 0;
	padding: 2em 0 1em;
}

#globalNav ul {
	text-align: center;
}

#globalNav ul li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin: 0 1em;
	position: relative;
}

#globalNav ul li a {
	font-family: 'Special Elite', cursive;
	font-size: 28px;
	display: block;
	height: 60px;
	line-height: 60px;
}

#globalNav ul li a:hover,
#globalNav ul li.current-menu-item {
	background: url('./images/icn-boots.png') no-repeat 50% 50%;
}

/* Sub menu */
#globalNav .sub-menu {
	display: none;
	text-align: left;
	position: absolute;
	padding: 15px 15px 10px 15px;
	left: 0;
	top: 50px;
	background-color: rgba( 0, 0, 0, .1 );
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#11000000', endColorstr='#11000000');
}

#globalNav .sub-menu li {
	display: block;
	margin: 5px 0;
	white-space: nowrap;
}

#globalNav .sub-menu li a {
	height: auto;
	line-height: 1;
}

#globalNav .menu-item-has-children a:hover,
#globalNav .menu-item-has-children .sub-menu li.current-menu-item,
#globalNav .sub-menu li a:hover {
	background-image: none;
}

#globalNav .sub-menu li a:hover { color: #c00; }

/* Smart Phone */
#globalNav select, #globalNav .select { display: none;}


/* Update */
#update-post { font-size: 85%; }
#update-post .title {
	font-size: 77%;
	color: #000;
	margin-bottom: 3px;
}

/* ---------------------------------
*    Common
*/

#contents .title {
	font-size: 197%;
	font-family: 'Special Elite', cursive;
	text-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
	/*filter: dropshadow(color=#ffffff, offx=0, offy=1);*/
	margin-bottom: 1em;
	padding-left: 15px;
}

.content {
	padding: 2em;
}

/* Breadcrumb */

#breadcrumb {
	padding-bottom: 3em;
}

#breadcrumb a,
#breadcrumb strong {
	padding: 0 0.5em;
}

/* Footer */

.contact {
	text-align: center;
}

#btn-contact,
#since {
	text-align: center;
	font-family: 'Special Elite', cursive;
	font-size: 146.5%;
}

#btn-contact {
	height: 90px;
}

/* ---------------------------------
*    Top
*/

#top {
	text-align: center;
}

#top .shop-info li {
	text-align: center;
	font-family: 'Special Elite', cursive;
	font-size: 174%;
	margin: .5em 0;
}
#top .shop-info li a { text-decoration: underline; }
#top .shop-info li a:hover { text-decoration: none; }


/* ---------------------------------
*    Intro
*/

#intro {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#intro #btn-enter {
	position: absolute;
	top: 50%;
	left: 5%;
	margin-top: -25px;
	opacity: 0;
}

#intro #btn-enter a {
	display: block;
	width: 110px;
	height: 50px;
	text-indent: 999em;
	overflow: hidden;
	background: url('./images/btn-enter.jpg') no-repeat 0 0;
}

#intro #btn-enter a:hover {
	background-position: 0 -50px;
}




/* ---------------------------------
*    Page
*/

/* CATEGORY */

#category {
	height: 100%;
	width: 100%;
}

/* post */

#category article {
	padding: 2em 0;
}

#category article header {
	margin-bottom: 1.5em;
}

#category article header h1,
#category article header div {
	text-align: center;;
}

#category article header div.meta a { text-decoration: underline; }
#category article header div.meta a:hover { text-decoration: none; }

#category article .post-title {
	font-size: 182%;
	margin-bottom: 0.4em;
	font-family: 'Special Elite', cursive;
}

#category article .post-title a { text-decoration: underline; }
#category article .post-title a:hover { text-decoration: none; }

#category article {
	background: url('./images/bg_content.png') repeat-y 0 0;
}

#category article .content {
	width: 600px;
	margin: 0 auto;
}

#category article .content a { text-decoration: underline; }
#category article .content a:hover { text-decoration: none; }

#category article .content img {
	/*
	-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, .2);
	box-shadow: 0px 0px 7px rgba(0, 0, 0, .2);
	*/
}

#sns_btns { width: 260px; margin: 0 auto 1.1em; }
#sns_btns .btns { float: left; width: 90px; }
#sns_btns .btns.gp { width: 80px; }

#nav-below { padding: 1.2em 0; }
#nav-below .previous { float: left; }
#nav-below .next { float: right; }

#nav-below a { text-decoration: underline; }
#nav-below a:hover { text-decoration: none; }

#category article footer {
	width: 600px;
	padding: 1.1em 0;
	margin: 0 auto;
	font-family: 'Special Elite', cursive;
	font-size: 116%;
}

/* ABOUT US */

#about-us h1 { text-align: center; }
#about-us .content {
	text-align: center;
}

#about-us .unit {
	margin-bottom: 2em;
}

#about-us .desc {
	font-size: 146.5%;
	line-height: 2;
	font-family: 'Special Elite', cursive;
}

#about-us .access {
	float: left;
	width: 550px;
}

#about-us .access img {
	border: 10px solid #4f3000;
}

#about-us .btn-gmap {
	margin: 5px 0 0 5px;
}

#about-us .company {
	float: left;
	width: 430px;
}

#about-us .company ul li {
	font-size: 123.1%;
	margin: 1.2em 0;
}

/* HOW TO ORDER */

#how-to-order .content {
	font-size: 108%;
}

#how-to-order .content h3 {
	font-weight: bold;
	margin-bottom: 1em;
	font-size: 138.5%;
}

#how-to-order .content .unit,
#how-to-order .content p {
	margin-bottom: 2em;
}

#how-to-order .content strong { font-weight: bold; }
#how-to-order .content a { background-color: #ffea00; }
#how-to-order .content a:hover { background-color: #fffc00;  }

.tbl-shipping-fee table {
	width: 100%;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	margin: 1em 0;
}

.tbl-shipping-fee table td,
.tbl-shipping-fee table th {
	padding: 5px 7px;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}

/* CONTACT */

#contact-us h1 {
	text-align: center;
}

#contact-us .content {
	width: 60%;
	margin: 0 auto;
}

.wpcf7-form p {
	padding: 0.5em 0;
}

.wpcf7-form p input,
.wpcf7-form p textarea {
	padding: 0.2em;
	color: #000;
	font-size: 123.1%;
}

.wpcf7-form p input {
	height: 25px;
	line-height: 25px;
}

.wpcf7-form p select,
.wpcf7-form p option {
	color: #000;
	font-size: 123.1%;
}

.wpcf7-form p .require {
	color: #f00;
}

.wpcf7-form label {
	width: 180px;
	display: inline-block;
	vertical-align: middle;
	font-family: 'Special Elite', cursive;
	font-size: 123.1%;
}

.wpcf7-form .send {
	padding: 10px 0;
}

.wpcf7-form .send input {
	padding: .5em 1em;
	margin-left: 300px;
	font-family: 'Special Elite', cursive;
	font-size: 146.5%;
	border: none;
	background-color: #000;
	color: #fff;
	cursor: pointer;
}

.wpcf7-form .send input:hover { background-color: #333; }


/* ---------------------------------
*    NEWS
*/

.clm2 #primary {
	float: left;
	width: 62%;
	padding-right: 2.5em;
}

.clm2 #secondary {
	float: left;
	width: 35%;
}

.clm2 article { margin: 0 0 2em; padding-bottom: 1em; }
.clm2 article .meta,
.clm2 article #sns { margin-top: 1em; }
.clm2 article img {
	/*-webkit-box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, .6);
	-moz-box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, .6);
	box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, ..6);*/
	-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, .2);
	box-shadow: 0px 0px 7px rgba(0, 0, 0, .2);
	margin-bottom: 1em;
}

.clm2 article .content p { line-height: 2; }
.clm2 article .content a { text-decoration: underline; }
.clm2 article .content a:hover { text-decoration: none; }
.clm2 article .content .btn { text-decoration: none; }

#archive .title-archive { margin-bottom: 4em; }
#archive article { border-bottom: 1px dotted #333; clear: both; }

#archive article .photo {
	float: left;
	width: 280px;
	/*height: 230px;*/
}

#nav-below {
	padding: 1em;
	background: url('./images/line-grunge.png') repeat-x top left;
	font-family: 'Special Elite', cursive;
}

#nav-below .previous span,
#nav-below .next span {
	font-size: 123.1%;
}
#nav-below .previous { float: left; }
#nav-below .next { float: right; }

#relatedPosts { margin: 2em 0 0; clear: both; }
#relatedPosts h2 { font-size: 153.9%; }
#relatedPosts ul { margin-top: 1em; }
#relatedPosts ul li { margin: 0.4em 0; }

/* Secondary */

#secondary aside {
	margin: 0 0 4em;
}

#secondary aside select {
	font-size: 123.1%;
}

#secondary .widget-title {
	font-family: 'Special Elite', cursive;
	margin: 0 0 1.5em;
	font-size: 138.5%;
	padding-bottom: .3em;
	background: url('./images/line-grunge.png') repeat-x bottom left;
}

#secondary aside li {
	margin: 0.4em 0;
	padding-left: 1.3em;
	font-size: 116%;
	background: url('./images/icn-list.gif') no-repeat 0 50%;
}

/* Calender */
#wp-calendar {
	width: 95%;
}

#wp-calendar caption {
	text-align: center;
}

#wp-calendar th,
#wp-calendar td {
	text-align: center;
	padding: 3px;
}

#wp-calendar #today {
	border: 1px solid #666;
}

#wp-calendar td a {
	text-decoration: underline;
}

/* Search */

#searchform {
	width: 220px;
	height: 31px;
	position: relative;
}

#searchform .field {
	width: 178px;
	height: 30px;
	line-height: 30px;
	float: left;
	margin-top: 2px;
	margin-left: 2px;
	padding-left: 7px;
	border: 1px solid #CCC;
	border-top-color: #999;
	border-bottom-color: #DDD;
	background: white;
}

#searchsubmit {
	width: 22px;
	height: 22px;
	border: none;
	cursor: pointer;
	position: absolute;
	top: 7px;
	right: 0;
	text-indent: -999em;
	background: url('./images/icn-search.png') 0 0;
}

/* ---------------------------------
*    Repair
*/

#repair .post {
	width: 270px;
	padding: 2em 1.5em 1em 1.5em;
	background: url('./images/bg-repair-photo.jpg') 0 0;
	position: relative;
	float: left;
	margin: 0 0 55px 40px;
}

#repair .post .tape {
	position: absolute;
	top: -21px;
	left: 50%;
	margin-left: -93px;
	background: url('./images/top-repair-photo.png') 0 0;
	width: 197px;
	height: 42px;
}

/*
#repair .post:hover {
  -webkit-transform: rotate(6deg);
     -moz-transform: rotate(6deg);
       -o-transform: rotate(6deg);
      -ms-transform: rotate(6deg);
          transform: rotate(6deg);
}
*/

#repair .post h1 {
	text-align: center;
	font-size: 153.9%;
	font-family: 'Special Elite', cursive;
	padding-top: 1em;
	min-height: 65px;
}


#filters ul {
	text-align: center;
	margin: 2em 0;
}

#filters ul li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin: 0 1em;
}

#filters ul li a {
	display: block;
	font-size: 197%;
	font-family: 'Special Elite', cursive;
	padding: 5px 0 5px 35px;
}

#filters ul li a:hover,
#filters ul li a.selected {
	color: #c00;
	background: url('./images/icn-checked.png') no-repeat left -5px;
}

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */


/* Single */

.wrap-repair {
	background: url('./images/bg-repair-photo.jpg') 0 0;
}

.wrap-repair .single {
	width: 960px;
	margin: 0 auto;
	padding: 2.5em 0;
}

.wrap-repair .single .content {
	padding: 1em 0;
}

.wrap-repair .single .photo {
	width: 500px;
	float: left;
	overflow: hidden;
}

.wrap-repair  .bx-wrapper {
	position: relative;
	padding: 0;
	*zoom: 1;
}

.wrap-repair  .bx-wrapper img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.wrap-repair  .bx-wrapper .bx-pager {
	width: 100%;
	padding: 1em 0;
	text-align: center;
}

.wrap-repair  .bx-wrapper .bx-pager-item {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.wrap-repair  .bx-wrapper .bx-pager-item a {
	margin: 0 2px;
	font-size: 167%;
	font-family: 'Special Elite', cursive;
}

.wrap-repair .bx-wrapper .bx-pager-item a.active { color: #fff; }
.wrap-repair .bx-wrapper .bx-pager-item a:hover { color: #fff; }


	.wrap-repair .bx-prev,
	.wrap-repair .bx-next {
		position: absolute;
		top: 500px;
		font-size: 50px;
		font-family: 'Special Elite', cursive;
		background-position: 0 0;
	}

	.wrap-repair .bx-prev:hover,
	.wrap-repair .bx-next:hover {
		color: #fff;
	}

	.wrap-repair .bx-prev { left: 0; }
	.wrap-repair .bx-next { right: 0; }


.wrap-repair .single .info {
	width: 400px;
	float: right;
}

.wrap-repair .single .title {
	font-size: 25px;
	font-family: 'Special Elite', cursive;
	text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
	margin-bottom: .5em;
	line-height: 1.8;
}

.wrap-repair .single .info .text {
	padding: 1em;
	line-height: 2;
	background-color: rgba(255, 255, 255, 0.2);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#22FFFFFF', endColorstr='#22FFFFFF');
	clear: both;
}

.wrap-repair .single .btnSns {
	padding: 1em 0;
}

.wrap-repair .single .btnSns .btns {
	float: left;
	width: 90px;
}

.fb_iframe_widget > span {
	vertical-align: baseline !important;
}

.single .contact a {
	width: 100%;
	display: block;
	padding: 0.5em 0;
	background-color: #313131;
	color: #FFF;
	font-size: 123.1%;
	text-align: center;
	font-family: 'Oswald', sans-serif;
}

.single .contact a:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

.wrap-repair .single .back { visibility: hidden; }

/* ---------------------------------
*    Footer
*/

/*
#copy-right {
	text-align: right;
	font-size: 77%;
	padding-right: 2em;
}
*/

/* Loading */

#overlayWrap {
	background-color: #FFF;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	display: none;
}

#overlay {
	width: 250px;
	height: 250px;
	color: #000;
	font-size: 1.5em;
	position: absolute;
	display: block;
	margin: auto;
	text-align: center;
}

#page-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
}

/* ---------------------------------
*    Media Query
*/


@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
#wrap {
	background-image: none;
	background-color: #fff;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
}

@media( max-width:480px ){ 
/* 480pxまでの幅の場合に適応される */

/* Common */

#wrap {
	background-image: none;
	background-color: #000;
}

#container {
	width: 95%;
	margin: 0 auto;
	background-image: url('./images/bg-paper-SP.png');
	background-size: contain;
}

#paper {
	width: 100%;
	background-image: none;
}

#contents {
	display: block;
	padding: 0;
	margin: 2em auto 0;
	width: 90%;
}

#footer {
	background-image: none;
	height: 180px;
}

#footer #since img {
	width: 130px;
}

.wrap { padding: 0 1em; }
.content { padding: 1em 0; }

.clm2 #primary,
.clm2 #secondary {
	float: none;
	width: 100%;
	padding: 0;
}

#breadcrumb { padding-bottom: 2em; }

#header {
	background-image: url('./images/bg-paper-head-SP.png');
	background-size: contain;
	height: auto;
}

#header .line { display: none; }

#mainLogo {
	width: 100%;
	float: none;
	padding-top: 2em;
}

#mainLogo a {
	width: 145px;
	height: 50px;
	margin: 0 auto;
	background-image: url('./images/logo-main-sp.png');
	background-position: 50% 50%;
	background-size: 145px 50px;
}

#update-post { display: none; }

#top img,
#category img {
	width: 100%;
	height: auto;
}

#top .shop-info .title img { display: none; }
#top .shop-info li { font-size: 146.5%; text-align: left; }

.menu-grobal-nav-container {
	width: 280px;
	padding: 1em 0;
	margin: 0 auto;
}

#globalNav {
	width: 100%;
	margin: 0;
	padding: 0;
}

#globalNav ul { display: none; }
#globalNav .select{
	position: absolute;
	width: 280px;
	height: 34px;
	overflow: hidden;
	line-height: 37px;
	background: url('images/bgSpMenu.png') no-repeat;
	border: none;
	padding: 0 0 0 10px;
	margin: 0;
	font-size: 14px;
}
#globalNav select, #globalNav .select { display: inline-block; color: #000; }
#globalNav select { height: 34px; }


#intro #btn-enter {
	position: absolute;
	top: 90%;
	left: 35%;
	opacity: 0;
}

/* Pages */

#category article {
	padding: 1em;
	background-image: none;
	background-color: #fff;
}

#category article .post-title {
	font-size: 131%;
}

#category article .content {
	width: 100%;
}

#category article .content iframe {
	width: 100%;
	height: auto;
}

#category article footer {
	width: 100%;
}

.wp-pagenavi {
	word-break: break-all;
	line-height: 2;
	margin-bottom: 3em;
}

#search-2 { display: none; }

/* About Us */

#about-us .desc {
	font-size: 100%;
	line-height: 1.5;
}

#about-us .access,
#about-us .company {
	float: none;
	width: 100%;
}

#about-us .access img {
	border-width: 3px;
	width: 100%;
	height: auto;
}

#about-us .company ul li {
	font-size: 100%;
}

/* Contact Us */

#contact-us .content {
	width: 95%;
}

.wpcf7-form label { display: block; width: 100%; }
.wpcf7-form p input, .wpcf7-form p textarea { width: 100%; }
.wpcf7-form .send input { margin: 0; }

#page-top { display: none; }


/* Repair */


#repair .post {
	width: 80%;
	margin: 0 auto 2em;
	float: none;
}

#repair .post img {
	width: 100%;
	height: auto;
}

.wrap-repair #primary {
	width: 95%;
}

.wrap-repair .photo,
.wrap-repair .info {
	float: none;
	clear: both;
	width: 100% !important;
	height: auto;
	margin: 0 auto!important;
}

.wrap-repair .photo {
	height: 350px;
}

.wrap-repair .photo .bx-wrapper .bx-controls-direction a {
	display: none;
	/*top: 150px;*/
}

.wrap-repair .info .back { visibility: visible; }
.wrap-repair .info .back a {
	display: block;
	width: 120px;
	margin: 0 auto;
	color: #fff !important;
	background-color: #7B4A00;
	text-align: center;
	padding: .5em 0;
}

}


/* Retina Display ----------- */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
#mainLogo a{
	background-position: 50% 50%;
	background-size: 145px 50px;
}

.ua-mobile-ipad #mainLogo a { background-size: 290px 100px; }
.ua-mobile-ipad .wrap-repair .info .back { visibility: visible; }
.ua-mobile-ipad #intro #btn-enter {
	position: absolute;
	top: 90%;
	left: 35%;
}