@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');


:root {

  --font-family-dr-gothic: 'Zen Kaku Gothic New',Hiragino Sans,Hiragino Kaku Gothic ProN,YuGothic,'Yu Gothic',Meiryo,sans-serif;
  --font-family-dr-en: 'Montserrat','Noto Sans JP',Hiragino Sans,Hiragino Kaku Gothic ProN,YuGothic,'Yu Gothic',Meiryo,sans-serif;


  --color-base: #fff;
  --color-main: #222;
  --color-sub01: #f0f0f0;
  --color-sub02: #ccc;
  --color-sub03: #ffe9e6;
  --color-sub04: #DDFEFF;



  --color-dr-brand01: #daf493;
  --color-dr-brand02: #399D26;
  --color-dr-primary01: #26B7BC;
  --color-dr-sub01: #f6ffdd;

  --color-dr-owari: #ED332B;
  --color-dr-owari-primary: #FF8080;
  --color-dr-owari-sub: #FAE4E4;

  --color-dr-nagoya: #CD9C00;
  --color-dr-nagoya-primary: #F5BE11;
  --color-dr-nagoya-sub: #FFF5D3;

  --color-dr-chita: #158CCC;
  --color-dr-chita-primary: #3AB9D6;
  --color-dr-chita-sub: #DDF5FF;

  --color-dr-nishimikawa: #4DAD10;
  --color-dr-nishimikawa-primary: #9AC424;
  --color-dr-nishimikawa-sub: #ECFFE0;

  --color-dr-higashimikawa: #542596;
  --color-dr-higashimikawa-primary: #8E83E5;
  --color-dr-higashimikawa-sub: #F5EFFF;
}




.drWrapper {
  font-size: clamp(15px, calc(10px + 0.5vw), 18px);
}
em{
  font-style: normal;
}

body:has(.drWrapper) .l-footer {
  background-color: var(--color-dr-sub01);
}

@media screen and (max-width:640px) {
  .drWrapper {
    font-size: clamp(14px, calc(10.5px + 1.2vw), 15px);
  }
}

/***********
fade
************/

[data-fade] {
  opacity: 0;
  transition: 1s;
  transition-delay: 0.1s;
}
[data-fade].is-show {
  opacity: 1;
}

[data-fade="fade-up"] {
  transform: translateY(20px);
}
[data-fade="fade-up"].is-show {
  transform: translateY(0);
}


/***********
drMv
************/

.drMv {
  --drMv-height: 100svh;
  --drMv-minHeight: 600px;
  width: 100%;
  height: var(--drMv-height);
  min-height: var(--drMv-minHeight);
  padding-top: clamp(70px,8vw, 100px);
  position: relative;
  overflow: hidden;
}
.drMv::before {
  content: "";
  display: block;
  width: 100%;
  height: 96svh;
  min-height: calc(var(--drMv-minHeight) - 4svh);
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../img/drive/mv_bg.png) no-repeat center top / max(100%,1280px) auto;
  background-color: #daf493;
}

.drMv-upper {
  text-align: center;
  user-select: none;
  pointer-events: none;
}
.drMv-upper-container {
  display: inline-block;
  width: clamp(480px,30%, 1000px);
  position: relative;
}
.drMv-title {
}

.drMv-lead {
  position: absolute;
  left: 110%;
  top: 60%;
  z-index: 9;
  white-space: nowrap;
  text-align: left;
  font-family: var(--font-family-dr-gothic);
  font-weight: 700;
  font-size: clamp(16px,1.1vw, 28px);
  width: 4.5em;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: row-reverse;
  gap: 0 0.5em;
  align-items: start;
}
.drMv-lead-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 0.6em 0.15em;
  background-color: #daf493;
  border: 1px solid #000;
}
.drMv-lead-text:nth-child(2) {
  margin-top: 2em;
}


.drMv-object {
  position: absolute;
  user-select: none;
  pointer-events: none;
}
.drMv-object.-no01 {
  right: 104%;
  top: -15%;
  width: clamp(200px,24vw, 500px);
}
.drMv-object.-no02 {
  left: 140%;
  top: 10%;
  width: clamp(100px,12vw, 250px);
}
.drMv-object.-no03 {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 100%;
  min-width: 1280px;
}
  .drMv-object.-no04,
  .drMv-object.-no05,
  .drMv-object.-no06 {
    display: none;
  }

/*
visual
*/

.drMv-visual {
  width: 62%;
  min-width: 1024px;
  height: 67svh;
  position: absolute;
  left: 50%;
  bottom: 4svh;
  translate:-50% 0 ;
  border-radius: clamp(50px,4vw, 80px) clamp(50px,4vw, 80px) 0 0;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
body.is-loaded .drMv-visual {
  opacity: 1;
  transition: 0.5s ease 0s;
}


/*
slider
*/

.drMv-slider{
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 2s ease 0.1s;
}
.drMv-slider * {
  height: 100% !important;
  min-height: 100%;
}
body.is-loaded .drMv-slider{
  opacity: 1;
}
.drMv-slider :not(.slick-dots) li{
}

.drMv-img img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

@media screen and (max-width:1024px) {

  .drMv::before {
    height: 98svh;
    min-height: calc(var(--drMv-minHeight) - 2svh);
    background-color: #daf493;
  }
  .drMv-upper {
  }
  .drMv-upper-container {
    width: clamp(280px,35%, 1000px);
  }

  .drMv-object {
    position: absolute;
    user-select: none;
    pointer-events: none;
  }
  .drMv-object.-no01 {
    width: clamp(200px,20vw, 500px);
  }
  .drMv-object.-no02 {
    width: clamp(100px,10vw, 250px);
  }
  .drMv-object.-no03 {
    min-width: 834px;
  }

  /*
  visual
  */

  .drMv-visual {
    width: 80%;
    min-width: 640px;
    height: 70svh;
    bottom: 2svh;
  }

}


@media screen and (max-width:640px) {

  .drMv {
    --drMv-height: 100svh;
    --drMv-minHeight: 600px;
    padding-top: 140px;
  }
  .drMv::after {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background: url(../../img/drive/object/road02.png) no-repeat center bottom / auto 40px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .drMv::before {
    height: calc(100svh - 20px);
    min-height: calc(var(--drMv-minHeight) - 20px);
  }

  .drMv-upper {
    text-align: center;
    user-select: none;
    pointer-events: none;
  }
  .drMv-upper-container {
    display: inline-block;
    width: clamp(200px,65%, 340px);
    position: relative;
  }
  .drMv-title {
  }

  .drMv-lead {
    position: absolute;
    left: auto;
    right: 80%;
    top: 160px;
    font-size: clamp(14px,3.4vw, 16px);
  }

  .drMv-object {
    pointer-events: none;
  }
  .drMv-object.-no01,
  .drMv-object.-no02,
  .drMv-object.-no03 {
    display: none;
  }
  .drMv-object.-no04,
  .drMv-object.-no05,
  .drMv-object.-no06 {
    display: block;
  }
  .drMv-object.-no04 {
    width: 95px;
    position: absolute;
    right: 5%;
    top: 60px;
  }
  .drMv-object.-no05 {
    width: 95px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
  }
  .drMv-object.-no06 {
    width: 190px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9;
  }

  /*
  visual
  */

  .drMv-visual {
    width: 90%;
    min-width: initial;
    height: calc(100svh - 240px);
    bottom: 20px;
    border-radius: clamp(20px,4vw, 50px) clamp(20px,4vw, 50px) 0 0;
  }


  /*
  slider
  */

  .drMv-slider{
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 2s ease 0.1s;
  }
  .drMv-slider * {
    height: 100% !important;
    min-height: 100%;
  }
  body.is-loaded .drMv-slider{
    opacity: 1;
  }
  .drMv-slider :not(.slick-dots) li{
  }

  .drMv-img img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

}

/***********
drIntro
************/

.drIntro {
  padding-block: min(20vw,18em) min(10vw,8em);
  position: relative;
}
.drIntro::before {
  content: "";
  display: block;
  width: 55%;
  height: 10vw;
  background: url(../../img/drive/object/road01.png) no-repeat 0 0 / 100% auto;
  position: absolute;
  right: 0;
  top: 2vw;
}
.drIntro-container {
  display: flex;
  gap: 0 4%;
}
.drIntro-inner {
  flex: 1;
  text-align: center;
  position: relative;
}
.drIntro-heading {
  padding-bottom: 1.5em;
  margin-top: -1em;
}
.drIntro-heading-title {
  display: inline-block;
  font-family: var(--font-family-dr-gothic);
  font-weight: 700;
  font-size: 2.4em;
  line-height: 1.4;
  color: var(--color-dr-brand02);
  position: relative;
}
.drIntro-heading-title em {
  color: #EA502E;
}
.drIntro-heading-title::before {
  content: "";
  display: block;
  width: 5em;
  height: 3em;
  background: url(../../img/drive/intro_welcome.png) no-repeat 0 0 / 100% auto;
  position: absolute;
  left: -3em;
  top: -3.2em;
}
.drIntro-text {
  font-size: 0.9em;
  line-height: 2.2;
  letter-spacing: 0.04em;
}
.drIntro-visual {
  width: 52%;
  position: relative;
}
.drIntro-img {
  border: 1px solid var(--color-main);
  border-radius: 3em;
  margin-right: 3em;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  box-shadow: 3em 3em 0 var(--color-dr-brand01);
}
.drIntro-object01 {
  position: absolute;
  left: 80%;
  bottom: 95%;
  width: clamp(120px,12vw, 230px);
}
.drIntro-object02 {
  position: absolute;
  right: 95%;
  top: 50%;
  width: clamp(20px,2.5vw, 45px);
}
.drIntro-object03 {
  position: absolute;
  right: calc(50% + 450px);
  bottom: 2em;
  width: clamp(150px,15vw, 230px);
}



.drIntro-value {
  max-width: 700px;
  margin: 10em auto 0;
  padding-right: 5em;
  display: flex;
  flex-direction: row-reverse;
  position: relative;
}
.drIntro-value::before,
.drIntro-value::after {
  content: "";
  display: block;
  width: 2em;
  height: 100%;
  position: absolute;
  top: 0;
  border: 3px solid var(--color-dr-brand02);
  border-radius: 3px;
}
.drIntro-value::before{
  left: 0;
  border-right: none;
}
.drIntro-value::after{
  right: 0;
  border-left: none;
}
.drIntro-value-visual {
  width: clamp(120px,25%, 150px);
  position: relative;
}
.drIntro-value-img {
  position: absolute;
  bottom: 0;
}
.drIntro-value-inner {
  flex: 1;
  text-align: center;
  padding: 0 2em;
}
.drIntro-value-text {
  font-size: 0.9em;
  line-height: 1.6;
}
.drIntro-value-text em {
  color: #EA502E;
  font-weight: 700;
  font-size: 140%;
}
.drIntro-value-link {
  padding-top: 0.5em;
}
.drIntro-value-btn {
  display: inline-block;
  padding: 0.5em 3em;
  border: 1px solid var(--color-dr-brand02);
  color: var(--color-dr-brand02);
  font-size: 0.9em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 3em;
  position: relative;
}
.drIntro-value-btn::after {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\f175";
  position: absolute;
  right: 1.5em;
  top: 52%;
  translate: 0 -50%;
  scale: 0.9;
}
body.is-pc .drIntro-value-btn:hover {
  background-color: var(--color-dr-sub01);
}

@media screen and (max-width:834px) {

  .drIntro {
    padding-block: min(30vw,10em) min(10vw,5em);
  }
  .drIntro::before {
    display: none;
  }
  .drIntro-container {
    display: block;
  }
  .drIntro-inner {
    padding-bottom: 240px;
  }
  .drIntro-heading {
    padding-bottom: 1.5em;
    margin-top: -1em;
  }
  .drIntro-heading-title {
    font-size: 1.6em;
  }
  .drIntro-text {
    letter-spacing: 0.02em;
  }
  .drIntro-visual {
    width: auto;
  }
  .drIntro-img {
    border-radius: 1.5em;
    margin-right: 1.5em;
    box-shadow: 1.5em 1.5em 0 var(--color-dr-brand01);
  }
  .drIntro-object01 {
    left: auto;
    right: 0;
    bottom: calc(100% + 50px);
    width: 140px;
  }
  .drIntro-object02 {
    right: 10px;
    top: -25px;
    width: 30px;
  }
  .drIntro-object04 {
    position: absolute;
    right: auto;
    left: 0;
    bottom: 25px;
    width: 120px;
  }
  .drIntro-object04::after {
    content: "";
    display: block;
    width: 30px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    background: url(../../img/drive/object/kira01.png) no-repeat 0 0 / 100% auto;
  }

}

@media screen and (max-width:640px) {

  .drIntro-value {
    margin: 180px auto 0;
    padding-right: 3vw;
    padding-left: 3vw;
    display: block;
  }
  .drIntro-value::before,
  .drIntro-value::after {
    width: 10px;
    border-width: 2px;
    border-radius: 2px;
  }
  .drIntro-value-visual {
    width: 100px;
    height: 50px;
    margin: 0 auto 1.5em;
  }
  .drIntro-value-img {
    position: absolute;
    bottom: 0;
  }
  .drIntro-value-inner {
    padding: 0 0 1em;
  }
  .drIntro-value-text {
  }
  .drIntro-value-text em {
    font-size: 130%;
  }
  .drIntro-value-link {
    padding-top: 1em;
  }

}

/***********
drSlide01
************/

.drSlide01 {
  position: relative;
  margin-bottom: min(12vw,10em);
}
.drSlide01-slider {
}
.drSlide01-item {
  padding: 0 0.5em;
}
.drSlide01-item img {
  width: clamp(150px,18vw, 420px);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.drSlide01-object01 {
  position: absolute;
  left: calc(50% + 450px);
  bottom: -2em;
  z-index: 2;
  width: clamp(100px,10vw, 160px);
}

@media screen and (max-width:640px) {

  .drSlide01 {
    margin-top: 4em;
    margin-bottom: 150px;
  }
  .drSlide01-slider {
  }
  .drSlide01-item {
    padding: 0 0.2em;
  }
  .drSlide01-item img {
  }
  .drSlide01-object01 {
    left: auto;
    right: 5%;
    bottom: -2em;
    width: 80px;
  }

}

/***********
drHeadline
************/

.drTextLead {
  line-height: 2;
  text-align: center;
}
.drTextLead.-small {
  line-height: 1.6;
  font-size: 0.85em;
}

@media screen and (max-width:520px) {

  .drTextLead {
    line-height: 1.8;
    text-align: left;
  }

}

/***********
drHeadline
************/

.drHeadline {
  text-align: center;
}
.drHeadline-title {
  display: inline-block;
  font-family: var(--font-family-dr-en);
  font-weight: 800;
  font-size: clamp(2em,5vw, 2.5em);
  letter-spacing: 0.25em;
  position: relative;
}
.drHeadline-title::before,
.drHeadline-title::after {
  content: "";
  display: block;
  width: 1.2em;
  height: 1em;
  background: url(../../img/drive/object/car.svg) no-repeat 0 0 / 100% auto;
  position: absolute;
  top: 50%;
  translate: 0 -40%;
  filter: brightness(0) saturate(100%)
        invert(46%)
        sepia(92%)
        saturate(520%)
        hue-rotate(64deg)
        brightness(96%)
        contrast(94%);
}
.drHeadline-title::before{
  left: calc(100% + 1em);
}
.drHeadline-title::after{
  right: calc(100% + 1em);
}

/*
color
*/

.theme-owari .drHeadline-title::before,
.theme-owari .drHeadline-title::after {
  filter: brightness(0) saturate(100%)
        invert(33%)
        sepia(96%)
        saturate(6350%)
        hue-rotate(353deg)
        brightness(99%)
        contrast(104%);
}
.theme-nagoya .drHeadline-title::before,
.theme-nagoya .drHeadline-title::after {
  filter: brightness(0) saturate(100%)
          invert(63%)
          sepia(78%)
          saturate(2100%)
          hue-rotate(11deg)
          brightness(92%)
          contrast(98%);
}
.theme-chita .drHeadline-title::before,
.theme-chita .drHeadline-title::after {
  filter: brightness(0) saturate(100%)
        invert(52%)
        sepia(48%)
        saturate(3200%)
        hue-rotate(170deg)
        brightness(92%)
        contrast(101%);
}
.theme-nishimikawa .drHeadline-title::before,
.theme-nishimikawa .drHeadline-title::after {
filter: brightness(0) saturate(100%)
        invert(55%)
        sepia(78%)
        saturate(4100%)
        hue-rotate(78deg)
        brightness(95%)
        contrast(102%);
}
.theme-higashimikawa .drHeadline-title::before,
.theme-higashimikawa .drHeadline-title::after {
filter: brightness(0) saturate(100%)
        invert(21%)
        sepia(48%)
        saturate(4200%)
        hue-rotate(262deg)
        brightness(88%)
        contrast(108%);
}



@media screen and (max-width:640px) {

  .drHeadline {
  }
  .drHeadline-title {
    font-size: clamp(1.45em,6vw, 2em);
  }
  .drHeadline-title::before,
  .drHeadline-title::after {
    width: 1.4em;
    height: 1.2em;
  }

}

/***********
drMap
************/

.drMap {
  background: url(../../img/drive/bg_road.png) repeat center -150px ;
  background-color: var(--color-dr-sub01);
}
.drMap-wrapper {
  background: linear-gradient(to bottom, transparent 60%, var(--color-dr-sub01) 80%);
}
.drMap-heading {
  border-block: 1px solid var(--color-main);
  padding: 0.8em 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: relative;
}
.drMap-heading::before {
  content: "";
  display: block;
  width: 147px;
  height: 160px;
  background: url(../../img/drive/object/object02.png) no-repeat 0 bottom / 100% auto;
  position: absolute;
  right: calc(50% + 500px);
  bottom: 100%;
  z-index: 9;
}
.drMap-heading::after {
  content: "";
  display: block;
  width: 168px;
  height: 200px;
  background: url(../../img/drive/object/character02.png) no-repeat 0 bottom / 100% auto;
  position: absolute;
  right: calc(50% + 420px);
  bottom: 40%;
  z-index: 9;
}

@media screen and (max-width:1024px) {

  .drMap {
    background: url(../../img/drive/bg_road_sp.png) repeat center 200px ;
    background-color: var(--color-dr-sub01);
    background-size: 100% auto;
  }
  .drMap-wrapper {
    background: linear-gradient(to bottom, var(--color-dr-sub01) 10%,transparent 15%,transparent 60%, var(--color-dr-sub01) 80%);
  }
  .drMap-heading {
    padding: 1em 0;
  }
  .drMap-heading::before {
    width: 100px;
    height: 120px;
    right: auto;
    left: 0;
    bottom: 100%;
  }
  .drMap-heading::after {
    width: 86px;
    height: 90px;
    right: auto;
    left: 55px;
    bottom: calc(100% - 10px);
  }

}

/***********
drPref
************/

.drPref {
}
.drPref-heading {
  text-align: center;
  padding-bottom: 1.5em;
}
.drPref-heading-title {
  display: inline-block;
  font-family: var(--font-family-dr-gothic);
  font-weight: 700;
  font-size: 1.5em;
  position: relative;
}
.drPref-heading-title::before,
.drPref-heading-title::after {
  content: "";
  display: block;
  width: 2px;
  height: 1.5em;
  position: absolute;
  background-color: var(--color-main);
  top: 50%;
  translate: 0 -45%;
}
.drPref-heading-title::before {
  right: 100%;
  margin-right: 1.5em;
  rotate: -40deg;
}
.drPref-heading-title::after {
  left: 100%;
  margin-left: 1.5em;
  rotate: 40deg;
}
.drPref-map {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.drPref-map::before,
.drPref-map::after {
  content: "";
  display: block;
  width: 140px;
  height: 60px;
  background: url(../../img/drive/object/dots01.png) no-repeat 0 0 / 100% auto;
  position: absolute;
}
.drPref-map::before{
  right: calc(100% + 2em);
  top: 60%;
}
.drPref-map::after{
  left: calc(100% + 2em);
  top: 5%;
}

.drPref-svgMount {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

body.is-pc .drPref-svgMount svg:has(a:hover) a {
  opacity: 0.3;
}
body.is-pc .drPref-svgMount svg:has(a:hover) a:not(:hover) path:not([class]) {
  opacity: 0;
}
body.is-pc .drPref-svgMount svg a:hover {
  opacity: 1 !important;
}

.drMap-container {
  position: relative;
}
.drMap-object {
  position: absolute;
  pointer-events: none;
}
.drMap-object.-no01 {
  width: 220px;
  right: calc(50% + 480px);
  top: -200px;
}
.drMap-object.-no02 {
  width: 220px;
  left: calc(50% + 480px);
  top: -280px;
}
.drMap-object.-no03 {
  width: 160px;
  left: calc(50% + 600px);
  top: 60%;
}
.drMap-object.-no04 {
  width: 160px;
  right: calc(50% + 600px);
  top: 35%;
}
.drMap-object.-no05 {
  width: 140px;
  left: calc(50% + 650px);
  top: 5%;
}
.drMap-object.-no06 {
  width: 160px;
  right: calc(50% + 600px);
  bottom: -2%;
}
.drMap-object.-no07 {
  width: 220px;
  left: calc(50% + 50px);
  bottom: 12%;
}

.drMap-object.-no11 {
  width: 120px;
  left: calc(50% + 740px);
  top: 0%;
}
.drMap-object.-no12 {
  width: 120px;
  left: calc(50% + 600px);
  top: 20%;
  scale: -1 1;
}
.drMap-object.-no13 {
  width: 150px;
  right: calc(50% + 600px);
  top: 55%;
}
.drMap-object.-no14 {
  width: 150px;
  left: calc(50% + 300px);
  bottom: 28%;
  scale: -1 1;
}
.drMap-object.-no15 {
  width: 40px;
  right: calc(50% + 630px);
  top: 28%;
}


@media screen and (max-width:640px) {

  .drPref {
  }
  .drPref-heading {
    padding-top: 1em;
  }
  .drPref-heading::after {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background: url(../../img/drive/object/object07.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    right: 0;
    top: 50px;
    pointer-events: none;
  }
  .drPref-heading-title {
    font-size: 1.2em;
  }
  .drPref-map {
    max-width: 800px;
    margin: 0 -3vw;
  }
  .drPref-map::before,
  .drPref-map::after {
    content: "";
    display: block;
    width: 60px;
    height: 40px;
  }
  .drPref-map::before{
    right: 0;
  }
  .drPref-map::after{
    left: 0;
    top: -70px;
  }

  .drPref-svgMount {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  body.is-pc .drPref-svgMount svg:has(a:hover) a {
    opacity: 0.3;
  }
  body.is-pc .drPref-svgMount svg a:hover {
    opacity: 1 !important;
  }

  .drMap-container {
    position: relative;
    padding-bottom: 250px;
  }
  .drMap-object {
    position: absolute;
    pointer-events: none;
  }
  .drMap-object.-no01 {
    width: 80px;
    right: auto;
    left: 0;
    top: -80px;
  }
  .drMap-object.-no02 {
    display: none;
  }
  .drMap-object.-no03 {
    width: 100px;
    left: 70px;
    top: auto;
    bottom: 0;
  }
  .drMap-object.-no04 {
    display: none;
  }
  .drMap-object.-no05 {
    width: 90px;
    left: 0;
    top: auto;
    bottom: 80px;
  }
  .drMap-object.-no06 {
    display: none;
  }
  .drMap-object.-no07 {
    display: none;
  }

  .drMap-object.-no11,
  .drMap-object.-no12,
  .drMap-object.-no13,
  .drMap-object.-no14,
  .drMap-object.-no15 {
    display: none;
  }


}

/***********
drAreaList
************/

.drAreaList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7em 7%;
  max-width: 1160px;
  margin-inline: auto;
  position: relative;
  z-index: 9;
}

.drAreaList li {
}
.drAreaList li a{
  display: block;
  color: inherit;
  text-decoration: none;
}
.drAreaList-block {
  border: 1px solid var(--color-main);
  background-color: var(--color-base);
  border-radius: clamp(1.2em,1.2vw, 1.5em);
  padding: min(5vw,2em) min(5vw,2em);
  transition: 0.3s;
}
.drAreaList-upper {
  display: flex;
  align-items: center;
}
.drAreaList-heading {
  width: 6.5em;
  padding-left: 1em;
  text-align: center;
}
.drAreaList-heading-title {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 2.5em;
  font-weight: 700;
  font-family: var(--font-family-dr-gothic);
  letter-spacing: 0.4em;
  width: 1.5em;
}
.drAreaList-visual {
  flex: 1;
}
.drAreaList-img {
  margin-right: -4em;
  margin-top: -4em;
  border: 1px solid var(--color-main);
  border-radius: clamp(1.2em,1.2vw, 1.5em);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.drAreaList-inner {
  padding: 1.5em 3em 1em 0;
}
.drAreaList-inner::after {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\f178";
  width: 3em;
  height: 3em;
  border: 1px solid var(--color-main);
  border-radius: 50%;
  background-color: var(--color-main);
  color: var(--color-base);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  right: 2em;
  bottom: 2em;
  transition: 0.3s;
}
body.is-pc a:hover .drAreaList-inner::after {
  width: 4em;
  height: 4em;
  translate: 0.5em 0.5em;
}

.drAreaList-text {
  font-size: 0.9em;
  line-height: 1.7;
}
.drAreaList-tips {
  font-size: 0.8em;
  line-height: 1.5;
}

/*
color
*/

.drAreaList li.-owari .drAreaList-heading-title {
  color: var(--color-dr-owari);
}
.drAreaList li.-owari .drAreaList-inner::after {
  background-color: var(--color-dr-owari);
}
.drAreaList li.-owari a:hover .drAreaList-block {
  background-color: var(--color-dr-owari-sub);
}

.drAreaList li.-nagoya .drAreaList-heading-title {
  color: var(--color-dr-nagoya);
}
.drAreaList li.-nagoya .drAreaList-inner::after {
  background-color: var(--color-dr-nagoya);
}
.drAreaList li.-nagoya a:hover .drAreaList-block {
  background-color: var(--color-dr-nagoya-sub);
}

.drAreaList li.-chita .drAreaList-heading-title {
  color: var(--color-dr-chita);
}
.drAreaList li.-chita .drAreaList-inner::after {
  background-color: var(--color-dr-chita);
}
.drAreaList li.-chita a:hover .drAreaList-block {
  background-color: var(--color-dr-chita-sub);
}

.drAreaList li.-nishimikawa .drAreaList-heading-title {
  color: var(--color-dr-nishimikawa);
}
.drAreaList li.-nishimikawa .drAreaList-inner::after {
  background-color: var(--color-dr-nishimikawa);
}
.drAreaList li.-nishimikawa a:hover .drAreaList-block {
  background-color: var(--color-dr-nishimikawa-sub);
}

.drAreaList li.-higashimikawa .drAreaList-heading-title {
  color: var(--color-dr-higashimikawa);
}
.drAreaList li.-higashimikawa .drAreaList-inner::after {
  background-color: var(--color-dr-higashimikawa);
}
.drAreaList li.-higashimikawa a:hover .drAreaList-block {
  background-color: var(--color-dr-higashimikawa-sub);
}


@media screen and (max-width:1024px) {

  .drAreaList-heading {
    width: 5.5em;
    padding-left: 0;
  }
  .drAreaList-heading-title {
    font-size: 1.8em;
  }

}

@media screen and (max-width:834px) {


  .drAreaList {
    display: block;
    max-width: 520px;
    margin: 0 auto;
  }

  .drAreaList li {
    margin-right: 2em;
  }
  .drAreaList li + li {
    margin-top: 5em;
  }
  .drAreaList li a{
  }
  .drAreaList-block {
    border-radius: clamp(1.2em,1.2vw, 1.5em);
    padding: min(5vw,2em) min(5vw,2em);
  }
  .drAreaList-upper {
    display: flex;
    align-items: center;
  }
  .drAreaList-heading {
    width: 5.5em;
    padding-left: 1em;
  }
  .drAreaList-heading-title {
    font-size: 1.7em;
  }
  .drAreaList-visual {
    flex: 1;
  }
  .drAreaList-img {
    margin-right: -3em;
    margin-top: -3em;
  }
  .drAreaList-inner {
    padding: 1.5em 0 2.5em 0;
  }
  .drAreaList-inner::after {
    right: 0.8em;
    bottom: 1em;
    scale: 0.8;
  }
  body.is-pc a:hover .drAreaList-inner::after {
    width: 4em;
    height: 4em;
    translate: 0.5em 0.5em;
  }

  /*
  object
  */

  .drAreaList li {
    position: relative;
  }
  .drAreaList li:nth-child(1)::after {
    content: "";
    display: block;
    width: 70px;
    height: 40px;
    background: url(../../img/drive/object/dots01.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    left: -6vw;
    top: calc(100% + 2em)
  }
  .drAreaList li:nth-child(2)::before {
    content: "";
    display: block;
    width: 80px;
    height: 60px;
    background: url(../../img/drive/object/dotskira01.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    left: -4vw;
    top: calc(100% + 0.5em)
  }
  .drAreaList li:nth-child(2)::after {
    content: "";
    display: block;
    width: 70px;
    height: 40px;
    background: url(../../img/drive/object/dots01.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    right: -75px;
    top: 40%;
  }
  .drAreaList li:nth-child(3)::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background: url(../../img/drive/object/object06.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    left: -6vw;
    top: calc(100% + 0.5em)
  }
  .drAreaList li:nth-child(3)::after {
    content: "";
    display: block;
    width: 70px;
    height: 40px;
    background: url(../../img/drive/object/dots01.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    right: -45px;
    top: 40%;
  }
  .drAreaList li:nth-child(4)::before {
    content: "";
    display: block;
    width: 120px;
    height: 100px;
    background: url(../../img/drive/object/object03.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    right: -80px;
    top: calc(100% - 1.5em)
  }
  .drAreaList li:nth-child(5)::before {
    content: "";
    display: block;
    width: 70px;
    height: 40px;
    background: url(../../img/drive/object/dots01.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    right: -75px;
    top: 60%;
  }
  .drAreaList li:nth-child(5)::after {
    content: "";
    display: block;
    width: 70px;
    height: 40px;
    background: url(../../img/drive/object/dots01.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    right: 75px;
    bottom: -100px;
  }


}

/***********
drPamphlet
************/

.drPamphlet {
  position: relative;
}
.drPamphlet-object {
  position: absolute;
  pointer-events: none;
}
.drPamphlet-object.-no12 {
  width: 120px;
  left: calc(50% + 680px);
  bottom: 30%;
  scale: -1 1;
}
.drPamphlet-object.-no13 {
  width: 150px;
  right: calc(50% + 660px);
  top: 35%;
}

.drPamphlet-section {
  border: 1px solid var(--color-dr-brand02);
  background-color: var(--color-base);
  border-radius: 1.5em;
  padding: min(7vw,2em) min(5vw,3em);
  position: relative;
}
.drPamphlet-section + .drPamphlet-section {
  margin-top: 20px;
}
.drPamphlet-section + .drPamphlet-section::before,
.drPamphlet-section + .drPamphlet-section::after {
  content: "";
  display: block;
  width: 12px;
  height: 80px;
  background: url(../../img/drive/pamphlet_joint.png) no-repeat 0 0 / 100% auto;
  position: absolute;
  top: -50px;
}
.drPamphlet-section + .drPamphlet-section::before{
  left: 15%;
}
.drPamphlet-section + .drPamphlet-section::after{
  right: 15%;
}

.drPamphlet-container {
  display: flex;
  align-items: center;
  gap: 0 5%;
}
.drPamphlet-inner {
  flex: 1;
  text-align: center;
}
.drPamphlet-heading {
  font-family: var(--font-family-dr-en);
  font-weight: 800;
  font-size: 2.4em;
  letter-spacing: 0.2em;
  padding-bottom: 0.5em;
  color: #EA502E;
}
.drPamphlet-text {
  font-size: 0.9em;
  line-height: 1.7;
}
.drPamphlet-link {
  padding-top: 1.5em;
}
.drPamphlet-link-btn {
  display: inline-block;
  font-size: 0.9em;
  font-weight: 500;
  padding: 0.8em 3.5em;
  background-color: var(--color-dr-brand02);
  color: var(--color-base);
  position: relative;
  text-decoration: none;
  border-radius: 3em;
}
.drPamphlet-link-btn::before {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\f019";
  position: absolute;
  left: 1.5em;
  top: 50%;
  translate: 0 -50%;
}
body.is-pc .drPamphlet-link-btn:hover {
  filter: brightness(120%);
}

.drPamphlet-img {
  width: 40%;
}
.drPamphlet-img img {
  max-width: 240px;
}


.drPamphlet-sticker {
  display: flex;
  align-items: center;
  gap: 0 5%;
}
.drPamphlet-sticker-img {
  width: 30%;
}
.drPamphlet-sticker-inner {
  flex: 1;
}
.drPamphlet-sticker-lead {
  color: #EA502E;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.4;
}
.drPamphlet-sticker-lead em {
  font-size: 150%;
}
.drPamphlet-sticker-heading {
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.4;
}
.drPamphlet-sticker-heading em {
  color: #EA502E;
}
.drPamphlet-sticker-term {
  display: flex;
  gap: 0 1.5em;
  margin-top: 1.5em;
}
.drPamphlet-sticker-term dt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-radius: 3em;
  background-color: #EA502E;
  color: var(--color-base);
  width: 2.5em;
  font-weight: 600;
}
.drPamphlet-sticker-term dd {
  flex: 1;
  font-size: 0.85em;
  line-height: 1.7;
}
.drPamphlet-sticker-term dd strong {
  color: #EA502E;
}

@media screen and (max-width:834px) {

  .drPamphlet {
  }
  .drPamphlet-object {
    position: absolute;
    pointer-events: none;
  }
  .drPamphlet-object.-no12 {
    width: 120px;
    left: calc(50% + 680px);
    bottom: 30%;
    scale: -1 1;
  }
  .drPamphlet-object.-no13 {
    width: 150px;
    right: calc(50% + 660px);
    top: 35%;
  }

  .drPamphlet-section {
    border-radius: 1em;
    padding: min(7vw,2em) min(5vw,3em);
  }
  .drPamphlet-section + .drPamphlet-section {
    margin-top: 10px;
  }
  .drPamphlet-section + .drPamphlet-section::before,
  .drPamphlet-section + .drPamphlet-section::after {
    width: 9px;
    height: 60px;
    top: -37px;
  }

  .drPamphlet-container {
    display: block;
  }
  .drPamphlet-inner {
    flex: 1;
    text-align: center;
  }
  .drPamphlet-heading {
    font-size: 1.7em;
  }
  .drPamphlet-text {
    font-size: 0.9em;
    line-height: 1.7;
  }
  .drPamphlet-text + .drPamphlet-text {
    padding-top: 0.8em;
  }
  .drPamphlet-link {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .drPamphlet-img {
    width: 40%;
    margin: 0 auto 1.5em;
    text-align: center;
  }
  .drPamphlet-img img {
    max-width: 140px;
  }


  .drPamphlet-sticker {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .drPamphlet-sticker-img {
    width: 220px;
    margin: 1em auto 0;
  }
  .drPamphlet-sticker-inner {
    flex: 1;
    text-align: center;
  }
  .drPamphlet-sticker-lead {
    font-size: 1.1em;
    padding-bottom: 0.8em;
  }
  .drPamphlet-sticker-lead em {
    display: inline-block;
    font-size: 150%;
  }
  .drPamphlet-sticker-heading {
    font-size: 1.5em;
  }
  .drPamphlet-sticker-heading em {
  }

  .drPamphlet-sticker-term {
    display: block;
  }
  .drPamphlet-sticker-term dt {
    display: inline-block;
    width: 7.5em;
    padding: 0.3em 0;
    margin-bottom: 1em;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
  .drPamphlet-sticker-term dt br {
    display: none;
  }
  .drPamphlet-sticker-term dd {
    font-size: 0.9em;
    text-align: left;
  }

}

/***********
drSlide02
************/

.drSlide02 {
  position: relative;
  margin-top: min(5vw,5em);
  padding-bottom: min(15vw,8em);
}
.drSlide02-slider {
  position: relative;
}
.drSlide02-slider::before,
.drSlide02-slider::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../../img/drive/object/road02.png) no-repeat 0 0 ;
  background-size: clamp(1920px,100%, 9999px);
  position: absolute;
  left: 0;
  pointer-events: none;
  z-index: 9;
}
.drSlide02-slider::before{
  top: -36px;
  background-position: center top;
}
.drSlide02-slider::after{
  bottom: -30px;
  background-position: center bottom;
}
.drSlide02-item {
}
.drSlide02-item img {
  width: clamp(300px,16vw, 400px);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.drSlide02-object01 {
  position: absolute;
  right: calc(50% + 550px);
  bottom: 100%;
  z-index: 10;
  width: clamp(100px,10vw, 140px);
}
.drSlide02-object02 {
  position: absolute;
  left: calc(50% + 550px);
  bottom: calc(100% + 10px);
  z-index: 2;
  width: clamp(120px,14vw, 180px);
}
.drSlide02-object03 {
  position: absolute;
  width: 40px;
  right: calc(50% + 680px);
  bottom: calc(100% + 150px);
  z-index: 10;
}

@media screen and (max-width:834px) {


  .drSlide02 {
    margin-top: 100px;
    padding-bottom: min(15vw,8em);
    position: relative;
  }
  .drSlide02::after {
    content: "";
    display: block;
    width: 70px;
    height: 40px;
    background: url(../../img/drive/object/dots01.png) no-repeat 0 0 / 100% auto;
    position: absolute;
    left: 30%;
    top: -140px;
  }
  .drSlide02-slider {
  }
  .drSlide02-slider::before,
  .drSlide02-slider::after {
    background-size: 1000px;
  }
  .drSlide02-slider::before{
    top: -18px;
  }
  .drSlide02-slider::after{
    bottom: -14px;
  }
  .drSlide02-item {
  }
  .drSlide02-item img {
    width: 150px;
  }
  .drSlide02-object01 {
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% - 10px);
    width: 90px;
  }
  .drSlide02-object02 {
    right: 10px;
    left: auto;
    top: auto;
    bottom: calc(100% - 5px);
    width: 120px;
  }
  .drSlide02-object03 {
    position: absolute;
    width: 40px;
    right: calc(50% + 680px);
    bottom: calc(100% + 150px);
    z-index: 10;
  }


}

/***********
drInner
************/

.drInner {
  background: url(../../img/drive/bg_road02.png) no-repeat center -300px ;
  background-color: var(--color-dr-sub01);
}
.drInner-wrapper {
  background: linear-gradient(to bottom, transparent 60%, var(--color-dr-sub01) 80%);
}

@media screen and (max-width:1024px) {

  .drInner {
    background: url(../../img/drive/bg_road_sp.png) no-repeat center -100px ;
    background-color: var(--color-dr-sub01);
    background-size: 120% auto;
  }

}


/***********
drHeader
************/

.drHeader {
  padding-block: min(20vw,10em) min(20vw,12em);
  position: relative;
}
.drHeader-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0 4%;
}
.drHeader-visual {
  width: 56%;
  position: relative;
}
.drHeader-img {
  background: url(../../img/drive/mask.png) no-repeat center center / 100% 100%;
  padding: 1px 0 1px 1px;
}
.drHeader-img img {
  -webkit-mask: url(../../img/drive/mask.png);
  mask: url(../../img/drive/mask.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.drHeader-area {
  width: 50%;
  position: absolute;
  right: -10%;
  bottom: -6em;
}
.drHeader-inner {
  flex: 1;
  padding-top: 2em;
  padding-bottom: 2em;
  position: relative;
}
.drHeader-inner::after {
  content: "";
  display: block;
  width: 50px;
  height: 80px;
  position: absolute;
  right: 105%;
  top: -50px;
  background: url(../../img/drive/object/kira01.png) no-repeat 0 0 / 100% auto;
}
.drHeader-heading {
  position: relative;
  overflow: hidden;
  padding-top: 10px;
}
.drHeader-heading-title {
  overflow: hidden;
  font-family: var(--font-family-dr-gothic);
  font-size: clamp(2em,3vw, 2.75em);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  padding-block: 0.5em ;
  margin-bottom: 0.8em ;
  color: var(--color-dr-theme);
  box-shadow:
  0 0 0 2px var(--color-dr-theme) ,
   0 0 0 5px var(--color-dr-sub01),
   0 0 0 10px var(--color-dr-theme) ;
}
.drHeader-text {
  line-height: 1.8;
}
.drHeader-tips {
  line-height: 1.6;
  font-size: 0.85em;
}

.drHeader-object {
  position: absolute;
  pointer-events: none;
}
.drHeader-object.-no01 {
  width: 120px;
  right: calc(50% + 700px);
  top: 48%;
  scale: -1 1;
}
.drHeader-object.-no02 {
  width: 120px;
  left: calc(50% + 560px);
  top: 20%;
}
.drHeader-object.-no03 {
  width: 120px;
  right: calc(50% + 300px);
  bottom: 7em;
}
.drHeader-object.-no04 {
  width: 120px;
  left: calc(50% + 680px);
  bottom: 1em;
}

.drHeader-character {
  position: absolute;
  right: calc(50% + 540px);
  bottom: -6em;
  pointer-events: none;
  width: 350px;
}

@media screen and (max-width:640px) {

  .drHeader {
    padding-block: 140px 140px;
    margin-bottom: 2em;
    position: relative;
    background: linear-gradient(to bottom,transparent 0%, rgba(246, 255, 221, 0.8) 80%, transparent 100%);
  }
  .drHeader-container {
    display: block;
    text-align: center;
    padding-top: 100px;
    position: relative;
  }
  .drHeader-visual {
    width: auto;
    padding-left: 10%;
    padding-bottom: 3em;
    position: relative;
  }
  .drHeader-visual::after {
    content: "";
    display: block;
    width: 30px;
    height: 50px;
    position: absolute;
    left: 0;
    top: -10px;
    background: url(../../img/drive/object/kira01.png) no-repeat 0 0 / 100% auto;
  }
  .drHeader-img {
    padding: 0;
  }

  .drHeader-area {
    width: 40%;
    position: absolute;
    right: auto;
    left: -5%;
    bottom: 0;
  }
  .drHeader-inner {
    padding-top: 1em;
    padding-bottom: 0;
    text-align: left;
    position: static;
  }
  .drHeader-inner::after {
    display: none;
  }
  .drHeader-heading {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0 ;
  }
  .drHeader-heading-title {
    font-size: 2em;
    font-size: 28px;
    min-width: 7em;
    text-align: center;
    padding-block: 0.2em ;
    box-shadow:
    0 0 0 1px var(--color-dr-theme) ,
    0 0 0 3px var(--color-dr-sub01),
    0 0 0 6px var(--color-dr-theme) ;
  }
  .drHeader-text {
    line-height: 1.8;
  }

  .drHeader-object {
    position: absolute;
    pointer-events: none;
  }
  .drHeader-object.-no01 {
    width: 70px;
    right: 2vw;
    top: 80px;
    scale: -1 1;
  }
  .drHeader-object.-no02 {
    width: 70px;
    left: 2%;
    top: auto;
    bottom: 50px;
  }
  .drHeader-object.-no03 {
    width: 70px;
    right: auto;
    left: 40%;
    top: auto;
    bottom: 80px;
  }
  .drHeader-object.-no04 {
    width: 70px;
    left: auto;
    right: 8vw;
    top: 55%;
    bottom: auto;
  }

  .drHeader-character {
    position: absolute;
    right: 0;
    bottom: -1em;
    pointer-events: none;
    width: 170px;
  }

}

/***********
drSpot
************/

.drSpot {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 3em 3%;
  counter-reset : drSpot_num;
}

.drSpot-section {
  width: 48.5%;
  border: 1px solid var(--color-main);
  background-color: var(--color-base);
  padding: min(7vw,2.5em) min(5vw,2.5em) min(3vw,2em) 5em;
  position: relative;
}
.remodal-is-initialized .drSpot-section {
  width: 100%;
  border: none;
  padding-right: min(4vw,30px);
}
.remodal-is-initialized .drSpot-section + .drSpot-section {
  border-top: 1px solid var(--color-main);
}
.drSpot-cat {
  position: absolute;
  left: 1em;
  top: 1em;
  font-size: 0.85em;
  font-family: var(--font-family-dr-gothic);
  white-space: nowrap;
  text-align: left;
  width: 2em;
  line-height: 2;

}
.drSpot-cat-icon {
  width: 2em;
}
.drSpot-cat-icon svg{
  width: 2em;
  height: 2em;
}
.drSpot-cat-text {
  font-weight: 700;
  letter-spacing: 0.05em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding-top: 0.3em;
}

.drSpot-ribbon {
  position: absolute;
  right: 1em;
  top: 0;
  z-index: 9;
  font-size: 0.8em;
  font-weight: 600;
  font-family: var(--font-family-dr-gothic);
  padding: 1.2em 1em 2em;
  background-color: var(--color-dr-theme);
  color: var(--color-base);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%,50% 86%, 0 100%);
}
.remodal-is-initialized .drSpot-ribbon {
  right: 4em;
}
.drSpot-ribbon-text {
  line-height: 1.35;
  white-space: nowrap;
}


.drSpot-container {
}
.drSpot-visual {
}

.drSpot-heading {
  padding-top: 1em;
  color: var(--color-dr-theme);
  display: flex;
}
.drSpot-heading-badge {
  width: 60px;
  height: 50px;
  margin-left: -5px;
  position: relative;
}
.drSpot-heading-badge svg {
  width: 60px;
  height: 50px;
  display: block;
}
.drSpot-heading-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: var(--color-base);
  font-size: 26px;
  font-family: var(--font-family-dr-gothic);
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding-bottom: 0.15em;
}
.drSpot-heading-num::after{
  /* display: inline-block;
  counter-increment:drSpot_num;
  content: counter(drSpot_num) ; */
}
.drSpot-heading-title {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.35;
  padding-left: 0.5em;
  padding-top: 0.1em;
  /* flex: 1;
  max-height: calc(2em * 1.5);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; */
}

.drSpot-label {
  display: inline-block;
  background-color: var(--color-dr-theme);
  color: var(--color-base);
  font-size: 0.75em;
  font-feature-settings: "palt";
  font-weight: 500;
  padding: 0.2em 0.8em;
  margin-top: 0.8em;
}
.drSpot-label-price {
  white-space: nowrap;
  font-size: 130%;
  font-weight: 600;
  padding: 0 0.1em;
  line-height: 1.2;
}

.drSpot-lead {
  color: var(--color-dr-theme);
  font-weight: 600;
  margin-top: 0.5em;
}

/*
block
*/

.drSpot-block {
  height: 3.4em;
  overflow: hidden;
}

.drSpot-summary {
  font-size: 0.85em;
  margin-top: 1em;
  line-height: 1.6;
  height: calc(2em * 1.6);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.drSpot-value {
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.6;
  padding-top: 0.8em;
  color: #F35D00;
}
.drSpot-data {
  padding-top: 1em;
}
.drSpot-table {
  border-top: 1px solid var(--color-sub02);
  font-size: 0.85em;
}
.drSpot-table tr {
  border-bottom: 1px solid var(--color-sub02);
}
.drSpot-table th {
  padding: 0.8em 0;
  width: 8em;
  text-align: left;
  vertical-align: text-bottom;
}
.drSpot-table td {
  padding: 0.8em 0;
  text-align: left;
  vertical-align: text-bottom;
}
.drSpot-trigger {
}
.drSpot-trigger-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-family: var(--font-family-dr-gothic);
  font-size: 0.9em;
  font-weight: 600;
  width: 100%;
  padding: 1.2em 0;
  text-align: center;
  color: var(--color-dr-theme);
  cursor: pointer;
}
.drSpot-trigger-btn::after {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\2b";
  margin-left: 0.6em;
}


.drSpot-more {
  text-align: center;
  padding-top: 2em;
}
.drSpot-more-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-family: var(--font-family-dr-gothic);
  font-size: 1em;
  font-weight: 600;
  width: 100%;
  padding: 1.2em 0;
  text-align: center;
  color: var(--color-main);
  cursor: pointer;
}
.drSpot-more-btn::after {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\f175";
  margin-left: 0.6em;
}

.drSpot-section.is-active .drSpot-summary {
  height: auto;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.drSpot-section.is-active .drSpot-heading-title {
  height: auto;
  max-height: initial;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.drSpot-section.is-active .drSpot-trigger-btn::after {
  rotate: 45deg;
}




/*
color
*/

.drSpot-section.-sub .drSpot-heading ,
.drSpot-section.-sub .drSpot-lead,
.drSpot-section.-sub .drSpot-trigger-btn{
  color: var(--color-dr-theme-sub)
}
.drSpot-section.-sub .drSpot-label,
.drSpot-section.-sub .drSpot-ribbon {
  background-color: var(--color-dr-theme-sub);
}

@media screen and (max-width:834px) {

  .drSpot {
    display: flex;
    gap: 1.2em 0;
  }

  .drSpot-section {
    width: 100%;
    padding: min(7vw,2.5em) min(5vw,2.5em) min(3vw,1em) 3em;
  }
  .remodal-is-initialized .drSpot-section + .drSpot-section {
    margin-bottom: 2em;
    margin-top: 2em;
  }
  .drSpot-cat {
    left: 0.5em;
    font-size: 0.75em;
  }

  .drSpot-ribbon {
    right: 2vw;
    font-size: 0.7em;
  }


  .drSpot-heading {
    padding-top: 0.6em;
  }
  .drSpot-heading-badge {
    scale: 0.7;
    transform-origin: left top;
    margin-bottom: -15px;
  }
  .drSpot-heading-title {
    font-size: 16px;
    margin-left: -10px;
    padding-left: 0em;
    margin-top: 0.4em;


  }

  .drSpot-label {
    font-size: 0.7em;
  }

  .drSpot-lead {
    margin-top: 0.3em;
  }

  /*
  block
  */

  .drSpot-block {
    height: 4em;
    overflow: hidden;
  }

  .drSpot-trigger {
    margin-left: -2.5em;
  }

}

/***********
drBackBtn
************/

.drBackBtn {
  isolation: isolate;
  display: inline-block;
  background-color: var(--color-dr-theme);
  color: var(--color-base);
  font-size: 0.9em;
  font-weight: 500;
  min-width: 22em;
  border-radius: 3em;
  text-decoration: none;
  text-align: center;
  padding: 1.5em 3em;
  position: relative;
}
.drBackBtn::after {
  font-family: 'Font Awesome 6 Free';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-weight: 900; /* fas */
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  content: "\f177";
  position: absolute;
  left: 1.6em;
  top: 50%;
  translate: 0 -50%;
  transition: 0.3s;
}

body.is-pc .drBackBtn:hover {
  opacity: 0.7;
}
body.is-pc .drBackBtn:hover::after {
  left: 1.4em;
}

/***********
googleMapScreen
************/

.googleMapScreen {
  width: 100%;
  height: 650px;
  margin-top: 3em;
}

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/