/*
YAMAMOTO Garage

Author: kozai-web@kozai-print.com
*/
/*
common style
*/
/* ----- variable */
/*----- mixin */
/* ----- common */
html, body {
  font-size: 10px;
  font-family: 'Noto Sans JP', sans-serif; }

p {
  font-size: 1.6rem;
  line-height: 1.5; }

.nowrap {
  white-space: nowrap;
  display: inline-block; }

.center-box, .home .rental .service-header, .home .sell .service-header, .home .keep .service-header, .home .rental .service-lead, .home .sell .service-lead, .home .keep .service-lead, .home .rental .service-image, .home .sell .service-image, .home .keep .service-image {
  display: flex;
  justify-content: center;
  align-items: center; }

/* ----- header */
.site-header .container, .site-header .row {
  height: 100%; }
.site-header h1 {
  margin: 0;
  padding: 0;
  height: 13rem;
  display: flex;
  justify-content: left;
  align-items: center; }
.site-header .tel {
  height: 130px; }
  .site-header .tel .tel_number {
    margin-top: 3.6rem;
    text-align: center; }
  .site-header .tel .tel_caption {
    text-align: center;
    font-size: 1.2rem; }

/* ----- footer */
.site-footer {
  padding: 6rem 0 2rem 0;
  color: white;
  background-color: #3B5058; }
  .site-footer .footer-image {
    margin-bottom: 3rem;
    text-align: center; }
  .site-footer .footer-text {
    margin-bottom: 3rem; }
    .site-footer .footer-text h2 {
      font-weight: normal;
      font-size: 2rem; }
    .site-footer .footer-text p {
      margin: 2rem 0 0 0; }
    .site-footer .footer-text ul {
      margin: 1.4rem 0;
      padding: 0;
      list-style: none; }
      .site-footer .footer-text ul li {
        padding: 1.2rem;
        font-size: 1.4rem;
        line-height: 1.4;
        border-bottom: 1px solid white; }
        .site-footer .footer-text ul li a {
          color: white; }
  .site-footer .copyright {
    margin-top: 3rem;
    text-align: right;
    font-size: 1.4rem;
    color: #AAAAAA; }

/* ----- article */
article {
  padding-bottom: 10rem; }
  article .page-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }
    article .page-header .container {
      position: relative; }
      article .page-header .container .page-header-lead {
        margin: 0;
        padding: 12rem 0 0 0; }
        @media (min-width: 768px) {
          article .page-header .container .page-header-lead {
            padding: 7rem 0; } }
      article .page-header .container .contact {
        margin: 0;
        padding-bottom: 1rem;
        position: absolute;
        top: 3rem;
        right: 4.5rem; }
  article .section-header {
    position: relative;
    padding: 4.6rem 0 4rem 0; }
    article .section-header h2 {
      margin-bottom: 2rem;
      text-align: center;
      font-size: 4.6rem; }
      article .section-header h2 .small {
        font--size: .75em; }
    article .section-header p {
      text-align: center; }
    article .section-header:after {
      position: absolute;
      content: "";
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: -24px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 24px 30px 0 30px;
      border-color: white transparent transparent transparent;
      z-index: 10; }

/* ----- nav */
.site-nav {
  font-size: 1.4rem; }
  .site-nav a {
    padding: 1em;
    text-align: center;
    font-weight: bold; }
  .site-nav .nav-home {
    color: white;
    background-color: #352F2B; }
  .site-nav .nav-rental {
    color: white;
    background-color: #0DB8DA; }
  .site-nav .nav-sell {
    color: black;
    background-color: #FFE600; }
  .site-nav .nav-keep {
    color: white;
    background-color: #E73462; }

/*
home
*/
/* ----- home */
.home .drive-through {
  padding: 40px 0;
  background-color: white; }
  .home .drive-through .drive-through-contents {
    margin: 0 auto;
    width: calc(100% - 30px);
    max-width: 950px;
    color: black; }
    .home .drive-through .drive-through-contents p {
      margin-bottom: 40px;
      text-align: center;
      line-height: 1.3;
      font-weight: 900;
      font-size: 2.4rem; }
      @media (min-width: 768px) {
        .home .drive-through .drive-through-contents p {
          font-size: 3.6rem; } }
    .home .drive-through .drive-through-contents a {
      display: block;
      text-align: center;
      font-weight: 700;
      font-size: 2rem;
      color: black;
      text-decoration: none; }
      .home .drive-through .drive-through-contents a:hover {
        text-decoration: underline; }
.home .page-header {
  background-image: url(../img/img_TOPmain.jpg); }
.home .section-header {
  color: white;
  background-color: #352F2B; }
  .home .section-header:after {
    border-color: #352F2B transparent transparent transparent; }
.home .tire_service a:hover {
  text-decoration: none; }
.home .transfered {
  background-color: #1d5aa5; }
  .home .transfered:after {
    border-color: #1d5aa5 transparent transparent transparent; }
  .home .transfered p {
    font-weight: 600;
    color: #FFE600; }
    .home .transfered p a {
      color: #FFE600;
      text-decoration: underline; }
.home .rental, .home .sell, .home .keep {
  position: relative;
  padding: 8rem 1.5rem;
  text-align: center;
  color: white;
  background-color: #0DB8DA; }
  @media (min-width: 768px) {
    .home .rental, .home .sell, .home .keep {
      padding: 8rem 5rem; } }
  .home .rental .service-header, .home .sell .service-header, .home .keep .service-header {
    height: 12rem;
    font-weight: bold; }
  .home .rental .service-lead, .home .sell .service-lead, .home .keep .service-lead {
    height: 7rem;
    font-weight: bold; }
  .home .rental .service-image, .home .sell .service-image, .home .keep .service-image {
    height: 22rem; }
    .home .rental .service-image img, .home .sell .service-image img, .home .keep .service-image img {
      max-width: 100%;
      max-height: 100%;
      height: auto; }
  .home .rental .service-content, .home .sell .service-content, .home .keep .service-content {
    padding: 2rem 0 0 0; }
    .home .rental .service-content p, .home .sell .service-content p, .home .keep .service-content p {
      text-align: left; }
  .home .rental .go-detail, .home .sell .go-detail, .home .keep .go-detail {
    position: absolute;
    bottom: 2rem;
    margin: 0;
    padding: 0.5em 0;
    width: calc(100% - (1.5rem * 2));
    text-align: center;
    border: 1px dotted; }
    @media (min-width: 768px) {
      .home .rental .go-detail, .home .sell .go-detail, .home .keep .go-detail {
        width: calc(100% - (5rem * 2)); } }
    .home .rental .go-detail a, .home .sell .go-detail a, .home .keep .go-detail a {
      color: inherit; }
  .home .rental h3, .home .sell h3, .home .keep h3 {
    margin: 0;
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1.3; }
  .home .rental h4, .home .sell h4, .home .keep h4 {
    margin: 0 0 1rem 0;
    padding: 0 0 1rem 0;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.4;
    border-bottom: 1px solid white; }
.home .sell {
  color: black;
  background-color: #FFE600; }
  .home .sell h4 {
    border-bottom-color: black; }
.home .keep {
  color: white;
  background-color: #E73462; }
.home .access .map {
  position: relative;
  margin-top: 110px;
  border: 2px solid black;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden; }
  .home .access .map iframe,
  .home .access .map object,
  .home .access .map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*
Services (rental, sell, keep, drive-through)
*/
/* ----- services common */
.service .content-header {
  position: relative;
  padding: 4.6rem 1.5rem 4rem 1.5rem;
  color: #352F2B;
  background-color: #EFEDE4; }
  .service .content-header h2 {
    margin-top: 0.5rem;
    margin-bottom: 4rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.5; }
    .service .content-header h2 span {
      display: inline-block;
      width: 20rem;
      height: 3rem;
      margin-top: -0.5rem;
      margin-right: 0;
      padding-top: 0.5rem;
      text-align: center;
      font-size: 1.6rem;
      color: white;
      background-color: #E73462; }
      @media (min-width: 768px) {
        .service .content-header h2 span {
          margin-right: 3rem; } }
  .service .content-header p {
    text-align: center; }
  .service .content-header:after {
    position: absolute;
    content: "";
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -24px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 30px 0 30px;
    border-color: #EFEDE4 transparent transparent transparent;
    z-index: 10; }
.service .section-header {
  padding-bottom: 0;
  color: #352F2B;
  background-color: white; }
.service .section-content {
  margin-top: 3rem; }
  .service .section-content .table thead {
    color: white;
    background-color: #00B9EF;
    border: none; }
  .service .section-content .table th, .service .section-content .table td {
    margin: 0;
    padding: 8px 15px;
    border-top: none;
    vertical-align: middle;
    white-space: nowrap !important; }
  .service .section-content .table th {
    font-size: 1.6rem;
    font-weight: bold; }
  .service .section-content .table td {
    font-size: 1.6rem;
    border-bottom: 1px solid black; }
  .service .section-content .notice {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 1em;
    text-indent: -1em; }
  .service .section-content .pricelist-notice {
    margin-top: 1em;
    text-align: right; }
  .service .section-content .scroll-caption {
    font-size: 1.2rem; }

/* ----- rental */
.rental .page-header, .home .sell .page-header, .home .keep .page-header {
  background-image: url(../img/img_SERVICE01.jpg); }
.rental .section-content .table caption, .home .sell .section-content .table caption, .home .keep .section-content .table caption {
  caption-side: top;
  text-align: right; }
.rental .section-content .benefit, .home .sell .section-content .benefit, .home .keep .section-content .benefit {
  margin: 1.5rem 0; }
  .rental .section-content .benefit span, .home .sell .section-content .benefit span, .home .keep .section-content .benefit span {
    display: inline-block;
    padding: 1rem 1.5rem;
    line-height: 1;
    font-weight: 600;
    color: #e73462;
    background-color: #fef263; }
.rental .section-content .transfer, .home .sell .section-content .transfer, .home .keep .section-content .transfer {
  margin-top: 70px; }
  .rental .section-content .transfer h3, .home .sell .section-content .transfer h3, .home .keep .section-content .transfer h3 {
    margin: 0 auto;
    padding: 15px;
    text-align: center;
    font-weight: 900;
    font-size: 2.4rem;
    color: white;
    background-color: #00B9EF; }
  .rental .section-content .transfer p, .home .sell .section-content .transfer p, .home .keep .section-content .transfer p {
    margin: 0 auto;
    padding: 25px 15px;
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    background-color: #fef263;
    border: none; }
    .rental .section-content .transfer p span, .home .sell .section-content .transfer p span, .home .keep .section-content .transfer p span {
      color: red; }

/* ----- sell */
.sell .page-header {
  background-image: url(../img/img_SERVICE02.jpg); }
.sell .section-header h2 small {
  font-size: 70%; }
.sell .section-content .table {
  margin-bottom: 4rem; }
  .sell .section-content .table:last-child {
    margin-bottom: 1rem; }
  .sell .section-content .table caption {
    caption-side: top;
    text-align: left;
    font-weight: bold; }

/* ----- keep */
.keep .page-header {
  background-image: url(../img/img_SERVICE03.jpg); }
.keep .lead {
  font-size: 4.8rem;
  line-height: 1.2; }

/* ----- drive-througn */
.drive-through .page-header {
  display: none; }
.drive-through .corona-measures {
  color: white;
  background-image: linear-gradient(to bottom, #4D004B 0, #AF00AA 2%, #AF00AA); }
  .drive-through .corona-measures:after {
    border-color: #AF00AA transparent transparent transparent; }
  .drive-through .corona-measures .corona-contents {
    margin: 0 auto;
    width: calc(100% - 30px);
    max-width: 570px; }
  .drive-through .corona-measures p.lead {
    margin-bottom: 40px;
    font-size: 14px; }
  .drive-through .corona-measures img {
    margin-bottom: 30px;
    height: auto; }
.drive-through .drivethrough-service {
  position: relative;
  margin: 60px auto;
  width: calc(100% - 30px);
  max-width: 570px; }
  .drive-through .drivethrough-service h2 {
    margin-bottom: 30px;
    font-size: 3.6rem;
    text-align: center; }
    @media (min-width: 768px) {
      .drive-through .drivethrough-service h2 {
        font-size: 4.8rem; } }
  .drive-through .drivethrough-service .lead {
    margin-bottom: 30px;
    line-height: 1.3;
    font-size: 2.2rem;
    font-weight: 900; }
  .drive-through .drivethrough-service .payment {
    line-height: 1.2;
    font-size: 2rem; }
  .drive-through .drivethrough-service .image {
    position: absolute;
    right: 0;
    bottom: 0; }
.drive-through .site-nav .row {
  justify-content: flex-end; }
.drive-through .site-nav .nav-rental,
.drive-through .site-nav .nav-sell,
.drive-through .site-nav .nav-keep {
  display: none; }