@charset "UTF-8";
@font-face {
  font-family: "HK Grotesk";
  src: url("../fonts/HKGrotesk-Regular.woff2") format("woff2"), url("../fonts/HKGrotesk-Regular.woff") format("woff");
  font-display: swap;
}
.breadcrumb__list {
  padding-bottom: calc(18 * (100vw / 750));
}
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

@media only screen and (max-width: 767px) {
  #page-body.bg {
    background-image: url(../img/page_sp.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top calc(12 * (100vw / 375));
  }
}
@media only screen and (min-width: 768px) {
  #page-body.bg {
    background-image: url(../img/page_pc.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center -6.2rem;
  }
}
#page-body.bg .main-area {
  opacity: 0.7;
}

/* autoprefixer grid: no-autoplace */
.main-area {
  overflow-x: hidden;
}

/*
  ********** ▼ LP Header ▼ **********
*/
.lpheader__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: calc(140 * (100vw / 375)) calc(85 * (100vw / 375)) calc(140 * (100vw / 375));
  grid-template-columns: calc(140 * (100vw / 375)) calc(85 * (100vw / 375)) calc(140 * (100vw / 375));
  -ms-grid-rows: calc(250 * (100vw / 375)) calc(190 * (100vw / 375));
  grid-template-rows: calc(250 * (100vw / 375)) calc(190 * (100vw / 375));
  gap: calc(5 * (100vw / 375));
  width: calc(375 * (100vw / 375));
  margin: 0 auto;
}
.lpheader__grid picture:nth-of-type(1) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1/1/2/2;
}
.lpheader__grid picture:nth-of-type(2) {
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 2/3/4/4;
}
.lpheader__grid picture:nth-of-type(3) {
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: 2/1/4/3;
}
.lpheader__grid picture:nth-of-type(4) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-area: 1/2/2/4;
}
.lpheader__ttl {
  width: calc(345 * (100vw / 375));
  margin: 0 auto;
  margin-top: calc(5 * (100vw / 375));
}
.lpheader__ttl span {
  display: block;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.lpheader__ttl span:nth-of-type(1) {
  font-size: calc(15 * (100vw / 375));
  line-height: 2.4;
}
.lpheader__ttl span:nth-of-type(2) {
  margin-top: calc(-4 * (100vw / 375));
  font-size: calc(24 * (100vw / 375));
  line-height: 1.6;
}
.lpheader__lead {
  width: calc(345 * (100vw / 375));
  margin: 0 auto;
  margin-top: calc(74 * (100vw / 375));
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.1em;
}
@media only screen and (min-width: 768px) {
  .lpheader__grid {
    -ms-grid-columns: 22.5rem 1rem 22.5rem 1rem 73rem;
    grid-template-columns: 22.5rem 1rem 22.5rem 1rem 73rem;
    -ms-grid-rows: 27.5rem 1rem 26.5rem;
    grid-template-rows: 27.5rem 1rem 26.5rem;
    gap: 0;
    width: 120rem;
  }
  .lpheader__grid picture:nth-of-type(1) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1/1/2/2;
  }
  .lpheader__grid picture:nth-of-type(2) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-area: 1/3/2/4;
  }
  .lpheader__grid picture:nth-of-type(3) {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: 3/1/4/4;
  }
  .lpheader__grid picture:nth-of-type(4) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
    grid-area: 1/5/4/6;
  }
  .lpheader__ttl {
    width: 120rem;
    margin-top: 2.4rem;
  }
  .lpheader__ttl span {
    text-align: center;
  }
  .lpheader__ttl span:nth-of-type(1) {
    font-size: 2.4rem;
    line-height: 2.0833333333;
  }
  .lpheader__ttl span:nth-of-type(2) {
    margin-top: -0.5rem;
    font-size: 3rem;
    line-height: 1.6666666667;
  }
  .lpheader__lead {
    width: 98rem;
    margin-top: 7.4rem;
    font-size: 1.4rem;
  }
}

/*
  ********** ▲ LP Header ▲ **********
*/
/*
********** ▼ Common ▼ **********
*/
.common_wrap {
  position: relative;
}
.common_wrap.useBg::before {
  content: "";
  position: absolute;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  background-color: #FAFAFA;
}

[class$=__pic] {
  background-color: #fff;
}

[class$=__contents] {
  width: calc(345 * (100vw / 375));
  margin: 0 auto;
  margin-top: calc(42 * (100vw / 375));
}

[class$=__contents--topics] {
  font-family: "HK Grotesk", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #d6d6d6;
  font-size: calc(36 * (100vw / 375));
  letter-spacing: 0.075em;
}

[class$=__contents--balloon] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: calc(8 * (100vw / 375));
  font-size: calc(12 * (100vw / 375));
  line-height: 2.3333333333;
  letter-spacing: 0.1em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

[class$=__contents--title] {
  font-size: calc(20 * (100vw / 375));
  line-height: 1.6;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

[class$=__contents--detail] {
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.1em;
}

[class$=__contents--credit] {
  display: inline-block;
}
[class$=__contents--credit] span {
  font-size: calc(10 * (100vw / 375));
  line-height: 2.4;
  letter-spacing: 0.1em;
}
[class$=__contents--credit] span:not(:last-of-type)::after {
  content: "、";
}
[class$=__contents--credit] a {
  display: inline;
  text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  .common_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 108rem;
    margin: 0 auto;
  }
  .common_wrap.useBg::before {
    width: calc(1366 * (100vw / 1366));
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .common_wrap:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }

  [class$=__pic] {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 49rem;
  }

  [class$=__contents] {
    width: 54rem;
    margin: 0;
    margin-top: 4.4rem;
  }

  [class$=__contents--topics] {
    font-size: 5.5rem;
  }

  [class$=__contents--balloon] {
    padding-top: 1rem;
    font-size: 1.3rem;
    line-height: 2.1538461538;
  }

  [class$=__contents--title] {
    font-size: 2.4rem;
    line-height: 1.5;
  }

  [class$=__contents--detail] {
    font-size: 1.4rem;
  }

  [class$=__contents--credit] span {
    font-size: 1rem;
  }
}
/*
  ********** ▲ Common ▲ **********
*/
/*
  ********** ▼ Section 1 ▼ **********
*/
.sec1 {
  margin-top: calc(94 * (100vw / 375));
}
.sec1__contents--title {
  margin-top: calc(28 * (100vw / 375));
}
.sec1__contents--detail {
  margin-top: calc(6 * (100vw / 375));
}
@media only screen and (min-width: 768px) {
  .sec1 {
    margin-top: 11.3rem;
  }
  .sec1__contents--title {
    margin-top: 4rem;
  }
  .sec1__contents--detail {
    margin-top: 1.6rem;
  }
}

/*
  ********** ▲ Section 1 ▲ **********
*/
/*
  ********** ▼ Section 2 ▼ **********
*/
.sec2 {
  margin-top: calc(114 * (100vw / 375));
}
.sec2::before {
  top: 0;
  height: calc(1150 * (100vw / 375));
}
.sec2__contents--title {
  margin-top: calc(28 * (100vw / 375));
}
.sec2__contents--detail {
  margin-top: calc(12 * (100vw / 375));
}
.sec2__contents--credit {
  margin-top: calc(7 * (100vw / 375));
}
@media only screen and (min-width: 768px) {
  .sec2 {
    margin-top: 14rem;
  }
  .sec2::before {
    top: -28rem;
    height: 115.5rem;
  }
  .sec2__contents--title {
    margin-top: 4rem;
  }
  .sec2__contents--detail {
    margin-top: 1.6rem;
  }
  .sec2__contents--credit {
    margin-top: 0.7rem;
  }
}

@media only screen and (min-width: 768px) {
  _:-ms-lang(x)::-ms-backdrop, .sec2__pic {
    margin-left: -6rem;
  }
}

/*
  ********** ▲ Section 2 ▲ **********
*/
/*
  ********** ▼ Section 3 ▼ **********
*/
.sec3 {
  margin-top: calc(112 * (100vw / 375));
}
.sec3__contents--title {
  margin-top: calc(30 * (100vw / 375));
}
.sec3__contents--detail {
  margin-top: calc(10 * (100vw / 375));
}
.sec3__contents--credit {
  margin-top: calc(8 * (100vw / 375));
}
@media only screen and (min-width: 768px) {
  .sec3 {
    margin-top: 28rem;
  }
  .sec3__contents--title {
    margin-top: 4rem;
  }
  .sec3__contents--detail {
    margin-top: 1.6rem;
  }
  .sec3__contents--credit {
    margin-top: 0.7rem;
  }
}

/*
  ********** ▲ Section 3 ▲ **********
*/
/*
  ********** ▼ Section 4 ▼ **********
*/
.sec4 {
  margin-top: calc(112 * (100vw / 375));
}
.sec4::before {
  top: 0;
  height: calc(1350 * (100vw / 375));
}
.sec4__contents--balloon {
  width: calc(345 * (100vw / 375));
  height: calc(53 * (100vw / 375));
  margin: 0 auto;
  margin-top: calc(34 * (100vw / 375));
  background-image: url(../img/topic04_balloon_sp.svg);
}
.sec4__contents--title {
  margin-top: calc(5 * (100vw / 375));
}
.sec4__contents--detail {
  margin-top: calc(10 * (100vw / 375));
}
.sec4__contents--credit {
  margin-top: calc(8 * (100vw / 375));
}
@media only screen and (min-width: 768px) {
  .sec4 {
    margin-top: 13rem;
  }
  .sec4::before {
    top: -27rem;
    height: 114.5rem;
  }
  .sec4__contents--balloon {
    width: 37.5rem;
    height: 5.7rem;
    margin: 0;
    margin-top: 4.4rem;
    background-image: url(../img/topic04_balloon_pc.svg);
  }
  .sec4__contents--title {
    margin-top: 0.5rem;
  }
  .sec4__contents--detail {
    margin-top: 1.5rem;
  }
  .sec4__contents--credit {
    margin-top: 0.8rem;
  }
}

@media only screen and (min-width: 768px) {
  _:-ms-lang(x)::-ms-backdrop, .sec4__pic {
    margin-left: -6rem;
  }
}

/*
  ********** ▲ Section 4 ▲ **********
*/
/*
  ********** ▼ Section 5 ▼ **********
*/
.sec5 {
  margin-top: calc(112 * (100vw / 375));
}
.sec5__contents--balloon {
  width: calc(214 * (100vw / 375));
  height: calc(53 * (100vw / 375));
  margin-top: calc(24 * (100vw / 375));
  background-image: url(../img/topic05_balloon_sp.svg);
}
.sec5__contents--title {
  margin-top: calc(5 * (100vw / 375));
}
.sec5__contents--detail {
  margin-top: calc(10 * (100vw / 375));
}
.sec5__contents--credit {
  margin-top: calc(8 * (100vw / 375));
}
@media only screen and (min-width: 768px) {
  .sec5 {
    margin-top: 28rem;
  }
  .sec5__contents--balloon {
    width: 23.5rem;
    height: 5.7rem;
    margin: 0;
    margin-top: 4.4rem;
    background-image: url(../img/topic05_balloon_pc.svg);
  }
  .sec5__contents--title {
    margin-top: 0.5rem;
  }
  .sec5__contents--detail {
    margin-top: 1.5rem;
  }
  .sec5__contents--credit {
    margin-top: 0.8rem;
  }
}

/*
  ********** ▲ Section 5 ▲ **********
*/
/*
  ********** ▼ Section 6 ▼ **********
*/
.sec6 {
  margin: calc(112 * (100vw / 375)) 0 calc(156 * (100vw / 375));
  padding: calc(73 * (100vw / 375)) 0 calc(80 * (100vw / 375));
  background-color: #fafafa;
}
.sec6 > * {
  margin: 0 auto;
  font-size: calc(14 * (100vw / 375));
  letter-spacing: 0.1em;
}
.sec6 p {
  width: calc(345 * (100vw / 375));
  line-height: 2;
}
.sec6 a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: calc(345 * (100vw / 375));
  height: calc(50 * (100vw / 375));
  margin-top: calc(32 * (100vw / 375));
  color: #fff;
  text-align: center;
  background-color: #000;
  border: 1px solid #000;
}
@media only screen and (min-width: 768px) {
  .sec6 {
    margin: 12.2rem 0 17.2rem;
    padding: 7rem 0 8rem;
  }
  .sec6 > * {
    font-size: 1.4rem;
  }
  .sec6 p {
    width: 108rem;
  }
  .sec6 a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    width: 36rem;
    height: 5rem;
    margin-top: 4.4rem;
  }
  .sec6 a:hover {
    color: #000;
    background-color: #fff;
  }
}

/*
  ********** ▲ Section 6 ▲ **********
*/

/*# sourceMappingURL=style.css.map */