@charset "UTF-8";

/* base */

/* start custom property */

.lp-chardonnay {

  --lpBodyBackColor: #F6F8F2;

  --lpFontSansSerif: "Noto Sans JP", sans-serif;

  --lpFontSerif: "游明朝体", "Yu Mincho", YuMincho, serif;

  --lpColorPrime: #A4A82E;

  --lpColorSubPrime: #927E37;

}



/* end custom property */

.lp-chardonnay {

  background-color: var(--lpBodyBackColor);

  font-family: var(--lpFontSansSerif);

}

.lp-chardonnay .serif {

  font-family: var(--lpFontSerif);

}

.lp-chardonnay .lp-inner {

  max-width: 1280px;

  width: 100%;

  margin: 0 auto;

}

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

  .lp-chardonnay .lp-inner {

    padding: 0 30px;

  }

}

.lp-chardonnay .lp-button {

  display: grid;

  place-content: center;

  text-align: center;

  background-color: var(--lpColorSubPrime);

  color: #fff;

  border-radius: 8px;

  font-size: 16px;

}

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

  .lp-chardonnay .lp-use-pc {

    display: none;

  }

}

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

  .lp-chardonnay .lp-use-sp {

    display: none;

  }

}



/* header */

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

  .lp-chardonnay .lp-header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    padding-top: 19px;

  }

}

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

  .lp-chardonnay .lp-header {

    position: relative;

    padding-top: 28px;

    padding-left: 22px;

    padding-right: 27px;

  }

}

.lp-chardonnay .lp-header .lp-inner {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

}

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

  .lp-chardonnay .lp-header .lp-inner {

    padding-left: 95px;

  }

}

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

  .lp-chardonnay .lp-header .lp-inner {

    align-items: flex-end;

    padding: 0;

  }

}

.lp-chardonnay .lp-header-logo {

  width: 141px;

}

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

  .lp-chardonnay .lp-navi {

    width: 50%;

    padding-left: 150px;

  }

}

@media screen and (min-width: 768px) and (max-width: 1279px) {

  .lp-chardonnay .lp-navi {

    padding-left: 50px;

  }

}

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

  .lp-chardonnay .lp-navi {

    display: none;

    position: absolute;

    top: 67px;

    left: 0;

    width: 100%;

    background-color: var(--lpBodyBackColor);

    padding-top: 28px;

  }

}

.lp-chardonnay .lp-navi-list {

  display: flex;

  column-gap: 1em;

}

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

  .lp-chardonnay .lp-navi-list {

    flex-flow: column;

  }

}

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

  .lp-chardonnay .lp-navi-item {

    width: 100%;

    text-align: center;

  }

  .lp-chardonnay .lp-navi-item:last-child .lp-navi-link {

    border-bottom: 1px solid var(--lpColorPrime);

  }

}

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

  .lp-chardonnay .lp-navi-link {

    display: grid;

    place-content: center;

  }

}

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

  .lp-chardonnay .lp-navi-link {

    display: block;

    padding: 10px;

    border-top: 1px solid var(--lpColorPrime);

  }

  .lp-chardonnay .lp-navi-link img {

    width: auto;

    height: 22px;

  }

  .lp-chardonnay .lp-navi-link.lp-navi-link_ranking img, .lp-chardonnay .lp-navi-link.lp-navi-link_lineup img {

    height: 26px;

  }

}

.lp-chardonnay .lp-hamburger {

  --lineWidth: 100%;

  --lineHeight: 2px;

  width: 36px;

  aspect-ratio: 2/1;

  position: relative;

  display: block;

  padding: 0;

  background-color: transparent;

  overflow: hidden;

}

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

  .lp-chardonnay .lp-hamburger {

    display: none;

  }

}

.lp-chardonnay .lp-hamburger::before, .lp-chardonnay .lp-hamburger::after {

  content: "";

  display: block;

  width: var(--lineWidth);

  height: var(--lineHeight);

  background-color: var(--lpColorPrime);

  position: absolute;

  left: 0;

  transition: all 0.4s ease 0.2s;

}

.lp-chardonnay .lp-hamburger::before {

  top: 0;

}

.lp-chardonnay .lp-hamburger::after {

  top: 100%;

  translate: 0 -100%;

}

.lp-chardonnay .lp-hamburger-button {

  background-color: var(--lpColorPrime);

  display: block;

  width: var(--lineWidth);

  height: var(--lineHeight);

  position: absolute;

  left: 0;

  top: 50%;

  translate: 0 -50%;

  transition: all 0.5s;

}

.lp-chardonnay .lp-hamburger-button span {

  display: none !important;

}

.lp-chardonnay .lp-hamburger.is-open .lp-hamburger-button {

  left: 100%;

}

.lp-chardonnay .lp-hamburger.is-open::before {

  rotate: 45deg;

  top: 50%;

}

.lp-chardonnay .lp-hamburger.is-open::after {

  rotate: -45deg;

  top: 50%;

}



/* contents */

.lp-chardonnay .lp-mv .lp-inner {

  --hederHeight: 58px;

  color: var(--lpColorSubPrime);

  position: relative;

  padding-top: calc(130px + var(--hederHeight));

  background-image: url("../images/bg-mv.png");

  background-repeat: no-repeat;

  background-position: top calc(35px + var(--hederHeight)) right;

  background-size: min(69.53%, 890px) auto;

}

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

  .lp-chardonnay .lp-mv .lp-inner {

    background-position: top right;

    background-size: 94.87% auto;

    padding-top: 0;

    padding-bottom: 148px;

    margin-top: 34px;

  }

}

.lp-chardonnay .lp-mv .lp-inner::before, .lp-chardonnay .lp-mv .lp-inner::after {

  content: "";

  display: block;

  position: absolute;

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

}

.lp-chardonnay .lp-mv .lp-inner::before {

  background-image: url("../images/bg-grape_left-01.png");

  width: 192px;

  aspect-ratio: 384/398;

  top: 0;

  left: 0;

}

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

  .lp-chardonnay .lp-mv .lp-inner::before {

    content: none;

  }

}

.lp-chardonnay .lp-mv .lp-inner::after {

  background-image: url("../images/bg-grape_right-01-pc.png");

  width: 222px;

  aspect-ratio: 444/522;

  top: 0;

  right: 0;

}

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

  .lp-chardonnay .lp-mv .lp-inner::after {

    background-image: url("../images/bg-grape_right-01-sp.png");

    width: calc(230 / 750 * 100vw);

    top: 50%;

  }

}

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

  .lp-chardonnay .lp-mv :where(.lp-mv-title, .lp-mv-lead, .lp-mv-lead_sub, .lp-button) {

    margin-left: 95px;

  }

}

.lp-chardonnay .lp-mv-title {

  font-size: 81px;

}

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

  .lp-chardonnay .lp-mv-title {

    font-size: 57px;

    padding-top: 215px;

  }

}

.lp-chardonnay .lp-mv-lead {

  font-size: 38px;

  line-height: 1.39;

  margin-top: 7px;

}

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

  .lp-chardonnay .lp-mv-lead {

    font-size: 30px;

  }

}

.lp-chardonnay .lp-mv-lead_sub {

  font-size: 15px;

  line-height: 1.73;

  margin-top: 16px;

}

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

  .lp-chardonnay .lp-mv-lead_sub {

    font-size: 14px;

  }

}

.lp-chardonnay .lp-mv .lp-button {

  margin-top: 24px;

  width: 243px;

  aspect-ratio: 243/41;

}

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

  .lp-chardonnay .lp-mv .lp-button {

    margin-top: 28px;

  }

}

.lp-chardonnay .lp-mv-slide {

  overflow: hidden;

}

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

  .lp-chardonnay .lp-mv-slide {

    position: absolute;

    bottom: -80px;

    left: 0;

    width: 100%;

  }

}

.lp-chardonnay .lp-mv-slide_container {

  display: flex;

  width: 2800px;

}

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

  .lp-chardonnay .lp-mv-slide_container img {

    width: 1400px;

  }

}

.lp-chardonnay .lp-mv-slide_item {

  display: flex;

}

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

  .lp-chardonnay .lp-mv-slide_item img {

    width: 120px;

  }

}

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

  .lp-chardonnay .lp-about .lp-inner {

    padding-left: 95px;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

  }

}

.lp-chardonnay .lp-about-text {

  width: 46.09%;

  margin-top: 32px;

}

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

  .lp-chardonnay .lp-about-text {

    width: 100%;

    margin-top: 29px;

  }

}

.lp-chardonnay .lp-about-image {

  width: 47.84%;

  margin-top: 32px;

}

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

  .lp-chardonnay .lp-about-image {

    width: calc(100% + 18px);

    margin: 9px -9px 0;

  }

}

.lp-chardonnay .lp-about-title {

  font-size: 64px;

  color: var(--lpColorPrime);

  width: 100%;

}

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

  .lp-chardonnay .lp-about-title {

    width: 172px;

  }

}

.lp-chardonnay .lp-about-lead {

  font-size: 32px;

  font-weight: 600;

  color: var(--lpColorPrime);

}

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

  .lp-chardonnay .lp-about-lead {

    font-size: 19px;

  }

}

.lp-chardonnay .lp-about-paragraph {

  font-size: 16px;

  font-weight: 500;

  margin-top: 40px;

  line-height: 2.19;

}

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

  .lp-chardonnay .lp-about-paragraph {

    font-size: 13px;

    margin-top: 24px;

    line-height: 1.85;

  }

}

.lp-chardonnay .lp-change {

  margin-top: 35px;

  margin-bottom: 120px;

}

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

  .lp-chardonnay .lp-change {

    margin-top: 40px;

  }

}

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

  .lp-chardonnay .lp-change .lp-inner {

    flex-flow: row-reverse;

    justify-content: start;

    align-items: flex-end;

    column-gap: 54px;

  }

}

@media screen and (min-width: 768px) and (max-width: 1279px) {

  .lp-chardonnay .lp-change .lp-inner {

    align-items: center;

  }

}

.lp-chardonnay .lp-change-text {

  width: 45.19%;

}

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

  .lp-chardonnay .lp-change-text {

    width: 100%;

  }

}

.lp-chardonnay .lp-change-title {

  font-size: 32px;

  font-weight: 600;

  color: var(--lpColorPrime);

}

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

  .lp-chardonnay .lp-change-title {

    font-size: 19px;

  }

}

.lp-chardonnay .lp-change-paragraph {

  font-size: 16px;

  font-weight: 500;

  margin-top: 40px;

  line-height: 2.19;

}

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

  .lp-chardonnay .lp-change-paragraph {

    font-size: 13px;

    margin-top: 24px;

    line-height: 1.85;

  }

}

.lp-chardonnay .lp-change-image {

  width: 43.6%;

  padding-left: 20px;

}

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

  .lp-chardonnay .lp-change-image {

    width: 100%;

    padding-left: 0;

    margin-top: 24px;

  }

}



.lp-chardonnay .lp-map .lp-inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  column-gap: 32px;

  position: relative;

  padding-top: 110px;

}

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

  .lp-chardonnay .lp-map .lp-inner::after {

    content: "";

    display: block;

    background-image: url("../images/bg-grape_right-01-sp.png");

    background-repeat: no-repeat;

    background-position: center right;

    background-size: contain;

    width: 126px;

    aspect-ratio: 252/301;

    position: absolute;

    right: 0;

    top: 20px;

  }

 .lp-chardonnay .lp-map .lp-inner::before {

    content: "";

    display: block;

    width: 148px;

    aspect-ratio: 320/288;

    position: absolute;

    bottom: 13%;

    left: 0;

    translate: 0 -10%;

    background-image: url(../images/bg-grape_left-03-sp.png);

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

  }

}

.lp-chardonnay .lp-map-title, .lp-chardonnay .lp-map-lead {

  position: relative;

  z-index: 1;

}

.lp-chardonnay .lp-map-title {

  width: 356px;

  padding-left: 131px;

}

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

  .lp-chardonnay .lp-map-title {

    width: 225px;

    padding-left: 0;

  }

}

.lp-chardonnay .lp-map-lead {

  width: calc(100% - 225px - 131px - 32px);

  font-size: 16px;

  font-weight: 500;

}

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

  .lp-chardonnay .lp-map-lead {

    width: 100%;

    margin-top: 24px;

    font-size: 12px;

    line-height: 1.85;

  }

}

.lp-map_image {

 margin:80px auto;

 text-align: center;

}

.lp-map_image img {

 max-width: 1073px

}

.lp-map_button {

 margin:0 auto;

 text-align: center

}

.lp-map_button img {

 max-width: 542px

}



.lp-chardonnay .lp-ranking .lp-inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  column-gap: 32px;

  position: relative;

  padding-top: 110px;

}

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

  .lp-chardonnay .lp-ranking .lp-inner {

    padding-top: 117px;

  }

}

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

 .lp-chardonnay .lp-ranking .lp-inner::after {

   content: "";

   display: block;

   width: 382px;

   aspect-ratio: 382/267;

   position: absolute;

   top: 45px;

   right: 0;

   background-image: url("../images/bg-grape_right-01-pc.png");

   background-repeat: no-repeat;

   background-position: center right;

   background-size: contain;

 }

}

.lp-chardonnay .lp-ranking-title, .lp-chardonnay .lp-ranking-lead {

  position: relative;

  z-index: 1;

}

.lp-chardonnay .lp-ranking-title {

  width: 356px;

  padding-left: 131px;

}

.lp-chardonnay .lp-ranking-title small {

  font-size:80%;

  line-height: 1.2

}

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

  .lp-chardonnay .lp-ranking-title {

    width: 225px;

    padding-left: 0;

  }

}

.lp-chardonnay .lp-ranking-lead {

  width: calc(100% - 225px - 131px - 32px);

  line-height: 1.5;

  font-size: 16px;

  font-weight: 500;

}

.lp-chardonnay .lp-ranking-lead small {

  display: inline-block;

  padding-top: 8px;

  font-size: 80%;

  line-height: 1.5;

}

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

  .lp-chardonnay .lp-ranking-lead {

    width: 100%;

    margin-top: 24px;

    font-size: 12px;

    line-height: 1.85;

  }

}

.lp-chardonnay .lp-ranking-list {

  width: 100%;

  margin-top: 80px;

}

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

  .lp-chardonnay .lp-ranking-list {

    margin-top: 55px;

  }

}

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

  .lp-chardonnay .lp-ranking-list {

    display: flex;

    padding-bottom: 210px;

    background-image: url("../images/bg-ranking-01.png"), linear-gradient(to bottom, var(--lpBodyBackColor) 0%, var(--lpBodyBackColor) 50%, #C9DFA1 50%, #C9DFA1 100%);

    background-repeat: no-repeat, no-repeat;

    background-position: bottom 5px center, top left;

    background-size: auto 45px, auto;

  }

  .lp-chardonnay .lp-ranking-item {

    width: calc(100%/2.999);

    text-align: center;

    background-color: var(--lpBodyBackColor);

  }

  .lp-chardonnay .lp-ranking-item.lp-ranking-first {

    order: 2;

  }

  .lp-chardonnay .lp-ranking-item.lp-ranking-first .lp-ranking-item_icon {

    top: 0%;

    right: -70%;

    z-index: 0;

  }

  .lp-chardonnay .lp-ranking-item.lp-ranking-2nd {

    order: 1;

    translate: 0 75px;

  }

  .lp-chardonnay .lp-ranking-item.lp-ranking-2nd .lp-ranking-item_icon {

    top: 0%;

    right: -70%;

    z-index: -1;

  }

  .lp-chardonnay .lp-ranking-item.lp-ranking-3rd {

    order: 3;

    translate: 0 150px;

  }

  .lp-chardonnay .lp-ranking-item.lp-ranking-3rd .lp-ranking-item_icon {

    top: -2%;

    right: -70%;

    z-index: -1;

  }

  .lp-chardonnay .lp-ranking-item_image {

    position: relative;

    width: -moz-fit-content;

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

  }

  .lp-chardonnay .lp-ranking-item_icon, .lp-chardonnay .lp-ranking-item_picture {

    display: block;

    opacity: 0;

  }

  .lp-chardonnay .lp-ranking-item_icon {

    position: absolute;

  }

  .lp-chardonnay .lp-ranking-item_text {

    background-color: #C9DFA1;

    margin-top: 16px;

    padding-top: 21px;

  }

  .lp-chardonnay .lp-ranking-2nd .lp-ranking-item_text {

    padding-bottom: 52px;

  }

  .lp-chardonnay .lp-ranking-item_explanation, .lp-chardonnay .lp-ranking-item_button {

    width: 217px;

    margin-left: auto;

    margin-right: auto;

    opacity: 0;

  }

  .lp-chardonnay .lp-ranking-item_button {

    margin-top: 15px;

    height: 37px;

  }

}

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

  .lp-chardonnay .lp-ranking-item {

    width: 67.88%;

    margin-left: auto;

    margin-right: auto;

    text-align: center;

    position: relative;

    border: 3px solid #C9DFA1;

  }

  .lp-chardonnay .lp-ranking-item + .lp-ranking-item {

    margin-top: 65px;

  }

  .lp-chardonnay .lp-ranking-item_image {

    width: 100%;

    height: 236px;

    margin-left: auto;

    margin-right: auto;

    display: grid;

    place-content: center;

  }

  .lp-chardonnay .lp-ranking-item_icon {

    position: absolute;

    top: 0;

    right: 0;

    translate: 50% -50%;

    display: block;

    width: 82px;

    aspect-ratio: 82/90;

    opacity: 0;

  }

  .lp-chardonnay .lp-ranking-item_picture {

    width: 90px;

    opacity: 0;

  }

  .lp-chardonnay .lp-ranking-item_text {

    background-color: #C9DFA1;

    padding: 15px 17px 20px;

  }

  .lp-chardonnay .lp-ranking-item_explanation, .lp-chardonnay .lp-ranking-item_button {

    opacity: 0;

  }

  .lp-chardonnay .lp-ranking-item_button {

    margin: 16px auto 0;

    width: 100%;

    max-width: 187px;

    height: 32px;

  }

}

.lp-chardonnay .lp-instagram .lp-inner {

  padding-top: 60px;

  padding-bottom: 120px;

  position: relative;

}

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

  .lp-chardonnay .lp-instagram .lp-inner {

    /*padding-top: 140px;*/    

    padding-top: 40px;

    padding-bottom: 60px;

  }

}

.lp-chardonnay .lp-instagram .lp-inner::after {

  content: "";

  display: block;

  position: absolute;

  z-index: -1;

  background-image: url("../images/bg-grape_right-02-pc.png");

  background-repeat: no-repeat;

  background-position: top right;

  background-size: contain;

}

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

  .lp-chardonnay .lp-instagram .lp-inner::after {

    width: 303px;

    aspect-ratio: 606/501;

    bottom: 0;

    right: 0;

  }

}

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

  .lp-chardonnay .lp-instagram .lp-inner::after {

    width: 160px;

    aspect-ratio: 320/288;

    top: -10px;

    left: 0;

    background-image: url("../images/bg-grape_left-02.png");

    background-position: top left;

  }

}

.lp-chardonnay .lp-instagram-include {

  position: relative;

}

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

  .lp-chardonnay .lp-lineup .lp-inner {

    position: relative;

  }

  .lp-chardonnay .lp-lineup .lp-inner::before {

    content: "";

    display: block;

    width: 283px;

    aspect-ratio: 566/471;

    position: absolute;

    top: 0;

    left: 0;

    translate: 0 -10%;

    background-image: url("../images/bg-grape_left-03-pc.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

  }

 .lp-chardonnay .lp-lineup .lp-inner::after {

    content: "";

    display: block;

    width: 283px;

    aspect-ratio: 606/501;

    position: absolute;

    top: -100px;

    right:0;

    translate: 0 -10%;

    background-image: url("../images/bg-grape_right-02-pc.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

  }

}

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

  .lp-chardonnay .lp-lineup .lp-inner {

   padding: 0px 20px;

  }

}

.lp-chardonnay .lp-lineup-title {

  text-align: center;

}

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

  .lp-chardonnay .lp-lineup-title img {

    width: 196px;

  }

}

.lp-chardonnay .lp-buy {

  margin-top: 70px;

}

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

  .lp-chardonnay .lp-buy {

    margin-top: 45px;

  }

}

.lp-chardonnay .lp-buy + .lp-buy {

  margin-top: 96px;

}

.lp-chardonnay .lp-buy-title {

  text-align: center;

}

.lp-chardonnay .lp-buy-title img {

  width: revert-layer;

}

.lp-chardonnay .lp-buy-list {

  display: grid;

  grid-template-columns: repeat(3, 21.33%);

  justify-content: center;

  column-gap: 3.91%;

  margin-top: 31px;

}

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

  .lp-chardonnay .lp-buy-list {

    display: block;

    margin-top: 42px;

  }

}

.lp-chardonnay .lp-buy-list.has-item1 {

  grid-template-columns: repeat(1, 21.33%);

}

.lp-chardonnay .lp-buy-list.has-item2 {

  grid-template-columns: repeat(2, 21.33%);

}

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

  .lp-chardonnay .lp-buy-list {

   display: flex;

   flex-wrap: wrap

  }

}

.lp-chardonnay .lp-buy-item {

  text-align: center;

  line-height: 1.56;

  display: grid;

 /* grid-template-rows: subgrid;*/

  grid-row: span 4;

}

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

  .lp-chardonnay .lp-buy-item {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

  }

  .lp-chardonnay .lp-buy-item + .lp-buy-item {

    margin-top: 40px;

  }

  .lp-chardonnay .lp-buy-item_image {

    width: 46.5%;

  }

 .lp-chardonnay .lp-buy-item_detail {

   width: 51%;

   text-align: left;

  }

}

.lp-chardonnay .lp-buy-item_name {

  font-size: 14px;

  font-weight: 500;

  color: var(--lpColorPrime);

  margin-top: 10px;

}

.lp-chardonnay .lp-buy-item_explanation {

  font-size: 15px;

  line-height: 1.47;

  margin-top: 10px;

}

.lp-chardonnay .lp-buy-item_price {

  margin-top: 4px;

 font-size:18px;

}

.lp-chardonnay .lp-buy-item_button {

  font-size: 15px;

  margin: 15px auto 0;

  background-color: #000;

  width: 165px;

  height: 39px;

}

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

 .lp-chardonnay .lp-buy-item_name {

   font-size: 12px;

 }

 .lp-chardonnay .lp-buy-item_button {

   width: 80%;

   max-width: 400px;

   height: 52px;

 }

}

/* animation */

@keyframes slide {

  0% {

    translate: 0 0;

  }

  100% {

    translate: -100% 0;

  }

}

@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@keyframes scaleIn {

  0% {

    opacity: 0;

    scale: 0;

  }

  30% {

    opacity: 1;

    scale: 0;

  }

  60% {

    opacity: 1;

    scale: 1.1;

  }

  90% {

    opacity: 1;

    scale: 0.9;

  }

  100% {

    opacity: 1;

    scale: 1;

  }

}

.lp-chardonnay .lp-mv-slide_item {

  animation: slide 30s linear 0s both infinite;

}

.lp-chardonnay .lp-ranking {

  --animationDelay: .1s;

}

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

  .lp-chardonnay .lp-ranking {

    --animationDelay: 0s;

  }

}

.lp-chardonnay .lp-ranking .lp-ranking-first.is-start .lp-ranking-item_icon {

  animation: scaleIn 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) calc(10 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-first.is-start .lp-ranking-item_picture {

  animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(20 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-first.is-start .lp-ranking-item_explanation,

.lp-chardonnay .lp-ranking .lp-ranking-first.is-start .lp-ranking-item_button {

  animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(22 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-2nd.is-start .lp-ranking-item_icon {

  animation: scaleIn 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) calc(5 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-2nd.is-start .lp-ranking-item_picture {

  animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(15 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-2nd.is-start .lp-ranking-item_explanation,

.lp-chardonnay .lp-ranking .lp-ranking-2nd.is-start .lp-ranking-item_button {

  animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(22 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-3rd.is-start .lp-ranking-item_icon {

  animation: scaleIn 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) calc(0 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-3rd.is-start .lp-ranking-item_picture {

  animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(10 * var(--animationDelay)) forwards;

}

.lp-chardonnay .lp-ranking .lp-ranking-3rd.is-start .lp-ranking-item_explanation,

.lp-chardonnay .lp-ranking .lp-ranking-3rd.is-start .lp-ranking-item_button {

  animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(22 * var(--animationDelay)) forwards;

}

/*MEDIA*/

.media.is-hidden {

  display: none;

}

.media {

  padding: 100px 0;

  background: linear-gradient(90deg, rgba(255, 244, 215, 0.30) 0%, rgba(250, 251, 239, 0.30) 84.37%, rgba(232, 250, 221, 0.30) 100%);

  position: relative;

  margin: 70px auto 20px;

  display: block;

}



.media .h2 {

  margin: 0 auto 30px;

  text-align: center

}



.media .h2 .media__link img {

  margin-top: 30px;

}



.media .media__bg {

  position: absolute;

  top: 74px;

  left: 50%;

  transform: translateX(-75%);

  width: 252px;

  height: 252px;

  z-index: 0;

}



.media .media__bg img {

  width: 100%;

  height: auto;

}



.media .media__list {

  display: flex;

  gap: 30px;

  justify-content: center;

  max-width: 1200px;

  margin: 0 auto;

}



.media .media__card {

  width: 216px;

}

.media .media__card a:hover{

  text-decoration: none;

}



.media .media__thumb {

  margin-bottom: 10px;

  aspect-ratio: 1/1;

  max-width: none;

  max-height: none;

}



.media .media__thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.media .media__category {

  display: flex;

  align-items: center;

  gap: 8px;

  color: #777;

  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  line-height: 2.10883;

  letter-spacing: 0.42px;

}



.media .media__category span {

  color: #777;

  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  line-height: 2.10883;

  letter-spacing: 0.42px;

}



.media .media__title {

  color: #333;

  font-family: var(--lpFontSansSerif);

  font-size: 12px;

  font-style: normal;

  font-weight: 600;

  line-height: 1.833;

  letter-spacing: 0.36px;

  margin-top: 5px;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  overflow: hidden;

  width: 100%

}



.media .media__time {

  color: #A3A3A3;

  font-family: var(--lpFontSansSerif);

  font-size: 12px;

  font-style: normal;

  font-weight: 600;

  line-height: normal;

  letter-spacing: 0.36px;

  margin-top: 10px;

}



.media .media__time time {

  font-family: var(--lpFontSansSerif);

}



@media (max-width: 768px) {

  .media {

    padding: 50px 4.34783% 50px 4.34783%;

    margin: 20px auto 10px;

   z-index: 1

  }



  .media .h2 {

   margin: 0 auto 20px;

  }



  .media .h2 .media__link img {

    width: 30%;

    height: auto;

    margin-top: 15px;

    padding-left: 3%;

  }



  .media .h2 span {

    font-size: clamp(10px, 3.63vw, 12px);

    letter-spacing: 0;

  }



  .media .media__bg {

    position: absolute;

    top: 50px;

    left: 50%;

    transform: translateX(-75%);

    width: 53vmin;

    height: 53vmin;

  }



  .media .media__list {

    flex-wrap: wrap;

    gap: 4%;

    justify-content: space-between;

    margin: 0 auto;

  }



  .media .media__card {

    width: 48%;

    margin: 0 0 30px 0;

  }



  .media .media__card:nth-child(n+5) {

    display: none;

  }



  .media .media__thumb {

    margin-bottom: 14px;

  }



  .media .media__category {

    gap: 6px;

    font-size: 14px;

    font-size: clamp(10px, 3.5vw, 14px);

  }



  .media .media__category img {

    width: 9.6%;

    height: auto;

    flex-shrink: 0;

  }



  .media .media__title {

    -webkit-line-clamp: 3;

  }



  .media .media__btn {

    margin-top: 0;

  }

}



/* ----- MEDIAボタン----- */

.media__btn {

  background-color: var(--lpColorSubPrime);;

  border-radius: 4px;

  gap: 7px;

  width: 200px;

  height: 39px;

  margin: 40px auto 0;

  padding: 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 14px;

  line-height: 22px;

  letter-spacing: 0.01em;

  font-weight: 500;

  color: #fff;

}



 .media__btn svg {

  display: block;

  margin-top: -4px;

}



 .media__btn svg path {

  stroke: #fff;

}



@media (max-width: 768px) {

   .media__btn {

    margin-top: 0;

  }

}

/* ----- animation----- */

.u-pattern-animation img {

  animation-name: wave-large;

  animation-delay: -1s;

  animation-duration: 7s;

  animation-iteration-count: infinite;

  animation-timing-function: ease-in-out

}



@keyframes wave-large {

  0% {

    transform: translateY(-10.5%) translateX(-10%) scale(1)

  }



  25% {

    transform: translateY(2.5%) translateX(0) scale(1)

  }



  50% {

    transform: translateY(-10.5%) translateX(10%) scale(1.1)

  }



  75% {

    transform: translateY(2.5%) translateX(15%) scale(1)

  }



  to {

    transform: translateY(-10.5%) translateX(-10%) scale(1)

  }

}

/* z-index */

.lp-chardonnay .lp-header {

  z-index: 10;

}