@charset "utf-8";
/* レイアウト
----------------------- */
.guide {
  margin-bottom: 50px; }
.guide .box section,
.guide .stepBox {
  margin-bottom: 30px; }
.guide .headline01 {
  line-height: 1.2; }
.guide p {
  margin: 15px 10px;
  line-height: 1.7;
}
.guide .summary {
  margin: 20px 0;
}
.guide .image {
  margin: 15px 10px;
  text-align: center;
}
.guide p:last-child,
.guide .image:last-child {
  margin-bottom: 0;
}
.guide .image img:not(:first-child) {
  margin-top: 15px; }
.guide .imageText img {
  max-width: 300px; }
.guide .indent {
  padding-left: 1em;
  text-indent: -1em;
}

/* 見出し
----------------------- */
.guide .subHead01 {
  color: #007abc;
}
.guide .subHead02 {
  margin: 0 10px 15px;
  color: #007abc;
  font-size: 1rem;
  line-height: 30px;
}
.guide .subHead02 .icon {
  width: 30px;
  height: 30px;
  margin-right: 3px;
  transform: translateY(8px);
  fill: #007abc;
}

/* テキスト
----------------------- */
.red {
  color: #d92100; }
.blue {
  color: #007abc; }
.bold {
  font-weight: bold; }

/* リスト
----------------------- */
.listNumber {
  margin: 10px; }
.listNumber li {
  margin: 10px 0 0;
  padding-left: 1.2em;
  line-height: 1.8;
  text-indent: -1.2em;
}
.listNumber li::first-letter {
  margin-right: .2em; }
.listNumber:last-child {
  margin-bottom: 0;
}

/* 前のページ・次のページ
----------------------- */
.guide .buttonBox,
.guide .buttonBox02 {
  position: relative;
  margin: 0 10px;
  padding: 30px 0 0;
  border-top: 2px solid  #007abc;
}
.guide .buttonBox02 {
  display: flex;
  justify-content: space-around;
}
.guide .buttonInner {
  display: flex;
  justify-content: space-around;
}
.guide .buttonInner::after {
  display: block;
  align-self: center;
  width: 1px;
  height: 8px;
  margin: 0 2px;
  content: '';
}
.guide .buttonWrap {
  flex: 1;
}
.guide .buttonBox p,
.guide .buttonBox02 p {
  margin: 0 0 10px;
  font-size: .750rem;
  text-align: center;
}
.guide .buttonBox::before,
.guide .buttonBox02::before {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #007abc transparent transparent;
  content: "";
}
.guide .buttonBox::after,
.guide .buttonBox02::after {
  display: block;
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
  content: "";
}
.guide .buttonBox02 .buttonWrap:first-child a {
  padding: 0 10px 0 16px;
}
.guide .buttonBox02 :nth-child(2) a {
  padding: 0 16px 0 10px;
  border-left: 1px solid #9eadbd;
}
.guide .buttonLink,
.guide .buttonLinkSmall {
  padding: 5px 0;
  line-height: 1.3;
  text-align: center;
}
.guide .buttonLinkSmall {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0 auto;
  padding: 0 16px;
  color: #007abc;
  font-size: .750rem;
  font-weight: bold;
  line-height: 1.7;
  text-decoration: none;
}
.guide .buttonLinkSmall .arrowNext,
.guide .buttonLinkSmall .arrowPrev {
  position: absolute;
  top: 80%;
  right: 0;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  transition: right .2s;
  fill: #007abc;
}
.guide .buttonLinkSmall .arrowPrev {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
}

/* まずは気になるクルマを検索
----------------------- */
.firstStep {
  margin: 0 0 50px;
  padding: 20px 10px 15px;
}
.firstStepTitle {
  margin-bottom: 15px;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
}
.firstStepList {
  margin: 15px 0 0;
}
.firstStepItem {
  display: block;
  position: relative;
  padding: 15px 25px 15px 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  font-size: 1.0625rem;
  font-weight: bold;
  text-decoration: none;
}
.firstStepItem span {
  display: block;
  margin-top: 10px;
  font-size: .75rem;
}
.firstStepItem .icon {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
}
.firstStepItem .arrowNext {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  fill: #626d78;
}
.firstStepSearch,
.firstStepSearch span {
  color: #007abc;
}
.firstStepSearch .icon {
  fill: #007abc; }
.firstStepPickup,
.firstStepPickup span {
  color: #e87400;
}
.firstStepPickup .icon {
  fill: #ff9500;
}

/* カーリースのメンテナンスサービス
--------------------------------------------- */
.guide .planBox {
  box-sizing: border-box;
  margin: 20px 10px 0;
  border-radius: 4px;
  background: #f5f7f5;
}
.guide .planTitle,
.guide .planTitleSecond,
.guide .planTitleThird {
  display: inline-block;
  width: 100%;
  height: 54px;
  border-radius: 4px 4px 0 0;
  background: #007abc;
  color: #fff;
  font-size: 1.25rem;
  line-height: 54px;
  text-align: center;
}
.guide .planTitleSecond {
  background: #e87400;
}
.guide .planTitleThird {
  background: #6fc862;
}
.guide .planCatch {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin: 24px auto 30px;
  padding: 0 15px;
}
.guide .planCatch ul {
  display: inline-block;
  padding-left: 0;
  text-align: center;
}
.guide .planCatch ul li {
  display: flex;
  box-sizing: border-box;
  margin: 0 0 10px 0;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.7;
  text-align: left;
}
.guide .planCatch p:first-child {
  padding: 0;
  font-size: .875rem;
  text-align: center;
}
.guide .planCatch p:first-child span {
  color: #007abc;
}
.guide .planCatch p:last-child {
  margin-bottom: 0;
}
.guide .planCatchIcon {
  flex: none;
  width: 22px;
  height: 22px;
  padding-right: 5px;
  transform: translateY(2px);
  fill: #007abc;
}
.guide .planText {
  margin: 20px 0 0;
  padding: 0 15px;
  font-size: .875rem;
}
.guide .planHeading {
  display: block;
  height: 45px;
  margin: 30px 15px 0;
  padding: 0;
  background: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 45px;
  text-align: center;
}
.guide .planList {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 100%;
  margin: 3px 0 0;
  padding: 0 15px 12px;
  box-sizing: border-box;
}
.guide .planItem {
  width: calc(25% - 3px);
  margin: 0 3px 3px 0;
  padding: 8px 0 0;
  background: #fff;
}
.guide .planItem:nth-child(4n) {
  width: 24.99%;
  margin-right: 0;
}
.guide .planItem p {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 67px;
  margin: 0;
  padding: 3px 3px 8px;
  font-size: .750rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.guide .planItem p span {
  font-size: .6875rem;
}
.guide .planIcon,
.guide .planIconOff{
  display: block;
  width: 50px;
  height: 40px;
  margin: 0 auto;
  fill: #007abc;
}
.guide .planIconOff {
  fill: #d6e5ed;
}

/* カーリースメンテナンスの受け方とご注意点について
--------------------------------------------- */
.guide .textBox {
  margin: 20px 0;
}
.guide .box .noticeBox {
  margin-bottom: 40px;
}
.noticeItems {
  display: flex;
  position: relative;
  margin: 0 10px;
  padding-left: 83px;
}
.noticeItems .icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 45px;
  height: 48px;
  margin: 0 10px 0 13px;
  transform: translateY(-24px);
  fill: #66afd7;
}
.noticeItems p {
  position: relative;
  margin: 0;
  padding: 15px;
  border-radius: 4px;
  background: #f5f7f5;
}
.noticeItems p::after {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 0;
  height: 0;
  margin-top: -14px;
  border-width: 14px 10px 14px 0;
  border-style: solid;
  border-color: transparent #f5f7f5 transparent transparent;
  content: '';
}

/* リース満了時の取扱いについて
--------------------------------------------- */
.guide .choiceBox {
  display: flex;
  flex-flow: column nowrap;
}
.guide .choiceItem {
  margin: 0 10px 20px;
  border: 2px solid #007abc;
  border-radius: 4px;
  background: #f5f7f5;
}
.guide .choiceImage {
  width: 100%;
  background: #fff;
  text-align: center;
}
.guide .choiceTitle {
  height: 54px;
  margin: 0;
  padding: 0;
  background: #007abc;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 54px;
}
.guide .choiceTitle img {
  width: 43px;
  height: 43px;
  padding: 5px 8px 5px 10px;
}
.guide .choiceText {
  display: block;
  margin: 0 0 20px;
  padding: 20px 15px;
  border-radius: 0 0 4px 4px;
  color: #007abc;
  font-size: 1rem;
  font-weight: bold;
}
.guide .choiceText span {
  display: block;
  margin: 20px 0 0;
  font-size: .875rem;
  font-weight: normal;
  line-height: 1.8;
}

/* リース料のお支払いについて
--------------------------------------------- */
.guide .exampleBox {
  box-sizing: border-box;
  margin: 0 10px 25px;
  padding: 0 0 25px;
  border: 2px solid #007abc;
  border-radius: 8px;
  background: #f5f7f5;
}
.guide .exampleImage {
  margin: 0 15px;
  text-align: center;
}
.guide .exampleImage img {
  max-height: 705px;
}
.guide .exampleTitle {
  display: flex;
  align-items: center;
  margin: 0 0 -5px 0;
  background: #007abc;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3;
}
.guide .exampleTitle span {
  display: inline-block;
  margin: 10px 0;
  color: #fff;
}
.guide .exampleTitle small {
  color: #fff;
  font-size: .750rem;
}
.guide .exampleTitle img {
  width: 43px;
  height: 43px;
  padding: 5px 8px 5px 10px;
}
.guide .exampleHeading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 0 15px;
  padding: 0 15px;
  font-size: .875rem;
  font-weight: bold;
  text-align: center;
}
.guide .exampleHeading::before,
.guide .exampleHeading::after {
  display: inline-block;
  width: 15px;
  border-top: 2px solid #007abc;
  content: "";
}
.guide .exampleHeading::before {
  margin-right: .5em;
}
.guide .exampleHeading::after {
  margin-left: .5em;
}
.guide .tableBox {
  display: flex;
  justify-content: center;
  margin: 0 16px;
  border-collapse: collapse;
}
.guide .tableBox th {
  width: 143px;
  padding: 10px 15px;
  border: solid 1px #007abc;
  background: #f1faff;
  font-size: .875rem;
  text-align-last: left;
}
.guide .tableBox td {
  width: 180px;
  padding-left: 20px;
  border: solid 1px #007abc;
  background: #fff;
  color: #007abc;
  font-size: 1rem;
  font-weight: bold;
}
.guide .tableBox td span {
  color: #007abc;
  font-size: .6875rem;
}