@charset "UTF-8";
html {
  font-size: 62.5%;
}
@media (min-width: 768px) and (max-width: 1400px) {
  html{
    font-size: calc(10* (100vw / 1400)); 
  }
}
@font-face {
  font-family: "NotoSerifJP-Regular";
  src: url("../fonts/NotoSerifJP-Regular.otf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "NotoSerifJP-SemiBold";
  src: url("../fonts/NotoSerifJP-SemiBold_0.otf") format("truetype");
  font-style: normal;
}
.lp-recommend {
  --main-txt-color: #000000;
  --credit-txt-color: #58595b;
  --bg-color: #ffffff;
  --full-width: 100%;
  --basic-width-pc: 140rem;
  --basic-width-sp: calc(750*(100vw / 750));
  --credit-font-family: "kepler-std-display", serif;
  --title-font-family: "kepler-std-semicondensed-dis", serif;
  --font-noto_r: 'NotoSerifJP-Regular';
  --font-noto_s: 'NotoSerifJP-SemiBold';
}
/*========================================
▼共通デザイン（spファースト）
==========================================*/
.lp-recommend {
  width: var(--full-width);
  margin: 0 auto;
  color: var(--main-txt-color);
  box-sizing: border-box;
}
:where(.lp-recommend) h4 {
  font-family: var(--font-noto_s);
  font-weight: 400;
  font-style: normal;
}
:where(.lp-recommend) p {
  font-family: var(--font-noto_r);
  font-weight: 400;
  font-style: normal;
}
:where(.lp-recommend) img {
  width: var(--full-width);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  display: block;
  line-height: 0;
  font-size: 0;
}
:where(.lp-recommend) picture {
  display: block;
}
.main-box {
  width: var(--basic-width-sp);
  margin: 0 auto;
  margin-bottom: calc(140*(100vw / 750));
}
.main-box .main-v {
  width: var(--full-width);
  margin: 0 auto;
  margin-bottom: calc(104.5*(100vw / 750));
}
.main-box .main-txt {
  text-align: center;
  font-size: calc(28*(100vw / 750));
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.135em;
}

.main-parts01 {
  width: var(--basic-width-sp);
  margin: 0 auto;
  margin-bottom: calc(152*(100vw / 750));
}
.contents-box {
  width: var(--full-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(40*(100vw / 750)) calc(20*(100vw / 750)) calc(50*(100vw / 750)) calc(580*(100vw / 750)) auto;
}
.contents-in01 {
  grid-column: 1 / 6;
}
.contents-in01 h3 {
  font-family: var(--title-font-family);
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: calc(81*(100vw / 750));
  font-feature-settings: "palt";
  letter-spacing: 0.01em;
  margin-bottom: calc(31.5*(100vw / 750));
}
.contents-in02 {
  grid-column: 1 / 6;
}
.contents-in02 p {
  font-family: var(--font-noto_s);
  text-align: center;
  font-size: calc(26*(100vw / 750));
  font-feature-settings: "palt";
  line-height: 2;
  letter-spacing: 0.12em;
  margin-bottom: calc(69*(100vw / 750));
}
.contents-in03 {
  width: calc(670*(100vw / 750));
  height: auto;
  display: block;
  /* border: solid calc(3*(100vw / 750)) var(--main-txt-color); */
  box-sizing: border-box;
  margin-bottom: calc(60*(100vw / 750));
  grid-column: 2 / 6;
  position: relative;
}
.contents-in04 {
  width: calc(500*(100vw / 750));
  height: auto;
  display: block;
  box-sizing: border-box;
  grid-column: 2 / 5;
  margin-bottom: calc(60*(100vw / 750));
}
.contents-in05 {
  width: calc(580*(100vw / 750));
  height: auto;
  display: block;
  box-sizing: border-box;
  grid-column: 4 / 5;
  margin-bottom: calc(54*(100vw / 750));
}
.contents-txt01 {
  grid-column: 3 / 5;
  margin-bottom: calc(39*(100vw / 750));
}
.contents-txt01 h4 {
  text-align: left;
  font-size: calc(34*(100vw / 750));
  line-height: 1.8529411765;
  font-feature-settings: "palt";
  letter-spacing: 0.12em;
  margin-bottom: calc(33.5*(100vw / 750));
}
.contents-txt01 p {
  text-align: justify;
  line-break: strict;
  font-size: calc(26*(100vw / 750));
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.12em;
}
.contents-txt02 {
  grid-column: 3 / 5;
}
.contents-txt02 p {
  font-family: var(--credit-font-family);
  font-weight: 400;
  text-align: left;
  font-size: calc(24*(100vw / 750));
  line-height: 1.75;
  font-feature-settings: "palt";
  letter-spacing: 0.06em;
  color: var(--credit-txt-color);
}

.lp-recommend .frame-black{
  position: relative;
}
.lp-recommend .frame-black::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: solid calc(3*(100vw / 750)) var(--main-txt-color);
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.main-parts02 {
  width: var(--basic-width-sp);
  margin: 0 auto;
  margin-bottom: calc(191.5*(100vw / 750));
}
.contents-box2 {
  width: var(--full-width);
  margin: 0 auto;
}
.contents-box2 .contents-in03 {
  width: var(--full-width);
  margin: 0 auto;
  margin-bottom: calc(60*(100vw / 750));
}
.contents-box2 .contents-in04 {
  width: calc(530*(100vw / 750));
  margin: 0 auto;
  margin-bottom: calc(54*(100vw / 750));
}
.contents-box2 .contents-txt01 {
  width: calc(620*(100vw / 750));
  margin: 0 auto;
  margin-bottom: calc(39*(100vw / 750));
}
.contents-box2 .contents-txt02 {
  width: calc(620*(100vw / 750));
  margin: 0 auto;
}
.contents-box2 .contents-txt01 h4 {
  text-align: center;
}
.contents-box2 .contents-txt02 p {
  text-align: center;
}

.main-parts02 .js-slider {
  width: calc(530*(100vw / 750));
}

.main-parts03 {
  width: var(--basic-width-sp);
  margin: 0 auto;
  margin-bottom: calc(154*(100vw / 750));
}
.contents-box3 {
  width: var(--full-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(60*(100vw / 750)) calc(95*(100vw / 750)) calc(535*(100vw / 750)) auto;
}
.contents-box3 .contents-in01 h3 {
  letter-spacing: 0;
  margin-bottom: calc(31*(100vw / 750));
}
.contents-box3 .contents-in02 p {
  margin-bottom: calc(68.5*(100vw / 750));
}
.contents-box3 .contents-in03 {
  width: calc(640*(100vw / 750));
  margin: 0 auto;
  grid-column: 1 / 6;
  margin-bottom: calc(60*(100vw / 750));
}
.contents-box3 .contents-in04 {
  width: calc(540*(100vw / 750));
  grid-column: 3 / 5;
  display: block;
  margin-bottom: calc(54*(100vw / 750));
  background-color: var(--bg-color);
}
.contents-box3 .contents-txt01 {
  grid-column: 2 / 4;
  margin-bottom: calc(38*(100vw / 750));
}
.contents-box3 .contents-txt02 {
  grid-column: 2 / 4;
}
.contents-box3 .contents-txt02 p {
  padding-top: 1px;
  padding-left: 2px;
  line-height: 1.7;
}

.main-parts03 .js-slider {
  width: calc(640*(100vw / 750));
}

.main-parts04 {
  width: var(--basic-width-sp);
  margin: 0 auto;
  margin-bottom: calc(150*(100vw / 750));
}
.contents-box4 {
  width: var(--full-width);
  margin: 0 auto;
}
.contents-box4 .contents-in03 {
  width: calc(680*(100vw / 750));
  margin-left: 0;
  margin-bottom: calc(60*(100vw / 750));
}
.contents-box4 .contents-in04 {
  width: calc(690*(100vw / 750));
  margin-left: calc(60*(100vw / 750));
  margin-bottom: calc(53.5*(100vw / 750));
}
.contents-box4 .contents-txt01 {
  width: calc(630*(100vw / 750));
  margin: 0 auto;
  margin-bottom: calc(39.5*(100vw / 750));
}
.contents-box4 .contents-txt02 {
  width: calc(630*(100vw / 750));
  margin: 0 auto;
}
.contents-box4 .contents-txt01 h4 {
  text-align: center;
}
.contents-box4 .contents-txt02 p {
  text-align: center;
}

.main-parts04 .js-slider {
  width: calc(680*(100vw / 750));
}

.main-parts05 {
  width: var(--basic-width-sp);
  margin: 0 auto;
  padding-bottom: calc(153*(100vw / 750));
}
.all-btn {
  width: var(--full-width);
  margin: 0 auto;
  margin-bottom: calc(150*(100vw / 750));
}
.all-btn a {
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.all-btn p {
  font-family: var(--credit-font-family);
  font-size: calc(42*(100vw / 750));
  text-align: center;
  font-feature-settings: "palt";
  letter-spacing: 0.13rem;
  padding-bottom: calc(13*(100vw / 750));
  border-bottom: calc(6* 100vw / 750) double var(--credit-txt-color);
}
.staff-txt {
  width: var(--full-width);
  margin: 0 auto;
}
.staff-txt p {
  font-family: var(--credit-font-family);
  font-size: calc(26*(100vw / 750));
  text-align: center;
  font-feature-settings: "palt";
  letter-spacing: 0.06em;
  line-height: 1.75;
  color: var(--credit-txt-color);
}

#FR240624recommenditem .wrapper{
  overflow: hidden;
}
/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
  
@keyframes fadeInAnime{
  from {
      opacity: 0;
  }
  
  to {
      opacity: 1;
  }
}
#FR240624recommenditem .fadeInTrigger{
  opacity: 0;
}

.br_pc {
  display: none;
}
.br_sp {
  display: block;
}
.txt_pc {
  display: none;
}
.txt_sp {
  display: block;
}

.new-sw .swiper-button-prev,
.new-sw .swiper-button-next {
  display: none;
}
.new-sw .swiper-pagination {
  width: initial !important;
  right: initial !important;
  left: 0 !important;
  bottom: calc(17*(100vw / 750)) !important;
}
.new-sw .space-c {
  margin-bottom: calc(4.5*(100vw / 750));
}
.new-sw .swiper-pagination-bullet {
  width: calc(10*(100vw / 750))!important;
  height: calc(10*(100vw / 750))!important;
  margin: 0 !important;
  margin-left: calc(20*(100vw / 750))!important;
  background-color: transparent !important; 
  opacity: 1 !important;
  border: solid 1px var(--main-txt-color)!important;
}
.new-sw .swiper-pagination-bullet-active {
  background-color: var(--main-txt-color) !important;
}

@media screen and (min-width: 768px) {
  .br_pc {
    display: block;
  }
  .br_sp {
    display: none;
  }
  .txt_pc {
    display: block;
  }
  .txt_sp {
    display: none;
  }

  .main-box {
    width: var(--basic-width-pc);
    margin: 0 auto;
    margin-bottom: 12.5rem;
  }
  .main-box .main-v {
    width: 120rem;
    margin: 0 auto;
    margin-bottom: 5.6rem;
  }
  .main-box .main-txt {
    font-size: 1.4rem;
    letter-spacing: 0.16em;
  }
  
  .main-parts01 {
    width: var(--full-width);
    margin: 0 auto;
    margin-bottom: 15.1rem;
  }
  .contents-box {
    width: var(--basic-width-pc);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 25.8rem 11.4rem 26.9rem 4.8rem 2.3rem 31.7rem auto;
    grid-template-rows: 3.4rem 15.9rem 101rem 47.8rem 4.1rem 16.55rem 1rem;
  }
  .contents-in01 {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
  }
  .contents-in01 h3 {
    text-align: left;
    font-size: 7.8rem;
    line-height: 0.75;
    padding-top: 0.9rem;
  }
  .contents-in01 span {
    padding-left: 17.5rem;
  }
  .contents-in02 {
    grid-column: 4 / 8;
    grid-row: 2 / 3;
  }
  .contents-in02 p {
    font-weight: 600;
    text-align: left;
    font-size: 1.6rem;
    letter-spacing: 0.16em;
  }
  .contents-in03 {
    width: 65.7rem;
    margin-bottom: auto;
    grid-column: 3;
    grid-row: 3 / 4;
  }
  .contents-in04 {
    width: fit-content;
    margin-bottom: auto;
    grid-column: 3 / 5;
    grid-row: 4 / 5;
  }
  .contents-in05 {
    width: fit-content;
    margin-bottom: auto;
    grid-column: 6 / 7;
    grid-row: 4 / 5;
  }
  .contents-txt01 {
    grid-column: 3 / 7;
    grid-row: 6 / 7;
  }
  .contents-txt01 h4 {
    text-align: center;
    font-size: 2.1rem;
    line-height: 1.7619047619;
    letter-spacing: 0.16em;
    margin-bottom: 2.4rem;
  }
  .contents-txt01 p {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.16em;
  }
  .contents-txt02 {
    grid-column: 3 / 7;
    grid-row: 7 / 8;
  }
  .contents-txt02 p {
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.65;
    letter-spacing: 0.06em;
  }
  
  .lp-recommend .frame-black::before{
    z-index: 2;
    border: solid 0.2rem var(--main-txt-color);
  }

  .main-parts02 {
    width: var(--full-width);
    margin: 0 auto;
    margin-bottom: 19.9rem;
  }
  .contents-box2 {
    width: var(--basic-width-pc);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 25.6rem 19.2rem 34.9rem 3.7rem 11.3rem 19.7rem auto;
    grid-template-rows: 12rem 52.3rem 35.5rem 4.2rem 16.6rem 1rem;
  }
  .contents-box2 .contents-txt01 h4 {
    letter-spacing: 0.16em;
    margin-bottom: 2.5rem;
}
  .contents-box2 .contents-in03 {
    width: 57.8rem;
    grid-column: 2 / 5;
    grid-row: 1 / 4;
    margin-bottom: auto;
  }
  .contents-box2 .contents-in04 {
    width: 34.7rem;
    grid-column: 4 / 7;
    grid-row: 2 / 3;
    margin-bottom: auto;
    background-color: var(--bg-color);
  }
  .contents-box2 .contents-txt01 {
    width: fit-content;
    grid-column: 2 / 7;
    grid-row: 5 / 6;
  }
  .contents-box2 .contents-txt02 {
    width: fit-content;
    grid-column: 2 / 7;
    grid-row: 6 / 7;
  }
  .main-parts02 .js-slider {
    width: 34.7rem;
  }

  .main-parts03 {
    width: var(--full-width);
    margin: 0 auto;
    margin-bottom: 14.5rem;
  }
  .contents-box3 {
    width: var(--basic-width-pc);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 23.1rem 2.5rem 22rem 7rem 4rem 6.1rem 27.3rem 22.5rem auto;
    grid-template-rows: 3.3rem 16rem 35rem 49.3rem 11.4rem 4.3rem 16.6rem 3.6rem;
  }
  .contents-box3 .contents-in01 {
    grid-column: 2 / 7;
    grid-row: 1 / 3;
  }
  .contents-box3 .contents-in01 span {
    padding-left: 21.2rem;
  }
  .contents-box3 .contents-in02 {
    grid-column: 7 / 10;
    grid-row: 2 / 3;
  }
  .contents-box3 .contents-in02 p {
    letter-spacing: 0.25rem;
  }
  .contents-box3 .contents-in03 {
    grid-column: 5 / 9;
    width: 59.7rem;
    margin-bottom: auto;
  }
  .contents-box3 .contents-in04 {
    grid-column: 3 / 6;
    width: 32.8rem;
    margin-bottom: auto;
  }
  .contents-box3 .contents-txt01 {
    grid-column: 3 / 9;
    grid-row: 7 / 8;
  }
  .contents-box3 .contents-txt02 {
    grid-column: 3 / 9;
    grid-row: 8 / 9;
  }
  .contents-box3 .contents-txt02 p {
    line-height: 1.65;
    padding-left: 0;
  }
  .contents-box3 .contents-txt01 h4 {
    text-align: center;
    font-size: 2.1rem;
    line-height: 1.7619047619;
    letter-spacing: 0.16em;
    margin-bottom: 2.6rem;
  }
  .main-parts03 .js-slider {
    width: 59.7rem;
  }

  .main-parts04 {
    width: var(--full-width);
    margin: 0 auto;
    margin-bottom: 13.8rem;
  }
  .contents-box4 {
    width: var(--basic-width-pc);
    margin: 0 auto;
  }
  .contents-box4 .contents-in03 {
    width: 65.8rem;
    margin: 0 auto;
    margin-bottom: 2.2rem;
  }
  .contents-box4 .contents-in04 {
    width: 65.7rem;
    margin: 0 auto;
    margin-bottom: 4.4rem;
  }
  .contents-box4 .contents-txt01 {
    width: 66rem;
    margin: 0 auto;
    margin-bottom: 2.1rem;
  }
  .contents-box4 .contents-txt02 {
    width: 66rem;
    margin: 0 auto;
  }
  .contents-box4 .contents-txt01 h4 {
    margin-bottom: 2.5rem;
  }
  .main-parts04 .js-slider {
    width: 65.8rem;
  }

  .main-parts05 {
    width: var(--full-width);
    margin: 0 auto;
    padding-bottom: 13.6rem;
    border-bottom: 1px solid var(--credit-txt-color);
  }
  .all-btn {
    width: var(--basic-width-pc);
    margin: 0 auto;
    margin-bottom: 13.55rem;
  }
  .all-btn p {
    font-size: 2.1rem;
    letter-spacing: 0.05em;
    padding-bottom: 0.55rem;
    border-bottom: 0.3rem double var(--credit-txt-color);
  }
  .staff-txt {
    width: var(--basic-width-pc);
    margin: 0 auto;
  }
  .staff-txt p {
    font-size: 1.3rem;
    text-align: center;
    letter-spacing: 0.06em;
    line-height: 1.75;
  }

  .new-sw .swiper-pagination {
    bottom: 0.5rem !important;
  }
  .new-sw .space-c {
    margin-bottom: 0.35rem;
  }
  .new-sw .swiper-pagination-bullet {
    width: 0.45rem !important;
    height: 0.45rem !important;
    margin-left: 1rem !important;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
slick
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.lp-recommend .slick-dots {
  position: absolute;
  bottom: calc(23*100vw/750);
  left: calc(-4*(100vw / 750));
  margin: calc(-2*(100vw / 750)) calc(17*(100vw / 750)) 0;
}
.lp-recommend .slick-dots li {
  display: inline-block;
  margin: 0 calc(10*100vw/750);
}
.lp-recommend .slick-dots li button {
  font-size: 0;
  border-radius: 50%;
  cursor: pointer;
  width: calc(10*100vw/750);;
  height: calc(10*100vw/750);;
}
.lp-recommend .slick-dots li.slick-active button {
  background-color: var(--main-txt-color);
}

@media screen and (min-width: 768px) {
  .lp-recommend .slick-dots {
    bottom: 0.9rem;
    left: -1.8rem;
    margin: 2rem 2.2rem 0;
  }
  .lp-recommend .dot-style .slick-dots {
    bottom: 1.1rem;
  }
  .lp-recommend .slick-dots li {
    margin-inline: 0.6rem;
  }
  .lp-recommend .slick-dots li button {
    width: 0.6rem;
    height: 0.6rem;
    border: 0.1rem solid var(--main-txt-color);
  }
}