@charset "UTF-8";

:root{
  --color-line-gray: #CCC;
  --color-text-black: #25252D;
  --color-accent-olive: #9B8F24;
  --color-accent-gray: #888;
  --color-bg-gray-light: #F5F5F5;
  --color-bg-gray: #ECEDE2;

  --font-noto_sans_jp: "Noto Sans JP", sans-serif;
  --font-crimson: "Crimson Text", sans-serif;
  --font-noto_serif_jp: "Noto Serif JP", serif;
  --font-inter: "Inter", sans-serif;

  --font-weight-Regular: 400;
  --font-weight-Medium: 500;
  --font-weight-SemiBold: 600;
  --font-weight-Bold: 700;
}

.br-sp { display: none;}
.br-pc { display: block;}

.villalodola-lp{
  position: relative;
  font-family: var( --font-noto_sans_jp);
  font-weight: var(--font-weight-Medium);
  font-size: 1.4rem;
  line-height: 1.8;
  font-optical-sizing: auto;
  letter-spacing: 0.04em;
  font-style: normal;
  color: var(--color-text-black);
}

.villalodola-lp .bg-gray{ background: var(--color-bg-gray-light);}
.villalodola-lp .bg-olive{ background: var(--color-bg-gray);}

.villalodola-lp img{ width: auto;}
.villalodola-lp a:hover{ text-decoration: none;}

.villalodola-lp section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10.4rem 0 12rem;
}

.villalodola-lp .bg .inner{
  margin: auto;
  width: calc(100% - 4rem);
  max-width: 78.2rem;
}

.text-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 5.6rem;
}

.section-label{
  color: var(--color-accent-gray);
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-SemiBold);;
  letter-spacing: 0.04em;
  line-height: 1.2;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 0.8rem;
}

.text-content .main-title{
  font-family: var( --font-noto_serif_jp);
  font-weight: var(--font-weight-Medium);;
  font-size: 3.2rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.text-content .main-title.border{
  display: inline-block;
  border-top: 0.1rem solid var(--color-accent-gray);
  border-bottom: 0.1rem solid var(--color-accent-gray);
  padding: 0.4rem 2rem;
}

.text-content .sub-txt{
  font-size: 1.8rem;
  line-height: 2;
}

.text-content.mt-32 .sub-txt{ margin-top: 3.2rem;}
.text-content.mt-24 .sub-txt{ margin-top: 2.4rem;}

@media screen and (max-width: 640px){
.villalodola-lp section{ padding: 9.6rem 0;}

.br-sp { display: block;}
.br-pc { display: none;}

.text-content{ margin-bottom: 4rem;}
.text-content .main-title { font-size: 2.2rem;}
.text-content .sub-txt { font-size: 1.6rem;}
}

/* kv-menu */

:root{
  --kv-top: 9.6rem;
  --kv-open-h: 54rem;
}

@media screen and (max-width: 640px){
:root{
  --kv-top: 6rem;
  --kv-open-h: 43rem;
}
}

.kv-menu{
  position: absolute;
  inset: 0;
  z-index: 1002;
  pointer-events: none;
}

.kv-menu::details-content{ transition: content-visibility 0.45s allow-discrete;}

.kv-menu.is-fixed{
  position: fixed;
  top: var(--kv-top);
  left: var(--fixed-left, 0);
  right: auto;
  width: var(--fixed-width, 100%);
}

.kv-menu__overlay{
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  cursor: pointer;
}

.kv-menu__overlay.is-show{
  opacity: 1;
  visibility: visible;
}

.kv-menu__panel{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--color-bg-gray-light);
  height: 54rem;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.45s ease, visibility 0.45s ease;
}

.kv-menu[open] > .kv-menu__panel{
  max-height: var(--kv-open-h);
  visibility: visible;
}

.kv-menu__btn{
  position: absolute;
  top: 0;
  right:0;
  z-index: 3;
  width: 5.6rem;
  height: 5.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-text-black);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kv-menu__btn,
.kv-menu__panel{ pointer-events: auto;}

.kv-menu > .kv-menu__btn{
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.kv-menu > .kv-menu__btn::-webkit-details-marker{ display: none;}

.kv-menu__icon{
  position: relative;
  display: block;
  width: 3.2rem;
  height: 1.8rem;
  flex-shrink: 0;
}

.kv-menu__icon::before,
.kv-menu__icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  margin: 0;
  height: 0.1rem;
  background: currentColor;
  transform: rotate(0deg);
  transform-origin: center;
  transition: top 0.3s ease, width 0.3s ease, transform 0.3s ease;}

.kv-menu__icon::before{
  top: 0.4rem;
  width: 3.2rem;
}

.kv-menu__icon::after {
  top: 1.4rem;
  width: 2.4rem;
}

.kv-menu[open] .kv-menu__icon::before,
.kv-menu[open] .kv-menu__icon::after{
  top: 0.9rem;
  width: 3.2rem;
}

.kv-menu[open] .kv-menu__icon::before{ transform: translateY(-50%) rotate(30deg);}
.kv-menu[open] .kv-menu__icon::after{ transform: translateY(-50%) rotate(-30deg);}

.kv-menu__label{
  font-family: var( --font-crimson);
  font-size: 1.2rem;
  line-height: 1;
}

.kv-menu__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem 4.8rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 17.2rem 0 0;
  box-sizing: border-box;
}

.villalodola-lp :is(
  #REASON,
  #BENEFIT,
  #PRODUCT,
  #CONTRACT,
  #STARTER,
  #CONTACT
) { scroll-margin-top: var(--kv-top);}


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

.kv-menu__panel{
  height: var(--kv-open-h);
  box-sizing: border-box;
}

.kv-menu__list{
  grid-template-columns: 1fr;
  gap: 2.8rem;
  padding: 6rem 4.8rem 0;
  margin: 0;
}

.kv-menu__list .page-links__text{ font-size: 1.4rem;}

.kv-menu__btn{
  width: 4.8rem;
  height: 4.8rem;
}

.kv-menu__label{ font-size: 1rem;}

.kv-menu__icon{ width: 2.6rem;}
.kv-menu__icon::before{ width: 2.6rem;}
.kv-menu__icon::after{ width: 2rem;}

.kv-menu[open] .kv-menu__icon::before,
.kv-menu[open] .kv-menu__icon::after{ width: 2.6rem;}

}

/* main title */

.villalodola_introduction .main-title-block{
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.main-title-block::after{
  content: none;
}

#KV_SLIDER{
  position: relative;
  width: 100%;
  padding: 0;
}

#KV_SLIDER .splide__pagination{
  position: absolute;
  bottom: 2.4rem;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#KV_SLIDER .splide__pagination li{
  margin: 0;
  padding: 0;
  line-height: 0;
}

#KV_SLIDER .splide__pagination__page{
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-sizing: border-box;

  cursor: pointer;
  transition: background-color 0.2s ease;
}

#KV_SLIDER .splide__pagination__page.is-active{ background: var(--color-accent-olive);}

#KV_SLIDER .splide__pagination__page:focus-visible{
  outline: 0.2rem solid var(--color-text-black);
  outline-offset: 0.3rem;
}

#KV_SLIDER .kv-slide{
  position: relative;
  container-type: inline-size;
}

#KV_SLIDER .main-title-block__image{
  display: block;
  line-height: 0;
}

#KV_SLIDER .main-title-block__image img{
  display: block;
  width: 100%;
  height: auto;
}

#KV_SLIDER .kv-slide--main::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.kv-logo{
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
  z-index: 10;
}

.kv-text{
  position: absolute;
  bottom: 5.6rem;
  left: 5.6rem;
  z-index: 10;
  color: #fff;
}

.main-title-block .kv-text .text-main{
  font-family: var( --font-noto_serif_jp);
  font-weight: var(--font-weight-Regular);;
  font-size: 3.89cqw;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

.main-title-block .kv-text .text-sub{
  font-weight: var(--font-weight-Regular);;
  letter-spacing: 0.04em;
  line-height: 1.8;
  font-size: 1.95cqw;
}

#KV_SLIDER .kv-benefit-copy{
  position: absolute;
  top: 30%;
  left: 44.8%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

#KV_SLIDER .kv-benefit-copy__line{
  margin: 0;
  padding: 0;
  color: var(--color-text-black);
  font-weight: var(--font-weight-Medium);
  font-size: 2.16cqw;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

#KV_SLIDER .kv-benefit-copy__line span{
  display: block;
  padding: 0.2rem 1.6rem;
  background: #fff;
  white-space: nowrap;
}

#KV_SLIDER .kv-benefit-points{
  position: absolute;
  top: 49%;
  left: 44.8%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}

#KV_SLIDER .kv-benefit-points__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0 0 0 2.65cqw;
  font-weight: var(--font-weight-Bold);
  font-size: 2.92cqw;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#KV_SLIDER .kv-benefit-points__plus{
  font-weight: var(--font-weight-Regular);
  font-size: 2.16cqw;
  line-height: 1;
  letter-spacing: 0.04em;
}

#KV_SLIDER .kv-benefit-points__number{
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-Regular);;
  font-size: 5.41cqw;
  line-height: 1;
  letter-spacing: 0.04em;
}

#KV_SLIDER .kv-benefit-points__percent{
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-Regular);;
  font-size: 2.92cqw;
  line-height: 1;
  letter-spacing: 0.04em;
}

#KV_SLIDER .kv-benefit-points__item::before{
  content: "";
  position: absolute;
  top: calc(50% + 0.5cqw);;
  left: 0;
  width: 2cqw;
  height: 2cqw;
  background-image: url(../img/villalodola_introduction/check_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
  filter: brightness(0) invert(1);
}


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

.kv-text{
  bottom: 2.4rem;
  left: 2.4rem;
}

.main-title-block .kv-text .text-main{
  font-size: 6.4cqw;
  margin-bottom: 1.2rem;
}

.main-title-block .kv-text .text-sub{ font-size: 3.73cqw;}

#KV_SLIDER .splide__pagination{ bottom: 0.8rem;}

#KV_SLIDER .kv-benefit-copy{
  top: 23%;
  left: 13%;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 2rem;
}

#KV_SLIDER .kv-benefit-copy__line{
  font-size: 3.73cqw;
  line-height: 1.05;
}

#KV_SLIDER .kv-benefit-copy__line span{
  writing-mode: vertical-rl;
  padding: 0.6rem 0.4rem;
}

#KV_SLIDER .kv-benefit-points{
  top: auto;
  bottom: 6%;
  left: 0;
  width: 100%;
  align-items: center;
  gap: 0.19rem;
}

#KV_SLIDER .kv-benefit-points__item{
  gap: 0.2rem;
  font-size: 4.19cqw;
}

#KV_SLIDER .kv-benefit-points__plus{ font-size: 3.04cqw;}
#KV_SLIDER .kv-benefit-points__number{ font-size: 7.63cqw;}
#KV_SLIDER .kv-benefit-points__percent{ font-size: 4.19cqw;}

#KV_SLIDER .kv-benefit-points__item{
  padding-left: 3.25cqw;
}

#KV_SLIDER .kv-benefit-points__item::before{
  width: 2.72cqw;
  height: 2.72cqw;
}

}


/* menu-section */
.menu-section{ width: 100%;}

.menu-section div{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.menu-section .section-label{ margin: 4.8rem auto 2.4rem;}

.page-links.menu-section__list{
  display: flex;
  gap: 3.2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6.4rem;
}

.page-links.menu-section__list .page-links__item{
  width: 24rem;
}

.page-links__text {
  position: relative;
  border-bottom: 0.1rem solid var(--color-line-gray);
  font-size: 1.6rem;
  font-weight: var(--font-weight-Medium);;
}

.page-links__text::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-text-black);
}

.page-links__text::after {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0.4rem;
  right: 0.5rem;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 0.1rem solid #fff;
  border-right: 0.1rem solid #fff;
  transform: rotate(135deg);
}


.float-button {
  position: fixed;
  left: var(--fixed-left, 0);
  width: var(--fixed-width, 100%);
  bottom: 1.5rem;
  margin: 0;
  z-index: 100;
  transform: translateY(150%);
  transition: transform 0.4s ease;
  display: flex;
  justify-content: flex-end;
  padding-right: 1rem;
  box-sizing: border-box;
}

.float-button .float-button__list { width: auto;}

.float-button.is-show { transform: translateY(0);}
.float-button.is-show.is-hidden { transform: translateY(150%);}

.float-button__item{
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--color-accent-olive);
  margin-bottom: 0.8rem;
}

.float-button__item.nav-outline{
  background: #fff;
  border: 0.1rem solid var(--color-accent-olive);
}

.float-button__item a{
  width: 8rem;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: #fff;
  font-weight: var(--font-weight-Medium);;
  line-height: 1.4;
  text-align: center;
}

.float-button__item.nav-outline a{ color: var(--color-accent-olive);}

.float-button{ pointer-events: none;}
.float-button .float-button__link{ pointer-events: auto;}

@media screen and (max-width: 640px) {
.page-links.menu-section__list { gap: 2.4rem;}
.page-links.menu-section__list .page-links__item { width: 15.6rem;}

.page-links__text::after {
  bottom: 0.3rem;
  right: 0.5rem;
  border-top: 0.1rem solid #fff;
  border-right: 0.1rem solid #fff;
}

}/* End max 640 */

/* message-section */

.villalodola-lp .message-section {
  background: url(../img/villalodola_introduction/bg-leaf.avif) no-repeat top center /  100% auto;
  position: relative;
  max-width: 91rem;
  margin: 0 auto;
  text-align: center;
  min-height: 47rem;
  padding-top: 11.2rem;
}

.message-section .text-content {
  position: relative;
  z-index: 10;
}

.message-section .text-content .main-title,
.message-section .text-content .sub-txt{ text-shadow: 0 0 0.5rem #fff, 0 0 0.5rem #fff, 0 0 0.5rem #fff, 0 0 0.5rem #fff, 0 0 0.5rem #fff, 0 0 0.5rem #fff;}

.message-section .text-content .sub-txt{
  font-family: var( --font-noto_serif_jp);
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  line-height: 2.2;
}

.deco-img {
  position: absolute;
  z-index: 1;
}

.image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.img-left-top {
  top: 8rem;
  left: 6.4rem;
  max-width: 12rem;
}

.img-left-bottom {
  top: 30.8rem;
  left: 0;
  max-width: 22.5rem;
}

.img-right {
  top: 19.6rem;
  right: 0;
  max-width: 19.1rem;
}

.survey-title{
  font-weight: var(--font-weight-Bold);
  display: inline-block;
  padding: 0.8rem 2rem;
  font-size: 2rem;
  border-top: 0.1rem solid var(--color-accent-gray);
  border-bottom: 0.1rem solid var(--color-accent-gray);
  margin-top: 5rem;
}

.survey-list{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  margin: 4rem auto 0;
}

.survey-list .survey-card{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.8rem;
}

.survey-list .survey-card .survey-main{
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.survey-list .survey-card{ width: 20rem;}
.survey-list .survey-card .survey-main img{ width: auto; height: auto; max-width: 7.1rem;}

.survey-main p{
  color: var(--color-accent-gray);
  font-weight: var(--font-weight-Regular);;
  font-size: 1.68rem;
}

.olive{
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-Regular);;
  color: var(--color-accent-olive);
  font-size: 9.2rem;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-right: 0.5rem;
}

.large{
  font-weight: var(--font-weight-Regular);
  font-size: 2.7rem;
  line-height: 1;
  letter-spacing: 0;
}

.vertical{
  font-weight: var(--font-weight-Regular);
  writing-mode: vertical-rl;
  line-height: 1;
  letter-spacing: 0;
}

.left{
  font-weight: var(--font-weight-Regular);
  display: inline-block;
  text-align: left;
  line-height: 1.1;
  letter-spacing: 0;
}

.survey-sub{
  color: var(--color-text-black);
  font-size: 1.6rem;
  font-weight: var(--font-weight-Medium);;
}

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

.villalodola-lp .message-section{ padding-top: 9.6rem;}
.message-section .text-content{ margin-bottom: 6.4rem;}
.message-section .text-content .sub-txt{ font-size: 1.6rem;}

.image-wrap {
  position: relative;
  width: 100%;
  min-height: 67.5rem;
}

.img-right {
  top: 0;
  right: 2.4rem;
  max-width: 26.3rem;
}

.deco-img.img-left-top { z-index: 2;}

.img-left-top {
  top: 27rem;
  left: 0;
  max-width: 14rem;
}

.img-left-bottom {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  max-width: 25.3rem;
}

.survey-title { font-size: 1.8rem; padding: 0.8rem 1.2rem; margin-top: 6.4rem;}
.survey-list { flex-wrap: wrap; margin: 3.2rem auto 0;}
.survey-list .survey-card { width: auto;}
.survey-list .survey-card:first-child { width: 100%;}

.survey-list .survey-card{ gap: 0.8rem;}
.survey-list .survey-card .survey-main img { max-width: 5.6rem; height: auto;}
.survey-main p { font-size: 1.3rem;}

.olive { font-size: 7.2rem;}
.large { font-size: 2.1rem;}

}/* End max 640 */

/* reason-section */

.intro-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  text-align: center;
  width: 100%;
  background: linear-gradient(180deg, #F5F5F5 85.87%, #FFFFFF 100%);
}

.intro-content .intro-txt p{
  font-family: var( --font-noto_serif_jp);
  font-weight: var(--font-weight-Medium);;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin-top: 8rem;
  text-align: center;
}

.intro-content .intro-txt p span{
  font-family: var( --font-noto_serif_jp);
  font-weight: var(--font-weight-Medium);;
  font-size: 2.8rem;
}

.intro-content img{
  max-width: 56rem;
  height: auto;
  margin: 2.4rem auto 4rem;
}

.reason-section .text-content .sub-txt{
  font-size: 1.8rem;
  font-weight: var(--font-weight-Regular);;
  line-height: 2;
}

.reason-list{
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  margin-bottom: 8rem;
}

.reason-card{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reason-list .reason-card{ max-width: 78.2rem;}

.reason-list .reason-card .reason-card__layout{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.reason-list .reason-card img{width: 36rem;  height: auto;}

.reason-list .reason-card__title{
  font-family: var( --font-noto_serif_jp);
  font-weight: var(--font-weight-Medium);;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-align: left;
}

.reason-list .reason-card__txt{
  text-align: left;
  margin-top: 1.6rem;
  line-height: 2;
}

.lineup-title{
  font-weight: var(--font-weight-Bold);
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  margin-bottom: 3.2rem;
  text-align: center;
}

.item-list{
  display: flex;
  justify-content: center;
  gap: 3.2rem;
}

.item-list .item-card img{ width: 24rem; height: auto; margin-bottom: 0.8rem;}

.item-list .item-card p{
  font-size: 1.6rem;
  letter-spacing: 0;
  text-align: center;
 }

.item-list .item-card .item-name{
  font-weight: var(--font-weight-Medium);;
  margin-bottom: 0.8rem;
 }

.item-banner{
  display: flex;
  justify-content: center;
}

.item-banner a img{width: 48rem; height: auto;}

.lineup-slider{
  visibility: visible;
  margin-bottom: 8rem;
}


@media screen and (min-width: 641px){
  #LINEUP_SLIDER{
    padding: 0 2rem;
    box-sizing: border-box;
  }

.lineup-slider .splide__track{ overflow: visible;}
#LINEUP_SLIDER .item-list{ display: flex;}

#LINEUP_SLIDER .item-card{
  flex: 0 1 24rem;
  min-width: 0;
}

#LINEUP_SLIDER .item-card img{
  width: 100%;
  height: auto;
  max-width: 24rem;
  height: auto;
}
}

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

.intro-content img { max-width: 32.7rem; height: auto; margin-bottom: 6.4rem;}

.intro-content .intro-txt p { margin-top: 6.4rem;}
.intro-content .intro-txt p span { font-size: 2.2rem;}

.reason-section .text-content .sub-txt{ font-size: 1.4rem;}

.reason-list .reason-card .reason-card__layout{ flex-direction: column; gap: 1.6rem;}
.reason-list .reason-card { max-width: 32.7rem;}
.reason-list .reason-card img { width: 32.7rem; height: auto;}

.lineup-title{ margin-bottom: 2.4rem;}

.lineup-slider .item-list{
  justify-content: flex-start;
  gap: 0;
}

#LINEUP_SLIDER .item-card img{
  width: 20.8rem;
  height: auto;
}

.item-banner a img { width: 32.7rem; height: auto;}

}

/* news-section  benefit-section */

.contents-card{
  display: flex;
  border-bottom: 0.1rem solid var(--color-line-gray);
  padding: 3.2rem 0;
  align-items: flex-start;
}

.contents-card:first-child{padding-top: 0;}

.contents-txt-box .contents-date {
  font-family: var( --font-inter);
  font-weight: var(--font-weight-Regular);;
  color: var(--color-accent-gray);
}

.villalodola-news-section .contents-card img{ height: auto; margin-right: 3.2rem; max-width: 16rem;}

.villalodola-news-section .contents-txt-box__title{
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-Bold);;
  font-size: 1.4rem;
}

.villalodola-news-section .contents-txt-box__txt{
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-Regular);;
  font-size: 1.4rem;
}

.villalodola-news-section .contents-txt-box__txt a{ text-decoration: underline;}

.benefit-section .contents-card img { height: auto; object-fit: contain;}

.benefit-section .contents-list .contents-card{border-bottom: none;}

.benefit-icon {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  padding: 0.8rem 1.2rem;
  background-color:var(--color-text-black) ;
  margin-bottom: 1.6rem;
}

.benefit-section .contents-txt-box__title{
  margin-bottom: 1.6rem;
  font-family: var( --font-noto_serif_jp);
  font-weight: var(--font-weight-Medium);;
  font-size: 2rem;
  letter-spacing: 0.04em;
}

.benefit-section .contents-txt-box__txt{
  font-size: 1.6rem;
  line-height: 2;
}


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

.benefit-section .contents-list{ container: benefit-list / inline-size;}

.benefit-section .contents-list .contents-card{
  flex-direction: column;
  gap: 1.6rem;
}

.benefit-section .contents-list .contents-card .content{
  width: 100%;
  min-width: 0;
}

.benefit-section .contents-card img{ height: auto; margin-right: 0;}

@container benefit-list (min-width: 700px){

.benefit-section .contents-list .contents-card{
  flex-direction: row;
  gap: 4rem;
}

.benefit-section .contents-list .contents-card .content{ width: calc((100% - 4rem) / 2);}
}
}

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

.contents-card { padding: 2.4rem 0;}

.benefit-section .text-content .sub-txt { font-size: 1.4rem;}

.villalodola-news-section .contents-card img {
  max-width: 8.8rem;
  max-height: 8.8rem;
  height: auto;
  margin-right: 1.6rem;
}

.villalodola-news-section .contents-date{ font-size: 1rem;}
.villalodola-news-section .contents-txt-box__title{ font-size: 1.2rem;}

.benefit-section .contents-list .contents-card{
  flex-direction: column;
  padding: 0;
  gap: 1.6rem;
  margin-bottom: 3.2rem;
}

.benefit-section .contents-list .contents-card:last-child{ margin-bottom: 0;}
.benefit-section .contents-txt-box__title{ font-size: 1.8rem;}
.benefit-section .contents-txt-box__txt{ font-size: 1.4rem;}

}

/* product-section */

.product-section{ position: relative;}

.product-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 42.5rem;
  background: url(../img/villalodola_introduction/bg-leaf.avif) no-repeat top center /  100% auto;
  z-index: -1;
}

.product-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 42.5rem;
  background: url(../img/villalodola_introduction/bg-leaf_bottom.avif) no-repeat bottom center /  100% auto;
  z-index: -1;
}

.product-section .text-content{ margin-bottom: 6.4rem;}

.item-box{ text-align: center;}
.item-box img{ max-width: 12rem; height: auto;}

.item-box .item-name{
  font-weight: var(--font-weight-Bold);
  font-size: 1.8rem;
  margin-top: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.item-box .item-name span{
  font-weight: var(--font-weight-Bold);
  font-size: 1.2rem;
}

.product-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.product-list{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.4rem;
  max-width: 78.2rem;
}

.product-list .product-card{
  border: 0.1rem solid var(--color-line-gray);
  padding-top: 3.2rem;
  width: 37.9rem;
  min-height: 34.8rem;
}

.product-list .product-card .product-card__box{max-width: 31.5rem; margin: auto;}

.product-list .product-card .product-title{
  font-family: var( --font-noto_serif_jp);
  font-size: 2rem;
  margin-bottom: 2.4rem;
}

.product-list .product-card .product-txt{
  font-size: 1.6rem;
  line-height: 2;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.6rem;
  margin: 6.4rem auto 3.2rem;
}

.top-row {
  display: flex;
  gap: 1.6rem;
}

.lp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24.4rem;
  height: 4.8rem;
  text-decoration: none;
  font-weight: var(--font-weight-Bold);;
  line-height: 1.4;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
  color: #fff;
}

.product-section .button-container .lp-button{ color: #fff;}
.product-section .button-container .bottom-row .lp-button{ color: var(--color-accent-olive);}

.bottom-row .lp-button{ width: 27.9rem; height: 6rem;}

.lp-button--dark { background-color: var(--color-text-black);}

.lp-button--outline {
  background-color: #fff;
  color: var(--color-accent-olive);
  border: 0.1rem solid var(--color-accent-olive);
  font-size: 1.6rem;
}

.button-container .pdf::after,
.button-container .arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
}

.button-container .pdf::after {
  width: 1.8rem;
  height: 2.1rem;
  background-image: url(../img/villalodola_introduction/pdf.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}

.button-container .arrow::after {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.product-section .item-banner{margin-bottom: 0;}

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

.product-section { padding: 9.6rem 0;}

.item-box .item-name{ font-size: 1.6rem;}
.item-box .item-name span{ font-size: 1rem;}

.product-content{ gap: 6.4rem;}

.product-list .product-card {
  padding: 3.2rem 0;
  width: 32.7rem;
  min-height: auto;
}

.product-list .product-card .product-card__box{ max-width: 27.9rem;}

.product-list .product-card .product-title{
   font-size: 1.8rem;
  margin-bottom: 1.6rem;
}

.product-list .product-card .product-txt{ font-size: 1.4rem;}

.button-container{ gap: 4rem; margin-bottom: 4rem;}
.top-row{ flex-direction: column;}

}

/* contract-section */

.contract-list {
  background: #fff;
  padding: 6.4rem 0 6.4rem 6.4rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
}


.contract-card { font-size: 1.6rem;}

.contract-card .contract-txt{
  position: relative;
  font-weight: var(--font-weight-Medium);;
  font-size: 1.6rem;
  padding-left: 2.8rem;
}

.contract-card .contract-txt::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 2rem;
  height: 2rem;
  background-image: url(../img/villalodola_introduction/check.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}

.contract-card .caution{
  position: relative;
  font-size: 1.4rem;
  font-weight: var(--font-weight-Regular);
  padding-left: 1.4rem;
}

.contract-card .caution::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;

}

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

.contract-list{ padding: 3.2rem 2.4rem;}

.contract-section .text-content .sub-txt { font-size: 1.4rem;}

.contract-card .contract-txt {
  font-size: 1.4rem;
  padding-left: 2.4rem;
}

.contract-card .contract-txt::before {
  width: 1.6rem;
  height: 1.6rem;
}

.contract-card .caution { font-size: 1.2rem;}
}

/* step-section */

.step-box{
  display: flex;
  justify-content: center;
}

.step-card {
  display: flex;
  position: relative;
  padding-bottom: 3.2rem;
}

.step-card:last-child { padding-bottom: 0;}
.step-card:last-child .step-number::after { display: none;}

.step-number {
  width: 5.6rem;
  height: 5.6rem;
  border: 0.14rem solid var(--color-accent-olive);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-SemiBold);;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-accent-olive);
  font-size: 2.4rem;
  background-color: #fff;
  z-index: 2;
  flex-shrink: 0;
}

.step-number::after {
  content: "";
  position: absolute;
  top: 5.6rem;
  bottom: 0;
  width: 0.1rem;
  background-color: var(--color-accent-olive);
  z-index: 1;
}

.step-content { padding-left: 3.2rem;}

.step-title {
  font-weight: var(--font-weight-Bold);
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  margin: 0;
}

.step-txt{
  font-size: 1.6rem;
  font-weight: var(--font-weight-Regular);;
}

.step-content .button-container{
  display: block;
  margin: 0.8rem auto 0;
}

.step-section .button-container .lp-button--olive {
  background-color: var(--color-accent-olive);
  color: #fff;
}

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

.step-number{ font-size: 1.8rem;}
.step-title{ font-size: 1.6rem;}
.step-txt{ font-size: 1.2rem;}

.step-content{ padding-left: 1.2rem;}
}

/* starter-section */

.starter-content{
  display: flex;
  gap: 4rem;
}

.starter-content .content{ width: 50%;}

.starter-img{ text-align: center;}

.starter-img p{
  font-weight: var(--font-weight-Bold);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin-top: 1.6rem;
}

.starter-card{
  border-bottom: 0.1rem solid var(--color-line-gray);
  padding: 2.4rem 0;
}

.starter-card:first-child{ padding-top: 0;}

.starter-card-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.starter-card .icon{
  display: inline-block;
  font-weight: var(--font-weight-Bold);
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0;
  background: var(--color-accent-gray);
  color: #fff;
  padding: 0.2rem 0.5rem 0.3rem;
}

.starter-card-box{ margin-top: 0.2rem;}

.starter-card-box .name{ font-weight: var(--font-weight-Bold);}

.starter-card-box .set-price{
  font-family: var( --font-inter);
  font-weight: var(--font-weight-SemiBold);;
  font-size: 2.2rem;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.starter-card-box .set-price span{
  font-weight: var(--font-weight-Regular);
  font-size: 1rem;
  line-height: 1;
}

.starter-txt{
  font-size: 1.6rem;
  line-height: 2;
  margin-top: 5.6rem;
  text-align: center;
}

.starter-section .button-container{ margin: 5.6rem auto 0;}

.starter-section .button-container .lp-button{ color: #fff;}

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

.starter-section .text-content .sub-txt { font-size: 1.4rem;}

.starter-content{ flex-direction: column;}
.starter-content .content{ width: 100%;}

.starter-txt{ font-size: 1.4rem; text-align: left;}
.starter-section .button-container{ margin-top: 4rem;}

}


/* qa-section */

.qa-card{
  border-bottom: 0.1rem solid var(--color-line-gray);
  padding: 3.2rem 0;
}

.qa-card:first-child{ padding-top: 0;}

.question-box,
.answer-box{
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
}

.answer-box{ margin-top: 1.6rem;}

.question-box .question-txt{
  font-weight: var(--font-weight-Bold);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}

.answer-box .answer-txt{
  font-size: 1.6rem;
  font-weight: var(--font-weight-Regular);;
  line-height: 2;
}

.question,
.answer{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var( --font-crimson);
  font-weight: var(--font-weight-SemiBold);;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  font-size: 2rem;
  background-color: var(--color-accent-gray);
  z-index: 2;
  flex-shrink: 0;
}

.answer{
  border: 0.1rem solid var(--color-accent-gray);
  background-color: #fff;
  color: var(--color-accent-gray);
}

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

.question-box,
.answer-box{ gap: 0.8rem;}

.question,
.answer{ font-size: 1.6rem; width: 3.2rem; height: 3.2rem;}
}

/* support-section */

.support-txt-box{ text-align: center;}

.support-txt{
  position: relative;
  display: inline-block;
  padding: 0 2rem;
  font-size: 1.8rem;
  line-height: 2;
  color: var(--color-accent-olive);
}

.support-txt::before,
.support-txt::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.1rem;
  height: 3rem;
  background-color: var(--color-accent-olive);
}

.support-txt::before {
  left: 0;
  transform: translateY(-50%) rotate(-25deg);
}

.support-txt::after {
  right: 0;
  transform: translateY(-50%) rotate(25deg);
}

.support-list{
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2.4rem;
  margin: 2.4rem auto 0;
}

.support-list .support-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.support-list .support-card img{ width: 9.6rem; height: auto;}
.support-list .support-card p{
  text-align: center;
  font-size: 1.6rem;
  font-weight: var(--font-weight-Bold);;
  line-height: 1.7;
}

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

.support-txt{ font-size: 1.6rem;}

.support-list{ flex-wrap: wrap; max-width: 26.4rem;}

.support-list .support-card img{ width: 8rem; height: auto;}
.support-list .support-card p{ font-size: 1.4rem;}

.support-txt::before,
.support-txt::after{ height: 6rem;}
}

/* contact-section */

.contact-section{ background: url(../img/villalodola_introduction/bg-leaf.avif) no-repeat top center /  100% auto;}

.contact-section .text-content.mt-32 .sub-txt{ margin-bottom: 0;}

.contact-section .button-container{
  margin-top: 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  max-width: 78.2rem;
}

.contact-section .button-container .lp-button{ color: var(--color-accent-olive);}
.contact-section  .button-container .lp-button--olive {
  background-color: var(--color-accent-olive);
  color: #fff;
}

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

.blank{ margin-top: 2rem;}

.contact-section .text-content .sub-txt{margin-top: 4rem;}

.contact-section .button-container{
  flex-direction: column;
  gap: 3.2rem;
}
}