
/* service */
.misc #contents {padding: 50px 0;}
.misc #contents .main {display: block;background-position: center;margin: 50px 0px 75px; position:relative; background-color: #313131; height: auto;}
.misc #contents .main.gear {background-image: url(../images/service/main_01.jpg);}
.misc #contents .main.bicycle {background-image: url(../images/service/main_02.jpg);}
.misc #contents .main.baggage {background-image: url(../images/service/main_03.jpg);}
.misc #contents .main.sale {background-image: url(../images/service/main_04.jpg);}

.misc #contents .main .inner {display: block;margin: 0 auto;max-width: 1440px; padding: 100px;}
.misc #contents .main .inner h1 {font-weight: 700;text-align: left; font-size: 60px; letter-spacing: 3px;color:#A1914D; line-height: 1em;margin-bottom: 25px;}
.misc #contents .main .inner h2 {color: #fff;font-weight: 700;text-align: left; font-size: 36px; letter-spacing: 1px;line-height: 1em;margin-bottom: 50px;}
.misc #contents .main .inner h3 { font-size: 21px; line-height: 1.4em;color: #fff;}
.misc #contents .main .crumbs { width: 100%; line-height: 1.4em; position: absolute; bottom:50px; right:50px;}
.misc #contents .main .crumbs ul { text-align: right; }
.misc #contents .main .crumbs ul li { font-size: 10px; display: inline-block; margin: 0 5px; letter-spacing: 2px;}
.misc #contents .main .crumbs ul li a {color: #FFF;}
.misc #contents .main .crumbs ul li a:hover {}
.misc #contents .main .crumbs ul li:last-child { font-size: 14px; letter-spacing: 1px;}
.misc #contents .main .crumbs ul li .fa {color:#A1914D;}
.misc #contents .crumbs.bottom {padding-top: 25px;}

.rentText{
    z-index: 9999
}

.rentTimeText{
    color:#aa0000
}

@media screen and (max-width: 767px) {
    .misc #contents {margin: 0px;}
    .misc #contents .main {margin: 0px 0px 25px;}
    .misc #contents .main .inner { margin: 0 auto;min-width:inherit;padding: 50px}
    .misc #contents .main .inner h1 {text-align: center; font-size: 54px; letter-spacing: 2px;margin-bottom: 50px;}
    .misc #contents .main .inner h2 {text-align: left; font-size: 30px;margin-bottom: 25px;}
    .misc #contents .main .inner h3 { font-size: 14px; line-height: 1.2em;color: #fff;}
    .misc #contents .main .crumbs {display: none;}
    .misc #contents .crumbs.bottom {padding-top: 0px;min-width:auto;}
    .misc #contents .crumbs.bottom ul li:last-child {display: block;}
}

.misc #contents .block {margin-bottom: 25px; border: 5px solid #A1914D; padding: 50px;}
.misc #contents .parent .block.min {height: 100%;padding-bottom: 25px;}
.misc #contents .block.min .catTitle {letter-spacing: 2px;font-size: 21px;background-color:#A1914D; color: #fff; font-weight: 700; line-height: 50px; text-align: center; position: relative; margin-top: -75px;}
.misc #contents .block.min figure {margin-top: 35px;}
.misc #contents .price {}
.misc #contents .price li {display: block; position: relative;padding: 20px 0;margin-top: 20px; border-top:1px solid #eee; height: 120px;}
.misc #contents .price li:first-child { border-top: none;margin-top: 0;padding: 0; height: 100px;}
.misc #contents .price li figure { width: 100px; height: auto; position: absolute; top: 20px; left: 0;}
.misc #contents .price li:first-child figure { width: 100px; height: auto; position: absolute; top: 0px; left: 0;}
.misc #contents .price li h2 {font-size: 26px; height: 100px; width: 100%;padding-left: 150px; position: relative; line-height: 100px;}
.misc #contents .price li h2 span {  position: absolute; top: 0; right: 0; display: block;}
.misc #contents .price li h3 { position: absolute; bottom: 0px; left: 150px; font-size: 13px; letter-spacing: 0.5px;}
.misc #contents .price.min {margin-top: 35px;}
.misc #contents .price.min li {display: block; position: relative;padding:10px 0;margin-top: 10px; border-top:1px solid #eee; height:auto;}
.misc #contents .price.min li:first-child { border-top: none;margin-top: 0;padding: 0; height:auto;}
.misc #contents .price.min li h2 {font-size: 18px; height: auto; width: 100%;position: relative;line-height: inherit;padding-left: 20px;}
.misc #contents .price.min li h2 span {  position: absolute; top: 0; right: 20px; display: block; color: #A1914D;}
.misc #contents .flow {margin-bottom: 75px;}
.misc #contents .flow ul {}
.misc #contents .flow ul li { border: 1px solid #A1914D;line-height: 1.6em;position: relative;font-size: 18px;display: block;padding: 21px 0px;padding-left:110px;padding-right: 20px;margin-top: 33px;}
.misc #contents .flow ul li:first-child {margin-top: 0;}
.misc #contents .flow ul li:after {content:'';display:block;width:1px;height:100%;background:#A1914D;position:absolute;left:80px; top: 0;}
.misc #contents .flow ul li span { color: #A1914D;margin-right: 0px; font-size: 36px; position: absolute; top: 50%; left: 0;height: 30px; line-height: 30px;margin-top: -17px;width: 80px;text-align: center;}
.misc #contents .flow ul li:first-child {}
.misc #contents .flow ul li .arrow { position: absolute; bottom:-25px; left: 50%; width: 30px; height: 13px;margin-left: -15px;}
.misc #contents .flow ul li h2 { font-size: 24px;margin-bottom: 5px;color: #A1914D;}
.misc #contents .flow .text { font-size: 16px; line-height: 1.4em;margin-top: 33px; background-color: rgba(161,145,77,0.20); padding: 25px 50px;}

.misc #contents .item {margin-bottom: 50px;}
.misc #contents .item h2 { text-align: center;margin-top: 15px; font-size: 18px;}
.misc #contents .item {margin-bottom: 50px;}
.misc #contents .item figure { position: relative;display: block;}
.misc #contents .item figure > span { position: absolute; top: -10px; left:20px; background-color:#A1914D; color: #FFF; letter-spacing: 2px;padding: 0px 20px; line-height: 25px;}
.misc #contents .item > .size { text-align: center;margin-top: 5px; font-size: 14px;}
.misc #contents .item > .price { text-align: center;margin-top: 5px; font-size: 14px; color: #A1914D;}
.misc #contents .item > ul { text-align: center;margin-top: -10px; position: relative;z-index: 9;}
.misc #contents .item > ul li { display: inline-block; border: 1px solid #ccc; background-color: #fff;margin: 0 10px; width: 20px; height: 20px;}
.misc #contents .item > ul li.black {background-color: #000;}
.misc #contents .item > ul li.natural {background-color: #efe0c4;}
.misc #contents .item > ul li.kahki {background-color: #4a5638;}
.misc #contents .item > ul li.natural {background-color: #efe0c4;}
.misc #contents .item > ul li.gray {background-color: #6b6e6e;}
.misc #contents .item > ul li.blue {background-color: #5482b8;}
.misc #contents .item > ul li.purple {background-color: #8c72a2;}
.misc #contents .item > ul li.brown {background-color: #453228;}
.misc #contents .item > ul li.navy {background-color: #0e1e39;}
.misc #contents .item > ul li.turquoise {background-color: #178dcc;}
.misc #contents .item > ul li.silver {background-color: #b6b1a8;}
.misc #contents .item .buy { width: 100px; margin: 15px auto 0;}
.misc #contents .item .buy a {background-color: #FFF;border: 1px solid #313131;text-align: center; font-size: 14px;display: block; line-height: 25px; color: #000;}
.misc #contents .item .buy a:hover { background-color: #A1914D; color: #fff;border: 1px solid #A1914D;}

.misc #contents .title {font-size: 24px;letter-spacing: 4px;font-weight: 700;padding-bottom: 25px;margin-bottom: 50px; text-align: center; position: relative;}
.misc #contents .title:after {content:'';display:block;width:20px;height:2px;background:#A1914D;position:absolute;left:50%;margin-left:-10px;bottom:0;}
.misc #contents .btn { margin-top: 25px;}
@media screen and (max-width: 767px) {
    .misc #contents .flow ul li h2 { font-size: 21px;}
    .misc #contents .title {font-size: 21px;letter-spacing: 2px;}
    .misc #contents .flow .text { font-size: 14px;padding: 25px;margin-top: 25px;}
}

.misc #contents .brand {margin: 25px 0;}
.misc #contents .row {margin: 0 auto; padding: 0px 100px;}
@media screen and (max-width: 767px) {
    .misc #contents .block {margin-bottom: 50px; padding: 20px;border: 3px solid #A1914D;}
    .misc #contents .block.min {margin-bottom: 50px; padding: 30px;}
    .misc #contents .block.min.second {margin-bottom: 0;}
    .misc #contents .block.min .catTitle {letter-spacing: 2px;font-size: 18px;line-height: 40px;margin-top: -50px;}
    .misc #contents .block.min figure {margin-top: 30px;}
    .misc #contents .parent .block.min {height: auto;padding-bottom: 30px;}
    .misc #contents .row {margin: 0 auto; padding: 25px 0px;}

    .misc #contents .about { padding: 0 25px;}
    .misc #contents .about h3 {font-size: 18px; padding-top:0px;padding-bottom: 25px;}

    .misc #contents .price li {display: block; position: relative;padding: 15px 0 0;border-top:1px solid #eee; height: 65px;}
    .misc #contents .price li:first-child { border-top: none;margin-top: 0;padding: 0; height: 50px;}
    .misc #contents .price li figure { width: 50px; top: 20px; left: 0;}
    .misc #contents .price li:first-child figure { width: 50px; top: 0px; left: 0;}
    .misc #contents .price li h2 {display: block;font-size: 16px; height: 65px; width: 100%;padding-left: 65px;position: relative; line-height:1.8em;}
    .misc #contents .price li h2 span {  position: absolute;top:inherit;bottom:15px;right: 10px; display: block; line-height:1em;}
    .misc #contents .price li h3 {display: none;}
    .misc #contents .swiper-container {margin: 0 -30px 25px;}
    .misc #contents .address {margin-bottom: 25px;}
    .misc #contents .brand {margin: 25px 25px 0;}
}

.misc #service {padding:50px 50px 50px;-webkit-transition: all .3s ease;transition: all .3s ease;background-color:#f6f4ed;}
.misc #service > p {margin-bottom: 50px;}
.misc #service .block {}
.misc #service figure {position: relative;margin-bottom: 25px; overflow: hidden;background-color: #000;}
.misc #service span { position: relative;z-index: 999;text-align: center; background-color: #fff;color:#A1914D;width: 150px;display: inline-block;border: 2px solid #A1914D;font-weight: 400; font-size:12px;line-height:2em;position: absolute; top:-15px; left:50%;margin-left: -75px;letter-spacing: 2px;}
.misc #service a {display: block; color: #000;}
.misc #service a:hover {color:#A1914D;}
.misc #service a .inner {padding: 0px;z-index: 99; position: relative;}
.misc #service a .inner h1 {font-weight: 700;text-align: center; font-size: 18px; line-height: 1.0em;}
.misc #service a .fa {display: none;}
.misc #service .title {font-size: 24px;letter-spacing: 4px;font-weight: 700;padding-bottom: 25px;margin-bottom: 50px; text-align: center; position: relative;}
.misc #service .title:after {content:'';display:block;width:20px;height:2px;background:#A1914D;position:absolute;left:50%;margin-left:-10px;bottom:0;}
@media screen and (max-width: 767px) {
    .misc #service {padding: 50px 20px 50px;}
    .misc #service > p {margin-bottom: 40px;}
    .misc #service .title {font-size: 21px;letter-spacing: 2px;margin-bottom: 25px;}
    .misc #service .block { }
    .misc #service .block a {display: block;position: relative; height: 80px;margin-top: 5px;background-color: #fff;}
    .misc #service .block a figure {position: absolute; top: 0; left: 0;width: 120px; height: 80px;margin: 0;padding: 0;}
    .misc #service .block a span {padding: 0px;  width: 100px;text-align: center;top:15px;left: 215px; position: absolute;border: 1px solid #A1914D;line-height:15px; font-size:11px; letter-spacing: 1px;}
    .misc #service .block a .inner { position: absolute; top: 0; left: 0; width: 100%; height: 80px; text-align: left;padding-left: 140px;}
    .misc #service .block a .inner h1 {text-align: left;margin-top: 40px; font-size: 16px;}
    .misc #service .block a .fa { display: block;position: absolute; top: 28px; font-size: 24px; right: 15px;color:#A1914D;}
    .misc #service .block a:hover { background-color:#A1914D;color: #fff;}
    .misc #service .block a:hover .fa {color: #fff;}
}


/* crumbs bottom */
.misc #contents > .crumbs { width: 100%; line-height: 1.4em;margin-top: 25px;}
.misc #contents > .crumbs ul { text-align: center; }
.misc #contents > .crumbs ul li { font-size: 11px; display: inline-block; margin: 0 5px; letter-spacing: 2px;}
.misc #contents > .crumbs ul li a {color: #000;}
.misc #contents > .crumbs ul li a:hover {}
.misc #contents > .crumbs ul li:last-child { font-size: 14px; letter-spacing: 1px;}
.misc #contents > .crumbs ul li .fa {color:#A1914D;}
