@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat:500,600,300|Roboto:400,700");
/******************************************
[global]
******************************************/
html, body {
  min-height: 100%;
  height: auto;
}

html {
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', '游ゴシック', YuGothic, 'Yu Gothic', meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #44483e;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
}
body.footer-bikebar {
  margin: 0 0 90px;
}

a {
  text-decoration: none;
  transition: .3s;
}
a img {
  transition: .3s;
}

.inner {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}

.img-fluid {
  width: 100%;
  height: auto;
}

.img-retina {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
}

.disabled {
  pointer-events: none;
}

@media (min-width: 577px) {
  html, body {
    min-width: 1020px;
  }
}
@media (max-width: 576px) {
  body.footer-tabbar {
    padding: 0 0 50px;
  }

  .inner {
    padding: 0 15px;
  }
}
/******************************************
[heoght]
******************************************/
.h100p {
  height: 100%;
}

/******************************************
[text]
******************************************/
.text-sm {
  font-size: 0.8125rem;
}

.text-red {
  color: #f33313;
}

.text-indent {
  text-indent: 1em;
}

/******************************************
[bg]
******************************************/
.bg-gray {
  background: #eef0ec;
}

/******************************************
[link]
******************************************/
.link-back {
  font-size: 0.875rem;
  color: #44483e;
}
.link-back.arrow-wrap .arrow {
  transform: scale(-1, 1);
  margin: 0 10px 0 0;
}

.link-black {
  color: #44483e;
}

.link-line {
  text-decoration: underline;
}

@media (min-width: 769px) {
  .link-underline:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .link-opacity:hover {
    cursor: pointer;
  }
  .link-opacity:hover * {
    opacity: .6;
  }

  .link-line:hover {
    text-decoration: none;
  }
}
/******************************************
[table]
******************************************/
.table {
  width: 100%;
  border: 1px solid #e1e1e1;
}
.table tr:last-child th, .table tr:last-child td {
  border-bottom: none;
}
.table th, .table td {
  border-bottom: 1px solid #e1e1e1;
}
.table th {
  padding: 0 20px;
  border-right: 1px dashed #e1e1e1;
  white-space: nowrap;
}
.table td {
  padding: 15px;
}

.th-help {
  display: flex;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: normal;
}

@media (max-width: 576px) {
  .th-help {
    font-size: 0.6875rem;
  }
}
/*
[cell]
******************************************/
.cell-fixed {
  width: 1%;
  white-space: nowrap;
}

/******************************************
[list]
******************************************/
.list li {
  padding: 0 0 0 1em;
  text-indent: -1em;
}
.list li:before {
  content: "・";
}

.list-disc-item {
  margin: 0 0 10px;
  padding: 0 0 0 25px;
  text-indent: -25px;
}
.list-disc-item:last-child {
  margin-bottom: 0;
}
.list-disc-item:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 10px 0 0;
  background: #88d500;
  border-radius: 50%;
  vertical-align: middle;
}

/******************************************
[column]
******************************************/
.column-wrap {
  margin: 0 0 30px;
}
.column-wrap:last-child {
  margin-bottom: 0;
}

.column-body {
  border: 1px solid #e1e1e1;
}

.column-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e1e1e1;
  font-size: 0.875rem;
}
.column-row:last-child {
  border-bottom: none;
}

.column-label {
  width: 180px;
  padding: 15px 5px;
  font-weight: bold;
  text-align: center;
}

.column-label-note {
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
}

.column-item {
  flex: 1 0 auto;
  width: 1%;
  padding: 15px;
  border-left: 1px dashed #e1e1e1;
  word-break: break-all;
}

@media (max-width: 576px) {
  .column-wrap {
    margin: 0 0 20px;
  }

  .column-body {
    padding: 20px 15px;
  }

  .column-row {
    margin: 0 0 20px;
    flex-direction: column;
    border-bottom: none;
  }
  .column-row:last-child {
    margin-bottom: 0;
  }

  .column-row-border {
    margin: 0 -15px 20px;
    padding: 0 15px 20px;
    border-bottom: 1px solid #e1e1e1;
  }

  .column-label, .column-item {
    width: 100%;
  }

  .column-label {
    margin: 0 0 10px;
    padding: 0 5px;
    text-align: left;
  }

  .column-label-note {
    display: inline-block;
    margin: 0 0 0 5px;
  }

  .column-item {
    padding: 0;
    border-left: none;
  }

  .column-text {
    margin: 0 0 0 10px;
  }
}
/******************************************
[fb]
******************************************/
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {
  width: 100% !important;
}

/******************************************
[lity]
******************************************/
.lity .lity-close, .lity .lity-close:active, .lity .lity-close:focus, .lity .lity-close:hover, .lity .lity-close:visited {
  top: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: url(/img/Front/icon/icon-close2.png) no-repeat center;
  background-size: cover;
  text-shadow: none;
  color: transparent;
}

@media (max-width: 576px) {
  .lity .lity-close, .lity .lity-close:active, .lity .lity-close:focus, .lity .lity-close:hover, .lity .lity-close:visited {
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
  }
}
/******************************************
[tooltip]
******************************************/
.tooltip-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.tippy-tooltip.custom-theme {
  padding: 0;
  background: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.tippy-tooltip.custom-theme:before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  display: block;
  width: 20px;
  height: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.tippy-tooltip.custom-theme .tippy-arrow {
  display: none;
}
.tippy-tooltip.custom-theme .tippy-content {
  width: 250px;
  padding: 15px;
  background: #fff;
  font-size: 0.875rem;
  text-align: left;
  color: #44483e;
}

@media (max-width: 576px) {
  .tippy-tooltip {
    top: -45px !important;
  }
  .tippy-tooltip.custom-theme:before {
    left: auto;
    right: 30px;
    transform: rotate(45deg);
  }
}
/******************************************
[modal]
******************************************/
.modal-wrap {
  padding: 40px;
}

.modal-header {
  margin: 0 0 20px;
}

.modal-title {
  font-size: 1.4375rem;
}

.modal-body {
  margin: 0 0 30px;
}
.modal-body:last-child {
  margin-bottom: 0;
}

.modal-body-title {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  font-size: 0.9375rem;
}

.modal-required {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 16px;
  margin: 0 0 0 15px;
  background: #f33313;
  font-size: 0.625rem;
  color: #fff;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.iziModal-wrap {
  max-height: 100%;
  overflow-y: scroll;
}

.iziModal {
  max-height: 90%;
  box-shadow: 0 0 0 transparent !important;
}

.iziModal:after {
  display: none;
}

@incliude hover {
  .modal-close:hover {
    cursor: pointer;
  }
}
@media (max-width: 576px) {
  .modal-wrap {
    padding: 30px 15px;
  }

  .modal-title {
    font-size: 1.125rem;
  }

  .modal-body-title {
    margin: 0 0 10px;
    font-size: 0.8125rem;
  }

  .modal-footer .btn-list {
    width: 100%;
  }
  .modal-footer .btn-list-item {
    flex: 1 0 auto;
  }
  .modal-footer .btn-list-item .btn {
    width: 100%;
  }

  .iziModal {
    max-width: 95% !important;
  }
}
/******************************************
[cropper]
******************************************/
.crop-wrap {
  display: flex;
  flex-wrap: wrap;
}

.crop-item {
  margin: 0 10px 0 0;
}
.crop-item:last-child {
  margin-right: 0;
}

[id^="modal-cropper"] .cropper-view-box {
  outline: none;
}
[id^="modal-cropper"] .cropper-modal {
  background: #fff;
}

@media (max-width: 576px) {
  .crop-wrap {
    justify-content: space-between;
    margin: -10px 0 0;
  }

  .crop-item {
    margin: 10px 0 0;
  }
}
@media (max-width: 320px) {
  .crop-wrap {
    justify-content: flex-start;
  }

  .crop-item {
    margin-right: 10px;
  }
}
/*
[crop-trigger]
******************************************/
.crop-trigger {
  overflow: hidden;
}

.crop-sq-wrap .crop-trigger {
  width: 100px;
  height: 65px;
}

.crop-circle-wrap .crop-trigger {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

/*
[crop-btn]
******************************************/
.crop-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dotted #dee1d8;
}

.crop-btn-sq {
  width: 100px;
  height: 65px;
}

.crop-btn-circle {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

/*
[crop-modal]
******************************************/
.crop-upload-wrap {
  margin: 0 0 30px;
}

.crop-canvas {
  margin: 0 auto 15px;
}

.crop-img-area {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.crop-sq .crop-canvas {
  width: 450px;
  height: 300px;
}

.crop-circle .cropper-view-box, .crop-circle .cropper-face {
  border-radius: 50%;
}
.crop-circle .crop-canvas {
  width: 300px;
  height: 300px;
}

[class^="select-image"] {
  max-width: 100%;
}

@media (max-width: 576px) {
  .crop-circle .crop-canvas {
    width: 210px;
    height: 210px;
  }
  .crop-circle .cropper-container {
    width: 210px !important;
    height: 210px !important;
  }

  .crop-sq .crop-canvas {
    width: 275px;
    height: 185px;
  }

  .crop-upload-wrap {
    margin: 0 0 15px;
  }

  [id^="modal-cropper"] .modal-body {
    margin: 0 0 20px;
  }
  [id^="modal-cropper"] .crop-erase {
    order: -1;
    width: 100%;
    margin: 0 0 15px;
  }
}
/*
[scale]
******************************************/
.crop-scale {
  display: flex;
  justify-content: center;
  align-items: center;
}

.crop-scale-item {
  margin: 0 10px 0 0;
}
.crop-scale-item:last-child {
  margin-right: 0;
}

.crop-scale-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #d8d8d8;
  font-size: 0.875rem;
  font-weight: bold;
  transition: .3s;
}
.crop-scale-btn .icon {
  margin: 0 5px 0 0;
}

@media (min-width: 769px) {
  .crop-scale-btn:hover {
    background: #f5f5f5;
  }
}
/******************************************
[alert]
******************************************/
.alert {
  display: flex;
  align-items: center;
  height: 55px;
  margin: 0 0 20px;
  padding: 0 20px;
}

.alert-red {
  background: #fff6f4;
  color: #f33313;
}

.alert-text {
  display: flex;
  align-items: center;
  font-weight: bold;
}
.alert-text .icon {
  margin: 0 10px 0 0;
}

/******************************************
[translate]
******************************************/
.translate {
  font-size: 0.875rem;
  color: #88d500;
}

@media (min-width: 769px) {
  .translate:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}
/******************************************
[badge]
******************************************/
.badge {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  align-items: center;
  width: 1%;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #f33313;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

/******************************************
[app-bnr]
******************************************/
.app-bnr {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-bnr-item img {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (min-width: 769px) {
  .app-bnr-item a:hover img {
    opacity: .6;
  }
}
/******************************************
[rating]
******************************************/
.rating-wrap {
  display: flex;
  align-items: center;
}

.rating-star-wrap {
  flex: 0 1 auto;
}
.rating-star-wrap img {
  display: block;
  width: auto;
  height: 100%;
}

.rating-star {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.rating-star img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 100%;
}

.rating-text {
  margin: 0 0 0 10px;
  font-family: "Roboto", sans-serif;
  line-height: 1;
}

/*
[rating-input]
******************************************/
.rating-input-wrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.rating-input-btn:checked + .rating-input-star, .rating-input-btn:checked ~ .rating-input-star {
  background-position: right center;
}

.rating-input-star {
  display: block;
  width: 44px;
  height: 42px;
  background: url(/img/Front/icon/icon-rating.png) no-repeat left center;
  background-size: cover;
  margin: 0 0 0 30px;
}
.rating-input-star:last-child {
  margin-left: 0;
}

@media (min-width: 769px) {
  .rating-input-star:hover {
    background-position: right center;
    cursor: pointer;
  }
  .rating-input-star:hover ~ .rating-input-star {
    background-position: right center;
  }
}
@media (max-width: 576px) {
  .rating-input-star {
    width: 35px;
    height: 33px;
    margin: 0 0 0 20px;
  }
}
/******************************************
[calendar]
******************************************/
.calendar-wrap {
  display: flex;
  justify-content: center;
}

.calendar-item {
  margin: 0 50px 0 0;
}
.calendar-item:last-child {
  margin-right: 0;
}

.calendar-arrow {
  align-self: center;
}

.calendar-prev {
  transform: scale(-1, 1);
}

.calendar-header {
  font-weight: bold;
  text-align: center;
}

.today {
  background-color: #357ebd;
  color: #fff;
}

.calendar-on {
  cursor: pointer;
}

.calendar-on-active {
  background-color: #9be716;
  color: #fff;
}

.calendar-on-light {
  background-color: #9be716;
}

.calendar-on:hover {
  background-color: #9be716;
  color: #fff;
}

.calendar th, .calendar td {
  text-align: center;
}
.calendar th {
  padding: 5px 0;
  font-weight: normal;
}
.calendar td {
  width: 50px;
  height: 50px;
  border: 1px solid #e5e5e5;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.calendar-off {
  color: #e1e1e1;
}

/******************************************
[report]
******************************************/
.report {
  font-size: 0.75rem;
  color: #828281;
}
.report .icon {
  margin: 0 5px 0 0;
}

.modal-report-inner {
  margin: 0 0 20px;
  padding: 0 10px;
}

/******************************************
[bike-check]
******************************************/
.bike-check-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.bike-check-unit {
  flex: 1 1 auto;
  width: 1%;
  max-width: 170px;
  padding: 0 5px;
}

.bike-check-item input[type="checkbox"]:checked + .bike-check-cont:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 3px solid #88d500;
}

.bike-check-cont {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 105px;
  padding: 15px 0 10px;
  background: #fff;
  border-radius: 5px;
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: #88d500;
}
.bike-check-cont:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 1px solid #d8d8d8;
  z-index: 1;
}
.bike-check-cont .icon {
  height: 53px;
}
.bike-check-cont .icon-rear:before {
  right: -4px;
}

@media (max-width: 576px) {
  .bike-check-wrap {
    margin: 0 -5px;
  }

  .bike-check-unit {
    flex: 0 1 auto;
    width: 25%;
  }
  .bike-check-unit:before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .bike-check-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 5px;
  }

  .bike-check-cont {
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    font-size: 0.8125rem;
  }
  .bike-check-cont .icon {
    height: 45px;
    margin: 0 0 3px;
  }
  .bike-check-cont .icon:before {
    transform: scale(0.7);
  }
  .bike-check-cont .icon-rear:before {
    transform: scale(0.9);
  }

  .bike-check-theft {
    width: 100%;
    max-width: none;
    height: 40px;
    margin: 10px 0 0;
  }
  .bike-check-theft:before {
    display: none;
  }
  .bike-check-theft .bike-check-cont {
    flex-direction: row;
  }
}
@media (max-width: 320px) {
  .bike-check-cont {
    font-size: 0.65rem;
  }
}
/******************************************
[review]
******************************************/
#review-wrap {
  padding: 20px 30px 0;
  border: 1px solid #d8d8d8;
}

#review-header {
  margin: 0 0 30px;
}

.review-head-item {
  display: flex;
  align-items: center;
}

#review-head {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px dashed #e1e1e1;
}
#review-head .review-head-title {
  margin: 0 20px 0 0;
  font-size: 1.25rem;
  font-weight: bold;
}
#review-head .rating-star-wrap {
  height: 30px;
}
#review-head .rating-text {
  font-size: 1.4375rem;
}

#review-head-detail {
  display: flex;
}
#review-head-detail .review-head-item {
  margin: 0 40px 0 0;
}
#review-head-detail .review-head-title {
  margin: 0 10px 0 0;
}
#review-head-detail .rating-star-wrap {
  height: 20px;
}
#review-head-detail .rating-text {
  font-size: 1rem;
  color: #b8b8b8;
}

#review-translate {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  margin: 0 0 30px;
  border: 1px solid #d8d8d8;
}

.review-list-item {
  display: flex;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px dashed #e1e1e1;
}
.review-list-item .user-avatar {
  width: 60px;
  height: 60px;
  margin: 0 15px 0 0;
}

.review-user {
  display: flex;
  align-items: center;
  margin: 0 30px 0 0;
}

.review-user-info {
  width: 7.5em;
}

.review-name {
  font-size: 1.125rem;
}
.review-name span {
  font-size: 0.6875rem;
}

.review-date {
  font-size: 0.8125rem;
}

.review-text {
  font-size: 0.875rem;
}

#review-slide-body {
  display: none;
}

#review-slide-trigger {
  justify-content: center;
  padding: 0 0 20px;
  font-weight: bold;
  color: #88d500;
}
#review-slide-trigger .arrow {
  transition: .3s;
}
#review-slide-trigger.is-open .arrow {
  transform: rotate(-180deg);
}

.review-body-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 20px;
}
.review-body-header .review-head-item {
  margin: 0 30px 0 0;
}
.review-body-header .review-head-title {
  margin: 0 10px 0 0;
  font-size: 0.8125rem;
}
.review-body-header .rating-star-wrap {
  height: 20px;
}
.review-body-header .rating-text {
  color: #b8b8b8;
}

@media (max-width: 576px) {
  #review-wrap {
    padding: 15px 15px 0;
  }

  #review-header {
    margin: 0 0 15px;
  }

  #review-head {
    margin: 0 0 10px;
    padding: 0 0 10px;
  }
  #review-head .review-head-title {
    margin: 0 10px 0 0;
    font-size: 0.875rem;
  }
  #review-head .rating-star-wrap {
    height: 20px;
  }
  #review-head .rating-text {
    font-size: 1rem;
  }

  #review-head-detail {
    flex-direction: column;
  }
  #review-head-detail .review-head-item {
    justify-content: space-between;
    margin: 0 0 15px;
  }
  #review-head-detail .review-head-item:last-child {
    margin-bottom: 0;
  }
  #review-head-detail .review-head-title {
    margin: 0;
    font-size: 0.875rem;
  }
  #review-head-detail .rating-star-wrap {
    height: 15px;
  }
  #review-head-detail .rating-text {
    font-size: 0.9375rem;
  }

  .review-list-item {
    flex-direction: column;
    margin: 0 0 15px;
    padding: 0 0 15px;
  }

  .review-user {
    margin: 0 0 15px;
  }

  .review-user-info {
    width: 100%;
  }

  #review-slide-trigger {
    font-size: 0.875rem;
  }

  .review-body-header {
    margin: 0 0 15px;
  }
  .review-body-header .review-head-item {
    justify-content: space-between;
    width: 100%;
    margin: 0 0 10px;
  }
  .review-body-header .review-head-item:last-child {
    margin-bottom: 0;
  }
  .review-body-header .review-head-title {
    margin: 0;
    font-size: 0.75rem;
  }
  .review-body-header .rating-star-wrap {
    height: 15px;
  }
  .review-body-header .rating-text {
    font-size: 0.9375rem;
  }
}
/******************************************
[period]
******************************************/
#period-wrap {
  display: flex;
  justify-content: space-between;
}

.period-item {
  width: 100%;
}

.period-title {
  margin-bottom: calc(15px - (((1rem * 1.5) - 1rem) / 2));
}

.period-date {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  border-radius: 5px;
  border: 1px solid #d8d8d8;
  font-size: 1.25rem;
  font-weight: bold;
}

.period-arrow {
  align-self: flex-end;
  padding: 25px;
}

@media (max-width: 576px) {
  #period-wrap {
    flex-direction: column;
  }

  .period-item {
    margin: 0 0 15px;
  }
  .period-item:last-child {
    margin-bottom: 0;
  }

  .period-title {
    margin-bottom: calc(10px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
  }

  .period-date {
    height: 45px;
    font-size: 1rem;
  }

  .period-arrow {
    display: none;
  }
}
/******************************************
[total]
******************************************/
.total-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px dashed #d8d8d8;
}
.total-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.subtotal {
  font-weight: bold;
}

.grandtotal {
  font-weight: bold;
}
.grandtotal .total-price {
  font-size: 1.125rem;
}

.total-text {
  width: 100%;
}

@media (max-width: 576px) {
  .total-item {
    font-size: 0.875rem;
  }

  .total-head {
    margin: 0 50px 0 0;
  }

  .grandtotal .total-price {
    font-size: 0.875rem;
  }
}
/******************************************
[content-section]
******************************************/
.pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagenation-item {
  margin: 0 10px 0 0;
}
.pagenation-item:last-child {
  margin-right: 0;
}

.pagenation-btn {
  min-width: 36px;
  height: 36px;
  border: 1px solid #e1e1e1;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  transition: .3s;
}
.pagenation-btn.is-active {
  background: #88d500;
  border-color: #88d500;
  color: #fff;
  pointer-events: none;
}

.pagenation-prev, .pagenation-next {
  padding: 0 15px;
}

@media (min-width: 769px) {
  .pagenation-btn:hover {
    border-color: #a5a5a5;
  }
}
/******************************************
[content-section]
******************************************/
.content-section {
  margin: 0 0 60px;
}

.content-section-sm {
  margin: 0 0 40px;
}
.content-section-sm:last-child {
  margin-bottom: 0;
}

.content-bd-section {
  margin: 0 0 30px;
  padding: 0 0 30px;
  border-bottom: 1px solid #e1e1e1;
}

@media (max-width: 576px) {
  .content-section {
    margin: 0 0 30px;
  }

  .content-bd-section {
    margin: 0 0 20px;
    padding: 0 0 20px;
  }

  .content-section-sm {
    margin: 0 0 30px;
  }
}
/******************************************
[page-header]
******************************************/
#page-header {
  padding: 20px 0 35px;
}

#page-title {
  font-size: 1.625rem;
  font-weight: bold;
}

#breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
}
.breadcrumb-item:not(:last-child):after {
  content: ">";
  margin: 0 10px;
}
.breadcrumb-item a {
  color: #44483e;
}

@media (max-width: 576px) {
  #page-header {
    padding: 15px 0 20px;
  }

  #breadcrumb {
    margin: 0 0 5px;
  }

  .breadcrumb-item {
    font-size: 0.75rem;
  }
  .breadcrumb-item:not(:last-child):after {
    margin: 0 5px;
  }

  #page-title {
    font-size: 1.25rem;
  }
}
/******************************************
[page-nav]
******************************************/
#page-nav-wrap {
  margin: 0 0 20px;
}

#page-nav-unit {
  display: flex;
  justify-content: space-between;
}

.page-nav-item {
  flex: 1 0 auto;
  width: 1%;
  margin: 0 10px 0 0;
}
.page-nav-item:last-child {
  margin-right: 0;
}

.page-nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 45px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  font-weight: bold;
  color: #44483e;
}
.page-nav-link:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: block;
  width: 7px;
  height: 12px;
  background: url("/img/Front/arrow/arrow-line-gray7.png") no-repeat center;
  background-size: cover;
}
.page-nav-link.is-active {
  background: #919a87;
  color: #fff;
  pointer-events: none;
}
.page-nav-link.is-active:before {
  display: none;
}
.page-nav-link.is-active:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #919a87 transparent transparent transparent;
}

@media (min-width: 769px) {
  .page-nav-link:hover {
    color: #8dd908;
  }
}
@media (max-width: 576px) {
  #page-nav-wrap {
    margin: 0 0 20px;
  }

  .page-nav-link {
    height: 36px;
    font-size: 0.875rem;
  }
}
/******************************************
[title]
******************************************/
.title {
  margin-bottom: calc(15px - (((1rem * 1.5) - 1rem) / 2));
  font-weight: bold;
}

/******************************************
[headline]
******************************************/
.headline-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px;
}

.headline-wrap-sm .headline {
  font-size: 1.25rem;
}
.headline-wrap-sm .headline-aside {
  font-size: 0.8125rem;
}

.headline {
  font-size: 1.75rem;
}

.headline-bd {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #d8d8d8;
  font-size: 1.25rem;
}

.headline-aside {
  @iclude fz(14);
  text-align: right;
}
.headline-aside a {
  color: #44483e;
}

.headline-sub {
  font-weight: normal;
}

@media (max-width: 576px) {
  .headline-wrap {
    margin: 0 0 10px;
  }

  .headline-wrap-sm .headline {
    font-size: 1rem;
  }

  .headline {
    font-size: 1.125rem;
  }

  .headline-bd {
    margin: 0 0 15x;
    padding: 0 0 15px;
    font-size: 1rem;
  }

  .headline-aside {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
    font-size: 0.75rem;
  }
}
/******************************************
[card]
******************************************/
.card {
  display: flex;
  flex-wrap: wrap;
  margin: -20px -10px 0;
}

.card-item {
  width: 100%;
  max-width: calc(100% / 3);
  margin: 20px 0 0;
  padding: 0 10px;
}
.card-item a {
  color: #44483e;
}
.card-item a > * {
  transition: .3s;
}

.card-img-wrap {
  margin: 0 0 10px;
  border-radius: 5px;
  overflow: hidden;
}

.card-img {
  line-height: 1;
}
.card-img:before {
  content: "";
  display: block;
  padding-top: 67%;
}
.card-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}

.card-number {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  font-family: "Roboto", sans-serif;
  font-size: 1.125rem;
}

.card-img-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30px 10px 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  color: #fff;
}
.card-img-footer .rating-star-wrap {
  height: 13px;
}
.card-img-footer .rating-text {
  font-size: 0.875rem;
}

.card-img-footer-text {
  font-size: 0.625rem;
  font-weight: bold;
}

.card-caption {
  padding: 0 10px;
}

.card-title {
  font-weight: bold;
  margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
  font-size: 1rem;
}
.card-title:last-child {
  margin-bottom: 0;
}

.card-text {
  font-size: 0.8125rem;
}

@media (min-width: 769px) {
  .card-item a:hover > * {
    opacity: .6;
  }
}
@media (max-width: 576px) {
  .card {
    flex-wrap: nowrap;
    margin: 0 -15px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .card:after {
    content: "";
    flex: 1 0 auto;
    display: block;
    width: 15px;
    height: 15px;
  }

  .card-item {
    max-width: none;
    min-width: 92%;
    margin-top: 0;
    padding: 0 0 0 15px;
  }
}
/******************************************
[photoList]
******************************************/
.photoList {
  display: flex;
  flex-wrap: wrap;
  margin: -10px -10px 0;
}
.photoList-item {
  flex: 0 0 auto;
  width: 95px;
  margin: 10px 5px 0;
  line-height: 1;
}

/******************************************
[refine]
******************************************/
.refine-wrap {
  margin: 0 0 20px;
  background: #eef0ec;
}
.refine-wrap:last-child {
  margin-bottom: 0;
}
.refine-wrap .form-input, .refine-wrap .input-group-prepend, .refine-wrap .input-group-append, .refine-wrap .form-select, .refine-wrap .form-radio-label:before {
  border-color: #fff;
}
.refine-wrap .form-input, .refine-wrap .form-select {
  height: 60px;
}
.refine-wrap .form-select {
  max-width: 355px;
}
.refine-wrap .input-range {
  max-width: 510px;
}
.refine-wrap .bike-check-cont:before {
  border-color: transparent;
}
.refine-wrap .btn-list {
  justify-content: flex-end;
}

.refine-slide-body {
  display: none;
}

.refine-head {
  margin-bottom: calc(20px - (((1rem * 1.5) - 1rem) / 2));
  font-weight: bold;
  text-align: center;
}

.refine-unit {
  padding: 15px;
  margin: 0 0 2px;
  border-bottom: 2px solid #fff;
}
.refine-unit:last-child {
  border-bottom: none;
}

.refine-group {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
}
.refine-group > * {
  margin: 0 2px 0 0;
}
.refine-group > *:last-child {
  margin-right: 0;
}
.refine-group .input-group {
  flex: 1 1 auto;
  width: 1%;
}
.refine-group .input-group .form-input, .refine-group .input-group .input-group-prepend, .refine-group .input-group .input-group-append {
  border-radius: 0;
}
.refine-group .input-group .form-input:last-child, .refine-group .input-group .input-group-prepend:last-child, .refine-group .input-group .input-group-append:last-child {
  border-radius: 0;
}
.refine-group .refine-place {
  width: 465px;
  flex: 0 1 auto;
}
.refine-group .btn {
  border-radius: 0;
}

.refine-item {
  margin: 0 0 20px;
}
.refine-item:last-child {
  margin-bottom: 0;
}

.refine-title {
  margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
  font-weight: bold;
}

.refine-trigger .arrow {
  transform: rotate(90deg);
  transition: .3s;
}
.refine-trigger.is-open .arrow {
  transform: rotate(-90deg);
}

@media (min-width: 769px) {
  .refine-wrap .bike-check-item:hover .bike-check-cont:before {
    border: 3px solid #88d500;
  }
}
@media (max-width: 576px) {
  .refine-wrap .form-input, .refine-wrap .form-select {
    height: 45px;
  }
  .refine-wrap .btn-list-item {
    flex: 1 1 auto;
    width: 1%;
    margin-right: 0;
  }
  .refine-wrap .btn-list-item .btn {
    width: 100%;
  }

  .refine-slide-body {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
}
@media (max-width: 320px) {
  .refine-date {
    font-size: 0.8125rem;
  }
}
/******************************************
[finish]
******************************************/
#finish-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 80px 0;
  border: 1px solid #d8d8d8;
}
#finish-wrap .btn-list-item {
  width: 250px;
}

.finish-text {
  margin-bottom: calc(60px - (((23px * 1.5) - 23px) / 2));
  text-align: center;
  font-size: 1.4375rem;
}

@media (max-width: 576px) {
  #finish-wrap {
    padding: 35px;
  }
  #finish-wrap .btn-list {
    width: 100%;
  }
  #finish-wrap .btn-list-item {
    width: 100%;
  }

  .finish-text {
    margin-bottom: calc(30px - (((1rem * 1.5) - 1rem) / 2));
    font-size: 1rem;
  }
}
/******************************************
[topics-list]
******************************************/
#topicsArea #topics-list {
  margin: 0 0 50px;
}
#topicsArea #topics-list:last-child {
  margin-bottom: 0;
}

#topics_paging .pagenation-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
#topics_paging .pagenation-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #44483e;
}

#topics-list {
  border-radius: 5px;
  border: 1px solid #d3d3d3;
}

.topics-item {
  display: flex;
  align-items: flex-start;
  padding: 25px 30px;
  border-bottom: 1px dotted #d3d3d3;
}
.topics-item:last-child {
  border-bottom: none;
}

.topics-list-header {
  display: flex;
  align-items: flex-start;
}

.topics-date {
  margin: 0 20px 0 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

.topics-category {
  flex: 0 0 auto;
  width: 110px;
  margin: 0 20px 0 0;
  padding: 5px 10px;
  background: #88d500;
  font-size: 0.6875rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #fff;
}

.topics-title a {
  color: #44483e;
}

#topics-detail {
  margin: 0 0 30px;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
}

#topics-detail-header {
  display: flex;
  flex-wrap: wrap;
  padding: 30px;
  border-bottom: 1px dotted #d3d3d3;
}
#topics-detail-header .topics-title {
  width: 100%;
  margin: 20px 0 0;
  font-size: 1.625rem;
  font-weight: bold;
  line-height: 1;
}

#topics-detail-body {
  padding: 30px;
}
#topics-detail-body img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  #topics_paging .pagenation-btn:hover {
    cursor: pointer;
  }
}
@media (max-width: 576px) {
  #topicsArea #topics-list {
    margin: 0 0 30px;
  }

  .topics-item {
    flex-wrap: wrap;
    padding: 15px;
  }

  .topics-list-header {
    align-items: center;
    margin: 0 0 5px;
  }

  .topics-date {
    margin: 0 10px 0 0;
  }

  .topics-title {
    width: 100%;
    font-size: 0.75rem;
  }

  .topics-category {
    width: auto;
    font-size: 0.625rem;
  }

  .topics-title {
    font-size: 0.875rem;
  }

  #topics-detail {
    margin: 0 0 15px;
  }

  #topics-detail-header {
    padding: 15px;
  }
  #topics-detail-header .topics-title {
    margin: 10px 0 0;
    font-size: 1.125rem;
  }

  #topics-detail-body {
    padding: 15px;
  }
  #topics-detail-body img {
    width: 100%;
  }
}
/******************************************
[user]
******************************************/
.user-unit {
  display: flex;
  align-items: center;
}

.user-item {
  margin: 0 15px 0 0;
}
.user-item:last-child {
  margin-right: 0;
}

.user-name {
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  color: #88d500;
}
.user-name a {
  color: #88d500;
}

.user-avatar {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

#user-data {
  display: flex;
  justify-content: center;
}

.user-data-item {
  flex: 1 1 auto;
  width: 1%;
  padding: 20px 0;
  border: 1px solid #e1e1e1;
  text-align: center;
}

.user-data-title {
  margin-bottom: calc(15px - (((1rem * 1.5) - 1rem) / 2));
}

.user-data-number {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1;
}
.user-data-number span {
  margin: 0 5px 0 0;
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 3.125rem;
  font-weight: 600;
}
.user-data-number .user-data-number-head {
  width: 100%;
  margin: 0;
  font-size: 1.125rem;
  font-weight: normal;
}

.user-data-detail {
  font-size: 0.875rem;
}

@media (max-width: 576px) {
  .user-data-item {
    padding: 10px 0;
  }
  .user-data-item:nth-child(2) .user-data-number {
    flex-direction: column;
    font-size: 0.6875rem;
    font-weight: normal;
  }
  .user-data-item:nth-child(2) .user-data-number span {
    margin: 0 0 5px;
  }

  .user-data-title {
    margin-bottom: calc(5px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
  }

  .user-data-number {
    margin: 0 0 5px;
    font-size: 0.875rem;
  }
  .user-data-number span {
    font-size: 1.875rem;
  }

  .user-data-detail {
    font-size: 0.6875rem;
  }
}
/******************************************
[header]
******************************************/
#global-header {
  border-bottom: 1px solid #d8d8d8;
  color: #44483e;
}

.global-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 15px 10px 25px;
}

#global-catch {
  margin-bottom: calc(10px - (((10px * 1.5) - 10px) / 2));
  font-size: 0.625rem;
  font-weight: normal;
}

#global-logo {
  width: 209px;
}

#global-logo-sm {
  width: 140px;
  line-height: 1;
}

@media (max-width: 576px) {
  #global-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 100;
  }

  .global-header-inner {
    height: 45px;
    padding: 0 0 0 10px;
  }

  .global-header-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}
@media (max-width: 320px) {
  #global-logo-sm {
    width: 100px;
  }
}
/******************************************
[global-nav]
******************************************/
#global-nav-wrap {
  display: flex;
  align-items: center;
}

#global-nav-lang {
  margin: 0 25px 0 0;
  padding: 0 25px 0 0;
  border-right: 1px solid #d8d8d8;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
}
#global-nav-lang .global-nav-item {
  margin: 0 15px 0 0;
}
#global-nav-lang .global-nav-item:last-child {
  margin-right: 0;
}

#global-nav-menu .global-nav-item {
  margin: 0 25px 0 0;
  padding: 10px 0;
}
#global-nav-menu .global-nav-item:last-child {
  margin-right: 0;
}

.global-nav-unit {
  display: flex;
  align-items: center;
}

.global-nav-link {
  color: #44483e;
}
.global-nav-link.disabled {
  opacity: .25;
}
.global-nav-link:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  display: block;
  width: 100%;
  height: 3px;
  background: #44483e;
  opacity: 0;
  transition: .3s;
}

.global-nav-badge {
  display: flex;
  align-items: center;
}
.global-nav-badge .badge {
  margin: 0 0 0 5px;
}

#global-nav-sm {
  display: flex;
  align-items: center;
}
#global-nav-sm .badge {
  position: absolute;
  top: -5px;
  right: 10px;
  min-width: 10px;
  height: 10px;
}
#global-nav-sm li:first-child {
  margin: 0 5px 0 0;
}

.global-nav-sm-item {
  padding: 0 15px;
  border-right: 1px solid #e3e3e3;
}
.global-nav-sm-item:last-child {
  border-right: none;
}

@media (min-width: 769px) {
  .global-nav-link:hover:before {
    opacity: 1;
  }
}
/*
[dropdown]
******************************************/
.dd-trigger:hover > .dd-body {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}

.dd-body {
  position: absolute;
  transform: translateY(100%);
  bottom: 0;
  right: 0;
  width: 195px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  font-size: 0.9375rem;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  z-index: 10;
}
.dd-body:before {
  content: "";
  position: absolute;
  top: -8px;
  right: 25%;
  display: block;
  width: 15px;
  height: 15px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transform: rotate(45deg);
}

.dd-item {
  background: #fff;
  border-bottom: 1px solid #ededed;
}
.dd-item:last-child {
  border-bottom: none;
}

.dd-link {
  display: block;
  width: 100%;
  padding: 15px;
  color: #44483e;
}

@media (min-width: 769px) {
  .dd-link:hover {
    color: #88d500;
  }
}
/*
[drawer]
******************************************/
#drawer-wrap {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: -10000;
}
#drawer-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(145, 154, 135, 0.9);
  opacity: 0;
  transition: .3s;
}
#drawer-wrap.is-open {
  visibility: visible;
  z-index: 1;
}
#drawer-wrap.is-open:before {
  opacity: 1;
}
#drawer-wrap.is-open #drawer-unit {
  transform: translateX(0);
  opacity: 1;
}

#drawer-unit {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  background: #fff;
  box-shadow: -10px 10px 15px rgba(40, 40, 40, 0.2);
  transform: translateX(100%);
  transition: .3s;
  opacity: 0;
  overflow-y: scroll;
}

#drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 0;
}

#drawer-lang {
  display: flex;
  align-items: center;
  margin: 0 30px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.drawer-lang-item {
  margin: 0 15px 0 0;
}
.drawer-lang-item:last-child {
  margin-right: 0;
}

.drawer-lang-link {
  color: #44483e;
}
.drawer-lang-link.disabled {
  opacity: .25;
}

#drawer-body {
  margin: 0 25px;
  padding: 10px 0;
  border-bottom: 1px solid #d8d8d8;
}

.drawer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  color: #44483e;
}

#drawer-footer {
  padding: 20px 25px;
}
#drawer-footer .app-bnr-item {
  margin: 0 10px 0 0;
}
#drawer-footer .app-bnr-item:last-child {
  margin-right: 0;
}

#drawer-logo {
  width: 132px;
  margin: 0 auto 10px;
}

/******************************************
[content-wrap]
******************************************/
#content-wrap {
  background: #fff;
}

/******************************************
[footer]
******************************************/
#global-footer {
  padding: 40px 0 25px;
  background: #fff;
}

#footer-nav-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 65px;
}

.footer-nav-item {
  flex: 0 1 auto;
  font-size: 0.875rem;
}
.footer-nav-item li {
  margin-bottom: calc(20px - (((14px * 1.5) - 14px) / 2));
}
.footer-nav-item li:last-child {
  margin-bottom: 0;
}
.footer-nav-item a {
  color: #44483e;
}

#footer-nav-logo {
  width: 162px;
  margin: 0 auto 10px;
}

.footer-nav-app {
  line-height: 1;
}
.footer-nav-app .app-bnr-item {
  width: 135px;
}

#pagetop {
  position: fixed;
  bottom: 60px;
  right: 60px;
  width: 60px;
}

#copyright {
  font-size: 0.625rem;
  text-align: center;
}

@media (min-width: 769px) {
  .footer-nav-item a:hover {
    text-decoration: underline;
  }

  #pagetop:hover {
    transition: .3s;
    opacity: .6;
    cursor: pointer;
  }
}
@media (min-width: 577px) {
  .footer-nav-app .app-bnr {
    flex-direction: column;
  }
  .footer-nav-app .app-bnr-item {
    margin: 0 0 10px;
  }
  .footer-nav-app .app-bnr-item:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 576px) {
  #global-footer {
    padding: 25px 0;
    border-top: 1px solid #e7e7e7;
  }
  #global-footer.footer-tabbar {
    margin: 0 0 50px;
  }

  #footer-nav-wrap {
    margin: 0 0 10px;
  }

  .footer-nav-item {
    flex: 1 1 auto;
    width: 1%;
    margin: 0 0 30px;
    font-size: 0.75rem;
  }

  .footer-nav-aside {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
  }
  .footer-nav-aside li {
    margin: 0 10px 0 0;
    padding: 0 10px 0 0;
    border-right: 1px solid #c6c6c6;
  }
  .footer-nav-aside li:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
  }

  .footer-nav-app {
    order: -1;
    width: 100%;
    margin: 0 0 20px;
  }
  .footer-nav-app .app-bnr-item {
    margin: 0 10px 0 0;
  }
  .footer-nav-app .app-bnr-item:last-child {
    margin-right: 0;
  }

  #pagetop {
    display: none !important;
  }

  #copyright {
    font-size: 0.5625rem;
  }
}
@media (max-width: 320px) {
  .footer-nav-aside li:nth-child(2) {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
  }
}
/*
[tabbar]
******************************************/
#tabbar-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 25px 0 0;
}

#tabbar-unit {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 50px;
  background: #000;
  font-family: "Roboto", sans-serif;
  font-size: 0.625rem;
}

.tabbar-item {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
}

.tabbar-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #838383;
}
.tabbar-link .icon {
  height: 22px;
  margin: 0 0 2px;
}
.tabbar-link.is-active {
  color: #fff;
}
.tabbar-link.is-active .icon:before {
  background-position: right top;
}

/******************************************
[utility]
******************************************/
.spbr {
  display: none;
}

@media (min-width: 577px) {
  .pc-none {
    display: none !important;
  }

  .pcbr {
    display: block;
  }
}
@media (max-width: 576px) {
  .sp-none {
    display: none !important;
  }

  .spbr {
    display: block;
  }

  .pcbr {
    display: none;
  }
}
.ta-r {
  text-align: right !important;
}

/******************************************
[form]
******************************************/
.required {
  display: inline-block;
  margin: 0 0 0 5px;
  color: #f33313;
}

.form-help {
  margin: 10px 0 0;
  font-size: 0.75rem;
}

.form-item {
  margin: 0 0 10px;
}
.form-item:last-child {
  margin-bottom: 0;
}

/*
[form-group]
******************************************/
.form-group {
  display: flex;
}

.form-group-item {
  flex: 1 0 auto;
  width: 1%;
  margin: 0 10px 0 0;
}
.form-group-item:last-child {
  margin-right: 0;
}

/*
[form-list]
******************************************/
.form-list-item {
  margin: 0 0 10px;
}
.form-list-item:last-child {
  margin-bottom: 0;
}

/*
[placeholder]
******************************************/
.form-input::-moz-placeholder {
  font-weight: normal;
  color: #a3a3a3;
  opacity: 1;
}
.form-input::-webkit-input-placeholder {
  font-weight: normal;
  color: #a3a3a3;
}
.form-input:placeholder-shown {
  font-weight: normal;
  color: #a3a3a3;
}

/*
[input]
******************************************/
.form-input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #d4d4d4;
}

@media (max-width: 576px) {
  .form-input {
    height: 45px;
  }
}
/*
[textarea]
******************************************/
.form-textarea {
  display: block;
  width: 100%;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #d4d4d4;
  resize: none;
}
.form-textarea::-moz-placeholder {
  font-weight: normal;
  color: #a3a3a3;
  opacity: 1;
}
.form-textarea::-webkit-input-placeholder {
  font-weight: normal;
  color: #a3a3a3;
}
.form-textarea:placeholder-shown {
  font-weight: normal;
  color: #a3a3a3;
}

/*
[file]
******************************************/
.form-file-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 135px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid #d8d8d8;
  font-size: 0.9375rem;
  font-weight: bold;
}

.form-file {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

/*
[select]
******************************************/
.form-select {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 45px 0 20px;
  background: url(/img/Front/arrow/arrow-line-gray1.png) no-repeat right 15px center #fff;
  background-size: 20px 11px;
  border-radius: 5px;
  border: 1px solid #d4d4d4;
}

/*
[checkbox]
******************************************/
input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.form-check-unit .form-check-item {
  margin: 0 0 10px;
}
.form-check-unit .form-check-item:last-child {
  margin-bottom: 0;
}

.form-check-text .form-check-item {
  display: flex;
  align-items: center;
}
.form-check-text .form-check {
  width: auto;
}

.form-check-list {
  display: flex;
  margin: 0 0 10px;
}
.form-check-list:last-child {
  margin-bottom: 0;
}

.form-check-item {
  margin: 0 30px 0 0;
}
.form-check-item:last-child {
  margin-right: 0;
}

.form-check {
  width: 100%;
}
.form-check input[type="checkbox"]:checked + .form-check-label:before {
  background-image: url(/img/Front/icon/icon-check-green.png);
}

.form-check-label {
  display: flex;
  align-items: center;
}
.form-check-label:before {
  content: "";
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  background-color: #fff;
  background-image: url(/img/Front/icon/icon-check-gray.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
  border: 1px solid #d4d4d4;
}

@media (min-width: 769px) {
  .form-check:hover {
    cursor: pointer;
  }
}
@media (max-width: 576px) {
  .form-check-label {
    font-size: 0.875rem;
  }
}
/*
[radio]
******************************************/
input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.form-radio-unit .form-radio-item {
  margin: 0 0 10px;
}
.form-radio-unit .form-radio-item:last-child {
  margin-bottom: 0;
}

.form-radio-list {
  display: flex;
  margin: 0 0 10px;
}
.form-radio-list:last-child {
  margin-bottom: 0;
}

.form-radio-item {
  margin: 0 30px 0 0;
}
.form-radio-item:last-child {
  margin-right: 0;
}

.form-radio {
  width: 100%;
}
.form-radio input[type="radio"]:checked + .form-radio-label:before {
  background-color: #88d500;
  background-image: url(/img/Front/icon/icon-check-white.png);
  border-color: #88d500;
}
.form-radio .form-help {
  display: block;
  width: 100%;
  margin: 0 0 0 40px;
}

.form-radio-check .form-radio-label:before {
  background-image: url(/img/Front/icon/icon-check-gray.png);
}

.form-radio-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.form-radio-label:before {
  content: "";
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
  border-radius: 50%;
  border: 1px solid #d4d4d4;
}

@media (min-width: 769px) {
  .form-radio:hover {
    cursor: pointer;
  }
}
/*
[input-group]
******************************************/
.input-group {
  display: flex;
  width: 100%;
}
.input-group .form-input, .input-group .form-select {
  padding: 0;
  border-radius: 0;
}
.input-group .form-input:first-child, .input-group .form-select:first-child {
  border-right: none;
}
.input-group .form-input:last-child, .input-group .form-select:last-child {
  border-radius: 0 5px 5px 0;
  border-left: none;
}
.input-group .form-select:not(:first-child) {
  padding-left: 0;
}

.input-group-prepend {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  background: #fff;
  border-radius: 5px 0 0 5px;
  border: 1px solid #d4d4d4;
  border-right: none;
}

.input-group-append {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  background: #fff;
  border-radius: 0 5px 5px 0;
  border: 1px solid #d4d4d4;
  border-left: none;
}

.input-group-text {
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.25rem;
  color: #bcbcbc;
}

@media (max-width: 320px) {
  .input-group-prepend {
    padding: 0 8px;
  }
}
/*
[input-range]
******************************************/
.input-range {
  display: flex;
  align-items: center;
}

.input-range-unit {
  margin: 0 15px;
  white-space: nowrap;
}

/******************************************
[btn]
******************************************/
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 140px;
  padding: 0 25px;
  height: 60px;
  border-radius: 5px;
  font-size: 1.125rem;
  line-height: 1;
  transition: .3s;
}
.btn .wrap-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn .icon {
  margin: 0 15px 0 0;
}
.btn .icon-rear {
  margin: 0 0 0 10px;
}
.btn .arrow {
  margin: 0 0 0 20px;
}

.btn-sq {
  border-radius: 0;
}

.btn-block {
  width: 100%;
}

.btn-auto {
  min-width: 0;
}

.btn-lg {
  width: 100%;
  max-width: 710px;
  height: 90px;
  font-size: 1.4375rem;
}

.btn-sm {
  height: 50px;
}

.btn-tiny {
  display: inline-flex;
  min-width: auto;
  height: 25px;
  padding: 0 10px;
  font-size: 0.75rem;
}

.btn-center {
  margin-left: auto;
  margin-right: auto;
}

.btn-short {
  height: 50px;
  font-size: 0.875rem;
}

.btn-text {
  text-decoration: underline;
  font-size: 0.875rem;
}

.btn-green {
  background: #88d500;
  color: #fff;
}

.btn-ol-red {
  border: 2px solid #f33313;
  color: #f33313;
}

.btn-olive {
  background: #919a87;
  color: #fff;
}

.btn-olive2 {
  background: #5a6942;
  color: #fff;
}

.btn-blue {
  background: #55c6da;
  color: #fff;
}

.btn-red {
  background: #e5452a;
  color: #fff;
}

.btn-ol-green {
  border: 1px solid #88d500;
  color: #88d500;
}

.btn-ol-white {
  border: 1px solid #d4d4d4;
  color: #44483e;
}

.btn-gray {
  background: #b4b4b4;
  color: #fff;
}

.btn-gray2 {
  background: #f0f0f0;
  border: 1px solid #e1e1e1;
  color: #44483e;
}

.btn-black {
  background: #44483e;
  color: #fff;
}

.btn-back .arrow {
  transform: scale(-1, 1);
  margin: 0 15px 0 0;
}

.btn-sns {
  color: #fff;
}

.btn-fb {
  background: #3b5998;
}

.btn-twitter {
  background: #1da1f2;
}

.btn-google {
  background: #dc4e41;
}

.btn-login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 25px;
  border: 2px solid #88d500;
  font-size: 0.75rem;
  font-weight: bold;
  color: #88d500;
}

.btn-entry {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 25px;
  background: #e5452a;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
}

@media (min-width: 769px) {
  .btn-text:hover {
    text-decoration: none;
  }

  .btn-green:hover {
    background: #9be716;
  }

  .btn-olive:hover {
    background: #727e67;
  }

  .btn-olive2:hover {
    border: 2px solid #d8d8d8;
    background: #f4f4f4;
    color: #44483e;
  }

  .btn-blue:hover {
    background: #21b4ce;
  }

  .btn-red:hover {
    background: #fc573b;
  }

  .btn-gray:hover {
    background: #919191;
  }

  .btn-ol-green:hover {
    background: #fff;
  }

  .btn-ol-white:hover {
    background: #f4f4f4;
  }

  .btn-ol-red:hover {
    background: #f33313;
    color: #fff;
  }

  .btn-sns:hover {
    opacity: .6;
  }
}
@media (max-width: 576px) {
  .btn {
    height: 50px;
    font-size: 1rem;
  }

  .btn-sm {
    height: 45px;
    padding: 0 20px;
    font-size: 0.875rem;
  }

  .btn-lg {
    height: 60px;
    font-size: 1rem;
  }

  .btn-short {
    height: 45px;
  }
}
/*
[btn-list]
******************************************/
.btn-list {
  display: flex;
  align-items: center;
}

.btn-list-block {
  flex-wrap: wrap;
}
.btn-list-block .btn-list-item {
  flex: 1 0 auto;
  width: 1%;
}

.btn-list-item {
  margin: 0 15px 0 0;
}
.btn-list-item:last-child {
  margin-right: 0;
}

@media (max-width: 576px) {
  .btn-list {
    justify-content: space-between;
  }

  .btn-list-item {
    width: 1%;
  }
  .btn-list-item .btn {
    min-width: 0;
    padding: 0;
  }

  .btn-list-block .btn-list-item {
    width: 100%;
    margin: 0 0 10px;
  }
  .btn-list-block .btn-list-item:last-child {
    margin-bottom: 0;
  }
}
/*
[btn-group]
******************************************/
.btn-group-item {
  margin: 0 0 15px;
}
.btn-group-item:last-child {
  margin-bottom: 0;
}

/******************************************
[icon]
******************************************/
.icon-wrap {
  display: flex;
  align-items: center;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
.icon:before {
  content: "";
  flex: 0 0 auto;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.icon-key:before {
  width: 35px;
  height: 48px;
  background-image: url(/img/Front/icon/icon-key.png);
}

.icon-helmet:before {
  width: 50px;
  height: 53px;
  background-image: url(/img/Front/icon/icon-helmet.png);
}

.icon-light:before {
  width: 49px;
  height: 43px;
  background-image: url(/img/Front/icon/icon-light.png);
}

.icon-rear:before {
  width: 33px;
  height: 34px;
  background-image: url(/img/Front/icon/icon-rear.png);
}

.icon-drawer:before {
  width: 23px;
  height: 18px;
  background-image: url(/img/Front/icon/icon-drawer.png);
}

.icon-close1:before {
  width: 26px;
  height: 26px;
  background-image: url(/img/Front/icon/icon-close1.png);
}

.icon-calendar-gray:before {
  width: 30px;
  height: 26px;
  background-image: url(/img/Front/icon/icon-calendar.png);
}

.icon-calendar2-gray:before {
  width: 16px;
  height: 17px;
  background-image: url(/img/Front/icon/icon-calendar2.png);
}

.icon-yen-gray:before {
  width: 22px;
  height: 21px;
  background-image: url(/img/Front/icon/icon-yen.png);
}

.icon-marker-green:before {
  width: 22px;
  height: 30px;
  background-image: url(/img/Front/icon/icon-marker.png);
  background-position: left top;
}

.icon-marker-black:before {
  width: 14px;
  height: 19px;
  background-image: url(/img/Front/icon/icon-marker-black.png);
}

.icon-flag-gray:before {
  width: 16px;
  height: 15px;
  background-image: url(/img/Front/icon/icon-flag-gray.png);
}

.icon-time-gray:before {
  width: 27px;
  height: 27px;
  background-image: url(/img/Front/icon/icon-time.png);
}

.icon-plus:before {
  width: 32px;
  height: 32px;
  background-image: url(/img/Front/icon/icon-plus.png);
}

.icon-plus-green:before {
  width: 25px;
  height: 25px;
  background-image: url(/img/Front/icon/icon-plus-green.png);
}

.icon-plus-green02:before {
  width: 22px;
  height: 22px;
  background-image: url(/img/Front/icon/icon-plus-green02.png);
}

.icon-chat:before {
  width: 22px;
  height: 22px;
  background-image: url(/img/Front/icon/icon-chat.png);
}

.icon-mail-gray:before {
  width: 23px;
  height: 18px;
  background-image: url(/img/Front/icon/icon-mail-gray.png);
}

.icon-tel-circle:before {
  width: 42px;
  height: 42px;
  background-image: url(/img/Front/icon/icon-tel-circle.png);
}

.icon-attention:before {
  width: 20px;
  height: 20px;
  background-image: url(/img/Front/icon/icon-attention.png);
}

@media (max-width: 320px) {
  .icon-calendar-gray:before {
    width: 24px;
    height: 20px;
  }

  .icon-yen-gray:before {
    width: 16px;
    height: 15px;
  }
}
/*
[icon-heart]
******************************************/
.icon-heart-sm:before {
  width: 18px;
  height: 16px;
  background-image: url(/img/Front/icon/icon-heart-sm.png);
}

.icon-heart:before {
  width: 31px;
  height: 27px;
  background-image: url(/img/Front/icon/icon-heart.png);
  background-position: left top;
}

/*
[icon-search]
******************************************/
.icon-search-gray:before {
  width: 27px;
  height: 27px;
  background-image: url(/img/Front/icon/icon-search-gray.png);
}

.icon-search-black:before {
  width: 22px;
  height: 22px;
  background-image: url(/img/Front/icon/icon-search-black.png);
}

.icon-search-map:before {
  width: 18px;
  height: 19px;
  background-image: url(/img/Front/icon/icon-search-map.png);
  background-position: left top;
}

.icon-search-list:before {
  width: 18px;
  height: 11px;
  background-image: url(/img/Front/icon/icon-search-list.png);
  background-position: left top;
}

.icon-search-green:before {
  width: 21px;
  height: 21px;
  background-image: url(/img/Front/icon/icon-search-green.png);
}

/*
[icon-refine]
******************************************/
.icon-refine-green:before {
  width: 27px;
  height: 27px;
  background-image: url(/img/Front/icon/icon-refine.png);
  background-position: left top;
}

.icon-refine-green-sm:before {
  width: 23px;
  height: 16px;
  background-image: url(/img/Front/icon/icon-refine-green.png);
  background-size: cover;
}

.icon-refine-gray:before {
  width: 23px;
  height: 22px;
  background-image: url(/img/Front/icon/icon-refine-gray.png);
}

/*
[icon-bike]
******************************************/
.icon-bike-road:before {
  width: 78px;
  height: 47px;
  background-image: url(/img/Front/icon/icon-bike-road.png);
}

.icon-bike-cross:before {
  width: 80px;
  height: 49px;
  background-image: url(/img/Front/icon/icon-bike-cross.png);
}

.icon-bike-mtb:before {
  width: 84px;
  height: 52px;
  background-image: url(/img/Front/icon/icon-bike-mtb.png);
}

.icon-bike-ebike:before {
  width: 80px;
  height: 47px;
  background-image: url(/img/Front/icon/icon-bike-ebike.png);
}

.icon-bike-white:before {
  width: 55px;
  height: 35px;
  background-image: url(/img/Front/icon/icon-bike-white.png);
}

/*
[icon-tabbar]
******************************************/
.icon-tabbar-search:before {
  width: 20px;
  height: 20px;
  background-image: url(/img/Front/icon/icon-tabbar-search.png);
  background-position: left top;
}

.icon-tabbar-share:before {
  width: 18px;
  height: 19px;
  background-image: url(/img/Front/icon/icon-tabbar-share.png);
  background-position: left top;
}

.icon-tabbar-chat:before {
  width: 28px;
  height: 22px;
  background-image: url(/img/Front/icon/icon-tabbar-chat.png);
  background-position: left top;
}

.icon-tabbar-coupon:before {
  width: 22px;
  height: 22px;
  background-image: url(/img/Front/icon/icon-tabbar-coupon.png);
  background-position: left top;
}

.icon-tabbar-profile:before {
  width: 20px;
  height: 21px;
  background-image: url(/img/Front/icon/icon-tabbar-profile.png);
  background-position: left top;
}

.icon-tabbar-bike:before {
  width: 32px;
  height: 20px;
  background-image: url(/img/Front/icon/icon-tabbar-bike.png);
  background-position: left top;
}

/*
[icon-mp]
******************************************/
[class*="icon-mp-"]:before {
  width: 46px;
  height: 43px;
  background-size: contain;
}

.icon-mp-profile:before {
  background-image: url(/img/Front/icon/icon-mp-profile.png);
}

.icon-mp-payment:before {
  background-image: url(/img/Front/icon/icon-mp-payment.png);
}

.icon-mp-coupon:before {
  background-image: url(/img/Front/icon/icon-mp-coupon.png);
}

.icon-mp-history:before {
  background-image: url(/img/Front/icon/icon-mp-history.png);
}

.icon-mp-chat:before {
  background-image: url(/img/Front/icon/icon-mp-chat.png);
}

.icon-mp-spot:before {
  background-image: url(/img/Front/icon/icon-mp-spot.png);
}

.icon-mp-mybike:before {
  background-image: url(/img/Front/icon/icon-mp-mybike.png);
}

.icon-mp-bank:before {
  background-image: url(/img/Front/icon/icon-mp-bank.png);
}

.icon-mp-sales:before {
  background-image: url(/img/Front/icon/icon-mp-sales.png);
}

.icon-mp-help:before {
  background-image: url(/img/Front/icon/icon-mp-help.png);
}

.icon-mp-withdraw:before {
  background-image: url(/img/Front/icon/icon-mp-withdraw.png);
}

.icon-mp-ride:before {
  background-image: url(/img/Front/icon/icon-mp-ride.png);
}

@media (max-width: 576px) {
  .icon-mp-ride:before {
    background-position: right top;
  }
}
/*
[icon-sns]
******************************************/
.icon-mail-btn:before {
  width: 60px;
  height: 60px;
  background-image: url(/img/Front/icon/icon-mail-btn.png);
}

.icon-fb:before {
  width: 13px;
  height: 24px;
  background-image: url(/img/Front/icon/icon-fb.png);
}

.icon-fb-gray:before {
  width: 14px;
  height: 30px;
  background-image: url(/img/Front/icon/icon-fb-gray.png);
}

.icon-fb-btn:before {
  width: 60px;
  height: 60px;
  background-image: url(/img/Front/icon/icon-fb-btn.png);
}

.icon-twitter:before {
  width: 22px;
  height: 18px;
  background-image: url(/img/Front/icon/icon-twitter.png);
}

.icon-twitter-gray:before {
  width: 30px;
  height: 24px;
  background-image: url(/img/Front/icon/icon-twitter-gray.png);
}

.icon-twitter-btn:before {
  width: 60px;
  height: 60px;
  background-image: url(/img/Front/icon/icon-twitter-btn.png);
}

.icon-google:before {
  width: 24px;
  height: 16px;
  background-image: url(/img/Front/icon/icon-google.png);
}

.icon-google-btn:before {
  width: 60px;
  height: 60px;
  background-image: url(/img/Front/icon/icon-google-btn.png);
}

/*
[icon-zoom]
******************************************/
.icon-zoom:before {
  width: 18px;
  height: 18px;
  background-image: url(/img/Front/icon/icon-zoom.png);
}

.icon-unzoom:before {
  width: 18px;
  height: 18px;
  background-image: url(/img/Front/icon/icon-unzoom.png);
}

/*
[icon-chat]
******************************************/
.icon-chat-photo:before {
  width: 26px;
  height: 26px;
  background-image: url(/img/Front/icon/icon-chat-photo.png);
}
.icon-chat-camera:before {
  width: 27px;
  height: 23px;
  background-image: url(/img/Front/icon/icon-chat-camera.png);
}
.icon-chat-map:before {
  width: 21px;
  height: 28px;
  background-image: url(/img/Front/icon/icon-chat-map.png);
}

/******************************************
[arrow]
******************************************/
.arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
.arrow:before {
  content: "";
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.arrow-wrap {
  display: flex;
  align-items: center;
}
.arrow-wrap .arrow {
  margin: 0 0 0 10px;
}

.arrow-black:before {
  width: 38px;
  height: 22px;
  background-image: url(/img/Front/arrow/arrow-black.png);
}

@media (max-width: 576px) {
  .arrow-wrap .arrow {
    margin: 0 0 0 5px;
  }
}
/*
[arrow-line]
******************************************/
.arrow-line-white1:before {
  width: 10px;
  height: 17px;
  background-image: url(/img/Front/arrow/arrow-line-white1.png);
}

.arrow-line-green1:before {
  width: 9px;
  height: 14px;
  background-image: url(/img/Front/arrow/arrow-line-green1.png);
}

.arrow-line-green2:before {
  width: 16px;
  height: 8px;
  background-image: url(/img/Front/arrow/arrow-line-green2.png);
}

.arrow-line-green3:before {
  width: 10px;
  height: 18px;
  background-image: url(/img/Front/arrow/arrow-line-green3.png);
}

.arrow-line-gray1:before {
  width: 20px;
  height: 11px;
  background-image: url(/img/Front/arrow/arrow-line-gray1.png);
}

.arrow-line-gray2:before {
  width: 7px;
  height: 12px;
  background-image: url(/img/Front/arrow/arrow-line-gray2.png);
}

.arrow-line-gray3:before {
  width: 23px;
  height: 49px;
  background-image: url(/img/Front/arrow/arrow-line-gray3.png);
}

.arrow-line-gray4:before {
  width: 23px;
  height: 49px;
  background-image: url(/img/Front/arrow/arrow-line-gray4.png);
}

.arrow-line-gray5:before {
  width: 8px;
  height: 16px;
  background-image: url(/img/Front/arrow/arrow-line-gray5.png);
}

.arrow-line-gray6:before {
  width: 14px;
  height: 29px;
  background-image: url(/img/Front/arrow/arrow-line-gray6.png);
}

.arrow-line-black:before {
  width: 10px;
  height: 16px;
  background-image: url(/img/Front/arrow/arrow-line-black1.png);
}

/******************************************
[home]
******************************************/
#global-header.home-header {
  border-bottom: none;
}

.home-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.home-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
}
.home-header .global-nav-link {
  color: #fff;
}
.home-header .global-nav-link:before {
  background: #fff;
}
.home-header #global-nav-lang {
  border-right-color: rgba(255, 255, 255, 0.3);
}

.home-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 15px 10px 25px;
  color: #fff;
}

#header-search .input-group-prepend, #header-search .form-input {
  border: none;
}

@media (max-width: 576px) {
  .home-header {
    position: relative;
  }
  .home-header:before {
    display: none;
  }

  .home-header-inner {
    padding: 0;
  }

  .home-header-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}
/*
[home-slider]
******************************************/
#home-slider {
  height: 100%;
}
#home-slider:before {
  content: "";
  display: block;
  padding-top: 65%;
}
#home-slider .slick-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#home-slider .slick-track {
  height: 100%;
}
#home-slider .slick-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
}
#home-slider .slick-dots li {
  margin: 0 15px 0 0;
  line-height: 1;
}
#home-slider .slick-dots li:last-child {
  margin-right: 0;
}
#home-slider .slick-dots li.slick-active button {
  background: #fff;
}
#home-slider .slick-dots button {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.home-slider-item > div {
  height: 100%;
}
.home-slider-item .btn {
  height: 90px;
  font-size: 1.5rem;
}

#home-slide1-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#home-slide1-inner .btn-list {
  justify-content: center;
}
#home-slide1-inner .btn-list-item {
  width: auto;
  margin: 0 30px 0 0;
}
#home-slide1-inner .btn-list-item:last-child {
  margin-right: 0;
}
#home-slide1-inner .btn {
  width: 340px;
}

#home-slide1-img {
  width: 470px;
  margin: 0 auto 60px;
}

#home-slide2 .btn {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 710px;
}

#home-slider-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
}
#home-slider-bg .slick-list, #home-slider-bg .slick-track {
  height: 100%;
}

.home-slider-bg-item {
  width: 100%;
  height: 100%;
}
.home-slider-bg-item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#home-slider-bg1:before {
  background-image: url(/img/Front/home/home-slide1.jpg);
}
#home-slider-bg2:before {
  background-image: url(/img/Front/home/home-slide2.jpg);
}
#home-slider-bg3:before {
  background-image: url(/img/Front/home/home-slide3.jpg);
  background-position: left top;
}
#home-slider-bg4:before {
  background-image: url(/img/Front/home/home-slide4.jpg);
}
#home-slider-bg5:before {
  background-image: url(/img/Front/home/home-slide5.jpg);
}

#home-slide4 .inner, #home-slide5 .inner {
  height: 100%;
}

#home-lang-btn {
  position: absolute;
  top: 20px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #88d500;
}

.home-slide2-btn {
  position: absolute;
  bottom: 150px;
  right: 200px;
  display: block;
  padding: 40px 45px;
  background: #88d500;
  transition: .3s;
}
.home-slide2-btn-title {
  margin: 0 0 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 4.375rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.home-slide2-btn-text {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: "Roboto", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.375rem;
  font-weight: bold;
  color: #44483e;
}
.home-slide2-btn-text .arrow {
  margin: 0 0 0 20px;
}
.home-slide-wrap {
  display: flex;
  align-items: center;
  height: 100%;
}
.home-slide-cont {
  font-family: "Roboto", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
}
.home-slide-border {
  display: inline-block;
  margin: 0 0 20px;
  padding: 15px 20px;
  border: 1px solid #fff;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}
.home-slide-title {
  margin: 0 0 40px;
  font-size: 3.75rem;
  font-weight: bold;
}
.home-slide-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 0 130px;
  background: #88d500;
  border-radius: 4px;
  font-size: 1.5rem;
  color: #fff;
}
.home-slide-btn .arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .home-slide2-btn:hover {
    background: #9be716;
  }
  .home-slide-btn:hover {
    background: #9be716;
  }
}
@media (max-width: 576px) {
  #home-slider-wrap {
    min-height: 325px;
    margin-bottom: 40px;
  }

  #home-slider .slick-dots {
    bottom: -25px;
  }
  #home-slider .slick-dots li.slick-active button {
    background: #88d500;
  }
  #home-slider .slick-dots button {
    border-color: #88d500;
  }

  .home-slider-item .btn {
    height: 50px;
    font-size: 0.9375rem;
  }

  #home-slide1-inner .btn-list-item {
    margin: 0 15px 0 0;
  }
  #home-slide1-inner .btn {
    width: 150px;
    padding: 0;
  }

  #home-slide1-img {
    width: 235px;
    margin: 0 auto;
  }

  #home-slide2 .btn {
    bottom: 30px;
    width: 90%;
  }

  #home-slider-bg {
    position: absolute;
    top: 0 !important;
  }

  #home-slider-bg1:before {
    background-image: url(/img/Front/home/home-slide1-sp.jpg);
  }
  #home-slider-bg2:before {
    background-image: url(/img/Front/home/home-slide2-sp.jpg);
  }
  #home-slider-bg3:before {
    background-image: url(/img/Front/home/home-slide3-sp.jpg);
  }
  #home-slider-bg4:before {
    background-image: url(/img/Front/home/home-slide4-sp.jpg);
  }
  #home-slider-bg5:before {
    background-image: url(/img/Front/home/home-slide5-sp.jpg);
  }

  .home-slide2-btn {
    position: absolute;
    bottom: 30px;
    right: 0;
    padding: 15px;
  }
  .home-slide2-btn-title {
    margin: 0 0 5px;
    font-size: 1.6875rem;
  }
  .home-slide2-btn-text {
    font-size: 0.625rem;
  }
  .home-slide2-btn-text .arrow {
    margin: 0 0 0 10px;
  }
  .home-slide2-btn-text .arrow:before {
    width: 5px;
    height: 9px;
  }
  .home-slide-wrap {
    align-items: flex-end;
    padding: 0 5px 30px;
  }
  .home-slide-border {
    margin: 0 0 10px;
    padding: 10px;
    font-size: 0.75rem;
  }
  .home-slide-title {
    margin: 0 0 15px;
    font-size: 1.4375rem;
  }
  .home-slide-btn {
    height: 45px;
    padding: 0 40px 0 25px;
    font-size: 0.9375rem;
  }
  .home-slide-btn .arrow:before {
    width: 8px;
    height: 14px;
  }
}
/*
[home-sp-btn]
******************************************/
#home-sp-btn .btn-list-item {
  flex: 1 0 auto;
}

/*
[home-refine]
******************************************/
#home-refine .refine-slide-body {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #eef0ec;
  z-index: 1;
}
#home-refine .btn-list {
  margin: -4px 0 0;
}

/*
[home-catch]
******************************************/
#home-catch-wrap {
  padding: 60px 0 0;
}

#home-catch-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 400px;
  margin: 0 0 40px;
  padding: 0 95px 0 125px;
  background: url(/img/Front/home/home-catch-bg.jpg) no-repeat center;
  background-size: cover;
  border-radius: 5px;
}
#home-catch-unit .app-bnr-item {
  width: 135px;
  margin: 0 10px;
}

#home-catch-icon {
  width: 206px;
  margin: 0 auto 30px;
}

#home-catch-text {
  align-self: flex-start;
  margin: 65px 0 0;
  color: #fff;
}
#home-catch-text:after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -65px;
  display: block;
  width: 331px;
  height: 112px;
  background: url(/img/Front/home/home-catch-text.png) no-repeat center;
  background-size: cover;
}

.home-catch-text {
  margin-bottom: calc(40px - (((1rem * 1.5) - 1rem) / 2));
}
.home-catch-text:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  #home-catch-wrap {
    padding: 0;
  }
}
/*
[home-use]
******************************************/
#home-use-unit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -20px;
}

.home-use-item {
  width: 326px;
  margin: 20px 0 0;
}

.home-use-title {
  display: flex;
  align-items: center;
  margin: 0 0 15px;
  padding: 0 0 0 10px;
  font-size: 1.25rem;
  line-height: 1;
}
.home-use-title span {
  margin: 0 15px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  color: #88d500;
}

.home-use-img {
  width: 100%;
  height: 326px;
  border-radius: 5px;
  overflow: hidden;
}

.home-use-text {
  padding: 30px 25px;
  line-height: 2;
}
.home-use-text p {
  margin-bottom: calc(55px - (((1rem * 2) - 1rem) / 2));
}
.home-use-text p:last-child {
  margin-bottom: 0;
}

/*
[home-search]
******************************************/
#home-search-footer {
  display: flex;
  width: 100%;
}

.home-search-footer-item {
  flex: 1 1 auto;
  width: 1%;
}
.home-search-footer-item .btn {
  width: 100%;
}
.home-search-footer-item:first-child .btn {
  border-radius: 5px 0 0 5px;
  border-right: none;
}
.home-search-footer-item:last-child .btn {
  border-radius: 0 5px 5px 0;
}

@media (min-width: 769px) {
  .home-search-footer-item .btn:hover {
    background: #88d500;
    color: #fff;
  }
  .home-search-footer-item .btn:hover .icon:before {
    background-position: right top;
  }
  .home-search-footer-item .btn:hover .arrow:before {
    background-image: url(/img/Front/arrow/arrow-line-white2.png);
  }
}
/*
[home-ranking]
******************************************/
#home-ranking .card-item:nth-child(3) ~ .card-item {
  width: calc(100% / 4);
}

/*
[home-sns]
******************************************/
#home-sns-unit {
  display: flex;
  justify-content: space-between;
}

.home-sns-item {
  flex: 1 1 auto;
  width: 1%;
  max-width: 490px;
}

@media (max-width: 576px) {
  #home-sns-unit {
    flex-wrap: wrap;
  }

  .home-sns-item {
    width: 100%;
  }
}
/*
[home-app]
******************************************/
#home-app-unit {
  display: flex;
  justify-content: center;
  background: #88d500;
  border-radius: 5px;
}
#home-app-unit:before {
  content: "";
  flex: 0 1 auto;
  width: 418px;
  margin: 0 70px 0 0;
  background: url(/img/Front/home/home-app-img1.png) no-repeat center bottom;
  background-size: contain;
}

#home-app-item {
  padding: 45px 0;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
#home-app-item .app-bnr {
  margin: 20px 0 0;
}
#home-app-item .app-bnr-item {
  width: 180px;
  margin: 0 10px;
}

#home-app-img {
  width: 361px;
  margin: 0 auto;
}

/*
[home-banner]
******************************************/
#home-banner {
  padding: 0 70px;
}
#home-banner .slick-arrow {
  position: absolute;
  top: 50%;
  width: 70px;
  height: 100px;
  background: url(/img/Front/arrow/arrow-line-gray3.png) no-repeat center;
  background-size: 23px 49px;
  color: transparent;
}
#home-banner .slick-arrow.slick-prev {
  left: 0;
  transform: translateY(-50%) scale(-1, 1);
}
#home-banner .slick-arrow.slick-next {
  right: 0;
  transform: translateY(-50%);
}

.home-banner-item {
  margin: 0 7px;
}

@media (min-width: 769px) {
  .home-banner-item a:hover img {
    opacity: .6;
  }
}
@media (max-width: 576px) {
  #home-banner-wrap {
    padding: 0 0 30px;
  }
  #home-banner-wrap .inner {
    padding: 0;
  }

  #home-banner {
    padding: 0;
  }

  .home-banner-item {
    max-width: 286px;
  }
}
/******************************************
[bike-img]
******************************************/
#bike-img-wrap.content-section {
  margin: 0 0 30px;
}

.bike-img-item {
  max-width: 920px;
  width: 100%;
  height: 620px;
  overflow: hidden;
}
.bike-img-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
  transition: .3s;
  z-index: 1;
}
.bike-img-item.slick-active:before {
  visibility: hidden;
  opacity: 0;
}
.bike-img-item img {
  width: 100%;
  height: auto;
}

#bike-img-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 920px;
  height: 620px;
  visibility: hidden;
}
#bike-img-arrow .slick-arrow {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 75px;
  background: url(/img/Front/arrow/arrow-line-white3.png) no-repeat center #44483e;
  background-size: 16px 34px;
  color: transparent;
  transition: .3s;
  visibility: visible;
  z-index: 2;
}
#bike-img-arrow .slick-arrow.slick-prev {
  left: -50px;
  transform: translateY(-50%) scale(-1, 1);
}
#bike-img-arrow .slick-arrow.slick-next {
  right: -50px;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  #bike-img-arrow .slick-arrow:hover {
    cursor: pointer;
    opacity: .6;
  }
}
@media (max-width: 576px) {
  #bike-img-slider .slick-list {
    margin: 0 0 10px;
  }
  #bike-img-slider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    color: transparent;
  }
  #bike-img-slider .slick-dots li {
    margin: 0 15px 0 0;
    line-height: 0;
  }
  #bike-img-slider .slick-dots li:last-child {
    margin-right: 0;
  }
  #bike-img-slider .slick-dots button {
    width: 10px;
    height: 10px;
    background: #dddedb;
    border-radius: 50%;
  }
  #bike-img-slider .slick-dots .slick-active button {
    background: #88d500;
  }

  .bike-img-item {
    width: auto;
    height: auto;
  }
  .bike-img-item:before {
    display: none;
  }

  #bike-img-arrow {
    display: none;
  }
}
/******************************************
[bike-header]
******************************************/
.bike-header-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30px;
}

#bike-header-title {
  margin-bottom: calc(15px - (((26px * 1.5) - 26px) / 2));
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.625rem;
  font-weight: 600;
}

#bike-header-info {
  display: flex;
  align-items: center;
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.125rem;
}
#bike-header-info span {
  margin: 0 15px 0 0;
  padding: 3px 10px;
  border: 1px solid #d8d8d8;
}

.bike-price {
  display: flex;
}

.bike-price-item {
  display: flex;
  align-items: baseline;
  margin: 0 20px 0 0;
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem;
  line-height: 1;
}
.bike-price-item:last-child {
  margin-right: 0;
}
.bike-price-item span {
  margin: 0 10px 0 0;
  font-size: 1.3375rem;
  font-weight: 500;
}

#bike-header-option .bike-check-cont {
  justify-content: center;
  width: 75px;
  height: 75px;
  padding: 0;
  font-size: 0.8125rem;
}
#bike-header-option .icon {
  max-height: 40px;
  margin: 0 0 8px;
}
#bike-header-option .icon-key:before, #bike-header-option .icon-helmet:before, #bike-header-option .icon-light:before {
  transform: scale(0.75);
}
#bike-header-option .icon-light {
  margin: 0 0 3px;
}
#bike-header-option .icon-bike-white:before {
  transform: scale(1);
}
#bike-header-option .bike-check-unit.is-active .bike-check-cont {
  background: #f47334;
  color: #fff;
}
#bike-header-option .bike-check-unit.is-active .bike-check-cont:before {
  border-color: #f47334;
}

#bike-header-user {
  order: 2;
}
#bike-header-user .user-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#bike-header-user .user-name {
  margin-bottom: calc(15px - (((19px * 1.5) - 19px) / 2));
  font-size: 1.1875rem;
}
#bike-header-user .rating-star-wrap {
  height: 15px;
}

.bike-caption-item {
  margin-bottom: calc(20px - (((1rem * 1.5) - 1rem) / 2));
}

@media (max-width: 576px) {
  #bike-header-title {
    margin-bottom: calc(10px - (((20px * 1.2) - 20px) / 2));
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .bike-header-unit {
    display: block;
    margin: 0 0 25px;
  }

  #bike-header-info {
    margin: 0 0 15px;
    font-size: 0.875rem;
  }

  .bike-price-item {
    margin: 0 15px 0 0;
    font-size: 0.6875rem;
  }
  .bike-price-item span {
    margin: 0;
    font-size: 1.1875rem;
  }

  #bike-header-user {
    justify-content: flex-end;
    margin: 0 0 10px;
  }
  #bike-header-user .user-name {
    margin-bottom: calc(10px - (((16px * 1.5) - 16px) / 2));
    font-size: 1rem;
  }

  #bike-header-option .bike-check-cont {
    width: 100%;
    height: 100%;
  }
  #bike-header-option .bike-check-theft .bike-check-cont {
    font-size: 1rem;
  }
  #bike-header-option .bike-check-theft .bike-check-cont .icon {
    margin: 0;
  }
  #bike-header-option .bike-check-theft .bike-check-cont .icon:before {
    transform: scale(0.7);
  }

  .bike-caption-item {
    font-size: 0.875rem;
  }
}
@media (max-width: 460px) {
    .bike-price-item span {
        font-size: 0.8rem;
    }
    body:lang(en) .bike-price-item {
        font-size: 0.4875rem;
    }
    body:lang(en) .bike-price-item span {
        font-size: 0.7rem!important;
    }
}
@media (max-width: 320px) {
  .bike-price-item {
    margin: 0 10px 0 0;
    font-size: 0.625rem;
  }

  #bike-header-option .bike-check-cont {
    font-size: .7rem;
  }
  #bike-header-option .icon {
    margin: 0 0 5px;
  }
  #bike-header-option .icon-key:before, #bike-header-option .icon-helmet:before, #bike-header-option .icon-light:before {
    transform: scale(0.65);
  }
}
/******************************************
[bike-calendar]
******************************************/
#bike-calendar {
  width: 750px;
  margin: 0 auto;
  z-index: 1;
}
#bike-calendar .slick-list {
  margin: 0 -25px;
}
#bike-calendar .calendar-item {
  margin: 0;
  padding: 0 25px;
}

#bike-calendar-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 100%;
  z-index: 0;
}
#bike-calendar-arrow .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 49px;
  background: url(/img/Front/arrow/arrow-line-gray3.png) no-repeat center;
  background-size: cover;
  color: transparent;
}
#bike-calendar-arrow .slick-prev {
  left: -48px;
  transform: translateY(-50%) scale(-1, 1);
}
#bike-calendar-arrow .slick-next {
  right: -48px;
}

@media (min-width: 769px) {
  #bike-calendar-arrow .slick-arrow:hover {
    background-image: url(/img/Front/arrow/arrow-line-gray4.png);
  }
}
@media (max-width: 576px) {
  #bike-calendar {
    width: 100%;
    z-index: 0;
  }
  #bike-calendar .slick-list {
    margin: 0;
  }
  #bike-calendar .calendar-item {
    padding: 0;
  }
  #bike-calendar .calendar {
    table-layout: fixed;
    width: 100%;
  }
  #bike-calendar .calendar td {
    width: 45px;
  }

  #bike-calendar-arrow {
    width: 100%;
    z-index: 1;
    height: 10%;
  }

  #bike-calendar-arrow .slick-arrow {
    width: 10px;
    height: 19px;
    top: 4px;
    transform: translateY(0);
    background-image: url(/img/Front/arrow/arrow-line-gray4.png);
  }
  #bike-calendar-arrow .slick-prev {
    left: 0;
    transform: translateY(0) scale(-1, 1);
  }
  #bike-calendar-arrow .slick-next {
    right: 10px;
  }
}
/******************************************
[bike-map]
******************************************/
#bike-map-wrap .headline-aside {
  flex: 0 1 auto;
  text-align: left;
}
#bike-map-wrap .report {
  justify-content: flex-end;
}

#bike-map {
  width: 100%;
  height: 400px;
  margin: 0 0 20px;
}

@media (max-width: 576px) {
  #bike-map-wrap .headline {
    margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
  }

  #bike-map {
    height: 345px;
  }
}
/******************************************
[bike-footer]
******************************************/
#bike-footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  background: #fff;
  border-top: 1px solid #d8d8d8;
  z-index: 1;
}

#bike-footer-unit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#bike-footer-price {
  margin: 0 35px 0 0;
}

@media (max-width: 576px) {
  #bike-footer-wrap {
    padding: 10px 0;
  }

  #bike-footer-unit {
    flex-direction: column;
    align-items: flex-start;
  }
  #bike-footer-unit .btn-list {
    width: 100%;
  }
  #bike-footer-unit .btn-list-item {
    flex: 1 1 auto;
    width: 1%;
  }
  #bike-footer-unit .btn {
    width: 100%;
    height: 45px;
    padding: 0;
    font-size: 0.875rem;
    display: inline-block;
  }

  #bike-footer-price {
    margin: 0 0 10px;
  }

  #modal-id .btn-list {
    flex-wrap: wrap;
  }
  #modal-id .btn-list-item {
    width: 100%;
    margin: 0 0 10px;
  }
  #modal-id .btn-list-item:last-child {
    margin-bottom: 0;
  }
  #modal-id .btn {
    width: 100%;
  }
}
@media (max-width: 320px) {
  #bike-footer-unit .btn {
    font-size: 0.75rem;
  }
}
/******************************************
[bike-user]
******************************************/
#bike-user-wrap {
  padding: 50px 0 0;
}
#bike-user-wrap .user-data-item {
  max-width: 190px;
  margin: 0 30px 0 0;
}
#bike-user-wrap .user-data-item:last-child {
  margin-right: 0;
}

#bike-user-unit {
  padding: 30px 30px 0;
  border: 1px solid #d8d8d8;
}
#bike-user-unit #review-wrap {
  padding: 0;
  border: none;
}

@media (max-width: 576px) {
  #bike-user-wrap {
    padding: 30px 0 0;
  }
  #bike-user-wrap .user-data-item {
    margin: 0 10px 0 0;
  }

  #bike-user-unit {
    padding: 20px 15px 0;
  }
}
/******************************************
[bike-user-header]
******************************************/
#bu-header-unit {
  justify-content: center;
}
#bu-header-unit .user-item {
  margin: 0 35px 0 0;
}
#bu-header-unit .user-item:last-child {
  margin-right: 0;
}
#bu-header-unit .user-avatar {
  width: 180px;
  height: 180px;
}
#bu-header-unit .user-name {
  margin-bottom: calc(10px - (((21px * 1.5) - 21px) / 2));
  font-size: 1.3125rem;
}
#bu-header-unit .rating-star-wrap {
  height: 25px;
}
#bu-header-unit .rating-text {
  font-size: 1.25rem;
}

@media (max-width: 576px) {
  #bu-header-unit .user-item {
    margin: 0 10px 0 0;
  }
  #bu-header-unit .user-avatar {
    width: 80px;
    height: 80px;
  }
  #bu-header-unit .user-name {
    margin-bottom: calc(10px - (((16px * 1.5) - 16px) / 2));
    font-size: 1rem;
  }
  #bu-header-unit .rating-star-wrap {
    height: 15px;
  }
  #bu-header-unit .rating-text {
    font-size: 0.875rem;
  }
}
/******************************************
[bike-user-detail]
******************************************/
.bu-detail-item {
  margin-bottom: calc(15px - (((1rem * 1.5) - 1rem) / 2));
}
.bu-detail-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .bu-detail-item {
    margin-bottom: calc(10px - (((13px * 1.5) - 13px) / 2));
    font-size: 0.8125rem;
  }
}
/******************************************
[bike-user-text]
******************************************/
#bike-user-text {
  margin: 0 0 30px;
}

.bu-text-item {
  margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
}

@media (max-width: 576px) {
  #bike-user-text {
    margin: 0 0 20px;
  }

  .bu-text-item {
    margin-bottom: calc(15px - (((13px * 1.5) - 13px) / 2));
    font-size: 0.8125rem;
  }
}
/******************************************
[bike-user-data]
******************************************/
@media (max-width: 576px) {
  .tippy-tooltip.bike-user-theme .tippy-content {
    width: 160px;
  }

  .tippy-tooltip.bike-user-theme:before {
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(45deg);
  }
}
/******************************************
[bike-request]
******************************************/
#bike-request-wrap {
  padding: 40px 0 0;
  border-top: 1px solid #e0e0e0;
}
#bike-request-wrap .headline-wrap {
  margin: 0 0 40px;
}

/*
[bike-request]
******************************************/
#bike-request {
  margin: 0 0 40px;
}

.bike-request-unit {
  margin: 0 0 20px;
}

.bike-request-title {
  margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
  font-weight: bold;
}

.bike-request-item {
  display: flex;
  justify-content: space-between;
}
.bike-request-item .input-group {
  margin: 0 20px 0 0;
  font-weight: bold;
}
.bike-request-item .input-group:last-child {
  margin-right: 0;
}
.bike-request-item .icon {
  width: 30px;
}
.bike-request-item .form-input::-moz-placeholder {
  font-weight: bold;
  color: #44483e;
  opacity: 1;
}
.bike-request-item .form-input::-webkit-input-placeholder {
  font-weight: bold;
  color: #44483e;
}
.bike-request-item .form-input:placeholder-shown {
  font-weight: bold;
  color: #44483e;
}

@media (max-width: 576px) {
  #bike-request-wrap {
    padding: 30px 0 0;
  }
  #bike-request-wrap .headline-wrap {
    margin: 0 0 30px;
  }
  #bike-request-wrap .btn-list {
    width: 100%;
    justify-content: space-between;
  }
  #bike-request-wrap .btn-list-item {
    flex: 1 1 auto;
    width: 100%;
  }
  #bike-request-wrap .btn {
    width: 100%;
  }

  #bike-request {
    margin: 0 0 30px;
  }

  .bike-request-unit {
    margin: 0 0 20px;
  }

  .bike-request-item {
    flex-direction: column;
  }
  .bike-request-item .input-group {
    margin: 0 0 10px;
  }
  .bike-request-item .input-group:last-child {
    margin-bottom: 0;
  }
}
/*
[bike-confirm]
******************************************/
#bike-confirm {
  margin: 0 0 40px;
}

.bike-confirm-unit {
  margin: 0 0 30px;
}
.bike-confirm-unit:last-child {
  margin-bottom: 0;
}

#bike-confirm-option {
  padding: 20px;
}
#bike-confirm-option .form-check-item {
  margin: 0 0 10px;
}
#bike-confirm-option .text-sm {
  margin: 0 0 0 40px;
}

.bike-confirm-optionList {
  margin: 0 0 20px;
}
.bike-confirm-optionList:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  #bike-confirm {
    margin: 0 0 30px;
  }

  .bike-confirm-unit {
    margin: 0 0 20px;
  }

  #bike-confirm-option {
    padding: 15px;
  }
  #bike-confirm-option .form-check-item {
    margin: 0 0 5px;
  }
}
/*
[bike-finish]
******************************************/
#bike-finish-wrap {
  padding: 40px 0 0;
}
#bike-finish-wrap .headline-wrap {
  margin: 0 0 40px;
}

#bike-finish-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 345px;
  border: 1px solid #d8d8d8;
}
#bike-finish-item .btn-list {
  justify-content: center;
  width: 100%;
}
#bike-finish-item .btn-list-item {
  flex: 0 0 auto;
  width: 250px;
}

.bike-finish-text {
  margin-bottom: calc(60px - (((23px * 1.5) - 23px) / 2));
  font-size: 1.4375rem;
  text-align: center;
}

@media (max-width: 576px) {
  #bike-finish-wrap {
    padding: 20px 0 0;
  }
  #bike-finish-wrap .headline-wrap {
    margin: 0 0 15px;
  }

  #bike-finish-item {
    height: auto;
    padding: 40px 30px;
  }
  #bike-finish-item .btn-list {
    flex-direction: column;
  }
  #bike-finish-item .btn-list-item {
    width: 100%;
    margin: 0 0 10px;
  }
  #bike-finish-item .btn-list-item:last-child {
    margin-bottom: 0;
  }

  .bike-finish-text {
    margin-bottom: calc(30px - (((16px * 1.5) - 16px) / 2));
    font-size: 1rem;
  }
}
/******************************************
[mypage]
******************************************/
#mp-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#mp-wrap .headline-wrap {
  margin: 0 0 15px;
}

.mp-text {
  margin: 0 0 30px;
  font-size: 0.875rem;
}
.mp-text:last-child {
  margin-bottom: 0;
}

.mp-head-text {
  margin-bottom: calc(50px - (((14px * 1.5) - 14px) / 2));
  font-size: 0.875rem;
}
.mp-head-text:last-child {
  margin-bottom: 0;
}

.mp-bike-name {
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1;
}
.mp-bike-name a {
  color: #44483e;
}

.mypage-id-btn {
  position: absolute;
  bottom: 5px;
  right: 0;
  width: 120px;
  min-width: 0;
  height: 30px;
  padding: 0;
  font-size: 0.75rem;
}

@media (max-width: 576px) {
  #mp-wrap {
    flex-direction: column;
  }

  .mp-bd-title {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #d4d4d4;
  }

  .mypage-id-btn {
    top: 5px;
    bottom: auto;
    right: 15px;
  }
}
/******************************************
[mypage-main]
******************************************/
#mp-main {
  width: 685px;
}

.mp-main-inner {
  margin: 0 0 30px;
}

@media (max-width: 576px) {
  #mp-main {
    width: 100%;
    margin: 0 0 30px;
  }
}
/******************************************
[mypage-common]
******************************************/
#mp-common {
  order: -1;
  width: 300px;
  border: 1px solid #d8d8d8;
}

.mp-common-section {
  border-bottom: 1px solid #d8d8d8;
}
.mp-common-section:last-child {
  border-bottom: none;
}

@media (max-width: 576px) {
  #mp-common {
    order: 0;
    width: 100%;
  }

  .mp-common-section {
    border-bottom: none;
  }
}
/******************************************
[mypage-user]
******************************************/
#mp-user {
  padding: 15px;
}
#mp-user .user-unit {
  margin: 0 0 15px;
}
#mp-user .user-name {
  margin-bottom: calc(10px - (((18px * 1.5) - 18px) / 2));
  font-size: 1.125rem;
}
#mp-user .rating-star-wrap {
  height: 25px;
}
#mp-user .rating-text {
  font-size: 1.25rem;
}

#mp-user-data .user-data-item {
  padding: 10px 0;
  border: none;
  border-right: 1px solid #d8d8d8;
}
#mp-user-data .user-data-item:last-child {
  border-right: none;
}
#mp-user-data .user-data-item:nth-child(2) .user-data-number {
  flex-direction: column;
  font-size: 0.6875rem;
  font-weight: normal;
}
#mp-user-data .user-data-item:nth-child(2) .user-data-number span {
  margin: 0 0 5px;
}
#mp-user-data .user-data-title {
  margin-bottom: calc(5px - (((14px * 1.5) - 14px) / 2));
  font-size: 0.875rem;
}
#mp-user-data .user-data-number {
  margin: 0 0 5px;
  font-size: 0.875rem;
}
#mp-user-data .user-data-number span {
  font-size: 1.875rem;
}
#mp-user-data .user-data-detail {
  font-size: 0.6875rem;
}

/******************************************
[mypage-nav]
******************************************/
#mp-nav {
  padding: 0 15px;
}
#mp-nav .mp-nav-item {
  border-bottom: 1px solid #d8d8d8;
}
#mp-nav .mp-nav-item:last-child {
  border-bottom: none;
}
#mp-nav .mp-nav-link {
  justify-content: space-between;
  padding: 10px 0;
}
#mp-nav .mp-nav-link .icon {
  margin: 0 10px 0 0;
}
#mp-nav .mp-nav-link .icon:before {
  width: 33px;
  height: 30px;
}
#mp-nav .mp-nav-inner {
  display: flex;
  align-items: center;
}
#mp-nav .mp-nav-text {
  font-size: 0.875rem;
}

.mp-nav-link {
  display: flex;
  align-items: center;
  color: #44483e;
}

.mp-nav-text {
  font-weight: bold;
}

@media (min-width: 769px) {
  .mp-nav-link:hover {
    text-decoration: underline;
  }
}
@media (max-width: 576px) {
  #mp-nav {
    padding: 10px 0 0;
  }
  #mp-nav #mp-nav-unit {
    display: flex;
    flex-wrap: wrap;
  }
  #mp-nav .mp-nav-item {
    width: calc(100% / 3);
    border-bottom: none;
  }
  #mp-nav .mp-nav-link {
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    text-align: center;
  }
  #mp-nav .mp-nav-link .icon {
    margin: 0 0 5px;
  }
  #mp-nav .mp-nav-inner {
    flex-direction: column;
  }
  #mp-nav .mp-nav-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 2rem;
    font-size: 0.6875rem;
  }
}
/******************************************
[mypage-search]
******************************************/
.mp-search-wrap {
  display: flex;
  margin: 0 0 20px;
}
.mp-search-wrap .form-input {
  height: 44px;
  border-right: none;
  border-radius: 22px 0 0 22px;
  font-size: 0.875rem;
}

.mp-search-btn {
  height: 44px;
  padding: 0 20px 0 0;
  border: 1px solid #d4d4d4;
  border-left: none;
  border-radius: 0 22px 22px 0;
}

/******************************************
[mypage-home]
******************************************/
.mp-home-unit {
  display: flex;
}

.mp-home-item {
  flex: 1 1 auto;
  width: 1%;
  margin: 0 30px 0 0;
}
.mp-home-item:last-child {
  margin-right: 0;
}

@media (max-width: 576px) {
  .mp-home-unit {
    flex-direction: column;
    margin: 0 0 15px;
  }
  .mp-home-unit:last-child {
    margin-bottom: 0;
  }

  .mp-home-item {
    width: 100%;
    margin: 0 0 10px;
  }
  .mp-home-item:last-child {
    margin-bottom: 0;
  }
}
/*
[mp-home-user]
******************************************/
#mp-home-user {
  margin: 0 0 45px;
}
#mp-home-user .user-unit {
  margin: 0 0 20px;
}
#mp-home-user .user-item {
  margin: 0 25px 0 0;
}
#mp-home-user .user-item:last-child {
  margin-right: 0;
}
#mp-home-user .user-avatar {
  width: 130px;
  height: 130px;
}
#mp-home-user .user-name {
  margin-bottom: calc(15px - (((21px * 1.5) - 21px) / 2));
  font-size: 1.3125rem;
}
#mp-home-user .rating-star-wrap {
  height: 25px;
}
#mp-home-user .rating-text {
  font-size: 1.25rem;
}
#mp-home-user .user-data-item:not(:last-child) {
  border-right: none;
}
#mp-home-user .user-data-title {
  margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
}
#mp-home-user .user-data-number {
  margin: 0 0 5px;
  font-size: 1rem;
}
#mp-home-user .user-data-number span {
  font-size: 2.5rem;
}
#mp-home-user .user-data-detail {
  font-size: 0.8125rem;
}

@media (max-width: 576px) {
  #mp-home-user {
    margin: 0 0 15px;
  }
  #mp-home-user .user-item {
    margin: 0 10px 0 0;
  }
  #mp-home-user .user-avatar {
    width: 80px;
    height: 80px;
  }
  #mp-home-user .user-name {
    margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
    font-size: 1rem;
  }
  #mp-home-user .rating-star-wrap {
    height: 15px;
  }
  #mp-home-user .rating-text {
    font-size: 0.875rem;
  }
  #mp-home-user .user-data-item:nth-child(2) .user-data-number {
    flex-direction: column;
    font-size: 0.6875rem;
    font-weight: normal;
  }
  #mp-home-user .user-data-item:nth-child(2) .user-data-number span {
    margin: 0 0 5px;
  }
  #mp-home-user .user-data-number {
    font-size: 0.875rem;
  }
  #mp-home-user .user-data-number span {
    font-size: 1.875rem;
  }
  #mp-home-user .user-data-detail {
    font-size: 0.6875rem;
  }
}
/*
[mp-home-detail]
******************************************/
#mp-home-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#mp-home-detail .mp-home-table {
  margin: 0 0 15px;
}
#mp-home-detail .mp-home-table:last-child {
  margin-bottom: 0;
}
#mp-home-detail .table th {
  width: 180px;
}
#mp-home-detail .table td {
  text-align: center;
}

#mp-home-sales {
  flex: 1 1 auto;
}
#mp-home-sales .table {
  height: 100%;
}
#mp-home-sales .table td {
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
}

@media (max-width: 576px) {
  #mp-home-detail .mp-home-table {
    margin: 0 0 10px;
  }
  #mp-home-detail .table th {
    width: 130px;
    padding: 0;
  }

  #mp-home-sales .table td {
    font-size: 1.875rem;
  }

  .mp-home-table th {
    font-size: 0.875rem;
  }
}
/*
[mp-home-nav]
******************************************/
#mp-home-nav #mp-nav-unit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#mp-home-nav .mp-nav-item {
  width: 500px;
}
#mp-home-nav .mp-nav-link {
  padding: 15px;
  border-radius: 5px;
}
#mp-home-nav .mp-nav-link .icon {
  margin: 0 25px 0 0;
}
#mp-home-nav .mp-nav-inner {
  font-size: 0.75rem;
}
#mp-home-nav .mp-nav-text {
  font-size: 1.125rem;
}
#mp-home-nav .badge {
  position: absolute;
  top: 15px;
  left: 45px;
}

@media (min-width: 769px) {
  #mp-home-nav .mp-nav-link:hover {
    text-decoration: none;
    background: #f7f9f4;
  }
}
@media (max-width: 576px) {
  #mp-home-nav .mp-nav-link {
    padding: 10px 0 10px 10px;
  }
  #mp-home-nav .mp-nav-link .icon {
    margin: 0 20px 0 0;
  }
  #mp-home-nav .mp-nav-text {
    font-size: 1rem;
  }
}
/******************************************
[mypage-profile]
******************************************/
.mp-auth-unit {
  padding: 0;
}

.mp-auth-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px dashed #e1e1e1;
}
.mp-auth-item:last-child {
  border-bottom: none;
}

.mp-auth-head {
  width: 7em;
  margin: 0 25px 0 0;
  font-weight: bold;
  text-align: right;
}

.mp-auth-done {
  display: flex;
  padding: 20px 20px;
}

.mp-auth-done-item {
  margin: 0 30px 0 0;
  font-size: 0.875rem;
  text-align: center;
}
.mp-auth-done-item:last-child {
  margin-right: 0;
}
.mp-auth-done-item .icon {
  margin: 0 auto 10px;
}

@media (max-width: 576px) {
  .mp-auth-item {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 15px;
    padding: 0;
    border-bottom: none;
  }
  .mp-auth-item:last-child {
    margin-bottom: auto;
  }

  .mp-auth-head {
    width: 100%;
    margin: 0 0 10px;
    text-align: left;
  }

  .mp-auth-done {
    justify-content: flex-start;
    padding: 0;
  }

  .mp-auth-done-item {
    margin: 0 10px 0 0;
    font-size: 0.75rem;
  }
  .mp-auth-done-item .icon {
    margin: 0 0 5px;
  }
}
/*
[btn-auth]
******************************************/
.btn-auth {
  display: flex;
  align-items: center;
  width: 215px;
  height: 45px;
  padding: 0 0 0 15px;
  font-weight: bold;
  color: #fff;
  transition: .3s;
}
.btn-auth .icon {
  width: 22px;
  margin: 0 10px 0 0;
}

.btn-auth-mail {
  width: auto;
  padding: 0;
  font-weight: normal;
  color: #44483e;
  text-decoration: underline;
}

.btn-auth-fb {
  background: #3b5999;
}

.btn-auth-twitter {
  background: #1da1f3;
}

.btn-auth-google {
  background: #dc4e41;
}

@media (min-width: 769px) {
  .btn-auth:hover {
    opacity: .6;
  }
}
@media (max-width: 576px) {
  .btn-auth {
    width: 100%;
  }

  .btn-auth-mail {
    justify-content: center;
    height: auto;
  }
}
/*
[withdraw]
******************************************/
.withdraw-inner {
  padding: 0 15px;
}

/******************************************
[mypage-coupon]
******************************************/
.mp-coupon-unit {
  margin: 0 0 30px;
  border: 1px solid #d8d8d8;
}
.mp-coupon-unit:last-child {
  margin-bottom: 0;
}
.mp-coupon-unit.coupon-empty {
  border-style: dashed;
}

.mp-coupon-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  padding: 25px 30px;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

.mp-coupon-head {
  font-weight: bold;
}

.mp-coupon-title {
  margin: 0 0 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 3.75rem;
  font-weight: 300;
  line-height: 1;
}

.mp-coupon-limit {
  line-height: 1;
}
.mp-coupon-limit span {
  display: inline-block;
  margin: 0 20px 0 0;
  font-weight: bold;
}

.coupon-empty .mp-coupon-item {
  justify-content: center;
  align-items: center;
}
.coupon-empty .mp-coupon-title {
  color: #e7e8e5;
}
.coupon-empty .mp-coupon-limit {
  font-size: 0.875rem;
  text-align: center;
}

.coupon500 .mp-coupon-item {
  background-image: url(/img/Front/coupon/coupon-bg500.png);
}
.coupon500 .mp-coupon-head {
  color: #eab90c;
}

.coupon400 .mp-coupon-item {
  background-image: url(/img/Front/coupon/coupon-bg400.png);
}
.coupon400 .mp-coupon-head {
  color: #f33313;
}

.coupon300 .mp-coupon-item {
  background-image: url(/img/Front/coupon/coupon-bg300.png);
}
.coupon300 .mp-coupon-head {
  color: #5bc9b9;
}

.coupon200 .mp-coupon-item {
  background-image: url(/img/Front/coupon/coupon-bg200.png);
}
.coupon200 .mp-coupon-head {
  color: #ff5988;
}

.coupon100 .mp-coupon-item {
  background-image: url(/img/Front/coupon/coupon-bg100.png);
}
.coupon100 .mp-coupon-head {
  color: #8dd908;
}

@media (max-width: 576px) {
  .mp-coupon-unit:before {
    content: "";
    display: block;
    width: 100%;
    height: 60px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
  }
  .mp-coupon-unit.coupon-empty:before {
    display: none;
  }
  .mp-coupon-unit.coupon500:before {
    background-image: url(/img/Front/coupon/coupon-bg500-sp.jpg);
  }
  .mp-coupon-unit.coupon400:before {
    background-image: url(/img/Front/coupon/coupon-bg400-sp.jpg);
  }
  .mp-coupon-unit.coupon300:before {
    background-image: url(/img/Front/coupon/coupon-bg300-sp.jpg);
  }
  .mp-coupon-unit.coupon200:before {
    background-image: url(/img/Front/coupon/coupon-bg200-sp.jpg);
  }
  .mp-coupon-unit.coupon100:before {
    background-image: url(/img/Front/coupon/coupon-bg100-sp.jpg);
  }

  .mp-coupon-item {
    height: 145px;
    padding: 15px;
  }

  .mp-coupon-head {
    font-size: 0.875rem;
  }

  .mp-coupon-title {
    margin: 0 0 10px;
    font-size: 3.125rem;
  }

  .mp-coupon-limit {
    font-size: 0.875rem;
  }

  .coupon-empty .mp-coupon-item {
    height: 205px;
  }
  .coupon-empty .mp-coupon-title {
    font-size: 2.6875rem;
  }
  .coupon-empty .mp-coupon-limit {
    font-size: 0.75rem;
  }

  .coupon500 .mp-coupon-item, .coupon400 .mp-coupon-item, .coupon300 .mp-coupon-item, .coupon200 .mp-coupon-item, .coupon100 .mp-coupon-item {
    background-image: none;
  }
}
/******************************************
[mypage-list]
******************************************/
.mp-list-table {
  width: 100%;
  background: #fff;
  font-size: 0.875rem;
}
.mp-list-table thead th {
  padding: 0 0 10px;
}
.mp-list-table tbody th, .mp-list-table tbody td {
  padding: 10px 15px;
  border-top: 1px solid #e1e1e1;
  border-right: 1px dashed #e1e1e1;
  text-align: center;
}
.mp-list-table tbody th:first-child, .mp-list-table tbody td:first-child {
  border-left: 1px solid #e1e1e1;
}
.mp-list-table tbody th:last-child, .mp-list-table tbody td:last-child {
  border-right-style: solid;
}
.mp-list-table tr[data-href] {
  transition: .3s;
}

.list-slide-body {
  display: none;
}
.list-slide-body.is-open {
  display: table-row-group;
}

.list-slide-btn {
  justify-content: center;
  width: 100%;
  height: 55px;
  border: 1px solid #e1e1e1;
  color: #88d500;
}
.list-slide-btn.is-open .arrow {
  transform: rotate(-180deg);
  transition: .3s;
}

@media (min-width: 769px) {
  .list-slide-btn:hover {
    text-decoration: underline;
  }

  .mp-list-table tr[data-href]:hover {
    background: #f8fdf2;
    cursor: pointer;
  }
}
@media (max-width: 576px) {
  .mp-list-wrap {
    margin: 0 0 10px;
    border-bottom: 1px solid #e1e1e1;
    overflow-x: scroll;
  }
}
/******************************************
[mypage-history]
******************************************/
.btn-history {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 30px;
  font-size: 0.8125rem;
  font-weight: bold;
  color: #fff;
  transition: .3s;
}
.btn-history .arrow {
  margin: 0 0 0 5px;
}
.btn-history .arrow:before {
  height: 10px;
  background-size: contain;
}

.btn-history-red {
  background: #f33313;
}

.btn-history-green {
  background: #88d500;
}

.btn-history-blue {
  background: #55c6da;
}

.btn-history-gray {
  background: #eaeaea;
  color: #44483e;
}

@media (min-width: 769px) {
  .btn-history:not(:disabled):hover {
    opacity: 0.6;
  }
}
/******************************************
[mypage-history-user]
******************************************/
.mp-history-user-wrap {
  border: 1px solid #e1e1e1;
}

.mp-hu-header, .mp-hu-body {
  border-bottom: 1px solid #e1e1e1;
}

.mp-hu-header, .mp-hu-body, .mp-hu-footer {
  padding: 20px;
}

.mp-hu-title {
  font-size: 1rem;
}

.mp-hu-body {
  font-size: 0.875rem;
}
.mp-hu-body .user-unit {
  justify-content: center;
  margin: 0 0 20px;
}
.mp-hu-body .user-item {
  margin: 0 25px 0 0;
}
.mp-hu-body .user-item:last-child {
  margin-right: 0;
}
.mp-hu-body .user-avatar {
  width: 130px;
  height: 130px;
}
.mp-hu-body .user-name {
  margin-bottom: calc(15px - (((21px * 1.5) - 21px) / 2));
  font-size: 1.3125rem;
}
.mp-hu-body #period-wrap {
  margin: 0 0 30px;
}
.mp-hu-body .period-title {
  margin-bottom: calc(10px - (((14px * 1.5) - 14px) / 2));
}
.mp-hu-body .period-date {
  height: 50px;
  font-size: 1rem;
}
.mp-hu-body .period-arrow {
  padding: 0 10px 15px;
}
.mp-hu-body .grandtotal {
  font-size: 1rem;
}
.mp-hu-body .grandtotal .total-price {
  font-size: 1rem;
}

.mp-hu-chat-btn {
  font-weight: bold;
}
.mp-hu-chat-btn .icon {
  margin: 0 10px 0 0;
}

@media (min-width: 769px) {
  .mp-hu-chat-btn:hover {
    text-decoration: underline;
  }
}
@media (max-width: 576px) {
  .mp-hu-header, .mp-hu-body, .mp-hu-footer {
    padding: 15px;
  }

  .mp-hu-title {
    @inclide fz(14);
  }

  .mp-hu-body .user-unit {
    margin: 0 0 15px;
  }
  .mp-hu-body .user-item {
    margin: 0 15px 0 0;
  }
  .mp-hu-body .user-avatar {
    width: 80px;
    height: 80px;
  }
  .mp-hu-body .user-name {
    margin-bottom: calc(10px - (((18px * 1.5) - 18px) / 2));
    font-size: 1.125rem;
  }
  .mp-hu-body #period-wrap {
    margin: 0 0 20px;
  }
  .mp-hu-body .total-list {
    font-size: 0.8125rem;
  }
  .mp-hu-body .total-item {
    margin: 0 0 10px;
    padding: 0 0 10px;
  }
  .mp-hu-body .total-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .mp-hu-body .grandtotal {
    font-size: 0.875rem;
  }
  .mp-hu-body .grandtotal .total-price {
    font-size: 0.875rem;
  }
}
/*
[mp-hu-status]
******************************************/
.mp-hu-status {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 5px;
  font-size: 1.125rem;
  font-weight: bold;
}

.mp-hu-status-red {
  background: #fff6f5;
  color: #f33313;
}

.mp-hu-status-blue {
  background: #eef8fa;
  color: #55c6da;
}

.mp-hu-status-green {
  background: #f6f9f1;
  color: #88d500;
}

.mp-hu-status-gray {
  background: #b4b4b4;
  color: #fff;
}

@media (max-width: 576px) {
  .mp-hu-status {
    height: 50px;
    font-size: 1rem;
  }
}
/*
[mp-share-review]
******************************************/
.mp-hu-review {
  margin: 0 0 20px;
}

.mp-hu-review-header {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
}
.mp-hu-review-header .rating-star-wrap {
  height: 30px;
}
.mp-hu-review-header .rating-text {
  font-size: 1.25rem;
}

.mp-hu-review-title {
  margin: 0 20px 0 0;
  font-weight: bold;
}

.mp-hu-review-text {
  margin-bottom: calc(15px - (((14px * 1.5) - 14px) / 2));
  font-size: 0.875rem;
}

@media (max-width: 576px) {
  .mp-hu-review-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .mp-hu-review-title {
    margin-bottom: calc(15px - (((1rem * 1.5) - 1rem) / 2));
    margin-right: 0;
  }
}
/*
[mp-share-request]
******************************************/
#modal-cancel-inner {
  margin: 0 0 30px;
  padding: 30px 0;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}
#modal-cancel-inner:last-child {
  margin-bottom: 0;
}
#modal-cancel-inner .modal-body-title {
  display: block;
}
#modal-cancel-inner .modal-body-title span {
  font-size: 0.8125rem;
  font-weight: normal;
  color: #f33313;
}
#modal-cancel-inner .form-check-unit {
  margin: 0 0 0 15px;
}

.modal-cancel-text {
  margin-bottom: calc(30px - (((15px * 1.5) - 15px) / 2));
  font-size: 0.9375rem;
}

.modal-cancel-item {
  margin: 0 0 25px;
  padding: 0 5px;
}
.modal-cancel-item:last-child {
  margin-bottom: 0;
}
.modal-cancel-item .modal-title {
  font-size: 0.875rem;
}
.modal-cancel-item .modal-cancel-text {
  font-size: 0.8125rem;
}

@media (max-width: 576px) {
  #modal-cancel-inner {
    margin: 0 0 20px;
    padding: 20px 0;
  }
  #modal-cancel-inner .form-check-unit {
    margin: 0 0 0 10px;
  }

  .modal-cancel-text {
    margin-bottom: calc(20px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
  }

  .modal-cancel-item {
    padding: 0;
  }
}
/*
[mp-ride-payment]
******************************************/
.request-payment-item {
  margin: 0 0 25px;
}
.request-payment-item:last-child {
  margin-bottom: 0;
}

#mp-payment #mp-main {
  width: 100%;
}
#mp-payment #mp-common {
  display: none;
}

.payment-inner {
  margin: 0 0 30px;
  border: 1px solid #d8d8d8;
}

.payment-header {
  padding: 15px;
  background: #f7f7f7;
}

.payment-title {
  font-size: 1rem;
}

.payment-unit {
  border-bottom: 1px solid #d8d8d8;
}
.payment-unit:last-child {
  border-bottom: none;
}

.payment-item {
  padding: 20px 35px;
  border-bottom: 1px dashed #d8d8d8;
}
.payment-item:last-child {
  border-bottom: none;
}

.payment-column {
  display: flex;
  flex-wrap: wrap;
}

.payment-column-label {
  width: 7em;
  margin: 0 25px 0 0;
}

.payment-column-item {
  flex: 1 0 auto;
  width: 1%;
}

.payment-profit {
  display: flex;
  align-items: center;
  margin-bottom: calc(15px - (((1rem * 1.5) - 1rem) / 2));
}
.payment-profit span {
  margin: 0 0 0 20px;
  font-weight: bold;
}

.payment-profit-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.payment-profit-pay .form-check-item {
  margin: 0 20px 0 0;
}
.payment-profit-pay .input-group {
  width: 250px;
}
.payment-profit-pay .form-radio-item {
  margin: 0 30px 0 0;
}

.payment-option-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
}
.payment-option-unit .form-check-label {
  font-weight: bold;
}

.payment-option-text {
  margin: 0 0 0 40px;
  font-size: 0.875rem;
}

.payment-coupon .payment-column {
  align-items: center;
}
.payment-coupon .payment-column-item {
  width: 100%;
  max-width: 400px;
}

.payment-price-unit {
  display: flex;
  justify-content: space-between;
}

.payment-price-photo {
  flex: 0 0 auto;
  width: 100%;
  max-width: 325px;
  margin: 0 25px 0 0;
  font-size: 0.875rem;
  font-weight: bold;
  overflow: hidden;
}
.payment-price-photo img {
  border-radius: 5px;
}

.payment-price-unit {
  flex-wrap: wrap;
}

.payment-price-item {
  flex: 1 0 auto;
  width: 1%;
}
.payment-price-item .total-list {
  margin: 0 0 30px;
}
.payment-price-item .total-list:last-child {
  margin-bottom: 0;
}
.payment-price-item .grandtotal .total-price {
  font-size: 1rem;
}

@media (max-width: 576px) {
  #mp-payment #mp-common {
    display: block;
  }

  .payment-wrap {
    font-size: 0.875rem;
  }
  .payment-wrap .btn-list {
    flex-direction: column;
  }
  .payment-wrap .btn-list-item {
    width: 100%;
    margin: 0 0 10px;
  }
  .payment-wrap .btn-list-item:last-child {
    margin-bottom: 0;
  }
  .payment-wrap .btn {
    width: 100%;
  }

  .payment-inner {
    margin: 0 0 20px;
  }

  .payment-title {
    font-size: 0.875rem;
  }

  .payment-item {
    padding: 15px;
  }

  .payment-column-label {
    width: 100%;
    margin: 0 0 10px;
  }

  .payment-profit-pay .form-check-item {
    margin: 0 0 5px;
  }
  .payment-profit-pay .input-group {
    width: 100%;
    margin: 0 0 0 40px;
  }

  .payment-option-unit {
    margin: 0 0 5px;
  }

  .payment-option-text {
    font-size: 0.8125rem;
  }

  .payment-price-photo {
    margin: 0 0 20px;
    flex: 100%;
    max-width: 100%;
  }

  .payment-price-item .total-list {
    margin: 0 0 20px;
  }
  .payment-price-item .total-item {
    margin: 0 0 10px;
    padding: 0 0 10px;
  }
  .payment-price-item .total-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .payment-price-item .grandtotal .total-price {
    font-size: 0.875rem;
  }
}
#payment-finish-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 80px 0;
  border: 1px solid #d8d8d8;
}
#payment-finish-wrap .btn-list-item {
  width: 250px;
}

.payment-finish-text {
  margin: 0 0 60px;
  text-align: center;
  font-size: 1.4375rem;
}

@media (max-width: 576px) {
  #payment-finish-wrap {
    padding: 80px 15px;
  }
  #payment-finish-wrap .btn-list {
    flex-wrap: wrap;
    width: 100%;
  }
  #payment-finish-wrap .btn-list-item {
    width: 100%;
    margin: 0 0 10px;
  }
  #payment-finish-wrap .btn-list-item:last-child {
    margin-bottom: 0;
  }
  #payment-finish-wrap .btn {
    width: 100%;
  }

  .payment-finish-text {
    text-align: left;
  }
}
/*
[mp-ride-review]
******************************************/
.mp-review-text {
  margin-bottom: calc(15px - (((14px * 1.5) - 14px) / 2));
  padding: 0 5px;
  font-size: 0.875rem;
}

.modal-review-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 30px;
  padding: 0 20px;
}

.modal-review-label {
  width: 9em;
  margin: 0 15px 0 0;
}

@media (max-width: 576px) {
  .mp-review-text {
    margin-bottom: calc(15px - (((13px * 1.5) - 13px) / 2));
    padding: 0;
    font-size: 0.8125rem;
  }

  .modal-review-item {
    flex-wrap: wrap;
    justify-content: center;
  }

  .modal-review-label {
    width: 100%;
    margin-bottom: calc(15px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
    text-align: center;
  }
}
/******************************************
[mypage-chat]
******************************************/
#chat-list-wrap.mp-list-wrap {
  margin: 0 0 10px;
  border-bottom: 1px solid #e1e1e1;
}
#chat-list-wrap .mp-list-table tbody th:first-child, #chat-list-wrap .mp-list-table tbody td:first-child {
  border-left: none;
}
#chat-list-wrap .mp-list-table tbody th:last-child, #chat-list-wrap .mp-list-table tbody td:last-child {
  border-right: none;
}
#chat-list-wrap .mp-list-table tbody th {
  padding: 0 35px;
}
#chat-list-wrap .mp-list-table tbody td {
  padding: 15px 20px 15px 30px;
  text-align: left;
}

.cf:after {
  content: "";
  clear: both;
  display: block;
}

.chat-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-list-item .user-unit {
  display: block;
  width: 100%;
}
.chat-list-item .user-item {
  margin: 0;
}
.chat-list-item .user-avatar, .chat-list-item .user-name {
  float: left;
}
.chat-list-item .user-avatar {
  margin: 0 20px 0 0;
}
.chat-list-item .user-name {
  width: calc(100% - 100px);
  margin: 5px 0 15px;
  font-size: 1rem;
  line-height: 1;
}

.chat-list-detail {
  margin: 0 0 10px;
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1;
}
.chat-list-detail:last-child {
  margin-bottom: 0;
}
.chat-list-detail .mp-bike-name {
  margin: 0 0 10px;
}
.chat-list-detail .mp-bike-name:last-child {
  margin-bottom: 0;
}

.chat-list-unread {
  background: #fef5f3;
}

.chat-btn {
  width: 530px;
  margin: 0 auto;
}

.chat-list-status {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 20px;
  font-size: 0.6875rem;
  color: #fff;
}
.chat-list-status.btn-history-gray {
  color: #44483e;
}

@media (min-width: 769px) {
  .mp-list-table tr[data-href].chat-list-unread:hover {
    background: #fde9ef;
  }
}
@media (max-width: 576px) {
  #chat-list-wrap.mp-list-wrap {
    overflow-x: visible;
  }
  #chat-list-wrap .mp-list-table {
    table-layout: fixed;
  }
  #chat-list-wrap .mp-list-table .cell-fixed {
    width: 75px;
  }
  #chat-list-wrap .mp-list-table tbody th {
    padding: 0 15px;
  }
  #chat-list-wrap .mp-list-table tbody td {
    padding: 15px;
  }

  .chat-list-item .user-unit {
    display: flex;
    flex-wrap: wrap;
  }
  .chat-list-item .user-item {
    margin: 0 0 10px;
  }
  .chat-list-item .user-avatar {
    width: 50px;
    height: 50px;
    margin: 0 15px 0 0;
  }
  .chat-list-item .user-name {
    width: 100%;
    margin: 0;
    font-size: 0.875rem;
  }
  .chat-list-item .badge {
    position: absolute;
    top: -5px;
    right: -5px;
  }

  .chat-list-detail {
    width: 100%;
    font-size: 0.8125rem;
  }

  .chat-btn {
    width: 100%;
    padding: 0 10px;
  }
  .chat-btn .btn {
    height: 45px;
  }
}
/******************************************
[mypage-chat-room]
******************************************/
#chat-inner {
  border: 1px solid #d8d8d8;
}

@media (max-width: 576px) {
  #chat #page-header {
    display: none;
    height: 0;
    padding: 0;
  }
  #chat > .inner {
    padding: 0;
  }

  #chat-wrap {
    margin: 0;
  }

  #chat-inner {
    margin: 0;
    border: none;
  }
}
/*
[chat-header]
******************************************/
#chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #d8d8d8;
}

#chat-header-btn {
  position: absolute;
  top: 0;
  left: 0;
}

.chat-header-item .user-name {
  font-size: 1.25rem;
  color: #44483e;
}

.chat-header-detail {
  font-family: "Montserrat", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "Yu Gothic", meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.125rem;
  text-align: right;
}
.chat-header-detail .mp-bike-name {
  margin: 0 0 10px;
}

@media (max-width: 576px) {
  #chat-header {
    flex-direction: column;
    padding: 10px 0;
  }

  .chat-header-item {
    margin: 0 0 10px;
  }
  .chat-header-item:last-child {
    margin-bottom: 0;
  }
  .chat-header-item .user-avatar {
    width: 40px;
    height: 40px;
  }
  .chat-header-item .user-name {
    font-size: 1rem;
  }

  .chat-header-detail {
    font-size: 0.8125rem;
    text-align: center;
  }
  .chat-header-detail .mp-bike-name {
    margin: 0 0 5px;
  }

  #chat-header-btn {
    display: block;
    height: 100%;
    padding: 0 15px;
  }
  #chat-header-btn .arrow {
    transform: scale(-1, 1);
  }
}
/*
[chat-body]
******************************************/
#chat-body {
  padding: 20px 20px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#chat-body-inner {
  margin: 0 0 25px;
  padding: 0 10px;
}

.chat-unit {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px dashed #d8d8d8;
}
.chat-unit:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.chat-date {
  margin-bottom: calc(20px - (((12px * 1.5) - 12px) / 2));
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
}

.chat-item {
  display: flex;
  align-items: flex-end;
  margin: 0 0 20px;
}
.chat-item:last-child {
  margin-bottom: 0;
}

.chat-balloon {
  display: flex;
  align-items: flex-start;
}

.chat-balloon-inner {
  max-width: 625px;
  padding: 20px;
  border-radius: 15px;
}

.chat-status {
  max-width: 625px;
  padding: 20px;
  border-radius: 15px;
  font-weight: bold;
}

.chat-time {
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
}

.chat-owner .chat-balloon:before {
  content: "";
  width: 0;
  height: 0;
  margin: 12px 0 0;
  border-style: solid;
  border-width: 5px 10px 5px 0;
  border-color: transparent #f0f0f0 transparent transparent;
}
.chat-owner .chat-balloon .chat-balloon-inner {
  background: #f0f0f0;
}
.chat-owner .chat-status {
  margin: 0 0 0 10px;
  background: #c7c7c7;
}
.chat-owner .chat-time {
  margin: 0 0 0 10px;
}

.chat-customer.chat-item {
  justify-content: flex-end;
}
.chat-customer .chat-balloon:after {
  content: "";
  width: 0;
  height: 0;
  margin: 12px 0 0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #e2f2c5;
}
.chat-customer .chat-balloon-inner {
  background: #e2f2c5;
}
.chat-customer .chat-status {
  margin: 0 10px 0 0;
  background: #8dd908;
}
.chat-customer .chat-time {
  order: -1;
  margin: 0 10px 0 0;
}

#chat-body-footer {
  bottom: 0;
  margin: 0 0 20px;
}
#chat-body-footer:last-child {
  margin-bottom: 0;
}
#chat-body-footer .report {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#chat-body-footer .translate {
  font-size: 0.875rem;
  text-align: center;
}

#chat-back {
  margin: 15px 0 20px;
}

@media (max-width: 576px) {
  #chat-body {
    padding: 10px 0;
  }

  #chat-body-inner {
    padding: 0;
    overflow-x: hidden;
  }

  .chat-date {
    margin-bottom: calc(15px - (((12px * 1.5) - 12px) / 2));
  }

  .chat-item {
    margin: 0 0 10px;
  }

  .chat-status, .chat-balloon-inner {
    padding: 15px;
    font-size: 0.875rem;
  }

  .chat-owner {
    padding: 0 5px 0 0;
  }
  .chat-owner .chat-time {
    margin: 0 0 0 5px;
  }

  .chat-customer {
    padding: 0 0 0 5px;
  }
  .chat-customer .chat-time {
    margin: 0 5px 0 0;
  }

  #chat-body-footer {
    padding: 0 15px;
  }
  #chat-body-footer .report {
    position: relative;
    top: auto;
    left: auto;
    transform: translateY(0);
  }
  #chat-body-footer .translate {
    margin-bottom: calc(15px - (((12px * 1.5) - 12px) / 2));
  }
  #chat-body-footer .translate:last-child {
    margin-bottom: 0;
  }

  #chat-back {
    height: 0;
    margin: 0;
  }
}
/*
[chat-footer]
******************************************/
#chat-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #eef0ec;
  border-top: 1px solid #d7d9d3;
}

.chat-footer-unit {
  padding: 15px 0;
}

#chat-footer-inner {
  display: flex;
  align-items: flex-end;
  padding: 5px 5px 5px 0;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #d8d8d8;
}

#chat-input {
  flex: 1 0 auto;
  align-self: center;
  height: calc(14px * 1.5);
  padding: 0 15px;
  font-size: 0.875rem;
  resize: none;
}

#chat-submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 36px;
  background: #88d500;
  border-radius: 3px;
  color: #fff;
}

.chat-file {
  display: none;
}
.chat-file-icon {
  display: block;
  width: 22px;
  height: 22px;
}
.chat-file-icon:before, .chat-file-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: #88d500;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: .3s;
}
.chat-file-icon:before {
  width: 22px;
  height: 4px;
}
.chat-file-icon:after {
  width: 4px;
  height: 22px;
}
.chat-file-unit {
  display: flex;
  width: 100%;
  border-top: 1px solid #d7d9d3;
}
.chat-file-trigger {
  margin: 0 10px 0 0;
}
.chat-file-trigger.is-open .chat-file-icon:before {
  transform: rotate(180deg) translate(50%, 50%);
}
.chat-file-trigger.is-open .chat-file-icon:after {
  opacity: 0;
}
.chat-file-item {
  flex: 1 0 auto;
  width: 1%;
  height: 75px;
}
.chat-file-input {
  display: none;
}
.chat-file-upload {
  display: block;
  height: 100%;
}
.chat-file-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 15px 0;
  font-size: 0.625rem;
  color: #44483e;
  line-height: 1;
}

@media (max-width: 576px) {
  #chat-wrap {
    transition: .3s;
  }

  #chat-footer .inner {
    padding: 0;
  }

  .chat-footer-unit {
    display: flex;
    align-items: center;
    padding: 5px 10px;
  }
  .chat-footer-unit #chat-footer-inner {
    flex: 1 0 auto;
  }
}
/*
[chatMap]
******************************************/
.chatMap {
  height: 100%;
}
.chatMap-footer {
  position: fixed;
  bottom: 0;
  list-style-position: outside;
  display: flex;
  width: 100%;
  height: 65px;
  padding: 10px;
  border-top: 1px solid #e7e7e7;
  z-index: 1;
}
.chatMap-footer-item {
  flex: 1 0 auto;
  width: 1%;
  margin: 0 10px 0 0;
}
.chatMap-footer-item:last-child {
  margin-right: 0;
}
.chatMap-footer .btn {
  width: 100%;
  height: 100%;
}

#chatMap-map {
  width: 100%;
  height: calc(100% - 65px);
}

/******************************************
[mypage-spot]
******************************************/
.mp-spot-item {
  margin: 0 0 15px;
}
.mp-spot-item:last-child {
  margin-bottom: 0;
}

.mp-spot-head {
  margin-bottom: calc(10px - (((1rem * 1.5) - 1rem) / 2));
  font-weight: bold;
}

#mp-spot-map {
  width: 100%;
  max-width: 500px;
  height: 280px;
}

@media (max-width: 576px) {
  .mp-spot-btn.btn-list {
    flex-wrap: wrap;
  }
  .mp-spot-btn .btn-list-item {
    flex: 1 0 auto;
    width: 100%;
    margin: 0 0 15px;
  }
  .mp-spot-btn .btn-list-item:last-child {
    margin-bottom: 0;
  }
  .mp-spot-btn .btn {
    width: 100%;
  }
}
/******************************************
[mypage-mybike]
******************************************/
#mybike-list-wrap.mp-list-wrap {
  margin: 0 0 30px;
  border-bottom: 1px solid #e1e1e1;
}
#mybike-list-wrap .mp-list-table tbody th:first-child, #mybike-list-wrap .mp-list-table tbody td:first-child {
  border-left: none;
}
#mybike-list-wrap .mp-list-table tbody th:last-child, #mybike-list-wrap .mp-list-table tbody td:last-child {
  border-right: none;
}
#mybike-list-wrap .mp-list-table tbody th {
  padding: 0 25px;
  white-space: nowrap;
}
#mybike-list-wrap .mp-list-table tbody td {
  padding: 15px;
  text-align: left;
}

.mybike-list-unit {
  display: flex;
  justify-content: space-between;
}

.mybike-list-item {
  display: flex;
  align-items: center;
}

.mybike-list-photo {
  flex: 0 0 auto;
  width: 120px;
  margin: 0 15px 0 0;
  line-height: 1;
}

.mybike-list-detail .mp-bike-name {
  margin: 0 0 15px;
}

.btn-mybike-unavailable {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  padding: 0 20px;
  border-radius: 3px;
  background: #5a6942;
  color: #fff;
  font-size: 0.875rem;
  z-index: 10;
}
.btn-mybike-unavailable .icon {
  margin: 0 10px 0 0;
}

.mybike-list-status {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 40px;
  background: #b6b6b6;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #fff;
}
.mybike-list-status.is-active {
  background: #88d500;
}

@media (min-width: 769px) {
  .btn-mybike-unavailable:hover {
    background: #799053;
  }
}
@media (max-width: 576px) {
  #mybike-list-wrap .mp-list-table tbody td {
    padding: 15px 0 15px 15px;
  }

  .mybike-list-item {
    flex-wrap: wrap;
  }

  .mybike-list-photo {
    width: 100%;
    margin: 0 0 15px;
  }

  .btn-mybike-unavailable {
    width: 100%;
    padding: 0;
    font-size: 0.75rem;
  }

  .mybike-list-status {
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
    height: 30px;
    font-size: 0.8125rem;
  }
}
@media (max-width: 320px) {
  #mybike-list-wrap .mp-list-table tbody th {
    padding: 0 5px;
    white-space: nowrap;
  }
}
/*
[mybike-entry]
******************************************/
#mybike-entry-wrap .bike-check-unit {
  max-width: 95px;
}
#mybike-entry-wrap .bike-check-cont {
  height: 85px;
  padding: 10px 0;
}
#mybike-entry-wrap .bike-check-cont .icon {
  height: 42px;
}
#mybike-entry-wrap .bike-check-cont .icon:before {
  transform: scale(0.8);
}
#mybike-entry-wrap .bike-check-cont .icon-rear:before {
  transform: scale(1);
}
#mybike-entry-wrap .bike-check-light {
  padding: 10px 0 8px 0;
}
#mybike-entry-wrap .btn-list {
  margin: 0 0 20px;
}
#mybike-entry-wrap .btn-list:last-child {
  margin-bottom: 0;
}
#mybike-entry-wrap .btn-gray2 {
  border-top: none;
}

.mybike-entry-price-item {
  margin: 0 0 15px;
}
.mybike-entry-price-item:last-child {
  margin-bottom: 0;
}
.mybike-entry-price-item .input-group {
  width: 230px;
}
.mybike-entry-price-item .form-help {
  margin: 5px 0 0;
}

.mybike-entry-repletion {
  margin: 20px 0 40px;
  padding: 25px;
  border-radius: 5px;
  border: 2px solid #88d500;
}

.mybike-entry-repletion-title {
  margin-bottom: calc(15px - (((18px * 1.5) - 18px) / 2));
  font-size: 1.125rem;
  font-weight: bold;
}

.mybike-entry-repletion-text {
  font-size: 0.875rem;
}

.appointment-item {
  margin: 0 0 15px;
}
.appointment-item:last-child {
  margin-bottom: 0;
}

.appointment-head {
  margin-bottom: calc(10px - (((14px * 1.5) - 14px) / 2));
  font-weight: bold;
}

.appointment-map {
  width: 100%;
  height: 280px;
}

@media (min-width: 769px) {
  #mybike-new-wrap .bike-check-item:hover .bike-check-cont:before {
    border: 3px solid #88d500;
  }
}
@media (max-width: 576px) {
  #mybike-entry-wrap .bike-check-unit {
    flex: 0 1 auto;
    width: 25%;
  }
  #mybike-entry-wrap .bike-check-cont {
    height: 100%;
    padding: 0;
    font-size: 0.6875rem;
  }
  #mybike-entry-wrap .bike-check-cont .icon {
    height: 35px;
    margin: 0 0 10px;
  }
  #mybike-entry-wrap .bike-check-cont .icon:before {
    transform: scale(0.7);
  }
  #mybike-entry-wrap .bike-check-cont .icon-light {
    margin: 0 0 3px;
  }
  #mybike-entry-wrap .bike-check-cont .icon-rear:before {
    transform: scale(1);
  }
  #mybike-entry-wrap .btn-list {
    margin: 0 0 10px;
  }
  #mybike-entry-wrap .btn-list:last-child {
    margin-bottom: 0;
  }

  .mybike-entry-repletion {
    padding: 15px;
  }

  .appointment-unit {
    margin: 0 -15px;
    padding: 0 15px 20px;
    border-bottom: 1px solid #d4d4d4;
  }
}
@media (max-width: 320px) {
  #mybike-entry-wrap .bike-check-cont {
    height: 100%;
    font-size: 0.625rem;
  }
  #mybike-entry-wrap .bike-check-cont .icon {
    flex: 0 0 auto;
    height: 30px;
    margin: 0 0 5px;
  }
  #mybike-entry-wrap .bike-check-cont .icon:before {
    transform: scale(0.55);
  }
  #mybike-entry-wrap .bike-check-cont .icon-light {
    margin: 0;
  }
  #mybike-entry-wrap .bike-check-cont .icon-rear:before {
    transform: scale(0.7);
  }
}
/*
[mybike-calendar]
******************************************/
#mp-calendar #mp-main {
  width: 100%;
}
#mp-calendar #mp-common {
  display: none;
}

#mp-calendar-wrap .calendar-item {
  width: 100%;
}
#mp-calendar-wrap .calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 25px;
}
#mp-calendar-wrap .calendar {
  width: 100%;
}
#mp-calendar-wrap .calendar th {
  font-size: 0.875rem;
}
#mp-calendar-wrap .calendar td {
  padding: 35px 0;
  font-size: 1.625rem;
  line-height: 1;
}
#mp-calendar-wrap .calendar td.is-active {
  background: #f8fdf2;
}
#mp-calendar-wrap .calendar td.is-unavailable {
  background: #f33313;
  color: #fff;
}
#mp-calendar-wrap .calendar td:hover:not(:empty) {
  cursor: pointer;
}
#mp-calendar-wrap .calendar td:hover:not(:empty):not(.is-unavailable) {
  background: #f8fdf2;
}

.btn-mp-calendar {
  width: 32px;
  height: 32px;
  border: 1px solid #d8d8d8;
  transition: .3s;
}

.btn-mp-calendar-prev .arrow {
  transform: scale(-1, 1);
}

.mp-calendar-title {
  margin: 0 50px;
  font-size: 1.375rem;
}

.mp-calendar-tip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
  width: 290px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.mp-calendar-tip:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  display: block;
  width: 18px;
  height: 18px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.mp-calendar-tip-inner {
  padding: 20px;
  background: #fff;
}
.mp-calendar-tip-inner .form-radio-list {
  margin: 0 0 15px;
  font-size: 0.875rem;
}
.mp-calendar-tip-inner .btn-group-item {
  margin: 0 0 15px;
}
.mp-calendar-tip-inner .btn-group-item:last-child {
  margin-bottom: 0;
}
.mp-calendar-tip-inner .btn {
  width: 100%;
  height: 45px;
  font-size: 1rem;
}

@media (min-width: 769px) {
  .btn-mp-calendar:hover {
    background: #f5f5f5;
  }
}
@media (max-width: 576px) {
  #mp-calendar #mp-common {
    display: block;
  }

  #mp-calendar-wrap .calendar th {
    font-size: 0.8125rem;
  }
  #mp-calendar-wrap .calendar td {
    padding: 15px 0;
    font-size: 1.125rem;
  }

  .mp-calendar-text {
    margin-bottom: calc(30px - (((13px * 1.5) - 13px) / 2));
    font-size: 0.8125rem;
  }

  .mp-calendar-title {
    margin: 0 20px;
    font-size: 1rem;
  }

  .mp-calendar-tip {
    transform: translate(-50%, 12px);
  }
}
/******************************************
[mypage-sales]
******************************************/
#mp-sales-wrap .mp-list-table {
  margin: 0 0 15px;
  border-bottom: 1px solid #e1e1e1;
}
#mp-sales-wrap .mp-list-table td {
  white-space: nowrap;
}

.mp-sales-item {
  margin: 0 0 30px;
}
.mp-sales-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  #mp-sales-wrap .mp-list-wrap {
    border-bottom: none;
  }
  #mp-sales-wrap .mp-list-table {
    margin: 0;
    font-size: 0.8125rem;
  }

  .mp-sales-item {
    margin: 0 0 20px;
  }
}
/*
[mp-sales-head]
******************************************/
#mp-sales-head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  border: 1px solid #e1e1e1;
  line-height: 1;
}

#mp-sales-head-title {
  margin: 0 20px 0 0;
  font-size: 1.125rem;
}

#mp-sales-head-number {
  display: flex;
  align-items: baseline;
  font-family: "Montserrat", sans-serif;
  font-size: 3.125rem;
  font-weight: 600;
}
#mp-sales-head-number span {
  margin: 0 0 0 10px;
  font-size: 1.875rem;
}

@media (max-width: 576px) {
  #mp-sales-head {
    flex-direction: column;
    height: 100px;
  }

  #mp-sales-head-title, #mp-sales-head-number {
    width: 100%;
    text-align: center;
  }

  #mp-sales-head-title {
    margin: 0 0 10px;
    font-size: 1rem;
  }

  #mp-sales-head-number {
    justify-content: center;
    font-size: 2.5rem;
  }
}
/*
[mp-sales-attention]
******************************************/
#mp-sales-attention {
  padding: 30px;
}

#mp-sales-attention-title {
  margin-bottom: calc(20px - (((20px * 1.5) - 20px) / 2));
  font-size: 1.25rem;
  font-weight: bold;
}

#mp-sales-attention-list {
  margin: 0 0 30px 15px;
  font-size: 0.875rem;
}

.mp-sales-attention-item {
  margin-bottom: calc(15px - (((14px * 1.5) - 14px) / 2));
  padding: 0 0 0 15px;
  text-indent: -15px;
}
.mp-sales-attention-item:last-child {
  margin-bottom: 0;
}
.mp-sales-attention-item:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px 0 0;
  background: #88d500;
  border-radius: 50%;
}

@media (max-width: 576px) {
  #mp-sales-attention {
    padding: 20px;
  }

  #mp-sales-attention-title {
    margin-bottom: calc(15px - (((18px * 1.5) - 18px) / 2));
    font-size: 1.125rem;
  }

  #mp-sales-attention-list {
    margin: 0 0 15px;
  }
}
/******************************************
[mypage-main]
******************************************/
.mp-help-unit {
  margin: 0 0 40px;
}
.mp-help-unit:last-child {
  margin-bottom: 0;
}

.mp-help-item {
  border: 1px solid #e1e1e1;
}

.mp-help-text {
  margin-bottom: calc(20px - (((1rem * 1.5) - 1rem) / 2));
}
.mp-help-text:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .mp-help-unit {
    margin: 0 0 20px;
  }
}
/*
[mp-help-select]
******************************************/
#mp-help-select {
  padding: 25px 0 20px;
  text-align: center;
}

#mp-help-select-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 15px;
}

.mp-help-select-item {
  margin: 0 30px 0 0;
}
.mp-help-select-item:last-child {
  margin-right: 0;
}

.btn-help-select {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 10px solid #f2f3f4;
  font-size: 2.1875rem;
  font-weight: bold;
  transition: .3s;
}
.btn-help-select:before {
  content: "\25B6";
  font-size: 1.3125rem;
}

.btn-help-select-red {
  color: #f33313;
}

.btn-help-select-sky {
  color: #14b9d1;
}

.btn-help-select-blue {
  color: #0771d1;
}

@media (min-width: 769px) {
  .btn-help-select-red:hover {
    border-color: #f33313;
  }

  .btn-help-select-sky:hover {
    border-color: #14b9d1;
  }

  .btn-help-select-blue:hover {
    border-color: #0771d1;
  }
}
@media (max-width: 576px) {
  .mp-help-select-item {
    margin: 0 10px;
  }

  .btn-help-select {
    width: 125px;
    height: 125px;
    border-width: 7px;
    font-size: 1.875rem;
  }
  .btn-help-select:before {
    font-size: 1rem;
  }
}
/*
[mp-help-inquiry]
******************************************/
#mp-help-inquiry {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 35px 0;
}

#mp-help-inquiry-link {
  font-size: 1.1875rem;
  font-weight: bold;
  color: #44483e;
}
#mp-help-inquiry-link .icon {
  width: 48px;
  height: 48px;
  margin: 0 20px 0 0;
  background: #f2f3f4;
  border-radius: 50%;
}

@media (max-width: 576px) {
  #mp-help-inquiry {
    padding: 15px 0;
  }

  #mp-help-inquiry-link {
    font-size: 1rem;
  }
  #mp-help-inquiry-link .icon {
    margin: 0 15px 0 0;
  }
}
/*
[mp-help-emergency]
******************************************/
#mp-help-emergency {
  border-radius: 5px;
  border: 3px solid #f33313;
  text-align: center;
}

#mp-help-emergency-header {
  padding: 15px 0;
  background: #f33313;
  font-size: 1.1875rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

#mp-help-emergency-body {
  padding: 25px 0;
}

#mp-help-emergency-tel {
  justify-content: center;
  margin: 0 0 15px;
  font-family: "Roboto", sans-serif;
  font-size: 2.8125rem;
  font-weight: 600;
  line-height: 1;
  color: #44483e;
}
#mp-help-emergency-tel .icon {
  margin: 0 10px 0 0;
}

.mp-help-emergency-text {
  font-size: 0.875rem;
}

@media (max-width: 576px) {
  #mp-help-emergency-header {
    padding: 10px 0;
    font-size: 1rem;
  }

  #mp-help-emergency-body {
    padding: 15px 30px;
  }

  #mp-help-emergency-tel {
    font-size: 2.0625rem;
  }
  #mp-help-emergency-tel .icon {
    margin: 0 10px 0 0;
  }
  #mp-help-emergency-tel .icon:before {
    width: 30px;
    height: 30px;
  }

  .mp-help-emergency-text {
    font-size: 0.8125rem;
  }
}
/*
[mp-help-map]
******************************************/
.mp-help-map-unit {
  margin: 0 0 20px;
}
.mp-help-map-unit:last-child {
  margin-bottom: 0;
}

#mp-help-map {
  width: 100%;
  height: 575px;
}

@media (max-width: 576px) {
  .mp-help-map-unit {
    margin: 0 0 15px;
  }

  #mp-help-map-wrap {
    margin-right: -15px;
    margin-left: -15px;
  }

  #mp-help-map {
    height: 375px;
  }
}
#mp-help-chat-user .user-avatar {
  border: 1px solid #d0d0d0;
}

/*
[mp-help-rs]
******************************************/
#mp-rs {
  padding: 25px 20px;
}

.mp-rs-headline {
  margin-bottom: calc(15px - (((18px * 1.5) - 18px) / 2));
  font-size: 1.125rem;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.mp-rs-description {
  margin: 0 0 20px;
  font-size: 0.875rem;
}

.mp-rs-title {
  display: block;
  width: 160px;
  height: 26px;
  margin: 0 auto 15px;
  background: #88d500;
  border-radius: 13px;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 26px;
  text-align: center;
  color: #fff;
}

.mp-rs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.mp-rs-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 50px 0 0;
}

.mp-rs-item:last-child {
  margin-right: 0;
}

.mp-rs-item01 .mp-rs-icon {
  align-items: center;
  width: 111px;
}

.mp-rs-item02 .mp-rs-icon {
  width: 84px;
  padding: 0 0 10px;
}

.mp-rs-item03 .mp-rs-icon {
  width: 113px;
  padding: 0 0 5px;
}

.mp-rs-item04 .mp-rs-icon {
  align-items: center;
  width: 71px;
}

.mp-rs-icon {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-end;
  margin: 0 auto;
}

.mp-rs-text {
  font-size: 0.8125rem;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 576px) {
  #mp-rs-wrap .headline-wrap {
    margin: 0 0 10px;
  }

  #mp-rs-wrap .mp-help-text {
    font-size: 0.875rem;
  }

  #mp-rs {
    padding: 20px 15px;
  }

  .mp-rs-headline {
    margin-bottom: calc(15px - (((16px * 1.5) - 16px) / 2));
    font-size: 1rem;
  }

  .mp-rs-title {
    width: 140px;
    height: 22px;
    margin: 0 auto 10px;
    border-radius: 11px;
    font-size: 0.8125rem;
    line-height: 22px;
  }

  .mp-rs-list {
    margin: -15px 0 0;
  }

  .mp-rs-item {
    width: 50%;
    margin: 15px 0 0;
  }

  .mp-rs-item01 .mp-rs-icon {
    width: 92px;
  }

  .mp-rs-item02 .mp-rs-icon {
    width: 71px;
  }

  .mp-rs-item03 .mp-rs-icon {
    width: 93px;
  }

  .mp-rs-item04 .mp-rs-icon {
    width: 60px;
  }
}
/******************************************
[search]
******************************************/
#search-wrap {
  display: flex;
}

.search-item {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.search-header-item {
  display: flex;
  align-items: center;
}

.search-hedaer-btn {
  display: flex;
  align-items: center;
  border: 1px solid #cdcdcd;
}

#search-body {
  overflow-y: scroll;
}
#search-body #page-header {
  padding: 20px 20px 0;
  border-bottom: 1px solid #d8d8d8;
}
#search-body #page-title {
  margin-bottom: calc(20px - (((26px * 1.5) - 26px) / 2));
}

#search-body-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#search-body-header .search-header-num {
  margin: 0 20px 0 0;
  font-size: 0.875rem;
}
#search-body-header .search-hedaer-btn {
  justify-content: space-between;
  width: 150px;
  height: 40px;
  padding: 0 10px;
  border-radius: 3px 3px 0 0;
  border-bottom: none;
  font-size: 0.9375rem;
}
#search-body-header .search-hedaer-btn .icon {
  margin: 0 10px 0 0;
}
#search-body-header .search-hedaer-btn .arrow {
  transform: rotate(0);
  transition: .3s;
}
#search-body-header .search-hedaer-btn .arrow:before {
  width: 16px;
  height: 8px;
}
#search-body-header .search-hedaer-btn.is-open .arrow {
  transform: rotate(-180deg);
}
#search-body-header .search-hedaer-btn-inner {
  display: flex;
  align-items: center;
}

.search-refine {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1;
}
.search-refine .refine-item {
  margin: 0 0 10px;
}

@media (max-width: 576px) {
  #search-wrap {
    flex-wrap: wrap;
  }

  #search-header {
    width: 100%;
    padding: 15px 0;
  }
  #search-header .search-header-unit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 10px;
  }
  #search-header .search-header-num {
    margin: 0 10px 0 0;
    font-size: 0.8125rem;
  }
  #search-header .search-hedaer-btn {
    justify-content: center;
    width: 100px;
    height: 30px;
    border-radius: 3px;
    font-size: 0.8125rem;
  }
  #search-header .search-hedaer-btn .icon {
    margin: 0 0 0 5px;
  }

  .search-header-title {
    font-size: 1.25rem;
    font-weight: bold;
  }

  #search-header-nav {
    display: flex;
    padding: 0 15px;
  }

  .search-header-nav-item {
    flex: 1 0 auto;
    width: 1%;
    margin: 0 10px 0 0;
  }
  .search-header-nav-item:last-child {
    margin-right: 0;
  }

  .search-header-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    border-radius: 3px;
    border: 1px solid #88d500;
    font-size: 0.875rem;
    font-weight: bold;
    color: #88d500;
  }
  .search-header-link.is-active {
    background: #88d500;
    color: #fff;
  }
  .search-header-link.is-active .icon:before {
    background-position: right top;
  }
  .search-header-link .icon {
    margin: 0 10px 0 0;
  }

  .search-refine .refine-unit {
    margin: 0;
    border: none;
  }
}
@media (max-width: 320px) {
  .search-header-link {
    line-height: 1;
  }
  .search-header-link .icon {
    margin: 0 5px 0 0;
  }
}
/******************************************
[search-result]
******************************************/
#search-result-wrap {
  display: flex;
  flex-wrap: wrap;
}

.search-result-item {
  width: 50%;
  padding: 15px;
  border-bottom: 1px solid #cdcdcd;
  font-size: 0.875rem;
}
.search-result-item:nth-child(odd) {
  border-right: 1px solid #cdcdcd;
}
.search-result-item a {
  color: #44483e;
}
.search-result-item .card-img-footer {
  justify-content: flex-end;
}
.search-result-item .user-item {
  margin: 0 15px 0 0;
}
.search-result-item .user-item:last-child {
  margin-right: 0;
}
.search-result-item .user-avatar {
  width: 50px;
  height: 50px;
}
.search-result-item .user-name {
  margin: 0 10px 0 0;
}

.search-result-title {
  margin-bottom: calc(10px - (((14px * 1.5) - 14px) / 2));
}

.search-result-detail {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  line-height: 1;
}
.search-result-detail:last-child {
  margin-bottom: 0;
}
.search-result-detail .rating-star-wrap {
  height: 15px;
}

.search-result-text {
  margin: 0 15px 0 0;
}
.search-result-text:last-child {
  margin-right: 0;
}

@media (max-width: 576px) {
  .search-result-item {
    width: 100%;
    font-size: 0.8125rem;
  }
  .search-result-item:first-child {
    padding-top: 0;
  }
  .search-result-item:last-child {
    border-bottom: none;
  }

  .search-result-title {
    margin-bottom: calc(10px - (((13px * 1.5) - 13px) / 2));
  }

  .search-result-detail {
    margin: 0 0 5px;
  }
}
/******************************************
[search-map]
******************************************/
#search-map {
  width: 100%;
}

.map-label {
  padding: 0 0 10px;
}

.map-label-inner {
  display: block;
  padding: 5px;
  background: #54623b;
  border-radius: 3px;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: #fff;
}
.map-label-inner:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  display: block;
  width: 8px;
  height: 8px;
  background: #54623b;
  z-index: -1;
}

.map-overlay-wrap {
  width: 250px;
  padding: 0 0 12px;
}

.map-ol-inner {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
.map-ol-inner:before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%) rotate(45deg);
  display: block;
  width: 15px;
  height: 15px;
  background: #fff;
}

.map-ol-unit {
  margin: 0 10px;
  padding: 10px 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.map-ol-img {
  line-height: 1;
}
.map-ol-img img {
  border-radius: 5px;
}

.map-ol-info {
  position: absolute;
  bottom: 10px;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  border-radius: 5px;
  font-size: 0.8125rem;
  color: #fff;
}
.map-ol-info .user-avatar {
  width: 40px;
  height: 40px;
  margin: 0 5px 0 0;
  border: 3px solid #fff;
}

.map-ol-item {
  flex: 1 0 auto;
  width: 1%;
}

.map-ol-title {
  @inclide mb($ma:10px,$fs:13px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.map-ol-detail {
  font-size: 0.75rem;
}
.map-ol-detail span {
  margin: 0 0 0 10px;
}

.gmap-info-window > img {
  display: none;
}

@media (max-width: 576px) {
  #search-map {
    height: 545px;
  }
}
/******************************************
[inquiry]
******************************************/
.inquiry-footer-item {
  margin: 0 0 20px;
}
.inquiry-footer-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  #inquiry-footer {
    font-size: 0.875rem;
  }

  .inquiry-footer-item .btn-list {
    flex-wrap: wrap;
  }
  .inquiry-footer-item .btn-list-item {
    flex: 1 0 auto;
    width: 100%;
    margin: 0 0 15px;
  }
  .inquiry-footer-item .btn-list-item:last-child {
    margin-bottom: 0;
  }
  .inquiry-footer-item .btn {
    width: 100%;
  }
}
/******************************************
[spot]
******************************************/
.spot-entry {
  width: 180px;
  height: 45px;
  margin: 0 0 25px;
  font-size: 1rem;
}

#spot-list {
  margin: 0 0 50px;
}

.spot-list-item {
  margin: 0 0 30px;
}
.spot-list-item:last-child {
  margin-bottom: 0;
}

.spot-list-inner {
  display: flex;
  align-items: center;
}

.spot-list-img {
  flex: 0 0 auto;
  width: 150px;
  margin: 0 15px 0 0;
  line-height: 1;
  transition: .3s;
}

.spot-list-detail {
  color: #44483e;
}

.spot-list-date {
  display: flex;
  align-items: center;
  margin-bottom: calc(5px - (((14px * 1.5) - 14px) / 2));
  font-size: 0.875rem;
}

.spot-list-new {
  margin: 0 0 0 10px;
  padding: 3px 5px;
  background: #f33313;
  font-family: "Roboto", sans-serif;
  font-size: 0.6875rem;
  line-height: 1;
  color: #fff;
}

.spot-list-title {
  margin-bottom: calc(15px - (((22px * 1.5) - 22px) / 2));
  font-size: 1.375rem;
}

.spot-list-favorite {
  display: flex;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
.spot-list-favorite .icon {
  margin: 0 5px 0 0;
}

@media (min-width: 769px) {
  .spot-list-inner:hover .spot-list-img {
    opacity: .6;
  }
  .spot-list-inner:hover .spot-list-title {
    text-decoration: underline;
  }
}
@media (max-width: 576px) {
  .spot-entry {
    width: 140px;
    height: 36px;
    margin: 0 0 20px;
    font-size: 0.875rem;
  }

  #spot-list {
    margin: 0 0 30px;
  }

  .spot-list-item {
    margin: 0 0 15px;
  }

  .spot-list-inner {
    align-items: flex-start;
  }

  .spot-list-title {
    margin-bottom: calc(5px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
  }

  .spot-list-favorite {
    font-size: 0.8125rem;
  }
  .spot-list-favorite .icon:before {
    width: 15px;
    height: 13px;
  }
}
/*
[spot-header]
******************************************/
#spot-header {
  margin: 0 0 45px;
}

#spot-slider {
  margin: 0 0 20px;
}
#spot-slider .slick-arrow {
  position: absolute;
  top: 50%;
  width: 23px;
  height: 49px;
  background: url(/img/Front/arrow/arrow-line-gray3.png) no-repeat center;
  background-size: cover;
  color: transparent;
  transition: .3s;
}
#spot-slider .slick-prev {
  left: 0;
  transform: translateX(-50%) scale(-1, 1);
}
#spot-slider .slick-next {
  right: 0;
  transform: translateX(-50%);
}

.spot-slider-item {
  margin: 0 60px;
}

#spot-header-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 70px;
}

#spot-favorite {
  display: flex;
  align-items: center;
  font-family: "Roboto", sans-serif;
}
#spot-favorite .icon {
  margin: 0 10px 0 0;
}
#spot-favorite.is-selected .icon:before {
  background-position: right top;
}

#spot-favorite-num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 20px;
  margin: 0 0 0 10px;
  background: #f33313;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1;
  color: #fff;
}
#spot-favorite-num:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.5px 5px 2.5px 0;
  border-color: transparent #f33313 transparent transparent;
}

#spot-sns {
  display: flex;
  align-items: center;
}

.spot-sns-item {
  margin: 0 15px;
}

@media (min-width: 769px) {
  #spot-slider .slick-arrow:hover {
    background-image: url(/img/Front/arrow/arrow-line-gray4.png);
  }

  #spot-sns a:hover * {
    transition: .3s;
    opacity: .6;
  }
}
@media (max-width: 576px) {
  #spot-header {
    margin: 0 0 20px;
  }

  #spot-slider {
    margin: 0 -15px 15px;
  }
  #spot-slider .slick-list {
    margin: 0 0 15px;
  }
  #spot-slider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    color: transparent;
  }
  #spot-slider .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 15px 0 0;
    line-height: 1;
  }
  #spot-slider .slick-dots li:last-child {
    margin-right: 0;
  }
  #spot-slider .slick-dots li.slick-active button {
    background: #88d500;
  }
  #spot-slider .slick-dots button {
    width: 100%;
    height: 100%;
    background: #dddedb;
    border-radius: 50%;
  }

  .spot-slider-item {
    margin: 0;
  }

  #spot-header-share {
    padding: 0;
  }
}
/*
[spot-body]
******************************************/
.spot-body-item {
  margin: 0 0 50px;
}

#spot-body-inner {
  margin: 0 0 25px;
}

#spot-title {
  margin-bottom: calc(50px - (((26px * 1.5) - 26px) / 2));
  font-size: 1.625rem;
}

.spot-text {
  margin-bottom: calc(45px - (((1rem * 1.5) - 1rem) / 2));
}
.spot-text:last-child {
  margin-bottom: 0;
}

#spot-map {
  width: 100%;
  height: 400px;
  margin: 0 0 20px;
}

#spot-address {
  display: flex;
  align-items: center;
}
#spot-address .icon {
  margin: 0 10px 0 0;
}

@media (max-width: 576px) {
  .spot-body-item {
    margin: 0 0 30px;
  }

  #spot-body-inner {
    margin: 0 0 20px;
  }

  #spot-title {
    margin-bottom: calc(20px - (((18px * 1.5) - 18px) / 2));
    font-size: 1.125rem;
  }

  .spot-text {
    margin-bottom: calc(30px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
  }

  #spot-map {
    height: 270px;
    margin: 0 0 15px;
  }

  #spot-address {
    font-size: 0.8125rem;
  }
  #spot-address .icon {
    margin: 0 5px 0 0;
  }
}
/*
[spot-footer]
******************************************/
#spot-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 30px;
  padding: 30px 0;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}
#spot-footer .user-avatar {
  width: 60px;
  height: 60px;
}
#spot-footer .user-name {
  font-size: 1.1875rem;
}

#spot-date {
  font-family: "Roboto", sans-serif;
}

@media (max-width: 576px) {
  #spot-footer {
    margin: 0 0 25px;
    padding: 25px 0 0;
    border-bottom: none;
  }
  #spot-footer .user-name {
    font-size: 1rem;
  }

  #spot-date {
    font-size: 0.8125rem;
  }
}
/******************************************
[login]
******************************************/
#login-wrap {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 50px 0 0;
}
#login-wrap .headline-wrap {
  justify-content: center;
}
#login-wrap .headline {
  @inclide mb($ma:20px,$fs:26px);
  font-size: 1.625rem;
}

#login-inner {
  padding: 45px 30px;
  border: 1px solid #d8d8d8;
}

.login-unit {
  margin: 0 0 40px;
  padding: 0 10px 40px;
  border-bottom: 1px solid #d8d8d8;
}
.login-unit:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.login-item {
  margin: 0 0 40px;
}
.login-item:last-child {
  margin-bottom: 0;
}
.login-item .form-input {
  font-size: 0.875rem;
}
.login-item .form-check-text {
  padding: 20px 0;
}
.login-item .form-check-item {
  justify-content: center;
}
.login-item .btn {
  font-size: 1rem;
}
.login-item .alert {
  margin: 10px 0 0;
}

.login-item-inner {
  margin: 0 0 30px;
}

.login-title {
  margin-bottom: calc(15px - (((1rem * 1.5) - 1rem) / 2));
  font-size: 1rem;
  font-weight: normal;
}

.login-sns-item {
  margin: 0 0 10px;
}
.login-sns-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  #login-wrap {
    padding: 30px 0 0;
  }
  #login-wrap .headline {
    @inclide mb($ma:15px,$fs:18px);
    font-size: 1.125rem;
  }

  #login-inner {
    padding: 25px 15px;
  }

  .login-unit {
    margin: 0 0 25px;
    padding: 0 0 25px;
  }

  .login-item {
    margin: 0 0 25px;
  }
  .login-item .form-check-item {
    justify-content: flex-start;
  }
  .login-item .btn-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .login-item .btn-group-item {
    width: 100%;
    margin: 20px 0 0;
  }
  .login-item .btn-group-item:last-child {
    margin-top: 0;
  }
  .login-item .btn-list-item {
    width: 100%;
    margin: 0;
  }
  .login-item .btn {
    font-size: 0.875rem;
  }
  .login-item .alert {
    height: 40px;
    margin: 10px 0 25px;
    font-size: 0.8125rem;
  }

  .login-title {
    margin-bottom: calc(10px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
  }

  .login-text {
    font-size: 0.875rem;
  }
}
/******************************************
[guide]
******************************************/
#guide-menu-wrap {
  display: flex;
  margin: 0 0 30px;
  padding: 0 0 30px;
  border-bottom: 1px solid #d8d8d8;
}

.guide-menu-item {
  width: 50%;
}

.guide-menu li {
  margin-bottom: calc(45px - (((1rem * 1.5) - 1rem) / 2));
}
.guide-menu a {
  color: #44483e;
}

#guide-footer {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
#guide-footer .btn {
  width: 180px;
}

#guide-footer-head {
  margin: 0 20px 0 0;
}

@media (max-width: 576px) {
  #guide-menu-wrap {
    margin: 0 0 105px;
    padding: 0;
    border-bottom: none;
  }

  .guide-menu {
    font-size: 0.875rem;
  }
  .guide-menu li {
    margin-bottom: calc(25px - (((14px * 1.5) - 14px) / 2));
  }
  .guide-menu li:last-child {
    margin-bottom: 0;
  }

  #guide-footer {
    flex-wrap: wrap;
  }
  #guide-footer .btn {
    width: 100%;
  }

  #guide-footer-head {
    width: 100%;
    margin-bottom: calc(10px - (((14px * 1.5) - 14px) / 2));
    font-size: 0.875rem;
  }
}
/*
[guide-item]
******************************************/
.guide-item {
  margin: 0 0 25px;
  font-size: 0.875rem;
  word-break: break-all;
}

.guide-item-en {
    word-break: break-word !important;
}

.guide-text {
  margin: 0 0 10px;
}

@media (max-width: 576px) {
  .guide-item {
    font-size: 0.8125rem;
  }
}
/*
[guide-faq]
******************************************/
.faq {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.faq-btn {
  position: absolute;
  bottom: 0;
  right: 15px;
  width: 120px;
  min-width: 0;
  height: 30px;
  padding: 0;
  font-size: 0.75rem;
}

#faq-menu-wrap {
  width: 300px;
  border: 1px solid #d8d8d8;
}

.faq-menu-item {
  border-bottom: 2px dotted #d8d8d8;
  font-size: 0.875rem;
  line-height: 1.2;
}
.faq-menu-item:last-child {
  border-bottom: none;
}

.faq-menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  color: #44483e;
}
.faq-menu-link .arrow {
  margin: 0 0 0 25px;
}

.faq-content {
  width: 680px;
}

.faq-body {
  margin: 0 0 30px;
}
.faq-body:last-child {
  margin-bottom: 0;
}
.faq-body .headline {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 45px;
  margin: 0;
  padding: 10px 15px;
  background: #5a6942;
  font-size: 1rem;
  color: #fff;
}

.faq-list {
  border: 1px solid #d8d8d8;
}

.faq-list-item {
  border-bottom: 2px dotted #d8d8d8;
}
.faq-list-item:last-child {
  border: none;
}
.faq-list-item .slide-body {
  display: none;
}

.faq-text {
  display: flex;
}
.faq-text:before {
  flex: 0 0 auto;
  width: 40px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  font-size: 1rem;
}
.faq-q .faq-text:before {
  content: "Q";
  color: #88d500;
}
.faq-q:after {
  content: "";
  flex: 0 0 auto;
  display: block;
  width: 15px;
  height: 15px;
  background: url("/img/Front/icon/icon-plus-green02.png") no-repeat center;
  background-size: contain;
}
.faq-q.is-open:after {
  background-image: url("/img/Front/icon/icon-minus-green.png");
}

.faq-a {
  padding: 20px;
  background: #eef0ec;
  font-size: 0.875rem;
}
.faq-a:before {
  content: "A";
  color: #f9634a;
}

@media (min-width: 769px) {
  .faq-q:hover {
    cursor: pointer;
  }
}
@media (max-width: 576px) {
  .faq-content {
    width: 100%;
  }

  #faq-menu-wrap {
    width: 100%;
    margin: 0 0 30px;
  }

  .faq-menu-link {
    height: 45px;
    padding: 0 0 0 40px;
  }
  .faq-menu-link .arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 45px;
    margin: 0;
  }
  .faq-menu-link .arrow:before {
    transform: rotate(90deg);
  }

  .faq-body .headline {
    font-size: 1.125rem;
  }

  .faq-text:before {
    width: 30px;
    margin: 2px 0 0;
  }

  .faq-q {
    padding: 15px;
    font-size: 0.875rem;
  }
  .faq-q:after {
    margin: 0 0 0 20px;
  }

  .faq-a {
    padding: 15px;
  }
}
/******************************************
[tutorial]
******************************************/
#modal-tutorial {
  margin: auto 15px;
  line-height: 1;
}
#modal-tutorial .modal-wrap {
  padding: 0;
}
#modal-tutorial .iziModal-wrap {
  overflow: hidden;
}

.tutorial-footer {
  padding: 20px 15px;
}
.tutorial-btn {
  width: 100% !important;
  height: 45px !important;
}
.tutorial-btn-next.swiper-button-disabled {
  display: none;
}
.tutorial-btn-end {
  display: none;
}
.tutorial-btn-end.is-active {
  display: block;
}
.tutorial .swiper-button-next {
  position: relative;
  top: auto;
  right: 0;
  margin: 0;
  background-image: none;
}
.tutorial .swiper-pagination {
  position: relative;
  bottom: auto !important;
  left: auto !important;
  margin: 0 0 20px;
}
.tutorial .swiper-pagination-bullet {
  background: #dfe3dc;
  opacity: 1;
}
.tutorial .swiper-pagination-bullet-active {
  background: #88d500;
}

@media (max-width: 320px) {
  .tutorial .swiper-slide {
    max-height: 290px;
    overflow: hidden;
  }
}
/******************************************
[checklist]
******************************************/
.checklist {
  padding: 55px 0 0;
}
.checklist #page-title {
  margin: 0 0 50px;
  line-height: 1;
}
.checklist-item {
  margin: 0 0 15px;
}
.checklist-item:last-child {
  margin-bottom: 0;
}
.checklist .beginner-item {
  padding: 30px;
}
.checklist .beginner-item.rider {
  border-bottom: none;
}
.checklist .beginner-list-step {
  margin: 0 0 15px 45px;
  line-height: 1;
}

@media (max-width: 576px) {
  .checklist {
    padding: 30px 0 0;
  }
  .checklist-line {
    align-self: center;
    line-height: 1;
  }
  .checklist #page-title {
    margin: 0 0 30px;
  }
  .checklist .beginner-head {
    margin-left: 10px;
  }
  .checklist .beginner-item {
    padding: 15px 10px 15px 5px;
  }
  .checklist .beginner-list-item {
    padding: 0 10px 10px;
  }
  .checklist .beginner-list-step {
    width: 35px;
    margin: 0 0 10px 20px;
  }
  .checklist .beginner-list-title {
    margin: 0 0 10px;
  }
  .checklist .beginner-list-title:last-child {
    margin-bottom: 0;
  }
}
/******************************************
[error]
******************************************/
#error-wrap {
  padding: 60px 0 0;
}
#error-wrap .alert {
  height: auto;
  margin: 0 0 60px;
  padding: 30px 20px;
}
#error-wrap .btn {
  width: 250px;
  margin: 0 auto;
  font-size: 1rem;
}

@media (max-width: 576px) {
  #error-wrap {
    padding: 35px 0 0;
  }
  #error-wrap .alert {
    margin: 0 0 30px;
    padding: 20px;
    font-size: 0.875rem;
  }
  #error-wrap .btn {
    width: 100%;
  }
}
/******************************************
[en]
******************************************/
body:lang(en) {
  font-family: 'Roboto', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', '游ゴシック', YuGothic, 'Yu Gothic', meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
}
body:lang(en) .modal-required {
  width: auto;
  padding: 0 5px;
}
body:lang(en) .headline-wrap {
  margin: 0 0 10px;
}
body:lang(en) #review-head .review-head-title {
  font-weight: normal;
}
body:lang(en) .crop-scale-btn {
  width: 100px;
}
body:lang(en) .user-data-title {
  font-weight: 600;
}
body:lang(en) #home-catch-unit {
  padding-right: 115px;
}
body:lang(en) #home-catch-text {
  width: 315px;
}
body:lang(en) #home-catch-text:after {
  bottom: -100px;
}
body:lang(en) .home-use-title {
  padding: 0;
  font-size: 1.125rem;
}
body:lang(en) .home-use-item:last-child {
  align-self: center;
}
body:lang(en) .topics-category {
  font-size: 0.8rem;
}
body:lang(en) #home-app-unit:before {
  background-image: url(/img/Front/home/home-app-img1_en.png);
}
body:lang(en) #bike-header-option .bike-check-unit.is-active .bike-check-cont {
  font-size: 0.6875rem;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  word-break: break-all;
}
body:lang(en) #bike-header-option .bike-check-unit.is-active .bike-check-cont .icon {
  margin: 0 0 3px;
}
body:lang(en) #bike-map-wrap .headline-wrap {
  margin: 0 0 5px;
}
body:lang(en) #mp-home-user .user-data-number .user-data-number-head {
  font-size: 1rem;
}
body:lang(en) #mp-home-sales td span {
  font-family: "Roboto", sans-serif;
  font-size: 1.8125rem;
  font-weight: normal;
}
body:lang(en) #mp-user-data .user-data-title {
  margin-bottom: calc(10px - (((14px * 1.5) - 14px) / 2));
}
body:lang(en) #mp-user-data .user-data-number {
  margin: 0;
}
body:lang(en) #mp-user-data .user-data-item:nth-child(2) .user-data-number {
  flex-direction: row;
}
body:lang(en) #mp-user-data .user-data-item:nth-child(2) .user-data-number span {
  margin: 0 5px 0 0;
}
body:lang(en) #mp-user-data .user-data-item:nth-child(2) .user-data-number .user-data-number-head {
  margin: 0;
}
body:lang(en) #mp-user-data .user-data-number .user-data-number-head {
  margin: 0 0 5px;
  font-size: 0.75rem;
}
body:lang(en) .payment-column-label {
  width: 8em;
}
body:lang(en) #mp-help-select-wrap {
  justify-content: space-between;
  padding: 0 20px;
}
body:lang(en) .mp-help-select-item {
  flex: 1 0 auto;
  width: 1%;
  margin: 0 15px 0 0;
}
body:lang(en) .mp-help-select-item:last-child {
  margin-right: 0;
}
body:lang(en) .btn-help-select {
  flex-direction: column;
  width: 100%;
  height: 130px;
  border-radius: 10px;
  font-size: 1.875rem;
}
body:lang(en) .btn-help-select:before {
  display: none;
}
body:lang(en) .btn-help-select:after {
  content: "\25B6";
  font-size: 1.3125rem;
}
body:lang(en) .search-header-link {
  font-size: 0.8125rem;
}

@media (max-width: 576px) {
  body:lang(en) .bike-price-item {
    margin: 0 5px 0 0;
  }
  body:lang(en) .bike-price-item span {
    font-size: 0.9rem;
  }
  body:lang(en) .user-data-item:nth-child(2) .user-data-number {
    flex-direction: row;
  }
  body:lang(en) .user-data-item:nth-child(2) .user-data-number span {
    margin: 0 5px 0 0;
  }
  body:lang(en) .user-data-item:nth-child(2) .user-data-number .user-data-number-head {
    margin: 0;
  }
  body:lang(en) .user-data-number .user-data-number-head {
    font-size: 0.75rem;
  }
  body:lang(en) #bike-map-wrap .headline-wrap {
    margin: 0 0 20px;
  }
  body:lang(en) #mp-home-user .user-data-item:nth-child(2) .user-data-number {
    flex-direction: row;
  }
  body:lang(en) #mp-home-user .user-data-item:nth-child(2) .user-data-number span {
    margin: 0 5px 0 0;
  }
  body:lang(en) #mp-home-user .user-data-item:nth-child(2) .user-data-number .user-data-number-head {
    margin: 0;
  }
  body:lang(en) #mp-home-user .user-data-number .user-data-number-head {
    font-size: 0.75rem;
  }
  body:lang(en) #mp-home-sales td span {
    font-size: 1.25rem;
  }
  body:lang(en) .mp-help-select-item {
    width: 100%;
    margin: 0 0 15px;
  }
  body:lang(en) .mp-help-select-item:last-child {
    margin-bottom: 0;
  }
  body:lang(en) .beginner-reason-list-title {
    line-height: 1.3em;
  }
}
@media (max-width: 320px) {
  body:lang(en) .search-header-link {
    font-size: .7rem;
  }
  body:lang(en) .bike-price-item {
    margin: 0 5px 0 0;
    font-size: 0.5625rem;
  }
  body:lang(en) .bike-price-item span {
    margin: 0 5px 0 0;
  }
}
/******************************************
[beginner]
******************************************/
#beginner-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 750px;
  padding: 0 0 100px;
  background: url(/img/Front/beginner/beginner-bg.jpg) no-repeat bottom center;
  background-size: cover;
  color: #fff;
  /*&:before{
  	content: "";
  	display: block;
  	padding-top: 45%;
  }*/
}
#beginner-header .breadcrumb-item a {
  color: #fff;
}

#beginner-header-title {
  margin-bottom: calc(35px - (((40px * 1.5) - 40px) / 2));
  font-size: 2.5rem;
  font-weight: bold;
}

#beginner-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.beginner-menu-item {
  width: 100%;
  max-width: 360px;
  margin: 0 70px 0 0;
}
.beginner-menu-item:last-child {
  margin-right: 0;
}
.beginner-menu-item.rider .beginner-menu-link {
  border-color: #88d500;
  color: #88d500;
}
.beginner-menu-item.owner .beginner-menu-link {
  border-color: #ffa422;
  color: #ffa422;
}

.beginner-menu-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  border-radius: 4px;
  border-style: solid;
  border-width: 3px;
  font-size: 1.125rem;
  font-weight: bold;
  text-align: center;
}
.beginner-menu-link span {
  width: 100%;
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 1;
}

.beginner-unit {
  margin: 0 0 40px;
}
.beginner-unit:before {
  content: "";
  position: absolute;
  bottom: -58px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 58px;
  background: url(/img/Front/beginner/beginner-arrow.png) no-repeat center;
  background-size: cover;
  z-index: 1;
}

.beginner-item {
  padding: 45px;
  border: 1px solid #dadada;
}
.beginner-item.rider {
  background: #eef0ec;
  border: none;
  border-bottom: 2px dashed #fff;
}
.beginner-item.rider .beginner-head span {
  color: #88d500;
}
.beginner-item.rider .beginner-list-number {
  border: none;
  color: #88d500;
}
.beginner-item.rider .beginner-list-step {
  color: #88d500;
}
.beginner-item.owner {
  background: #f9f1e4;
  border: none;
}
.beginner-item.owner .beginner-head span {
  color: #ffa422;
}
.beginner-item.owner .beginner-list-number {
  border: none;
  color: #ffa422;
}
.beginner-item.owner .beginner-list-step {
  color: #ffa422;
}

.beginner-head {
  display: flex;
  align-items: center;
  margin: 0 0 20px 15px;
  font-size: 1.125rem;
  line-height: 1;
}
.beginner-head span {
  margin: 0 25px 0 0;
  font-size: 2.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.beginner-list-step {
  width: 50px;
  margin: 0 0 0 15px;
  font-size: 0.875rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-align: center;
}

.beginner-list-item {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 0 15px 10px;
  border-bottom: 2px dotted #d7dad5;
}
.beginner-list-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.beginner-list-number {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 0 15px 0 0;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #dadada;
  font-size: 1.875rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.beginner-list-text-unit {
  display: flex;
  flex: 1 0 auto;
  justify-content: space-between;
  align-items: center;
  width: 1%;
}

.beginner-list-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.beginner-list-text {
  font-size: 0.875rem;
  text-align: right;
}

#beginner-reason {
  padding: 70px 0;
  background: #f2f2f2;
}

#beginner-reason-head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 50px;
  font-size: 1.75rem;
  line-height: 1;
}
#beginner-reason-head img {
  width: 286px;
  height: auto;
  margin: 0 25px 0 0;
}
#beginner-reason-head span {
  margin: 0 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 2.8125rem;
  font-weight: 500;
  color: #88d500;
}

#beginner-reason-list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.beginner-reason-list-item {
  width: 290px;
  margin: 0 40px 0 0;
}
.beginner-reason-list-item:last-child {
  margin-right: 0;
}

.beginner-reason-list-title {
  display: flex;
  align-items: center;
  margin: 0 0 15px;
  padding: 0 0 0 15px;
  font-size: 1.1875rem;
  font-weight: bold;
}
.beginner-reason-list-title span {
  margin: 0 25px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: #88d500;
}

.beginner-reason-list-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 140px;
  background: #fff;
}

#beginner-btn .inner {
  max-width: 710px;
}
#beginner-btn .btn-list {
  margin: 0 0 30px;
}
#beginner-btn .btn-list-item {
  margin: 0 30px 0 0;
}
#beginner-btn .btn-list-item:last-child {
  margin-right: 0;
}

@media (min-width: 769px) {
  .beginner-menu-item.rider .beginner-menu-link:hover {
    background: #88d500;
    color: #fff;
  }
  .beginner-menu-item.owner .beginner-menu-link:hover {
    background: #ffa422;
    color: #fff;
  }

  #beginner-btn .btn-ol-green:hover {
    background: #88d500;
    color: #fff;
  }
}
@media (max-width: 576px) {
  #beginner-header {
    height: 500px;
    padding: 0 0 30px;
    background-image: url(/img/Front/beginner/beginner-bg-sp.jpg);
  }

  #beginner-header-caption {
    font-size: 0.8125rem;
  }

  #beginner-header-title {
    margin-bottom: calc(30px - (((24px * 1.5) - 24px) / 2));
    font-size: 1.5rem;
  }

  .beginner-menu-item {
    margin: 0 0 15px;
  }
  .beginner-menu-item:last-child {
    margin-bottom: 0;
  }

  .beginner-menu-link {
    font-size: 0.875rem;
  }
  .beginner-menu-link span {
    font-size: 2.25rem;
  }

  .beginner-item {
    padding: 25px 10px;
  }

  .beginner-head {
    margin: 0 0 15px 5px;
    font-size: 0.875rem;
  }
  .beginner-head span {
    margin: 0 15px 0 0;
    font-size: 1.875rem;
  }

  .beginner-list-step {
    width: 40px;
    margin: 0 0 0 5px;
    font-size: 0.8125rem;
  }

  .beginner-list-item {
    align-items: flex-start;
    padding: 0 5px 10px;
  }

  .beginner-list-number {
    width: 40px;
    height: 40px;
    margin: 3px 15px 0 0;
    font-size: 1.5rem;
  }

  .beginner-list-text-unit {
    flex-direction: column;
    align-items: flex-start;
  }

  .beginner-list-title {
    font-size: 1rem;
  }

  .beginner-list-text {
    font-size: 0.8125rem;
    text-align: left;
  }
  .beginner-list-text span {
    display: block;
    padding: 0 0 0 1em;
    text-indent: -1em;
  }
  .beginner-list-text span:before {
    content: "・";
  }

  #beginner-reason {
    padding: 35px 0;
  }

  #beginner-reason-head {
    display: block;
    margin: 0 0 25px;
    font-size: 1.25rem;
    text-align: center;
    vertical-align: middle;
  }
  #beginner-reason-head img {
    display: block;
    width: 200px;
    margin: 0 auto 10px;
  }
  #beginner-reason-head span {
    margin: 0 5px;
    font-size: 1.9375rem;
  }

  #beginner-reason-list {
    flex-wrap: wrap;
    padding: 0;
  }

  .beginner-reason-list-item {
    width: 290px;
    margin: 0 0 15px;
  }
  .beginner-reason-list-item:last-child {
    margin-bottom: 0;
  }

  .beginner-reason-list-title {
    margin: 0 0 10px;
    padding: 0 0 0 5px;
    font-size: 1rem;
  }
  .beginner-reason-list-title span {
    margin: 0 15px 0 0;
  }

  #beginner-btn .btn-list {
    margin: 0 0 15px;
  }
  #beginner-btn .btn-list-item {
    margin: 0 0 15px;
  }
  #beginner-btn .btn-list-item:last-child {
    margin-bottom: 0;
  }
  #home-slider-wrap {
    margin-top: -7px;
  }
}
.banner-top-img {
  width: 100%;
  cursor: pointer;
}