/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
	width: 97%;
	max-width: 1021px;
	position: relative;
	margin: 0 auto;
	padding: 0 5%;
	box-sizing: border-box;
}
.column, .columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}
img {
	vertical-align: bottom;
	width: 100%;
}
.titleh2 {
	position: relative;
	padding: 25px 10px 10px 10px;
	clear: both;
	margin: 0 0 20px 0;
}
.titleh2::before {
	border-bottom: solid 2px #ff7300;
	width: 20%;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	content: "";
}
.titleh2::after {
	border-bottom: solid 2px #cccccc;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
}
.mbilemode {
	display: block;
}
.pcmode {
	display: none;
}
.leftnav ul {
	padding: 0 0 0;
	border-radius: 5px;
	background: #efefef;
	clear: both;
}
.leftnav li ul {
	padding: 0 0 0;
	margin: 0;
	border-radius: 5px;
	background: #fefefe;
	clear: both;
}
.left_menu01 {
	border-radius: 5px 5px 0 0;
	font-size: 18px;
	font-size: 1.125rem;
	background-color: #ff7300;
	color: #FFF;
	font-weight: bold;
	margin: 30px 0 0 0;
	position: relative;
}
.leftnav li {
	border-bottom: #FFF 1px solid;
}
.leftnav li:last-child {
	border-bottom: none;
	border-radius: 5px;
}
.leftnav li a, .leftnav li.menubt {
	display: block;
	position: relative;
	padding: 17px 0 20px 40px;
	line-height: 1.57;
}
.leftnav li a:hover, .leftnav li.menubt:hover {
	background-color: #cfcfcf;
}
.left_menu01 span:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 17px;
	margin-top: -5px;
	border: none;
	width: 25px;
	height: 25px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	background: url(../images/dot.gif) no-repeat;
}
.leftnav li a:before, .leftnav li.menubt:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 18px;
	margin-top: -7px;
	border-right: 3px solid #ff7300;
	border-bottom: 3px solid #ff7300;
	width: 6px;
	height: 6px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.leftnav li.activemenu:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 18px;
	margin-top: -7px;
	border-right: 3px solid #ff7300;
	border-bottom: 3px solid #ff7300;
	width: 6px;
	height: 6px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.leftnav li.menutab {
	display: none;
}
.leftnav li li {
	border-bottom: 1px dotted #eeeeee;
}
.leftnav li li a:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 25px;
	margin-top: -5px;
	border-right: 2px solid #ff7300;
	border-bottom: 2px solid #ff7300;
	width: 3px;
	height: 3px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.left_menu01 span {
	display: block;
	padding: 26px 18px 18px 52px;
}
/* element-item
------------------------- */

.osusume {
	clear: both;
}
.element-item {
	float: left;
	width: 29%;
	padding: 1%;
	margin: 2px 2px;
	border: #CCC 1px solid;
}
.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item .osusumename {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1em;
	padding: 3px 0;
	height: 8em;
}
.element-item .osusumeimg {
	width: 100%;
	height: 100%;
}
.element-item .osusumekakaku {
	font-weight: bold;
	text-align: right;
	font-size: 0.8em;
}
.element-item .osusumekakaku span {
	font-weight: bold;
	font-size: 1.6em;
	padding: 3px;
}
.element-item .osusumezei {
	font-size: 0.8em;
	text-align: right;
}
.left-box1 p {
	padding-bottom: 5px !important;
	margin: 0;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
	width: 95%;
	max-width: 1021px;
	padding: 0;
}
.element-item .osusumekakaku br{
	display: none;
}
}

/* For devices larger than 640px */
@media (min-width: 640px) {
.container {
	width: 98%;
	max-width: 1021px;
  text-align: left;
}
.element-item .osusumekakaku br{
	display: none;
}
.column,  .columns {
}
.column:first-child,  .columns:first-child {
	margin-left: 0;
}
.left-box1.columns {
	width: 23.50636630%;
}
.right-box1.columns {
	width: 72.96767874%;
}
.right-box1l.columns {
	width: 32.8859060%;
}
.right-box1r.columns {
	width: 66.4429530%;
}
.right-box2.columns p {
	width: 49.6644295%;
}
.right-box2.columns p:nth-child(odd) {
	float: left;
	clear: both;
}
.right-box2.columns p:nth-child(even) {
	float: right;
}
.right-box3.columns p {
	width: 32.8859060%;
}
.right-box3.columns p {
	float: left;
}
.right-box3.columns p:nth-child(2), .right-box3.columns p:nth-child(5), .right-box3.columns p:nth-child(8), .right-box3.columns p:nth-child(11) {
	padding: 0 0.62114093%;
}
.right-box3.columns p:nth-child(3n+1):after {
	clear: both;
}
.right-box2 {
	clear: both;
	width: 100%;
}
.bnbox {
	margin-bottom: 0;
	padding-bottom: 0;
}
.mbilemode {
	display: none;
}
.pcmode {
	display: block;
}
.excuse {
	padding: 0 0 30px 0;
}
.osumename {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1em;
	height: 6em;
}
.top25 {
	padding-top: 25px;
}
}

/* For devices larger than 640px */
@media (min-width: 1021px) {
.element-item {
	float: left;
	width: 18%;
	padding: 0.5%;
	margin: 0.3%;
	border: #CCC 1px solid;
}
.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item .osusumename {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1em;
	height: 6em;
}
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
}
body {
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300;
}
p {
	margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: #1EAEDB;
}
a:hover {
	color: #0FA0CE;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
	list-style: circle inside;
}
ol {
	list-style: decimal inside;
}
ol, ul {
	padding-left: 0;
	margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
	margin: 1.5rem 0 1.5rem 3rem;
}
li {
	margin-bottom: 0;
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
 padding: .2rem .5rem;
 margin: 0 .2rem;
	font-size: 90%;
	white-space: nowrap;
	background: #F1F1F1;
	border: 1px solid #E1E1E1;
	border-radius: 4px;
}
pre > code {
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #E1E1E1;
}
th:first-child, td:first-child {
	padding-left: 0;
}
th:last-child, td:last-child {
	padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button {
	margin-bottom: 1rem;
}
input, textarea, select, fieldset {
	margin-bottom: 1.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
	margin-bottom: 0.5rem;
}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
	width: 100%;
	box-sizing: border-box;
}
.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
}
.u-pull-right {
	float: right;
}
.u-pull-left {
	float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
	margin-top: 30px;
	margin-bottom: 30px;
	border-width: 0;
	border-top: 1px solid #E1E1E1;
	clear: both;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after, .row:after, .u-cf {
	content: "";
	display: table;
	clear: both;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {
}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
}
/* Larger than tablet */
@media (min-width: 750px) {
}
/* Larger than desktop */
@media (min-width: 1000px) {
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
}
/*help*/
.winered, .wainered {
	color: #C00;
}
.exce p, .exce li {
	font-size: 1.2em;
	line-height: 1.5em;
}
.btmain {
	text-align: center;
}
ul.listtype_a {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 30px;
}
ul.listtype_b {
	padding-right: 20px;
	padding-left: 30px;
	margin-left: 40px;
	list-style-position: outside;
	list-style-type: decimal;
}
ul.listtype_a li, ul.listtype_b li {
	list-style: none;
	clear: both;
}
ul.listtype_a li.onli {
	list-style-position: outside;
	list-style-type: disc;
	padding-top: 5px;
}
ul.listtype_a li.offli {
	list-style-type: none;
	padding-top: 5px;
	padding-bottom: 10px;
}
ul.listtype_a li.offli2 {
	list-style-type: none;
	padding-top: 10px;
	padding-bottom: 5px;
}



/*******検索窓追加*******/

form textarea,form .keyword {
 background-color: #fff;
 border: 1px solid #dcdcdc;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width:100%;
 height: 40px;
 line-height: 40px;
 text-indent:10px;
}
.price_min, 
.price_max {
 width:45%;
 float:left;
 
}
.ctSelect {
 background: url(../img/arrow.png) right center no-repeat;
 background-color: #fff;
 text-indent:5px;
 border: 1px solid #dcdcdc;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width:100%;
 height: 40px;
 line-height: 40px;
 display:block;
 overflow:hidden;
}
span.kakakuspacer {
 line-height: 40px;
 width:10%;
 text-align:center;
 float:left;
 line-height: 30px;
}
.btn_submit {
   -webkit-appearance: button;
 width: 100%;
 padding: 5px 0 7px;
 background: #ef7211;
 color: #fff;
 text-align: center;
 border:none;
 border-radius:30px;
 font-size: 1.5rem;
}
.btn_submit:hover {
 text-decoration: none;
 opacity: 0.8;
 filter: alpha(opacity=80);
 -moz-opacity: 0.8;
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 -ms-transition: 0.5s;
 -o-transition: 0.s;
 transition: 0.5s;
 cursor: pointer;
}


/* For devices larger than 1021px */
@media (min-width: 1021px) {

.txt_navi {
 margin-top:10px !important;
 
}
form textarea,form .keyword {
 background-color: #fff;
 border: 1px solid #dcdcdc;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width:15%;
 height: 26px;
 line-height: 30px;
 text-indent:5px;
 float:left;
 font-size: 1rem;
 margin-right:5px;
}
.price_min, 
.price_max {
 width:14%;
 float:left;
 
}
.ctSelect {
 /*background: url(../images/arrow.png) right center no-repeat;*/
 background-color: #fff;
 text-indent:3px;
 border: 1px solid #dcdcdc;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 width:100%;
 height: 30px;
 line-height: 30px;
 display:block;
 overflow:hidden;
 font-size: 1rem;
}
span.kakakuspacer {
 line-height: 40px;
 width:1.2em;
 text-align:center;
 float:left;
 line-height: 30px;
}
.btn_submit {
   -webkit-appearance: button;
 width: 10%;
 padding: 3px 0 ;
 background: #ef7211;
 color: #fff;
 text-align: center;
 border:none;
 border-radius:10px;
 font-size: 1rem;
 float:left;
 margin-left:5px;
 margin-bottom:0;
}
.btn_submit:hover {
 text-decoration: none;
 opacity: 0.8;
 filter: alpha(opacity=80);
 -moz-opacity: 0.8;
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 -ms-transition: 0.5s;
 -o-transition: 0.s;
 transition: 0.5s;
 cursor: pointer;
}


}