@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Oswald:wght@400;700&family=Protest+Strike&display=swap");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp-noto.min.css");

/*
  PC版 feature_movecanbus に移植した共通ブロック（認定中古車〜店舗）専用。
  既存ページへの影響を避けるため .ucatch-common-blocks 配下にスコープ。
*/

#main .ucatch-common-blocks {
  color: #333;
  font-size: 14px;
  line-height: normal;
}

/* initialize.css の * { font-family: ... } を共通ブロック内だけ上書き */
#main .ucatch-common-blocks,
#main .ucatch-common-blocks * {
  font-family: YakuHanJP_Noto, "Oswald", "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

#main .ucatch-common-blocks p {
  line-height: 1.75;
}

#main .ucatch-common-blocks li,
#main .ucatch-common-blocks dt,
#main .ucatch-common-blocks dd,
#main .ucatch-common-blocks th,
#main .ucatch-common-blocks td {
  line-height: 1.75;
}

#main .ucatch-common-blocks img {
  max-width: 100%;
  height: auto;
}

#main .ucatch-common-blocks strong {
  font-weight: 700;
}

#main .ucatch-common-blocks .contentsbody {
  padding: 50px 0;
}

#main .ucatch-common-blocks .contentswidth {
  width: 980px;
  margin: 0 auto;
}

#main .ucatch-common-blocks .buttonbox {
  text-align: center;
  margin: 50px 0;
}

#main .ucatch-common-blocks .button {
  position: relative;
  display: inline-block;
  width: auto;
  margin: 0 5px 5px;
  padding: 15px 75px 25px;
  border: 1px solid #e2090a;
  background-color: #e2090a;
  line-height: 1;
  border-radius: 100px;
  font-size: 22px;
  font-weight: 700;
  opacity: 1;
  text-decoration: none;
}

#main .ucatch-common-blocks .button::after {
  content: ">";
  position: relative;
  top: 5px;
  margin-left: 20px;
  font-size: 32px;
}

#main .ucatch-common-blocks .button:link,
#main .ucatch-common-blocks .button:visited,
#main .ucatch-common-blocks .button:active {
  transition-duration: 0.25s;
  color: #fff;
  text-decoration: none;
}

#main .ucatch-common-blocks .button:hover {
  background-color: #e43d3d;
}

#main .ucatch-common-blocks .button.blue {
  background-color: #1C2568;
  border-color: #1C2568;
}

#main .ucatch-common-blocks .button.blue:hover {
  background-color: #1d2c98;
}

#main .ucatch-common-blocks .button.redborder {
  background-color: #fff;
  border: 3px solid #e2090a;
  color: #e2090a;
}

#main .ucatch-common-blocks .button.redborder:link,
#main .ucatch-common-blocks .button.redborder:visited,
#main .ucatch-common-blocks .button.redborder:active {
  background-color: #fff;
  color: #e2090a;
}

#main .ucatch-common-blocks .button.redborder:hover {
  background-color: #e2090a;
  color: #fff;
}

/* 認定中古車 */
#main .ucatch-common-blocks .certification-wrapper {
  padding: 40px 30px;
  background: #ddf2f6;
  background: linear-gradient(90deg, #ddf2f6 0%, #fef0dc 50%, #ffe0dd 100%);
  border-radius: 20px;
}

#main .ucatch-common-blocks .certification-header {
  margin: 0 0 30px;
  padding-top: 2%;
  text-indent: 200%;
  overflow: hidden;
  white-space: nowrap;
  background: url(../img/certification-header.png) center center/auto 100% no-repeat;
}

#main .ucatch-common-blocks .certification-lead {
  margin: 0 0 30px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

#main .ucatch-common-blocks .certification-contents {
  display: flex;
  justify-content: space-between;
}

#main .ucatch-common-blocks .certification-contents__item {
  position: relative;
  flex: 0 0 31%;
  margin-bottom: 100px;
  padding: 0 0 20px;
  background: #ce000e;
  background: linear-gradient(180deg, #ce000e 50%, #8a0000 100%);
  border-radius: 0 0 20px 20px;
}

#main .ucatch-common-blocks .certification-contents__header {
  margin: 0 0 20px;
  padding: 40px 0 0;
  background:
    url(../img/certification-contentsheader-bg_1.png) top center/100% auto no-repeat,
    url(../img/certification-contentsheader-bg_2.png) bottom center/100% auto no-repeat;
}

#main .ucatch-common-blocks .certification-contents__header > *:first-child {
  margin: 0 0 10px;
  padding: 0;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 18px;
  font-weight: 700;
  color: #d4000b;
}

#main .ucatch-common-blocks .certification-contents__header > *:nth-child(2) {
  margin: 0;
  text-align: center;
}

#main .ucatch-common-blocks .certification-contents__header > *:nth-child(2) img {
  width: 130px;
}

#main .ucatch-common-blocks .certification-contents__header > *:last-child {
  position: relative;
  padding: 0 0 30px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #333;
}

#main .ucatch-common-blocks .certification-contents__header + p {
  margin: 0 20px;
  color: #fff;
}

#main .ucatch-common-blocks .certification-contents__serif {
  position: absolute;
  top: -70px;
  left: -20px;
  width: 100px;
  height: 100px;
  background: url(../img/certification-serif_1.png) top center/100% auto no-repeat;
  text-indent: 200%;
  overflow: hidden;
  white-space: nowrap;
}

#main .ucatch-common-blocks .certification-contents__notice {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  margin: 0;
  font-size: 12px;
}

/* スマアシ点検 */
#main .ucatch-common-blocks .smaassicheck {
  padding-top: 0;
}

#main .ucatch-common-blocks .smaassicheck-wrapper {
  padding: 40px 30px;
  background-color: #ddeefc;
  border-radius: 0 50px 0 0;
}

#main .ucatch-common-blocks .smaassicheck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

#main .ucatch-common-blocks .smaassicheck-header > * {
  flex: 0 0 58%;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

#main .ucatch-common-blocks .smaassicheck-header > *:first-child {
  flex: 0 0 40%;
}

#main .ucatch-common-blocks .smaassicheck .buttonbox {
  margin: 0;
}

/* まごころ保証プラス */
#main .ucatch-common-blocks .magokoroplus {
  padding-top: 0;
}

#main .ucatch-common-blocks .magokoroplus-border {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 30px 40px 0;
  border-radius: 0 50px 0 0;
  border: #4ea73b solid 4px;
  border-bottom-width: 6px;
}

#main .ucatch-common-blocks .magokoroplus-header {
  margin: 0 0 25px;
  padding: 0 0 15px;
  border-bottom: 2px dashed #4ea73b;
  text-align: center;
}

#main .ucatch-common-blocks .magokoroplus-header img {
  width: 500px;
}

#main .ucatch-common-blocks .magokoroplus-lead {
  margin-bottom: 25px;
  text-align: center;
  font-size: 18px;
}

#main .ucatch-common-blocks .magokoroplus-list {
  display: flex;
  justify-content: center;
  margin: 0 0 30px;
  padding: 0;
}

#main .ucatch-common-blocks .magokoroplus-list li {
  flex: 0 0 230px;
  margin: 0 10px;
  padding: 20px;
  list-style: none;
  border: 4px solid #4ea73b;
  border-radius: 20px;
  line-height: 56px;
  text-align: center;
  font-size: 28px;
  color: #4ea73b;
}

#main .ucatch-common-blocks .magokoroplus-list li:first-child {
  line-height: 28px;
}

#main .ucatch-common-blocks .magokoroplus-detail {
  overflow: hidden;
  max-height: 600px;
  margin: 0;
  padding: 0;
}

#main .ucatch-common-blocks .magokoroplus-opener {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 14px;
}

#main .ucatch-common-blocks .magokoroplus-opener > div {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 200px;
  padding-top: 10px;
  background-color: #4ea73b;
  border-radius: 100%;
  color: #fff;
}

#main .ucatch-common-blocks .magokoroplus-opener > div::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  rotate: 45deg;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

#main .ucatch-common-blocks .magokoroplus-opener.is-open > div::after {
  top: 40px;
  rotate: -135deg;
}

/* まごころ保証プラスα */
#main .ucatch-common-blocks .magokoroplusalpha {
  padding-top: 0;
}

#main .ucatch-common-blocks .magokoroplusalpha-border {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 30px 40px 0;
  border-radius: 0 50px 0 0;
  border: #0386c6 solid 4px;
  border-bottom-width: 6px;
}

#main .ucatch-common-blocks .magokoroplusalpha-header {
  margin: 0 0 25px;
  padding: 0 0 15px;
  border-bottom: 2px dashed #0386c6;
  text-align: center;
}

#main .ucatch-common-blocks .magokoroplusalpha-header img {
  width: 500px;
}

#main .ucatch-common-blocks .magokoroplusalpha-lead {
  margin-bottom: 25px;
  text-align: center;
  font-size: 18px;
}

#main .ucatch-common-blocks .magokoroplusalpha-list {
  display: flex;
  justify-content: center;
  margin: 0 0 50px;
  padding: 0;
}

#main .ucatch-common-blocks .magokoroplusalpha-list li {
  flex: 0 0 230px;
  margin: 0 10px;
  padding: 20px;
  list-style: none;
  border: 4px solid #0386c6;
  border-radius: 20px;
  line-height: 56px;
  text-align: center;
  font-size: 28px;
  color: #0386c6;
}

#main .ucatch-common-blocks .magokoroplusalpha-list li:first-child {
  line-height: 28px;
}

#main .ucatch-common-blocks .magokoroplusalpha-detail {
  overflow: hidden;
  max-height: 600px;
  margin: 0;
  padding: 0;
}

#main .ucatch-common-blocks .magokoroplusalpha-opener {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 14px;
}

#main .ucatch-common-blocks .magokoroplusalpha-opener > div {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 200px;
  padding-top: 10px;
  background-color: #0386c6;
  border-radius: 100%;
  color: #fff;
}

#main .ucatch-common-blocks .magokoroplusalpha-opener > div::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  rotate: 45deg;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

#main .ucatch-common-blocks .magokoroplusalpha-opener.is-open > div::after {
  top: 40px;
  rotate: -135deg;
}

/* 店舗 */
#main .ucatch-common-blocks .showroom {
  padding-top: 0;
}

#main .ucatch-common-blocks .showroom-header {
  margin: 0 0 40px;
  padding: 15px 0;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}

#main .ucatch-common-blocks .showroom-wrapper {
  display: flex;
  justify-content: space-between;
}

#main .ucatch-common-blocks .showroom-wrapper > *:first-child {
  flex: 0 0 40%;
}

#main .ucatch-common-blocks .showroom-wrapper > *:last-child {
  flex: 0 0 55%;
}

#main .ucatch-common-blocks .showroom-wrapper p {
  margin: 0;
}

#main .ucatch-common-blocks .showroom-wrapper p + p {
  margin-top: 1em;
}