@charset "UTF-8";

/* =========================================================
   Pieces
========================================================= */
/* header-navi
----------------------------------------------- */
#headerNavi {
  padding: 0;
  background-color: #000;
}
#headerNavi .pieceContainer {
  margin: 0 auto;
}
#headerNavi .pieceBody {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  min-height: 38px;
  padding: 5px 0;
  color: #fff;
  font-size: 90%;
}
#google_translate_element img {
  max-width: none;
}
#headerNavi ul {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
#headerNavi li:not(.translate) {
  border-left: 1px dotted #fff;
}
#headerNavi li:last-child {
  border-right: 1px dotted #fff;
}
#headerNavi li.translate {
  min-width: 138px;
}
/* IE,Edge */
_:-ms-lang(x)::-ms-backdrop, #headerNavi li.translate {
  min-width: 0;
}
_:-ms-lang(x)::backdrop, #headerNavi li.translate {
  min-width: 0;
}
_:lang(x)::-ms-, #headerNavi li.translate {
  min-width: 0;
}
#headerNavi li:not(.translate) a {
  display: block;
  padding: 0 10px;
  color: #fff;
}
#google_translate_element {
  margin-right: 10px;
}

/* common header
----------------------------------------------- */
 #commonHeader {
  background: url("../images/bg-header-repeat.gif") repeat-x left bottom;
}
#commonHeader .pieceBody {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
#commonHeader p {
  margin-top: 5px;
}

/* global navi
----------------------------------------------- */
#globalNavi .pieceContainer {
  background: #eb3333 url("../images/bg-navi-repeat.gif") repeat-x left top;
}
#globalNavi ul {
  display: flex;
  justify-content: center;
  position: relative;
}
#globalNavi li {
  flex-grow: 1;
  flex-basis: 0%;
}
#globalNavi li a {
  display: block;
  position: relative;
  padding: 10px 0;
  color: #fff;
  font-size: 105%;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
#globalNavi li a.cur,
#globalNavi li a:hover {
  background-color: rgba(0,0,0,0.1);
}
#globalNavi ul::before,
#globalNavi ul::after,
#globalNavi li a::before,
#globalNavi li a::after {
  content: "";
  position: absolute;
  top: 25%;
  width: 1px;
  height: 50%;
}
#globalNavi ul::before,
#globalNavi li a::before {
  background: #f38585;
}
#globalNavi ul::after,
#globalNavi li a::after {
  background: #bd3232;
}
#globalNavi ul::before {
  right: -1px;
}
#globalNavi ul::after {
  left: -2px;
}
#globalNavi li a::before {
  left: 0;
}
#globalNavi li a::after {
  right: 0;
}

/* common-footer
----------------------------------------------- */
#commonFooter {
  background-color: #dbdbdb;
  font-size: 90%;
}
#commonFooter .pieceBody {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
}
#commonFooter h2 {
  color: #ee0000;
  font-size: 1rem;
  font-weight: normal;
}
#commonFooter ul {
  display: flex;
  flex-wrap: wrap;
}
#commonFooter li {
  margin-bottom: 1em;
}
#commonFooter .address li:nth-child(odd) {
  margin-right: 2em;
}
#commonFooter .address li:nth-last-child(-n+2) {
  margin-bottom: 0;
}
#commonFooter .footerNavi {
  justify-content: flex-end;
  align-self: flex-start;
  white-space: nowrap;
}
#commonFooter .footerNavi li:not(.copyright) {
  padding: 0 0 0 10px;
  background: url("../images/ic-list03.gif") no-repeat left center;
}
#commonFooter li small {
  font-size: 100%;
}
@media only screen and (max-width: 960px) {
  #commonFooter .pieceBody {
    flex-wrap: wrap;
    padding: 10px;
  }
  #commonFooter .address {
    margin-bottom: 10px;
  }
  #commonFooter .footerNavi {
    flex-wrap: wrap;
  }
  #commonFooter .footerNavi li.copyright {
    margin-left: 1em;
  }
}

/* page-title
----------------------------------------------- */
.dir-information .doc #pageTitle .pieceBody,
#pageTitle .pieceBody {
  position: relative;
  margin-bottom: 15px;
  border: 0;
  background: linear-gradient(to bottom, #666 0%, #333 48%, #000 53%, #333 100%);
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.2);
}
.dir-information .doc #pageTitle .pieceBody {
  margin-bottom: 10px;
}
.dir-information .doc #pageTitle h1,
#pageTitle h1 {
  padding: 8px 20px;
  color: #fff;
  font-size: 150%;
}

/* bn-main
----------------------------------------------- */
#bnMain {
  margin-bottom: 20px;
}
#bnCampaign,
#bnSpecial {
  margin-bottom: 10px;
}
#bnMain ul,
.bannerImages {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#menu #bnMain ul,
#menu .bannerImages,
#bnCampaign .bannerImages {
  justify-content: center;
}
.bannerImages li:not(:last-child) {
  margin: 0 0 10px;
}
#menu .bannerImages li:not(:last-child) {
  margin-bottom: 20px;
}
#bnRecommendation .bannerImages li:last-child {
  margin-bottom: 10px;
}
@media only screen and (max-width: 960px) {
  #bnMain ul,
  .bannerImages {
    justify-content: space-around;
  }
}

/* recentDocs
----------------------------------------------- */
#recentDocs {
  border: 1px solid #aaa;
  border-top: 2px solid #ee0000;
}
#recentDocs .pieceBody {
  position: relative;
  padding: 0 10px 10px;
}
#recentDocs .feed {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
#recentDocs h2 {
  padding: 10px;
  color: #ee0000;
}
#recentDocs .tabs {
  display: none;
}
#recentDocs .docs,
#recentDocs .more {
  margin: 0;
  padding: 0;
}

/* search
----------------------------------------------- */
#menu .piece {
  margin-bottom: 20px;
}
#search h2 {
  font-size: 100%;
  font-weight: normal;
}
#search h2 img {
  vertical-align: middle;
}
#search .pieceContainer {
  padding: 10px 10px 5px;
  background-color: #eee;
}
#search form {
  display: inline-block;
}
#search input {
  font-size: 100%;
}
#cse-search-form {
  display: inline;
  width: 75%;
}
form.gsc-search-box,
table.gsc-search-box {
  margin-bottom: 0 !important;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
  padding-right: 0 !important;
}
table.gsc-search-box {
  width: auto !important;
}
#cse-search-form input.gsc-search-button,
#cse input.gsc-search-button {
  background: #ccc !important;
  border: 1px solid #999;
  margin: 0;
  padding: 5px 7px;
  text-align: center !important;
}
#cse input.gsc-search-button {
  padding: 1px 5px;
  border: 1px solid #bccdf0;
}
#cse-search-form .gsc-clear-button,
  table.gsc-branding {
  display: none;
}
table.gsc-search-box td.gsc-input {
  padding-right: 5px !important;
}
input#search-box {
  vertical-align: middle;
}

/* searchList side
----------------------------------------------- */
#menu .piece[id$="List"] {
  border: 1px solid #bbb;
}
#menu .piece[id$="List"] .pieceHeader {
  background: url("../images/bg-list-title.gif") no-repeat left top;
}
#menu .piece[id$="List"] h2 {
  padding: 10px 10px 5px;
  font-size: 100%;
}
#menu .piece[id$="List"] h2 a,
#row .piece[id$="List"] h2 a {
  pointer-events: none;
}
#menu .piece[id$="List"] .pieceBody {
  padding: 10px;
}
#menu .piece[id$="List"] li {
  padding-left: 12px;
  background: url("../images/ic-list02.gif") no-repeat left 0.5em;
}
#menu .piece[id$="List"] li:not(:last-child) {
  margin-bottom: 3px;
}

/* #maker-sub-list
----------------------------------------------- */
.searchList {
  margin-bottom: 1.5em;
  border: 1px solid #bbb;
}
#content .searchList .piece {
  margin-bottom: 20px;
}
.searchList .pieceBody {
  padding: 10px;
}
.searchList h1 {
  padding: 15px 10px 15px 35px;
  background-image: url("../images/ic-search.png"), linear-gradient(to bottom, #e5e5e5 0%, #f4f4f4 11%, #fff 100%);
  background-position: 10px center, left top;
  background-repeat: no-repeat, repeat;
  font-size: 100%;
}
.searchListTitle {
  padding: 15px 10px;
  background: linear-gradient(to bottom, #e5e5e5 0%, #f4f4f4 11%, #fff 100%);
  font-weight: bold;
}
.searchList .pieceHeader {
  background: url("../images/bg-sublist-title.gif") no-repeat left top;
}
.searchList h2 {
  padding: 10px 10px 5px;
  font-size: 100%;
}
.searchList ul {
  display: flex;
  flex-wrap: wrap;
}
.searchList li {
  flex-basis: 33.33%;
  margin-bottom: 3px;
  padding-left: 12px;
  background: url("../images/ic-list04.gif") no-repeat left 0.5em;
}
.searchList h3 {
  margin-top: 10px;
  font-size: 100%;
}
@media only screen and (max-width: 960px) {
  .searchList li {
    flex-basis: 50%;
  }
}
@media only screen and (max-width: 680px) {
  .searchList li {
    flex-basis: 100%;
  }
}

/* bnShareSite
----------------------------------------------- */
#bnArea .pieceContainer,
#bnShareSite .pieceContainer,
#bnRelation .pieceContainer {
  padding: 10px;
  background-color: #eee;
}
#bnShareSite h2,
#bnRelation h2 {
  padding: 0 0 10px;
  font-size: 100%;
}
#menu #bnArea .bannerImages li:not(:last-child),
#menu #bnShareSite .bannerImages li:not(:last-child),
#menu #bnRelation .bannerImages li:not(:last-child) {
  margin-bottom: 10px;
}
#bnShareSite li a,
#bnRelation li a {
  color: inherit;
  text-decoration: none;
}
#bnShareSite .lower_text,
#bnRelation .lower_text {
  margin-top: 10px;
}

/* link
----------------------------------------------- */
.piece[id$="Link"] .pieceHeader {
  margin-bottom: 10px;
  border-bottom: 1px solid #c1c1c1;
}
.piece[id$="Link"] h2 {
  padding: 5px;
  border-bottom: 1px solid #333;
  color: #333;
  font-size: 100%;
}
.piece[id$="Link"] li {
  margin-bottom: 5px;
  padding: 0;
  background: url("../images/ic-list02.gif") no-repeat left center;
  text-align: center;
}

/* recentBikes
----------------------------------------------- */
#recentBikes .pieceHeader {
  position: relative;
  margin-bottom: 15px;
  background: linear-gradient(to bottom, #666 0%, #333 48%, #000 53%, #333 100%);
  box-shadow: 0 6px 2px -2px rgba(0,0,0,0.2);
}
#recentBikes .pieceHeader h2 {
  padding: 8px 20px;
  color: #fff;
  font-size: 150%;
}
.links {
  text-align: right;
}

/* smart switch
----------------------------------------------- */
#smartSwitch {
  display: none;
  position: relative;
  z-index: 1;
}
#smartSwitch .switch {
  display: block;
  text-align: center;
}
#smartSwitch a {
  display: block;
  text-decoration: none;
}
#smartSwitch a.sp {
  margin: 0 0 20px;
  background-color: #e81414;
  color: #fff;
  font-size: 185%;
}
#smartSwitch a span {
  display: inline-block;
}
#smartSwitch a.sp span {
  padding: 20px 40px;
  background: url("../images/ic-smartphone.png") no-repeat 10px 1.1em;
}

/* =========================================================
   contentItemDetail
========================================================= */
.contentItemDetail .shop {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  padding: 1px 4px;
  background-color: #fff;
  color: #000;
  font-weight: bold;
  border: 1px solid #ccc;
}
.contentItemDetail header {
  padding: 10px;
  border: 1px solid #aaa;
  border-top: 3px solid #000;
  background-image: url("../images/bg-itemtitle-repeat.gif");
}
.contentItemDetail header h1 {
  padding: 10px 10px 0 10px;
  font-size: 150%;
}
.contentItemDetail header h1 span {
  margin-left: 20px;
  color: #333;
  font-size: 90%;
}
.contentItemDetail header p.itemNumber {
  text-align: right;
  font-size: 90%;
}
.photos,
.basicPhotos,
.extraPhotos {
  display: flex;
  flex-wrap: wrap;
}
.photos,
.basicPhotos {
  justify-content: center;
}
.photos::after,
.basicPhotos::after,
.extraPhotos::after {
  content: none;
}
.photos a,
.basicPhotos a,
.extraPhotos a {
  margin: 0 5px 10px;
}
.photos a img,
.basicPhotos a img,
.extraPhotos a img {
  border: 1px solid #ccc;
}
.contentItemDetail table {
  width: 100%;
}
.contentItemDetail th {
  width: 20%;
  text-align: left;
}
.contentItemDetail td {
  width: 30%;
}
.contentItemDetail td.price {
  width: 80%;
  text-align: center;
}
.contentItemDetail td.price em {
  color: #fd0100;
  font-size: 120%;
  font-weight: bold;
}
.contentItemDetail td.price .gross {
  padding-left: 2em;
  font-size: 90%;
}
.action {
  display: flex;
  justify-content: center;
  margin: 3em 0;
}
.action > div,
.action > p {
  margin: 0 10px;
}
.action div p {
  margin: 0;
}
.action p.tel {
  display: none;
}
.action a {
  display: block;
  width: 230px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.action .contact a {
  background-image: url("../images/bt-toiawase.gif");
}
.action .buying a {
  background-image: url("../images/bt-konyu.gif");
}
.action a:hover,
.action a:focus {
  opacity: 0.9;
}

/* contentImportantMatters
----------------------------------------------- */
.contentImportantMatters .description > ul {
  list-style: none;
}
.contentImportantMatters .description > ul > li::before {
  content: "■";
}
.contentImportantMatters .description > ul > li {
  margin-bottom: 1em;
}
.contentImportantMatters .description ul ul li {
  margin-bottom: 0.25em;
}
.asterisk::before {
  content: "※";
}
.asterisk {
  padding-left: 1em;
  text-indent: -1em;
}
.space1 {
  margin-right: -1em;
  letter-spacing: 1em;
}

/* =========================================================
   Enquete
================================= ======================== */
/* Confirm
----------------------------------------------- */
.confirmMessage {
  margin-bottom: 30px;
  font-size: 120%;
  text-align: center;
}

/* Index : surveyForms
----------------------------------------------- */
.surveyForms .form, .surveyForm .form {
  margin: 10px 0;
}
.surveyForms .form .summary ul {
  margin: 0 0 15px 15px;
  list-style-type: disc
}
.surveyForms .form .summary ol {
  margin: 0 0 15px 20px;
}

/* Show : surveyForm
----------------------------------------------- */
.enqueteForm .body,
.surveyForm .body {
  margin: 0;
}
.enqueteForm .columns,
.surveyForm .questions,
#new_survey_form_answer > .question {
  border: 1px solid #bbb;
  border-bottom: none;
  background-color: #eee;
}
#new_survey_form_answer > .question {
  border-top: 0;
  border-bottom: 1px solid #bbb;
}
.enqueteForm .column,
.surveyForm .question {
  padding: 0 0 10px 0;
  border-bottom: 1px solid #bbb;
}
.enqueteForm .column .name,
.question_content {
  margin-bottom: 10px;
  padding: 7px 5px 5px 15px;
  border-left: 5px solid #bbb;
  font-weight: bold;
}
.enqueteForm .column .body,
.surveyForm .question .body {
  margin: 0 0 0 20px;
  padding: 0;
}
.enqueteForm .column .body p,
.surveyForm .question .body p {
  margin: 0 0 10px;
  padding: 0;
}
.enqueteForm .column .field,
.answer_content {
  padding: 0 20px 5px;
}
.enqueteForm .column input[type="text"],
.question input[type="text"] {
  width: 50%;
}
.enqueteForm .column textarea,
.question textarea {
  width: 70%;
  height: 22em;
}
.kaitori .question textarea {
  width: 100%;
}
#captchaForm {
  display: flex;
  flex-wrap: wrap;
}
#captchaForm .image,
#captchaForm .field,
#captchaForm .label {
  flex-basis: 100%;
}
#captchaForm .image {
  margin-bottom: 0.5em;
}
#captchaForm .reload {
  margin-right: 1em;
}
#captchaForm .field {
  margin-top: 1em;
}

/* Sent : enqueteSent
----------------------------------------------- */
.enqueteSent .message {
  margin: 60px 0;
}

/* =========================================================
   bike
========================================================= */
/* news docs
----------------------------------------------- */
.doc #pageTitle {
  margin: 0;
  padding: 0;
}
.doc #pageTitle .pieceBody {
  position: relative;
  margin-bottom: 5px;
  border-left: 5px solid #e91d1c;
  background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 48%, #dfdfdf 53%, #e7e7e7 100%);
}
.doc #pageTitle h1 {
  padding: 8px 20px;
  color: inherit;
  font-size: 150%;
}
.contentGpArticleDoc .date {
  padding: 5px 0 0;
  text-align: right;
}

/* blog docs
----------------------------------------------- */
.body,
.maps,
.tags {
  margin-bottom: 50px;
}
.maps h2,
.rels h2,
.tags h2 {
  margin: 10px 0;
  padding: 5px 5px 5px 15px;
  background-color: #dbdbdb;
  font-size: 100%;
  font-weight: normal;
}
.maps h3 {
  padding-left: 15px;
  font-size: 100%;
  font-weight: normal;
}
.maps #map1 {
  width: 500px !important;
  height: 350px !important;
  margin-left: 60px;
}
.tags div {
  margin: 0 15px;
}
.tags div a {
  padding-right: 8px;
}

/* 404
----------------------------------------------- */
ul.list01 {
  margin-top: 30px;
}
ul.list01 li {
  margin: 0 0 15px 30px;
  padding-left: 10px;
}

/* qa
----------------------------------------------- */
.qa {
  margin-bottom: 20px;
  padding: 15px 20px;
  border: 1px solid #aaa;
}
.qa .question {
  margin-bottom: 15px;
  padding: 30px 0 10px 60px;
  border-bottom: 1px solid #aaa;
  background: url("../images/ic-question.gif") no-repeat left top;
  font-size: 110%;
  font-weight: bold;
}
.qa .answer {
  margin-bottom: 15px;
  padding: 30px 0 10px 60px;
  background: url("../images/ic-answer.gif") no-repeat left top;
}

/* konyu
----------------------------------------------- */
.step h2 {
  padding: 0 0 5px;
  border-bottom: none;
}
.step h3 {
  margin: 0 0 10px;
}
.step p {
  margin: 0 0 20px;
}
.step1,
.step2,
.step3 {
  padding-left: 83px;
  background: url("../images/bg-arrow01.gif") no-repeat 20px bottom;
}
 .step4 {
  padding-left: 83px;
}
.step .box-left,
.step .box-right {
  float: left;
  width: 287px;
}
.step .box-right {
  border-left: 1px dotted #ed1c21;
  padding-left: 15px;
}
.step1 .box-left,
.step2 .box-left {
  margin-right: 15px;
}
.step .box-left .left,
.step .box-right .left,
.step .howto .left,
.step .nagare .left {
  float: left;
  width: 140px;
}
.step .box-left .text,
.step1 .box-right .text,
.step2 .box-right .text {
  float: left;
  width: 131px;
  margin-bottom: 15px;
}
.step .howto {
  margin-bottom: 20px;
}
.step .howto .text {
  float: left;
  width: 450px;
  margin-bottom: 15px;
}
.step .kikan {
  padding-left: 50px;
  background: url("../images/bg-arrow02.gif") no-repeat left bottom;
}
.step .kikan .nagare {
  position: relative;
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #ed1c21;
  border-radius: 3px;
}
.step .kikan .nagare .text {
  float: left;
  width: 380px;
  margin-bottom: 15px;
}
.step1:after,
.step2:after,
.step3:after,
.step4:after,
.step .kikan .nagare:after {
  content: "";
  clear: both;
  display: block;
}

/* voice
----------------------------------------------- */
.voice {
  padding: 15px 0;
  border-bottom: 1px solid #aaa;
}
.voice .user {
  margin-top: 10px;
  text-align: right;
  font-size: 90%;
}

/* 整備・点検
----------------------------------------------- */
div.mainPhoto {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
div.mainPhoto dl {
  margin: 0 0 20px;
}
div.mainPhoto dl dt.photo {
  padding: 4px;
  text-align: center;
}
div.mainPhoto dl dd.caption {
  text-align: center;
}

/* photo
----------------------------------------------- */
.imgonmouse {
  border: 1px solid #ccc;
  margin: 10px;
  overflow: hidden;
  width: 670px;
}
.imgonmouse img {
  margin-top: 10px;
  margin-bottom: 10px;
}
.imgonmouse ul {
  padding: 0;
  margin-top: 0;
}
.imgonmouse ul li img {
  height: 68px;
  width: 100px;
  border: 1px solid #ccc;
  padding: 2px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}
.imgonmouse ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}