@charset "UTF-8";
@media screen and (max-width: 767px) {
  .main-area .main-inner {
    width: 100%;
  }
}
@media only screen and (max-width: 1400px) {
  html {
    font-size: calc(10*100vw/1400);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - custom property
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents {
  --font-aria: "aria-text-g2";
  --font-indivisible: "indivisible";
  --font-yugothic: "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --font-en: var(--font-indivisible);
  --font-ja: var(--font-yugothic);
  --font-main: var(--font-en), var(--font-ja);
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #c2c8c3;
  --color-beige: #dbd9d1;
  --color-khaki: #3b3d0e;
  font-feature-settings: "palt";
  overflow: clip;
}
@media screen and (min-width: 768px) {
  .l-lpcontents {
    --width-primary: 140rem;
    --fz-text_tv_lead: 1.5rem;
    --fz-text_tv_campaign_subtitle: 1.7rem;
    --fz-text_tv_campaign_maintitle: 4.2rem;
    --fz-text_tv_campaign_detail: 1.6rem;
    --fz-text_tv_campaign_text: 1.1rem;
    --fz-text_sv_title: 2.7rem;
    --fz-text_sv_title_small: 2.4rem;
    --fz-text_sv_credit: 1.3rem;
    --fz-text_lv_btn: 1.7rem;
    --fz-text_lv_link: 1.4rem;
  }
  #content__archive {
    margin-top: 15rem;
  }
}
@media screen and (max-width: 767px) {
  .main-area {
    overflow: clip;
  }
  .l-lpcontents {
    --width-primary: calc(750*100vw/750);
    --fz-text_tv_lead: calc(24*100vw/750);
    --fz-text_tv_campaign_subtitle: calc(30*100vw/750);
    --fz-text_tv_campaign_maintitle: calc(60*100vw/750);
    --fz-text_tv_campaign_detail: calc(26*100vw/750);
    --fz-text_tv_campaign_text: calc(20*100vw/750);
    --fz-text_sv_title: calc(50*100vw/750);
    --fz-text_sv_title_small: calc(40*100vw/750);
    --fz-text_sv_credit: calc(25*100vw/750);
    --fz-text_lv_btn: calc(30*100vw/750);
    --fz-text_lv_link: calc(25*100vw/750);
  }
  #content__archive {
    margin-top: calc(200*100vw/750);;
  }
}

@media screen and (min-width: 768px) {
  .l-lpcontents .sp_only {
    display: none !important;
  }
  .l-lpcontents .c-color_white {
    background-color: var(--bg_color-white);
  }
}
@media screen and (max-width: 767px) {
  .l-lpcontents .pc_only {
    display: none !important;
  }
}
.l-lpcontents img,
.l-lpcontents video {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.l-lpcontents .c-bgcolor-white {
  background-color: var(--color-white);
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - grid
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents [class*="grid_column-1"] {--columns: 1;}
.l-lpcontents [class*="grid_column-2"] {--columns: 2;}
.l-lpcontents [class*="grid_column-3"] {--columns: 3;}

.l-lpcontents [class*="c-grid_column"] {
  display: grid;
  grid-template-columns: repeat(var(--columns , 1), 1fr);
  gap: var(--row, 0) var(--column, 0);
}
@media screen and (min-width: 768px) {
  .l-lpcontents [class*="c-pc_grid_column"] {
    display: grid;
    grid-template-columns: repeat(var(--columns , 1), 1fr);
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents [class*="pc_grid_column-1"] {--columns: 1;}
  .l-lpcontents [class*="pc_grid_column-2"] {--columns: 2;}
  .l-lpcontents [class*="pc_grid_column-3"] {--columns: 3;}
}
@media screen and (max-width: 767px) {
  .l-lpcontents [class*="c-sp_grid_column"] {
    display: grid;
    grid-template-columns: repeat(var(--columns , 1), 1fr);
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents [class*="sp_grid_column-1"] {--columns: 1;}
  .l-lpcontents [class*="sp_grid_column-2"] {--columns: 2;}
  .l-lpcontents [class*="sp_grid_column-3"] {--columns: 3;}
}
.l-lpcontents [class*="styleview__wrap0"] {
  position: relative;
  width: fit-content;
  height: fit-content;
  z-index: 2;
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - position
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .c-position {position: absolute;}
@media screen and (min-width: 768px) {.l-lpcontents .c-pc_position {position: absolute;}}
@media screen and (min-width: 768px) {.l-lpcontents .c-sp_position {position: absolute;}}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - flex
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .c-flex_column {
  display: flex;
  flex-direction: column;
  gap: var(--row, 0) var(--column, 0);
}
.l-lpcontents .c-flex_column_reverse {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--row, 0) var(--column, 0);
}
.l-lpcontents .c-flex_row {
  display: flex;
  flex-direction: row;
  gap: var(--row, 0) var(--column, 0);
}
.l-lpcontents .c-flex_row_reverse {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--row, 0) var(--column, 0);
}
@media screen and (min-width: 768px) {
  .l-lpcontents .c-pc_flex_column {
    display: flex;
    flex-direction: column;
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents .c-pc_flex_column_reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents .c-pc_flex_row {
    display: flex;
    flex-direction: row;
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents .c-pc_flex_row_reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--row, 0) var(--column, 0);
  }
}
@media screen and (max-width: 767px) {
  .l-lpcontents .c-sp_flex_column {
    display: flex;
    flex-direction: column;
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents .c-sp_flex_column_reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents .c-sp_flex_row {
    display: flex;
    flex-direction: row;
    gap: var(--row, 0) var(--column, 0);
  }
  .l-lpcontents .c-sp_flex_row_reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--row, 0) var(--column, 0);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - text
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .c-text_tv_lead {
  font-size: var(--fz-text_tv_lead);
  line-height: 2;
  color: var(--color-black);
  font-weight: var(--fw-regular);
  font-family: var(--font-ja);
}
.l-lpcontents .c-text_tv_campaign_subtitle {
  font-size: var(--fz-text_tv_campaign_subtitle);
  line-height: 1.75;
  color: var(--color-black);
  font-weight: var(--fw-regular);
  font-family: var(--font-en);
}
.l-lpcontents .c-text_tv_campaign_maintitle {
  display: flex;
  justify-content: center;
  align-items: end;
  width: 100%;
  margin: 0 auto;
  font-size: var(--fz-text_tv_campaign_maintitle);
  line-height: 0.55;
  color: var(--color-khaki);
  font-weight: var(--fw-regular);
  font-family: var(--font-aria);
  border-bottom: 0.1rem solid var(--color-khaki);
}
.l-lpcontents .c-text_tv_campaign_maintitle > span {
  padding: 0 1rem;
  font-size: 5rem;
  line-height: 0.55;
  color: var(--color-khaki);
  font-weight: var(--fw-regular);
  font-family: var(--font-aria);
}
.l-lpcontents .c-text_tv_campaign_detail {
  margin-top: 4.3rem;
  font-size: var(--fz-text_tv_campaign_detail);
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: var(--color-black);
  font-weight: var(--fw-medium);
  font-family: var(--font-ja);
}
.l-lpcontents .c-text_tv_campaign_text {
  display: block;
  margin-top: 2.3rem;
  font-size: var(--fz-text_tv_campaign_text);
  line-height: 1.4545454545;
  letter-spacing: 0.1em;
  color: var(--color-black);
  font-weight: var(--fw-medium);
  font-family: var(--font-ja);
}
.l-lpcontents .c-text_sv_title {
  font-size: var(--fz-text_sv_title);
  line-height: 1.75;
  color: var(--color-black);
  font-weight: var(--fw-regular);
  font-family: var(--font-aria);
}
.l-lpcontents .c-text_sv_title_small {
  font-size: var(--fz-text_sv_title_small);
  line-height: 1.75;
  color: var(--color-black);
  font-weight: var(--fw-regular);
  font-family: var(--font-aria);
}
.l-lpcontents .c-text_sv_credit {
  margin-top: 1.6rem;
  font-size: var(--fz-text_sv_credit);
  line-height: 1.75;
  color: var(--color-black);
  font-weight: var(--fw-regular);
  font-family: var(--font-en);
}
.l-lpcontents .c-text_sv_credit_item {
  display: inline-block;
  margin: 0 0.5rem;
}
.l-lpcontents .c-text_lv_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40rem;
  height: 7rem;
  border: 0.1rem solid var(--color-black);
  margin: 0 auto;
  font-size: var(--fz-text_lv_btn);
  line-height: 1;
  font-weight: var(--fw-regular);
  font-family: var(--font-aria);
  color: var(--color-black);
}
.l-lpcontents .c-text_lv_btn > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.l-lpcontents .c-text_lv_link {
  font-size: var(--fz-text_lv_link);
  line-height: 1.625;
  font-weight: var(--fw-regular);
  font-family: var(--font-en);
  color: var(--color-black);
}
@media screen and (max-width: 767px) {
  .l-lpcontents .c-text_tv_lead {
    font-weight: var(--fw-medium);
  }
  .l-lpcontents .c-text_tv_campaign_maintitle {
    line-height: 0.55;
    border-bottom: calc(2*100vw/750) solid var(--color-khaki);
  }
  .l-lpcontents .c-text_tv_campaign_maintitle > span {
    padding: 0 calc(17*100vw/750);;
    font-size: calc(70*100vw/750);;
    line-height: 0.55;
  }
  .l-lpcontents .c-text_tv_campaign_detail {
    margin-top: calc(51*100vw/750);
    letter-spacing: 0.08em;
  }
  .l-lpcontents .c-text_tv_campaign_text {
    margin-top: calc(43*100vw/750);;
    line-height: 1.75;
    letter-spacing: 0.12em;
  }
  .l-lpcontents .c-text_sv_credit {
    margin-top: calc(42*100vw/750);;
  }
  .l-lpcontents .c-text_sv_credit_item {
    margin: 0 calc(9*100vw/750);
  }
  .l-lpcontents .c-text_lv_btn {
    width: calc(690*100vw/750);;
    height: calc(124*100vw/750);;
    border: 1px solid var(--color-black);
  }
  .l-lpcontents .c-text_lv_link {
    line-height: 1.6876;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - image
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview__image0101 {width: 52rem;}
.l-lpcontents .styleview__image0102 {width: 45rem;}
.l-lpcontents .styleview__image0201 {width: 42rem;}
.l-lpcontents .styleview__image0202 {width: 42rem;}
.l-lpcontents .styleview__image0301 {width: 51rem;}
.l-lpcontents .styleview__image0302 {width: 51rem;}
.l-lpcontents .styleview__image0401 {width: 47rem;}
.l-lpcontents .styleview__image0402 {width: 47rem;}
.l-lpcontents .styleview__image0501 {width: 102.6rem;}
.l-lpcontents .styleview__image0601 {width: 57rem;}
.l-lpcontents .styleview__image0602 {width: calc(462*100vw/1400);}
.l-lpcontents .styleview__image0603 {width: calc(462*100vw/1400);}
.l-lpcontents .styleview__image0604 {width: calc(462*100vw/1400);}
.l-lpcontents .styleview__image0701 {width: 53rem;}
.l-lpcontents .styleview__image0801 {width: 45rem;}
.l-lpcontents .styleview__image0802 {width: 52rem;}
.l-lpcontents .styleview__image0901 {width: 40rem;}
.l-lpcontents .styleview__image0902 {width: 57rem;}
.l-lpcontents .styleview__image1001 {width: 49rem;}
.l-lpcontents .styleview__image1101 {width: 41rem;}
.l-lpcontents .styleview__image1102 {width: 41rem;}
.l-lpcontents .styleview__image1103 {width: 41rem;}
.l-lpcontents .styleview__image1104 {width: 41rem;}
.l-lpcontents .styleview__image1201 {width: 39rem;}
.l-lpcontents .styleview__image1202 {width: 46rem;}
.l-lpcontents .styleview__image1203 {width: 46rem;}
.l-lpcontents .styleview__image1301 {width: 43rem;}
.l-lpcontents .styleview__image1302 {width: 57rem;}
.l-lpcontents .styleview__image1401 {width: 57rem;}
.l-lpcontents .styleview__image1402 {width: 43rem;}
.l-lpcontents .styleview__image1403 {width: 43rem;}
.l-lpcontents .styleview__image1501 {width: 53rem;}
.l-lpcontents .styleview__image1601 {width: 49rem;}
.l-lpcontents .styleview__image1701 {width: 53rem;}
.l-lpcontents .styleview__image1801 {width: 39.2rem;}
.l-lpcontents .styleview__image1802 {width: 50rem;}
.l-lpcontents .styleview__image1901 {width: 53rem;}
.l-lpcontents .styleview__image1903 {width: 34rem;}
.l-lpcontents .styleview__image1904 {width: 34rem;}
.l-lpcontents .styleview__image2001 {width: 42rem;}
.l-lpcontents .styleview__image2002 {width: 60rem;}
.l-lpcontents .styleview__image2201 {width: 55rem;}
.l-lpcontents .styleview__image2301 {width: 43rem;}
@media screen and (max-width: 767px) {
.l-lpcontents .styleview__image0101 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image0102 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0201 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0202 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0301 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image0302 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image0401 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0402 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image0501 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0601 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0602 {width: calc(590*100vw/750);;}
.l-lpcontents .styleview__image0603 {width: calc(590*100vw/750);;}
.l-lpcontents .styleview__image0604 {width: calc(590*100vw/750);;}
.l-lpcontents .styleview__image0701 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0801 {width: calc(600*100vw/750);;}
.l-lpcontents .styleview__image0802 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image0901 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image0902 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1001 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1101 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1102 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1103 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1104 {width: calc(650*100vw/750);;}
.l-lpcontents .styleview__image1201 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image1202 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image1203 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1301 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1302 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1401 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1402 {width: calc(640*100vw/750);;}
.l-lpcontents .styleview__image1403 {width: calc(640*100vw/750);;}
.l-lpcontents .styleview__image1501 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1601 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1701 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1801 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1802 {width: calc(540*100vw/750);;}
.l-lpcontents .styleview__image1901 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image1903 {width: calc(430*100vw/750);;}
.l-lpcontents .styleview__image1904 {width: calc(500*100vw/750);;}
.l-lpcontents .styleview__image2001 {width: calc(690*100vw/750);;}
.l-lpcontents .styleview__image2002 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image2101 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image2102 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image2201 {width: calc(750*100vw/750);;}
.l-lpcontents .styleview__image2301 {width: calc(650*100vw/750);;}
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - firstview
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .firstview {
  position: sticky;
  top: 0;
  background-color: var(--color-gray);
  z-index: 0;
}
.l-lpcontents .firstview__inner {
  position: relative;
  width: var(--width-primary);
  margin: 0 auto;
}
.l-lpcontents .firstview__image {
  position: relative;
  width: var(--width-primary);
  object-fit: cover;
  margin: 0 auto;
}
.l-lpcontents .firstview__image a:hover {
  opacity: 1;
}
.l-lpcontents .firstview span {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-image: url(../img/SVG/firstview__title.svg);
  background-size: cover;
  width: 44.8rem;
  height: 22rem;
  top: 27.8rem;
  right: 15.6rem;
  z-index: 5;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .l-lpcontents .firstview__image img {
    width: 192rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 767px) {
  .l-lpcontents .firstview span {
    background-image: url(../img/sp/SVG/firstview__title.svg);
    width: calc(626* 100vw / 750);
    height: calc(279* 100vw / 750);
    top: calc(410* 100vw / 750);
    right: calc(60* 100vw / 750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - textview
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .textview {
  /* transform: translateZ(1px); */
  z-index: 5;
  position: relative;
  padding-top: 8.4rem;
  text-align: center;
  z-index: 2;
  background-color: var(--color-beige);
}
.l-lpcontents .textview__campaign hgroup {
  row-gap: 2.7rem;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .textview {
    padding-top: calc(88*100vw/750);;
  }
  .l-lpcontents .textview__campaign hgroup {
    row-gap: calc(26*100vw/750);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview {
  position: relative;
  background-color: var(--color-beige);
  z-index: 5;
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview01
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview01 {
  /* transform: translateZ(1px); */
  z-index: 5;
  padding-top: 10.6rem;
  text-align: center;
  background-color: var(--color-beige);
}
.l-lpcontents .styleview01 .styleview__wrapper {
  width: 103rem;
  margin: 0 auto;
  grid-template-columns: 58rem;
  grid-template-rows: 4.6rem;
}
.l-lpcontents .styleview01 .styleview__wrap01 {
  grid-column: 1;
  grid-row: 1/3;
}
.l-lpcontents .styleview01 .styleview__wrap02 {
  grid-column: 2;
  grid-row: 2/3;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview01 {
    padding-top: calc(150*100vw/750);;
  }
  .l-lpcontents .styleview01 .styleview__wrapper {
    width: var(--width-primary);
    row-gap: calc(30*100vw/750);;
    align-items: center;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview02
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview02 {
  /* transform: translateZ(1px); */
  z-index: 5;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview02 .styleview__wrapper {
  width: 42rem;
  margin: 0 auto;
  row-gap: 0.7rem;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview02 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview02 .styleview__wrapper {
    width: var(--width-primary);
    row-gap: calc(8 *100vw/750);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview03
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview03 {
  /* transform: translateZ(1px); */
  z-index: 5;
  padding-top: 10.1rem;
  text-align: center;
}
.l-lpcontents .styleview03 .styleview__wrapper {
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.6rem;
  width: 102.6rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview03 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview03 .styleview__wrapper {
    column-gap: 0;
    row-gap: calc(8*100vw/750);;
    width: calc(690*100vw/750);;
  }
  .l-lpcontents .styleview03 ul {
    margin-top: calc(34*100vw/750);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview04
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview04 {
  /* transform: translateZ(1px); */
  z-index: 5;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview04 .styleview__wrapper {
  width: 47rem;
  height: 230rem;
  margin: 0 auto;
  row-gap: 0.7rem;
}
.l-lpcontents .styleview04 ul {
  margin-top: 1.4rem;
}
.l-lpcontents .styleview04 .styleview__wrap02 {
  position: sticky;
  top: 0;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview04 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview04 .styleview__wrapper {
    width: var(--width-primary);
    height: calc(4000*100vw/750);;
    row-gap: calc(30*100vw/750);;
    align-items: center;
  }
  .l-lpcontents .styleview04 ul {
    margin-top: calc(40*100vw/750);;
  }
  .l-lpcontents .styleview04 .styleview__wrap02 {
    position: sticky;
    top: 0;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview05
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview05 {
  /* transform: translateZ(2px); */
  z-index: 10;
  margin-top: -87.5rem;
  text-align: center;
}
.l-lpcontents .styleview05 .styleview__wrapper {
  width: 102.6rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview05 {
    margin-top: calc(-1777*100vw/750);
    text-align: center;
  }
  .l-lpcontents .styleview05 .styleview__wrapper {
    width: var(--width-primary);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview06
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview06 {
  /* transform: translateZ(2px); */
  z-index: 10;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview06 .styleview__wrapper {
  margin-top: 10.2rem;
  column-gap: 0.7rem;
}
.l-lpcontents .styleview06 .styleview__wrap01 {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview06 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview06 .styleview__wrapper {
    column-gap: 0;
    --row: calc(8*100vw/750);
    align-items: center;
    margin-top: calc(88*100vw/750);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview07
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview07 {
  /* transform: translateZ(2px); */
  z-index: 10;
  padding-top: 11rem;
  text-align: center;
}
.l-lpcontents .styleview07 .styleview__wrapper {
  width: 53rem;
  margin: 0 auto;
}
.l-lpcontents .styleview07 .styleview__wrap01 {
  margin: 0 auto;
}
.l-lpcontents .styleview07 h3 {
  margin-top: 3.1rem;
  margin-bottom: 1.9rem;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview07 {
    padding-top: calc(160*100vw/750);;
  }
  .l-lpcontents .styleview07 .styleview__wrapper {
    width: var(--width-primary);
  }
  .l-lpcontents .styleview07 h3 {
    margin-top: calc(34*100vw/750);;
    margin-bottom: calc(10*100vw/750);;
  }
  .l-lpcontents .styleview07 ul {
    margin-top: calc(12* 100vw / 750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview08
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview08 {
  /* transform: translateZ(2px); */
  z-index: 10;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview08 .styleview__wrapper {
  width: 103rem;
  margin: 0 auto;
  grid-template-columns: 51rem;
  grid-template-rows: 4.7rem;
}
.l-lpcontents .styleview08 .styleview__wrap01 {
  grid-column: 1;
  grid-row: 2/3;
}
.l-lpcontents .styleview08 .styleview__wrap02 {
  grid-column: 2;
  grid-row: 1/3;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview08 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview08 .styleview__wrapper {
    width: var(--width-primary);
    align-items: center;
    --row: calc(75*100vw/750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview09
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview09 {
  /* transform: translateZ(2px); */
  z-index: 10;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview09 .styleview__inner {
  height: 220rem;
}
.l-lpcontents .styleview09 .styleview__wrapper {
  position: sticky;
  top: -47.3rem;
  width: 57rem;
  margin: 0 auto;
  grid-template-columns: 8.5rem;
  grid-template-rows: 47.3rem;
}
.l-lpcontents .styleview09 .styleview__wrap01 {
  grid-column: 2;
  grid-row: 1;
  z-index: 5;
}
.l-lpcontents .styleview09 .styleview__wrap02 {
  grid-column: 1;
  grid-row: 2;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview09 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview09 .styleview__inner {
    height: calc(4000*100vw/750);;
  }
  .l-lpcontents .styleview09 .styleview__wrapper {
    top: calc(-870*100vw/750);;
    width: var(--width-primary);
    grid-template-columns: calc(30*100vw/750);
    grid-template-rows: calc(870*100vw/750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview10
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview10 {
  /* transform: translateZ(3px); */
  z-index: 15;
  margin-top: -80.3rem;
  text-align: center;
}
.l-lpcontents .styleview10 .styleview__wrapper {
  position: relative;
  width: 49rem;
  margin: 0 auto;
}
.l-lpcontents .styleview10 h3 {
  position: absolute;
  top: 10.4rem;
  right: -14rem;
  transform: rotate(90deg);
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview10 {
    margin-top: calc(-1810*100vw/750);
  }
  .l-lpcontents .styleview10 .styleview__wrapper {
    width: var(--width-primary);
  }
  .l-lpcontents .styleview10 h3 {
    top: calc(205* 100vw / 750);
    right: calc(504* 100vw / 750);
    white-space: nowrap;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview11
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview11 {
  /* transform: translateZ(3px); */
  z-index: 15;
  padding-top: 10.3rem;
}
.l-lpcontents .styleview11 .styleview__wrapper {
  width: 82.7rem;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}
.l-lpcontents .styleview11 ul {
  margin-top: 0.9rem;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview11 {
    padding-top: calc(153*100vw/750);;
  }
  .l-lpcontents .styleview11 .styleview__wrapper {
    width: var(--width-primary);
  }
  .l-lpcontents .styleview11 .styleview__wrap02 {
    margin-top: calc(8*100vw/750);;
  }
  .l-lpcontents .styleview11 .styleview__wrap04 {
    margin: calc(160*100vw/750) auto 0;
  }
  .l-lpcontents .styleview11 ul {
    margin-top: calc(41*100vw/750);
    text-align: center;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview12
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview12 {
  /* transform: translateZ(3px); */
  z-index: 15;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview12 .styleview__wrapper {
  width: 91rem;
  margin: 0 auto;
  grid-template-columns: 22.5rem 29.5rem;
  grid-template-rows: 11rem 67.3rem;
}
.l-lpcontents .styleview12 .styleview__wrap01 {
  grid-column: 3;
  grid-row: 1;
}
.l-lpcontents .styleview12 .styleview__wrap02 {
  grid-column: 1;
  grid-row: 2;
}
.l-lpcontents .styleview12 .styleview__wrap03 {
  grid-column: 2;
  grid-row: 3;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview12 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview12 .styleview__wrapper {
    width: var(--width-primary);
    align-items: center;
  }
  .l-lpcontents .styleview12 .styleview__wrap02 {
    margin-top: calc(8*100vw/750);;
  }
  .l-lpcontents .styleview12 .styleview__wrap03 {
    margin-top: calc(100*100vw/750);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview13
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview13 {
  /* transform: translateZ(3px); */
  z-index: 15;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview13 .styleview__wrapper {
  width: 106rem;
  margin: 0 auto;
  grid-template-columns: 49rem;
  grid-template-rows: 8rem;
}
.l-lpcontents .styleview13 .styleview__wrap01 {
  grid-row: 1;
  grid-column: 1;
}
.l-lpcontents .styleview13 .styleview__wrap02 {
  grid-row: 2;
  grid-column: 2;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview13 {
    padding-top: calc(153*100vw/750);;
  }
  .l-lpcontents .styleview13 .styleview__wrapper {
    width: var(--width-primary);
    --row: calc(10*100vw/750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview14
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview14 {
  /* transform: translateZ(3px); */
  z-index: 15;
  padding-top: 10.6rem;
  text-align: center;
}
.l-lpcontents .styleview14 .styleview__wrapper {
  width: 86.6rem;
  margin: 10.5rem auto 0;
  column-gap: 0.6rem;
}
.l-lpcontents .styleview14 .styleview__wrap01 {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview14 {
    padding-top: calc(153*100vw/750);;
  }
  .l-lpcontents .styleview14 .styleview__wrap02 {
    width: calc(640*100vw/750);;
    margin: calc(87*100vw/750) auto 0;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview15
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview15 {
  /* transform: translateZ(3px); */
  z-index: 15;
  padding-top: 11.1rem;
  text-align: center;
}
.l-lpcontents .styleview15 .styleview__wrapper {
  width: 53rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview15 {
    padding-top: calc(160*100vw/750);;
  }
  .l-lpcontents .styleview15 .styleview__wrapper {
    width: var(--width-primary);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview16
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview16 {
  /* transform: translateZ(3px); */
  z-index: 15;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview16 .styleview__inner {
  height: 220rem;
}
.l-lpcontents .styleview16 .styleview__wrapper {
  position: sticky;
  top: 0;
  width: 49rem;
  margin: 0 auto;
}
.l-lpcontents .styleview16 h3 {
  margin-top: 3.2rem;
}
.l-lpcontents .styleview16 ul {
  margin-top: 1.9rem;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview16 {
    padding-top: calc(144*100vw/750);;
  }
  .l-lpcontents .styleview16 .styleview__inner {
    height: calc(4000*100vw/750);;
  }
  .l-lpcontents .styleview16 .styleview__wrapper {
    width: var(--width-primary);
  }
  .l-lpcontents .styleview16 h3 {
    margin-top: calc(36*100vw/750);;
  }
  .l-lpcontents .styleview16 ul {
    margin-top: calc(12*100vw/750);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview17
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview17 {
  /* transform: translateZ(4px); */
  z-index: 20;
  margin-top: -128.8rem;
  text-align: center;
}
.l-lpcontents .styleview17 .styleview__wrapper {
  width: 53rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview17 {
    margin-top: calc(-2602*100vw/750);;
  }
  .l-lpcontents .styleview17 .styleview__wrapper {
    width: var(--width-primary);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview18
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview18 {
  /* transform: translateZ(4px); */
  z-index: 20;
  padding-top: 10.3rem;
  text-align: center;
}
.l-lpcontents .styleview18 .styleview__wrapper {
  width: 95.2rem;
  margin: 0 auto;
  grid-template-columns: 56rem;
  grid-template-rows: 7.2rem;
}
.l-lpcontents .styleview18 .styleview__wrap01 {
  grid-column: 2;
  grid-row: 2/3;
}
.l-lpcontents .styleview18 .styleview__wrap02 {
  grid-column: 1;
  grid-row: 1/3;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview18 {
    padding-top: calc(147*100vw/750);;
  }
  .l-lpcontents .styleview18 .styleview__wrapper {
    width: var(--width-primary);
    align-items: center;
    --row: calc(100*100vw/750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview19
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview19 {
  /* transform: translateZ(4px); */
  z-index: 20;
  padding-top: 10rem;
  text-align: center;
}
.l-lpcontents .styleview19 .styleview__wrapper {
  width: 68.7rem;
  margin: 10.2rem auto 0;
  grid-template-columns: 34.7rem;
  grid-template-rows: 8rem;
}
.l-lpcontents .styleview19 .styleview__wrap01 {
  width: 53rem;
  margin: 0 auto;
}
.l-lpcontents .styleview19 .styleview__wrap02 {
  grid-column: 1;
  grid-row: 1;
}
.l-lpcontents .styleview19 .styleview__wrap03 {
  grid-column: 2;
  grid-row: 2;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview19 {
    padding-top: calc(145*100vw/750);;
  }
  .l-lpcontents .styleview19 .styleview__wrapper {
    width: calc(690* 100vw / 750);
    margin-top: calc(146* 100vw / 750);
    --row: calc(30*100vw/750);
  }
  .l-lpcontents .styleview19 .styleview__wrap01 {
    width: var(--width-primary);
  }
  .l-lpcontents .styleview19 .styleview__wrap03 {
    margin-left: auto;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview20
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview20 {
  /* transform: translateZ(4px); */
  z-index: 20;
  padding-top: 11rem;
  text-align: center;
}
.l-lpcontents .styleview20 .styleview__wrapper {
  width: 60rem;
  margin: 0 auto;
  grid-template-columns: 9rem;
  grid-template-rows: 51rem;
}
.l-lpcontents .styleview20 .styleview__wrap01 {
  grid-column: 2;
  grid-row: 1;
  z-index: 5;
}
.l-lpcontents .styleview20 .styleview__wrap02 {
  grid-column: 1;
  grid-row: 2;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview20 {
    padding-top: calc(160*100vw/750);;
  }
  .l-lpcontents .styleview20 .styleview__wrapper {
    width: var(--width-primary);
    grid-template-columns: calc(30*100vw/750);;
    grid-template-rows: calc(870*100vw/750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview21
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview21 {
  /* transform: translateZ(4px); */
  z-index: 20;
  padding-top: 10.2rem;
  text-align: center;
}
.l-lpcontents .styleview21 .styleview__wrapper {
  margin: 0 auto;
  column-gap: calc(6*100vw/1400);
}
.l-lpcontents .styleview21 ul {
  grid-column: 1/3;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview21 {
    padding-top: calc(146*100vw/750);;
  }
  .l-lpcontents .styleview21 .styleview__wrapper {
    width: var(--width-primary);
    column-gap: 0;
    --row: calc(8*100vw/750);
  }
  .l-lpcontents .styleview21 ul {
    margin-top: calc(34* 100vw / 750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview22
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview22 {
  /* transform: translateZ(4px); */
  z-index: 20;
  padding-top: 10.5rem;
  text-align: center;
}
.l-lpcontents .styleview22 .styleview__wrapper {
  width: 55rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview22 {
    padding-top: calc(148*100vw/750);;
  }
  .l-lpcontents .styleview22 .styleview__wrapper {
    width: var(--width-primary);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview23
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .styleview23 {
  /* transform: translateZ(4px); */
  z-index: 20;
  padding-top: 10.2rem;
  text-align: center;
}
.l-lpcontents .styleview23 .styleview__wrapper {
  width: 43rem;
  margin: 0 auto;
}
.l-lpcontents .styleview23 h3 {
  margin-top: 3.2rem;
}
.l-lpcontents .styleview23 ul {
  margin-top: 1.9rem;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .styleview23 {
    padding-top: calc(153*100vw/750);;
  }
  .l-lpcontents .styleview23 .styleview__wrapper {
    width: calc(650*100vw/750);;
  }
  .l-lpcontents .styleview23 h3 {
    margin-top: calc(33*100vw/750);;
  }
  .l-lpcontents .styleview23 ul {
    margin-top: calc(12*100vw/750);;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - styleview23
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .linkview  {
  /* transform: translateZ(4px); */
  z-index: 20;
  position: relative;
  background-color: var(--color-beige);
  padding: 14.3rem 0;
  margin-bottom: 27.3rem;
}
.l-lpcontents .linkview__list {
  margin-top: 3.6rem;
  justify-content: center;
}
.l-lpcontents .linkview__list li {
  position: relative;
  padding: 0 2.4rem;
}
.l-lpcontents .linkview__list li::before {
  position: absolute;
  content: "";
  top: 0.4rem;
  right: 0rem;
  width: 0.1rem;
  height: 1.4rem;
  background-color: var(--color-black);
  z-index: 2;
  transform: rotate(30deg);
}
.l-lpcontents .linkview__list li:last-of-type:before {
  display: none;
}
@media screen and (max-width: 767px) {
  .l-lpcontents .linkview {
    padding: calc(188*100vw/750) 0 calc(192*100vw/750);;
    margin-bottom: calc(160*100vw/750);
  }
  .l-lpcontents .linkview__list {
    width: calc(554* 100vw / 750);
    margin: calc(61*100vw/750) auto 0;;
  }
  .l-lpcontents .linkview__list li {
    display: inline-block;
  }
  .l-lpcontents .linkview__list li:first-of-type {
    padding: 0 calc(46* 100vw / 750) 0 calc(10* 100vw / 750);
  }
  .l-lpcontents .linkview__list li:nth-of-type(2) {
    padding: 0 calc(46* 100vw / 750) 0 calc(45* 100vw / 750);
  }
  .l-lpcontents .linkview__list li:nth-of-type(3) {
    padding: 0 calc(48* 100vw / 750) 0 calc(46* 100vw / 750);
  }
  .l-lpcontents .linkview__list li:nth-of-type(4) {
    margin-top: calc(25*100vw/750);;
    padding: 0 calc(46* 100vw / 750) 0 calc(58* 100vw / 750);
  }
  .l-lpcontents .linkview__list li:nth-of-type(5) {
    margin-top: calc(25*100vw/750);;
    padding: 0 calc(49* 100vw / 750) 0 calc(46* 100vw / 750);
  }
  .l-lpcontents .linkview__list li:last-of-type {
    margin-top: calc(25*100vw/750);;
    padding: 0 calc(46* 100vw / 750) 0 calc(46* 100vw / 750);
  }
  .l-lpcontents .linkview__list li::before {
    top: calc(7* 100vw / 750);
    width: calc(1* 100vw / 750);
    height: calc(27* 100vw / 750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - animation
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .js-fade,
.l-lpcontents .firstview .js-fade + span {
  opacity: 0;
  transform: translate(0, 0);
  filter: blur(5px);
  transition: all 1.1s ease;
}
.l-lpcontents .js-fade.is-active,
.l-lpcontents .firstview .js-fade.is-active + span {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - プログレスバー
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.l-lpcontents .swiper-pagination {
  position: relative;
  display: flex;
  font-size: 0;
  justify-content: center;
}
.l-lpcontents .swiper-pagination-bullet {
  display: inline-block;
  width: fit-content;
  position: relative;
  border-radius: 0;
  background-color: rgba(40, 39, 37, 0.2);
  opacity: 1;
  position: relative;
  right: initial;
}
.l-lpcontents .swiper-pagination-bullet .bulletInner {
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #282725;
  content: "";
  z-index: 100;
}
.l-lpcontents .swiper-pagination-bullet-active .bulletInner {
  animation: progress 3s linear forwards;
}
@media screen and (min-width: 768px) {
  .l-lpcontents .swiper-pagination {
    gap: 0.6rem;
    margin-top: 1rem;
  }
  .l-lpcontents .swiper-pagination-bullet {
    width: 6rem;
    height: 0.2rem;
  }
}
@media screen and (max-width: 767px) {
  .l-lpcontents .swiper-pagination {
    gap: calc(10*100vw/750);;
    margin-top: calc(19*100vw/750);;
  }
  .l-lpcontents .swiper-pagination-bullet {
    width: calc(120*100vw/750);
    height: calc(4*100vw/750);
  }
}
@-webkit-keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}