/* screen - index */

.index {
  align-items: center;
  background-color: var(--titlecolor);
  display: flex;
  flex-direction: column;
  gap: 80px;
  min-width: 1024px;
  position: relative;
}

.index .mainvisual{
  display: flex;
  width:100%;
  min-width: 1024px;
  height:auto;
  position: relative;
}

.index .frame-3-1 {
  align-self: stretch;
  object-fit: cover;
  position: relative;
  width: 100%;
  height:auto;
}

.index .frame-13 {
  align-items: center;
  background-color: var(--titlecolor);
  border-radius: 5px;
  display: inline-flex;
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
  padding: 15px 30px;
  position: absolute;
  bottom: 10%;
  left: 50%; /* 中央寄せにする場合 */
  transform: translateX(-50%); /* 中央寄せ補正 */
}

.index .text {
  color: var(--mine-shaft);
  font-weight: 400;
  left: 45px;
  line-height: 24px;
  position: absolute;
  top: 3px;
  width: 214px;
}

.index .icon-car {
  aspect-ratio: 1;
  height: 30px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 30px;
}

.index .vector-4 {
  height: 10px;
  left: 273px;
  position: absolute;
  top: 10px;
  width: 16px;
}

.index .vector-5 {
  height: 25.5px;
  position: relative;
  width: 1px;
}

.index .group-2 {
  margin-right: -2.00px;
}

.index .frame-3-2 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  position: relative;
  width: 900px;
}

.index .frame-12 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  position: relative;
  width: 100%;
}

.index .text-3-1 {
  align-self: stretch;
  color: var(--subcolor2);
  font-family: var(--font-family-zen_kaku_gothic_antique);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index .text-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index .ownerinterview {
  flex: 0 0 auto;
  max-width: 900px;
  position: relative;
  width: 100%;
}

.index .frame-3 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  position: relative;
  width: 100%;
}

.index .section-midashi-pc {
  align-items: center;
  align-self: stretch;
  background-color: var(--maincolor);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 0px 10px 30px;
  position: relative;
  width: 100%;
}

.index .midashi-logo-1 {
  aspect-ratio: 1.2;
  height: 50px;
  object-fit: cover;
  position: relative;
  width: 60px;
}

.index .x {
  line-height: 48px;
  text-align: center;
}

.index .zaiko_api {
  height: 1010px;
  position: relative;
  width: 900px;
}

.index .x1 {
  aspect-ratio: 1.83;
  height: 493px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 900px;
}

.index .x2 {
  aspect-ratio: 1.83;
  height: 493px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 517px;
  width: 900px;
}

.index .button {
  cursor: pointer;
  height: 80px;
  position: relative;
  width: 335px;
}

.index .primary {
  gap: 71.6px;
}

.index .title {
  height: 24px;
  margin-left: 104px;
  margin-top: 28px;
  white-space: nowrap;
  width: 128px;
}

.index .vector-1 {
  height: 14.65px;
  margin-top: 32.7px;
  width: 7.04px;
}

.index .x-1 {
  line-height: 48px;
  text-align: center;
}

.index .mj-1 {
  object-fit: cover;
  position: relative;
  width: 900px;
}

.index .primary-1 {
  gap: 63.6px;
}

.index .title-1 {
  height: 24px;
  margin-left: 96px;
  margin-top: 28px;
  white-space: nowrap;
  width: 144px;
}

.index .x-2 {
  line-height: 48px;
  text-align: center;
}

.index .frame-1-1 {
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 40px;
  justify-content: center;
  width: 900px;
}

.index .frame-1 {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 15px;
  position: relative;
}

.index .drive-icon-1 {
  aspect-ratio: 1.66;
  height: 51px;
  object-fit: cover;
  position: relative;
  width: 84.41px;
}

.index .text-6 {
  align-self: stretch;
  color: var(--bodytextcolor);
  font-family: var(--font-family-zen_kaku_gothic_antique);
  font-size: var(--font-size-xxxl);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 36px;
  position: relative;
  text-align: center;
}

.index .text-2 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  position: relative;
}

.index .mv {
  aspect-ratio: 1.43;
  flex: 1;
  flex-grow: 1;
  max-height: 300px;
  max-width: 430px;
}

.index .frame-1-2 {
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 40px;
  justify-content: center;
  max-width: 900px;
  width: 100%;
}

.index .mv-1 {
  flex: 1;
  flex-grow: 1;
  height: 300px;
}

.index .text-8 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index .text-9 {
  align-self: stretch;
  color: var(--subcolor2);
  font-family: var(--font-family-zen_kaku_gothic_antique);
  font-size: var(--font-size-l);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.index .link {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
  width: 100%;
}

.index .web_icon {
  align-items: center;
  background-color: var(--subcolor2);
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
  width: 50px;
}

.index .httpswwwkjmonetjp {
  cursor: pointer;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  text-decoration: underline;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-1-3 {
  align-items: flex-start;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 60px 60px;
  max-width: 900px;
  width: 100%;
}

.index .frame {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 15px;
  min-width: 300px;
  position: relative;
}

.index .text-11 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index .mv-2 {
  align-self: stretch;
  height: 300px;
  width: 100%;
}

.index .https {
  cursor: pointer;
  flex: 1;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  text-decoration: underline;
}

.index .text-13 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index .mv-3 {
  align-self: stretch;
  height: 300px;
  width: 100%;
}

.index .sadamaru-burger {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index .mv-4 {
  align-self: stretch;
  height: 300px;
  width: 100%;
}

.index .text-16 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index .mv-5 {
  align-self: stretch;
  height: 300px;
  width: 100%;
}

.index .x-3 {
  line-height: 48px;
  text-align: center;
}

.index .frame-3-3 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 80px;
  max-width: 900px;
  position: relative;
  width: 100%;
}

.index .frame-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 60px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.index .x20254 {
  flex: 1;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
}

.index .frame-11 {
  align-items: center;
  background-color: var(--subcolor1);
  border-radius: 15px;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  position: relative;
}

.index .img-relocation-prof {
  aspect-ratio: 1;
  height: 180px;
  object-fit: cover;
  position: relative;
  width: 180px;
}

.index .frame-1-4 {
  align-items: center;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
}

.index .text-3 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.index .text-20 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
}

.index .mv-6 {
  aspect-ratio: 1.4;
  flex: 1;
  flex-grow: 1;
  max-height: 300px;
  max-width: 420px;
}

.index .frame-5 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 15px;
  position: relative;
}

.index .text-2-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
}

.index .mv-7 {
  aspect-ratio: 1.4;
  flex: 1;
  flex-grow: 1;
  max-height: 300px;
  max-width: 420px;
}

.index .mv-8 {
  aspect-ratio: 1.4;
  flex: 1;
  flex-grow: 1;
  max-height: 300px;
  max-width: 420px;
}

.index .x-4 {
  line-height: 48px;
  text-align: center;
}

.index .text_label {
  letter-spacing: 0;
  line-height: 30px;
  position: relative;
  text-align: center;
  width: 898px;
}

.index .odekake {
  align-items: flex-start;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 30px 30px;
  width: 900px;
}

.index .odekake-card {
  align-items: center;
  background-color: var(--titlecolor);
  cursor: pointer;
  flex-direction: column;
  gap: 15px;
  width: 280px;
}

.index .img_odekake {
  height: 210px;
  object-fit: cover;
  position: relative;
  width: 280px;
}

.index .text-26 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
}

.index .x-5 {
  align-self: stretch;
  line-height: 24px;
}

.index .x-6 {
  align-self: stretch;
  line-height: 24px;
}

.index .x-7 {
  align-self: stretch;
  line-height: 24px;
}

.index .x-8 {
  align-self: stretch;
  line-height: 24px;
}

.index .x-9 {
  align-self: stretch;
  line-height: 24px;
}

.index .primary-2 {
  gap: 55.6px;
}

.index .title-2 {
  height: 48px;
  margin-left: 88px;
  margin-top: 16px;
  width: 160px;
}

.index .footer {
  align-items: center;
  align-self: stretch;
  background-color: var(--subcolor1);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  padding: 20px 62px 50px;
  position: relative;
  width: 100%;
}

.index .frame-1-5 {
  align-items: flex-start;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: center;
  max-width: 900px;
  width: 100%;
}

.index .snsbtn {
  align-items: center;
  background-color: var(--titlecolor);
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 60px;
  padding: 15px 25px;
  position: relative;
  width: 200px;
}

.index .snsicon {
  aspect-ratio: 1;
  height: 30px;
  object-fit: cover;
  position: relative;
  width: 30px;
}

.index .banner_suzuri-1 {
  align-self: stretch;
  aspect-ratio: 7.43;
  cursor: pointer;
  object-fit: cover;
  position: relative;
  width: 100%;
  max-width:900px;
  margin:0 auto;
}

.index .footer-logo-mj-1 {
  aspect-ratio: 1;
  cursor: pointer;
  height: 130px;
  object-fit: cover;
  position: relative;
  width: 130px;
}

.index .text-27 {
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  text-align: center;
  width: fit-content;
}

.index .frame-1-6 {
  display: flex;
  position: relative;
}

.index .group {
  height: 30px;
  position: relative;
  width: 302px;
}

.index .mv-9 {
  object-fit: cover;
  position: relative;
}

.index .odekake-1 {
  display: flex;
  justify-content: center;
  max-width: 900px;
  position: relative;
}

.index .primary-3 {
  background-color: var(--titlecolor);
  border: 1px solid;
  border-color: var(--black);
  border-radius: 40px;
  display: flex;
  height: 80px;
  width: 335px;
}

.index .title-3 {
  align-items: center;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}

.index .web-5 {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .x-10 {
  letter-spacing: 0;
  position: relative;
}
/* screen - kochi-tokushu-lp-sp */

.kochi-tokushu-lp-sp {
  align-items: center;
  background-color: var(--titlecolor);
  display: flex;
  flex-direction: column;
  gap: 60px;
  min-width: 390px;
  overflow: hidden;
  position: relative;
}

.kochi-tokushu-lp-sp .mainvisual_sp {
  object-fit: cover;
  position: relative;
  width: 100%;
  height:auto;
}

.kochi-tokushu-lp-sp .mv-sp-1 {
  align-self: stretch;
  object-fit: cover;
  position: relative;
  width: 100%;
  height:auto;
}

.kochi-tokushu-lp-sp .frame-13-1 {
  align-items: center;
  background-color: var(--titlecolor);
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.kochi-tokushu-lp-sp .frame-4 {
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 0px 15px;
  width: 100%;
}

.kochi-tokushu-lp-sp .frame-12-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .text-28 {
  align-self: stretch;
  color: var(--subcolor2);
  font-family: var(--font-family-zen_kaku_gothic_antique);
  font-size: var(--font-size-xxxxl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 54px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .text-4 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  position: relative;
}

.kochi-tokushu-lp-sp .ownerinterview-1 {
  flex: 0 0 auto;
  max-width: 900px;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .section-midashi-sp {
  align-items: center;
  align-self: stretch;
  background-color: var(--maincolor);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 0px 10px 20px;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .midashi-logo-1-1 {
  aspect-ratio: 1.2;
  height: 25px;
  object-fit: cover;
  position: relative;
  width: 30px;
}

.kochi-tokushu-lp-sp .x-10 {
  line-height: 48px;
  text-align: center;
}

.kochi-tokushu-lp-sp .fire-shot-capture-00 {
  align-self: stretch;
  aspect-ratio: 0.23;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .button-1 {
  cursor: pointer;
  height: 80px;
  position: relative;
  width: 335px;
}

.kochi-tokushu-lp-sp .primary-3 {
  gap: 71.6px;
}

.kochi-tokushu-lp-sp .title-3 {
  height: 24px;
  margin-left: 104px;
  margin-top: 28px;
  white-space: nowrap;
  width: 128px;
}

.kochi-tokushu-lp-sp .x-11 {
  line-height: 48px;
  text-align: center;
}

.kochi-tokushu-lp-sp .frame-6 {
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.kochi-tokushu-lp-sp .mj-1-1 {
  align-self: stretch;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .primary-4 {
  gap: 63.6px;
}

.kochi-tokushu-lp-sp .title-4 {
  height: 24px;
  margin-left: 96px;
  margin-top: 28px;
  white-space: nowrap;
  width: 144px;
}

.kochi-tokushu-lp-sp .x-12 {
  line-height: 48px;
  text-align: center;
}

.kochi-tokushu-lp-sp .frame-1-6 {
  align-items: center;
  align-self: stretch;
  flex-direction: column;
  gap: 40px;
}

.kochi-tokushu-lp-sp .frame-7 {
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.kochi-tokushu-lp-sp .drive-icon-1-1 {
  aspect-ratio: 1.66;
  height: 51px;
  object-fit: cover;
  position: relative;
  width: 84.41px;
}

.kochi-tokushu-lp-sp .text-5 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .text-31 {
  align-self: stretch;
  color: var(--bodytextcolor);
  font-family: var(--font-family-zen_kaku_gothic_antique);
  font-size: var(--font-size-xxxl);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 36px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .mv-9 {
  aspect-ratio: 1.43;
}

.kochi-tokushu-lp-sp .text-33 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .text-34 {
  align-self: stretch;
  color: var(--subcolor2);
  font-family: var(--font-family-zen_kaku_gothic_antique);
  font-size: var(--font-size-l);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .mv-10 {
  height: 300px;
}

.kochi-tokushu-lp-sp .frame-8 {
  align-items: flex-start;
  align-self: stretch;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.kochi-tokushu-lp-sp .text-35 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
}

.kochi-tokushu-lp-sp .link-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .web_icon-1 {
  align-items: center;
  background-color: var(--subcolor2);
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
  width: 50px;
}

.kochi-tokushu-lp-sp .httpswwwkjmonetjp-1 {
  cursor: pointer;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  text-decoration: underline;
  white-space: nowrap;
  width: fit-content;
}

.kochi-tokushu-lp-sp .frame-15 {
  align-items: flex-start;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  max-width: 900px;
  width: 100%;
}

.kochi-tokushu-lp-sp .frame-9 {
  align-items: flex-start;
  align-self: stretch;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 15px;
  min-width: 300px;
  width: 100%;
}

.kochi-tokushu-lp-sp .text-36 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .mv-11 {
  height: 300px;
}

.kochi-tokushu-lp-sp .https-1 {
  cursor: pointer;
  flex: 1;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  text-decoration: underline;
}

.kochi-tokushu-lp-sp .text-38 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .mv-12 {
  height: 300px;
}

.kochi-tokushu-lp-sp .sadamaru-burger-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .mv-13 {
  height: 300px;
}

.kochi-tokushu-lp-sp .text-41 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 26px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .mv-14 {
  height: 300px;
}

.kochi-tokushu-lp-sp .x-13 {
  line-height: 48px;
  text-align: center;
}

.kochi-tokushu-lp-sp .x20254-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
}

.kochi-tokushu-lp-sp .frame-11-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--subcolor1);
  border-radius: 15px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .img-relocation-prof-1 {
  aspect-ratio: 1;
  height: 180px;
  object-fit: cover;
  position: relative;
  width: 180px;
}

.kochi-tokushu-lp-sp .frame-1-7 {
  align-items: center;
  align-self: stretch;
  flex-direction: column;
  gap: 10px;
}

.kochi-tokushu-lp-sp .text-7 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .text-45 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
}

.kochi-tokushu-lp-sp .text-10 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
}

.kochi-tokushu-lp-sp .mv-15 {
  aspect-ratio: 1.4;
}

.kochi-tokushu-lp-sp .mv-16 {
  aspect-ratio: 1.4;
}

.kochi-tokushu-lp-sp .mv-17 {
  aspect-ratio: 1.4;
}

.kochi-tokushu-lp-sp .x-14 {
  line-height: 48px;
  text-align: center;
}

.kochi-tokushu-lp-sp .text_label-1 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 30px;
  position: relative;
  text-align: center;
}

.kochi-tokushu-lp-sp .odekake-1 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 30px 30px;
  justify-content: center;
  max-width: 900px;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .odekake-card-1 {
  align-items: center;
  background-color: var(--titlecolor);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  max-width: 900px;
  position: relative;
  width: 280px;
}

.kochi-tokushu-lp-sp .img_odekake-1 {
  height: 210px;
  object-fit: cover;
  position: relative;
  width: 280px;
}

.kochi-tokushu-lp-sp .text-51 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
}

.kochi-tokushu-lp-sp .x-15 {
  align-self: stretch;
  line-height: 24px;
}

.kochi-tokushu-lp-sp .x-16 {
  align-self: stretch;
  line-height: 24px;
}

.kochi-tokushu-lp-sp .x-17 {
  align-self: stretch;
  line-height: 24px;
}

.kochi-tokushu-lp-sp .x-18 {
  align-self: stretch;
  line-height: 24px;
}

.kochi-tokushu-lp-sp .x-19 {
  align-self: stretch;
  line-height: 24px;
}

.kochi-tokushu-lp-sp .primary-5 {
  gap: 55.6px;
}

.kochi-tokushu-lp-sp .title-5 {
  height: 48px;
  margin-left: 88px;
  margin-top: 16px;
  width: 160px;
}

.kochi-tokushu-lp-sp .footer-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--subcolor1);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  padding: 20px 15px 50px;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .frame-1-8 {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: center;
  max-width: 900px;
}

.kochi-tokushu-lp-sp .snsbtn-1 {
  align-items: center;
  background-color: var(--titlecolor);
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 60px;
  padding: 15px 25px;
  position: relative;
  width: 200px;
}

.kochi-tokushu-lp-sp .snsicon-1 {
  aspect-ratio: 1;
  height: 30px;
  object-fit: cover;
  position: relative;
  width: 30px;
}

.kochi-tokushu-lp-sp .banner_suzuri-1-1 {
  align-self: stretch;
  aspect-ratio: 7.43;
  cursor: pointer;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .footer-logo-mj-1-1 {
  aspect-ratio: 1;
  cursor: pointer;
  height: 130px;
  object-fit: cover;
  position: relative;
  width: 130px;
}

.kochi-tokushu-lp-sp .text-52 {
  letter-spacing: 0;
  line-height: 18px;
  position: relative;
  text-align: center;
  width: fit-content;
}


.kochi-tokushu-lp-sp .frame-10 {
  align-items: center;
  cursor: pointer;
  gap: 13px;
  height: 30px;
  width: 251px;
}

.kochi-tokushu-lp-sp .icon-car-1 {
  aspect-ratio: 1;
  height: 30px;
  object-fit: cover;
  position: relative;
  width: 30px;
}

.kochi-tokushu-lp-sp .text-53 {
  color: var(--mine-shaft);
  font-weight: 400;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.kochi-tokushu-lp-sp .vector-5-1 {
  height: 1px;
  position: relative;
  width: 200px;
}

.kochi-tokushu-lp-sp .text-54 {
  color: var(--mine-shaft);
  font-weight: 400;
  line-height: 20px;
  position: relative;
  width: 180px;
}

.kochi-tokushu-lp-sp .frame {
  display: flex;
  position: relative;
}

.kochi-tokushu-lp-sp .frame-1 {
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .mv {
  align-self: stretch;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.kochi-tokushu-lp-sp .primary {
  background-color: var(--titlecolor);
  border: 1px solid;
  border-color: var(--black);
  border-radius: 40px;
  display: flex;
  height: 80px;
  width: 335px;
}

.kochi-tokushu-lp-sp .title {
  align-items: center;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
}

.kochi-tokushu-lp-sp .vector-4 {
  height: 10.15px;
  margin-right: -0.73px;
  position: relative;
  width: 16.46px;
}

.kochi-tokushu-lp-sp .web {
  letter-spacing: 0;
  line-height: 30px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.kochi-tokushu-lp-sp .x {
  letter-spacing: 0;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .screen.index { 
    display: none;
   }
}
@media screen and (min-width: 1024px) {
  .screen.kochi-tokushu-lp-sp { 
    display: none;
   }
}




/* 物件API部分 */
#content-area {
    padding: 15px;
    margin-top: 20px;
    width:100%;
}
.loading {
    color: #95a5a6;
}
.error {
    color: #e74c3c;
}

#carlist {
    /* Gridコンテナとして設定 */
    display: grid;
    /* 3つの均等な幅の列を作成 (frは利用可能な空間の割合) */
    grid-template-columns: repeat(3, 1fr); 
    /* 行間の余白 */
    gap: 20px; 
    /* コンテナ全体の最大幅を設定して中央寄せにする場合 */
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.row1 {
    /* ボックスの高さを均一にするためにFlexboxを使用 */
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    background: #fff;
    padding: 12px;
    height: auto;
    min-height: 100%;
}

/* ホバー時の視覚効果 */
.row1:hover {
    transform: translateY(-5px); /* 少し持ち上げる */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}


/* 画像と詳細全体を囲むリンク要素 */
.row2 a {
    /* リンクの下線を消す */
    text-decoration: none;
    /* 子要素にFlexboxを適用して、中身の配置を調整 */
    display: flex;
    flex-direction: column;
    height: 100%; /* 親要素(row1)と同じ高さにする */
    color: #333; /* 文字色を黒に設定 */
}

/* 車名 */
.CarName {
    border-left: 9px solid #c8a063;
    padding: 6px 13px;
    font-size: 1em;
    font-weight: bold;
    color: #a6752b; /* メインカラー */
    margin-top: 0;
    margin-bottom: 5px;
}

/* 画像 */
.row2 img {
    /* 画像をアイテムの幅いっぱいに表示 */
    width: 100%;
    /* アスペクト比を維持して切り抜き */
    height: auto; 
    /* 画像下の余白 */
    margin-bottom: 10px;
    border-radius: 4px;
}

/* 車の説明 */
.UsedCarDesc {
    background: #fff3e29e;
    font-size: 0.9em;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    padding: 5px;
    color: #555;
    box-sizing: border-box;
    margin:0;
}

/* 価格表示エリア */
.price-div {
    margin-top: 10px; /* 上部との間隔 */
    padding: 10px 0 0;
    border-top: 1px dashed #eee;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap:5px;
}

/* 支払総額 */
.TotalPriceViewFlag {
    font-size: 1.1em;
    color: #a6752b; /* 目立つ色 */
    font-weight: bold;
    margin: 0px;
}

/* 車両価格と諸費用 */
.carprice {
    font-size: 0.9em;
    color: #666;
}
.carprice .price {
    font-weight: bold;
    color: #2c3e50;
}
.pricebr {
    color: #ccc;
    margin: 0 5px;
}

/* 保証・整備情報 */
.Guarantee, .Maintained {
    font-size: 0.8em;
    margin-top: 5px;
}
.gtitle1, .gtitle3 {
    background-color: #a6752b; /* 目立つ背景色 */
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
}
.gtitle2 {
    color: #666;
}

/* 画面幅が1024px以下の場合 */
@media (max-width: 1023px) {
    #carlist {
        /* 列を2つに減らす */
        grid-template-columns: repeat(2, 1fr); 
    }
}