@media screen and (min-width: 1024px) {
  .visible-md, .visible-sm {
    display: none
  }
  .visible-lg {
    display: inherit
  }
}
@media screen and (min-width: 750px)and (max-width: 1023px) {
  .visible-lg, .visible-sm {
    display: none
  }
  .visible-md {
    display: inherit
  }
}
@media screen and (max-width: 749px) {
  .visible-lg, .visible-md {
    display: none
  }
  .visible-sm {
    display: inherit
  }
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0)
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.6
}
@media screen and (min-width: 750px) {
  html {
    font-size: 10px
  }
}
@media screen and (max-width: 749px) {
  html {
    font-size: 2.66666vw
  }
}
body {
  width: 100%;
  overflow-x: hidden;
  background: #fff;
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  color: #484848
}
main {
  display: block
}
li {
  list-style-type: none
}
a {
  text-decoration: none;
  color: inherit
}
@media screen and (min-width: 750px) {
  a {
    -webkit-transition: all .3s;
    transition: all .3s
  }
  a::before, a::after {
    -webkit-transition: all .3s;
    transition: all .3s
  }
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto
}
svg {
  width: 100%;
  height: auto
}
sup {
  font-size: .5em;
  vertical-align: super
}
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%
}
address {
  font-style: normal
}
@media screen and (min-width: 750px) {
  .l-inner-lg {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .l-inner-lg {
    padding: 0 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .l-inner-md {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .l-inner-md {
    padding: 0 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .l-inner-ex {
    width: 90%;
    max-width: 1152px;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .l-inner-ex {
    padding: 0 1.5rem
  }
}
@media screen and (min-width: 750px) {
  .l-inner-sm {
    width: 90%;
    max-width: 920px;
    margin: 0 auto
  }
}
@media screen and (max-width: 749px) {
  .l-inner-sm {
    padding: 0 1.5rem
  }
}
header {
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 500
}
header.header__sub {
  position: relative;
  z-index: 1;
}


@media screen and (min-width: 750px) {
  .header__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
}
@media screen and (max-width: 749px) {
  .header__body {
    height: 60px
  }
  header.header__sub {
    position: sticky;
  }
}
.header__left {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
@media screen and (min-width: 750px) {
  .header__left {
    text-align: center;
    max-width: 192px;
    width: 15%
  }
}
@media screen and (max-width: 749px) {
  .header__left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem;
    background-color: rgba(0, 0, 0, .6)
  }
}
.header__logo {
  max-width: 126px
}
@media screen and (min-width: 750px) {
  .header__logo {
    margin: 0 auto;
    width: 100%
  }
}
@media screen and (max-width: 749px) {
  .header__logo {
    width: 50%
  }
}
@media screen and (min-width: 750px) {
  .header__hum {
    display: none
  }
}
@media screen and (max-width: 749px) {
  .header__hum {
    width: 4rem;
    height: 4rem;
    position: relative
  }
}
.header__hum span {
  position: absolute;
  display: block;
  height: .2rem;
  background-color: #fff;
  -webkit-transition: .3s;
  transition: .3s
}
.header__hum span:nth-child(1) {
  top: 12px;
  width: 3rem;
  right: 0
}
.header__hum span:nth-child(2) {
  top: 22px;
  width: 2rem;
  right: 0
}
.header__hum.-active span:nth-child(1) {
  top: 17px;
  right: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.header__hum.-active span:nth-child(2) {
  top: 17px;
  width: 3rem;
  right: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
@media screen and (max-width: 749px) {
  .header__center {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: rgba(0, 0, 0, .6);
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    visibility: hidden
  }
}
.header__center.slide {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}
.header__nav {
  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
}
@media screen and (max-width: 749px) {
  .header__nav {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
}
@media screen and (min-width: 750px) {
  .header__item:not(:last-child) {
    border-right: 1px solid #fff
  }
}
@media screen and (max-width: 749px) {
  .header__item {
    width: 100%
  }
}
.header__anc {
  display: block;
  font-size: 1.5rem;
  letter-spacing: .05em;
  color: #fff
}
@media screen and (min-width: 750px) {
  .header__anc {
    padding: 0 2rem
  }
}
@media screen and (max-width: 749px) {
  .header__anc {
    padding: 1rem 0;
    text-align: center;
    width: 100%
  }
}
.header__anc:hover {
  text-decoration: underline
}
.header__right {
  max-width: 384px
}
@media screen and (min-width: 750px) {
  .header__right {
    width: 30%
  }
}
@media screen and (max-width: 749px) {
  .header__right {
    width: 100%;
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0;
    visibility: hidden
  }
}
.header__right.slide {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}
.header__btnList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center
}
.header__btn {
  display: block;
  width: 50%;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: #fff;
  position: relative;
  line-height: 1;
  padding: 1.5rem 0;
  -webkit-transition: .3s;
  transition: .3s
}
.header__btn:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  z-index: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.3rem;
  background: url(../img/common/btn_header.svg) no-repeat center/contain
}
.header__btn.-buy {
  border: 2px solid #cf1e64;
  background-color: #cf1e64
}
.header__btn.-buy:hover {
  background-color: #fff;
  color: #cf1e64
}
.header__btn.-buy:hover:after {
  background: url(../img/common/btn_header_buy.svg) no-repeat center/contain
}
.header__btn.-cam {
  border: 2px solid #0f3480;
  background-color: #0f3480
}
.header__btn.-cam:hover {
  background-color: #fff;
  color: #0f3480
}
.header__btn.-cam:hover:after {
  background: url(../img/common/btn_header_cam.svg) no-repeat center/contain
}
.header__btnSub {
  font-size: 1.1rem;
  font-weight: bold;
  font-family: "Roboto", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif
}
@media screen and (min-width: 750px) {
  .ft__body {
    padding: 12rem 0 5rem
  }
}
@media screen and (max-width: 749px) {
  .ft__body {
    padding: 8rem 0 3rem
  }
}
.ft__head {
  max-width: 192px;
  margin: 0 auto 4rem
}
@media screen and (min-width: 750px) {
  .ft__head {
    width: 60%
  }
}
@media screen and (max-width: 749px) {
  .ft__head {
    width: 40%
  }
}
.ft__cont {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 2rem
}
.ft__item {
  border-right: 2px solid #484848;
  border-left: 2px solid #484848
}
.ft__item + .ft__item {
  border-left: none
}
.ft__anc {
  display: block;
  padding: 0 1.5rem;
  letter-spacing: .05em
}
@media screen and (min-width: 750px) {
  .ft__anc {
    font-size: 2rem
  }
}
@media screen and (max-width: 749px) {
  .ft__anc {
    font-size: 1.6rem
  }
}
@media screen and (min-width: 750px) {
  .ft__anc:hover {
    text-decoration: underline
  }
}
.copy {
  text-align: center;
  letter-spacing: .05em
}
@media screen and (min-width: 750px) {
  .copy {
    font-size: 1.2rem
  }
}
@media screen and (max-width: 749px) {
  .copy {
    font-size: 1rem
  }
}
.-ray {
  font-family: "Montserrat", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif
}
.top {
  width: 100%;
  height: 100vh;
  position: relative
}
@media screen and (min-width: 750px) {
  .top {
    background: url(../img/top/top_back.webp) no-repeat top/cover;
    margin-top: -70px;
    background-color: #000;
  }
}
@media screen and (max-width: 749px) {
  .top {
    background: url(../img/top/top_back-sp.webp) no-repeat top/cover;
    margin-top: -60px;
    background-color: #000;
  }
}
.top__txt {
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.top__txt .logo-good-design-2023{
  width: 35rem;
  margin-bottom: calc(7.8rem / 4);
}
@media screen and (min-width: 750px) {
  .top__txt {
    top: 50%;
    left: 15%
  }
}
@media screen and (max-width: 749px) {
  .top__txt {
    top: 55vw;
    left: 5%
  }
}
.top__ttl {
  font-weight: bold;
  color: #fff;
  line-height: 1.1
}
@media screen and (min-width: 750px) {
  .top__ttl {
    font-size: 7.8rem
  }
}
@media screen and (max-width: 749px) {
  .top__ttl {
    font-size: 5.2rem
  }
}
.next {
  padding: 10rem 0;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain
}
@media screen and (min-width: 750px) {
  .next {
    background-image: url(../img/top/next_back.webp);
    margin: 10rem auto
  }
}
@media screen and (min-width: 750px) {
  .next__imgsp {
    display: none
  }
}
@media screen and (max-width: 749px) {
  .next__imgsp {
    width: 100%
  }
}
.next__go {
  max-width: 340px;
  margin-bottom: 1rem
}
@media screen and (min-width: 750px) {
  .next__go {
    width: 33.203125%;
    -webkit-transform: translateX(-3rem);
    transform: translateX(-3rem)
  }
}
@media screen and (max-width: 749px) {
  .next__go {
    width: 100%
  }
}
.next__ttl {
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 2rem
}
@media screen and (min-width: 750px) {
  .next__ttl {
    font-size: 5.2rem
  }
}
@media screen and (max-width: 749px) {
  .next__ttl {
    font-size: 3.2rem
  }
}
.next__sub {
  letter-spacing: .02em;
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.5
}
@media screen and (min-width: 750px) {
  .next__sub {
    font-size: 3.2rem
  }
}
@media screen and (max-width: 749px) {
  .next__sub {
    font-size: 2.2rem
  }
}
.next__sub .-small {
  font-size: 50%
}
.next__txt {
  font-weight: 500;
  line-height: 2.4;
  letter-spacing: .05em
}
@media screen and (min-width: 750px) {
  .next__txt {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .next__txt {
    font-size: 1.4rem
  }
}
.visual {
  width: 100%;
  position: relative
}
.visual img {
  width: 100%
}
@media screen and (min-width: 750px) {
  .visual__back {
    position: relative
  }
}
@media screen and (max-width: 749px) {
  .visual__back {
    width: 100%;
    margin-top: 4.5rem
  }
}
.visual__body {
  position: relative
}
@media screen and (min-width: 750px) {
  .visual__inner {
    position: absolute;
    top: 50%;
    right: 10%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    max-width: 57.6rem;
    width: 85%;
    z-index: 1
  }
}
@media screen and (max-width: 749px) {
  .visual__inner {
    position: relative
  }
}
.visual__head {
  margin-bottom: 3.5rem
}
.visual__ttl {
  font-family: "Roboto", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif
}
@media screen and (min-width: 750px) {
  .visual__ttl {
    font-size: 5.2rem
  }
}
@media screen and (max-width: 749px) {
  .visual__ttl {
    font-size: 4rem
  }
}
.visual__sub {
  font-weight: bold
}
@media screen and (min-width: 750px) {
  .visual__sub {
    font-size: 3rem
  }
}
@media screen and (max-width: 749px) {
  .visual__sub {
    font-size: 2.2rem
  }
}
.visual__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}
@media screen and (min-width: 750px) {
  .visual__cont {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
}
@media screen and (max-width: 749px) {
  .visual__cont {
    -ms-flex-pack: distribute;
    justify-content: space-around
  }
}
.visual__item {
  padding: 2rem 1.5rem;
  border-left: 1px solid #484848;
  margin-bottom: 3rem
}
@media screen and (min-width: 750px) {
  .visual__item {
    width: 50%
  }
}
@media screen and (max-width: 749px) {
  .visual__item {
    width: 80%;
    border-right: 1px solid #484848
  }
}
@media screen and (min-width: 750px) {
  .visual__item:nth-child(2n) {
    border-right: 1px solid #484848
  }
}
.visual__contSup {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: .04em;
  margin-bottom: .5rem
}
.visual__contTtl {
  text-align: center;
  font-size: 3.2rem;
  margin-bottom: 1.5rem
}
.visual__txt {
  font-size: 1.4rem;
  margin-bottom: .3rem;
  line-height: 1.8;
  text-align: center
}
.visual__supWarn {
  font-size: 1rem;
  text-align: right
}
@media screen and (min-width: 750px) {
  .movie {
    padding: 10rem 0
  }
}
@media screen and (max-width: 749px) {
  .movie {
    padding: 5rem 0 0
  }
}
.movie__cont {
  width: 100%;
  aspect-ratio: 16/9
}
.movie__cont iframe {
  width: 100%;
  height: 100%
}
@media screen and (min-width: 750px) {
  .feature {
    padding: 12rem 0
  }
}
@media screen and (max-width: 749px) {
  .feature {
    padding: 5rem 0
  }
}
.sec__head {
  text-align: center
}
@media screen and (min-width: 750px) {
  .sec__head {
    margin-bottom: 5rem
  }
}
@media screen and (max-width: 749px) {
  .sec__head {
    margin-bottom: 3rem
  }
}
.sec__ttl {
  font-family: "Roboto", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  margin-bottom: 1rem
}
@media screen and (min-width: 750px) {
  .sec__ttl {
    font-size: 4.8rem
  }
}
@media screen and (max-width: 749px) {
  .sec__ttl {
    font-size: 3rem
  }
}
.sec__ttl.-white {
  color: #fff
}
.sec__sub {
  font-weight: 700
}
@media screen and (min-width: 750px) {
  .sec__sub {
    font-size: 2rem
  }
}
@media screen and (max-width: 749px) {
  .sec__sub {
    font-size: 1.6rem
  }
}
.sec__sub.-white {
  color: #fff
}
.feature__cont {
  max-width: 1152px;
  width: 95%;
  margin: 0 auto;
  background-image: linear-gradient(rgba(175, 178, 180, 0.6) 0%, rgba(175, 178, 180, 0.6) 33px, rgba(175, 178, 180, 0) 306px);
  border-radius: 1.6rem
}
.feature__cont:not(:last-child) {
  margin-bottom: 12rem
}
@media screen and (min-width: 750px) {
  .feature__cont {
    padding-top: 6rem
  }
}
@media screen and (max-width: 749px) {
  .feature__cont {
    padding-top: 3rem
  }
}
.feature__contHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}
@media screen and (min-width: 750px) {
  .feature__contHead {
    margin-bottom: 9rem
  }
}
@media screen and (max-width: 749px) {
  .feature__contHead {
    margin-bottom: 3rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
}
@media screen and (min-width: 750px) {
  .feature__cHleft {
    margin-right: 6.4rem
  }
}
@media screen and (max-width: 749px) {
  .feature__cHleft {
    margin-bottom: 2.2rem
  }
}
.feature__contNum {
  display: inline-block;
  font-family: "Roboto", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: bold;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(-40deg, #0672bc 0%, #6d5f9c 70%, #dd4a78 100%)
}
@media screen and (min-width: 750px) {
  .feature__contNum {
    font-size: 12rem
  }
}
@media screen and (max-width: 749px) {
  .feature__contNum {
    font-size: 5.6rem
  }
}
.feature__cHttl {
  letter-spacing: .04em;
  margin-bottom: 3rem
}
@media screen and (min-width: 750px) {
  .feature__cHttl {
    font-size: 2.8rem
  }
}
@media screen and (max-width: 749px) {
  .feature__cHttl {
    font-size: 2.2rem
  }
}
.feature__cHtxt {
  letter-spacing: .05em;
  font-weight: bold;
  line-height: 1.75
}
@media screen and (min-width: 750px) {
  .feature__cHtxt {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .feature__cHtxt {
    font-size: 1.4rem
  }
}
.feature__contInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
@media screen and (min-width: 750px) {
  .feature__contInner {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
  }
}
@media screen and (max-width: 749px) {
  .feature__contInner {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around
  }
}
@media screen and (min-width: 750px) {
  .feature__contInner:not(:last-child) {
    margin-bottom: 9rem
  }
}
@media screen and (max-width: 749px) {
  .feature__contInner:not(:last-child) {
    margin-bottom: 8rem
  }
}
.feature__contInner.-rev {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}
.feature__contInfo {
  max-width: 390px;
  position: relative;
  margin-top: 3.5rem;
  padding-top: 2rem
}
@media screen and (min-width: 750px) {
  .feature__contInfo {
    width: 38.0859375%
  }
}
@media screen and (max-width: 749px) {
  .feature__contInfo {
    width: 100%;
    margin-bottom: 3rem
  }
}
.feature__contInfo::before {
  content: "";
  width: 3.6rem;
  height: .2rem;
  background-color: #0f3480;
  position: absolute;
  top: 0;
  left: 0
}
.feature__cIttl {
  margin-bottom: 2rem
}
@media screen and (min-width: 750px) {
  .feature__cIttl {
    font-size: 2.8rem
  }
}
@media screen and (max-width: 749px) {
  .feature__cIttl {
    font-size: 2.2rem
  }
}
.feature__cIttl.-ls0 {
  letter-spacing: -0.02em
}
.feature__cItxt {
  line-height: 2
}
@media screen and (min-width: 750px) {
  .feature__cItxt {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .feature__cItxt {
    font-size: 1.4rem
  }
}
.feature__cIimg {
  max-width: 576px;
  position: relative;
  z-index: 1
}
@media screen and (min-width: 750px) {
  .feature__cIimg {
    width: 56.25%
  }
}
@media screen and (max-width: 749px) {
  .feature__cIimg {
    width: 100%
  }
}
.feature__cIimg::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-40deg, #0672bc 0%, #0672bc 25%, #6d5f9c 65%, #dd4a78 90%);
  opacity: .7;
  -webkit-filter: blur(1.5rem);
  filter: blur(1.5rem);
  z-index: -1
}
.message {
  background-color: #f0f5f5;
  position: relative;
  color: #565656
}
@media screen and (min-width: 750px) {
  .message {
    margin-bottom: -40rem;
    padding-bottom: 40rem
  }
}
@media screen and (max-width: 749px) {
  .message {
    margin-bottom: 0
  }
}
.message__back {
  max-width: 1024px;
  width: 100%;
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}
@media screen and (max-width: 749px) {
  .message__sub {
    font-size: 1.4rem
  }
}
.message__body {
  width: 100%;
  position: relative;
  z-index: 1
}
@media screen and (min-width: 750px) {
  .message__body {
    padding: 10rem 0
  }
}
@media screen and (max-width: 749px) {
  .message__body {
    padding: 5rem 0
  }
}
.message__inner {
  max-width: 51.2rem;
  margin: 0 auto
}
@media screen and (min-width: 750px) {
  .message__inner {
    width: 80%
  }
}
@media screen and (max-width: 749px) {
  .message__inner {
    width: 70%
  }
}
.message__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.message__c {
  font-family: "Roboto", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  font-weight: bold;
  position: relative
}
@media screen and (min-width: 750px) {
  .message__c {
    font-size: 6.4rem;
    width: 38.4rem
  }
}
@media screen and (max-width: 749px) {
  .message__c {
    font-size: 3rem;
    width: 70%
  }
}
.message__c::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background-color: #484848
}
@media screen and (min-width: 750px) {
  .message__c::after {
    right: 1.5rem
  }
}
@media screen and (max-width: 749px) {
  .message__c::after {
    right: 1rem
  }
}
@media screen and (min-width: 750px) {
  .message__c.-chal::after {
    width: 6.8rem
  }
}
@media screen and (max-width: 749px) {
  .message__c.-chal::after {
    width: 1.8rem
  }
}
@media screen and (min-width: 750px) {
  .message__c.-cont::after {
    width: 9.5rem
  }
}
@media screen and (max-width: 749px) {
  .message__c.-cont::after {
    width: 3rem
  }
}
@media screen and (min-width: 750px) {
  .message__c.-clam::after {
    width: 11rem
  }
}
@media screen and (max-width: 749px) {
  .message__c.-clam::after {
    width: 3.7rem
  }
}
@media screen and (min-width: 750px) {
  .message__c.-chan::after {
    width: 13.4rem
  }
}
@media screen and (max-width: 749px) {
  .message__c.-chan::after {
    width: 4.5rem
  }
}
.message__render {
  font-weight: bold
}
@media screen and (min-width: 750px) {
  .message__render {
    font-size: 3rem;
    width: 12.8rem
  }
}
@media screen and (max-width: 749px) {
  .message__render {
    font-size: 1.6rem;
    width: 30%
  }
}
.impression {
  position: relative
}
@media screen and (min-width: 750px) {
  .impression {
    background: url(../img/top/impression_back.webp) no-repeat center/cover;
    padding: 20rem 0;
    margin-bottom: 8rem
  }
}
@media screen and (max-width: 749px) {
  .impression {
    background: url(../img/top/impression_back-sp.webp) no-repeat center/contain;
    padding: 8rem 0
  }
}
.impression__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
@media screen and (min-width: 750px) {
  .impression__cont {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
}
@media screen and (max-width: 749px) {
  .impression__cont {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around
  }
}
@media screen and (min-width: 750px) {
  .impression__cont:not(:last-child) {
    margin-top: 8rem;
    margin-bottom: 8rem
  }
}
@media screen and (max-width: 749px) {
  .impression__cont:not(:last-child) {
    margin-top: 2rem;
    margin-bottom: 5rem
  }
}
.impression__cont.-rev {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}
.impression__info {
  max-width: 450px;
  color: #fff
}
@media screen and (min-width: 750px) {
  .impression__info {
    width: 43.9453125%;
    padding: 0 6.4rem
  }
}
@media screen and (max-width: 749px) {
  .impression__info {
    width: 100%
  }
}
.impression__ttl {
  font-weight: bold;
  position: relative
}
@media screen and (min-width: 750px) {
  .impression__ttl {
    font-size: 2.6rem;
    margin-top: 5rem;
    margin-bottom: 3rem
  }
}
@media screen and (max-width: 749px) {
  .impression__ttl {
    font-size: 2.2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem
  }
}
.impression__ttl::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 0;
  width: 3.6rem;
  height: .2rem;
  background-color: #cf1e64
}
.impression__sup {
  letter-spacing: .05em;
  margin-bottom: 1rem
}
@media screen and (min-width: 750px) {
  .impression__sup {
    font-size: 1.6rem
  }
}
@media screen and (max-width: 749px) {
  .impression__sup {
    font-size: 1.4rem
  }
}
.impression__name {
  letter-spacing: .2em;
  margin-bottom: 3rem
}
@media screen and (min-width: 750px) {
  .impression__name {
    font-size: 2.8rem
  }
}
@media screen and (max-width: 749px) {
  .impression__name {
    font-size: 2.2rem
  }
}
.impression__img {
  max-width: 576px
}
@media screen and (min-width: 750px) {
  .impression__img {
    width: 56.25%
  }
}
@media screen and (max-width: 749px) {
  .impression__img {
    width: 100%;
    margin-bottom: 2rem
  }
}
.impression__img img {
  width: 100%;
  border-radius: 1rem
}
.impression__more {
  width: 100%;
  text-align: center
}
@media screen and (max-width: 749px) {
  .impression__more.-pc {
    display: none
  }
}
@media screen and (min-width: 750px) {
  .impression__more.-sp {
    display: none
  }
}
.impression__anc {
  display: block;
  width: 100%;
  background-color: #cf1e64;
  color: #fff;
  border-radius: .6rem;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: "Roboto", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  padding: .7rem;
  -webkit-transition: .3s;
  transition: .3s
}
@media screen and (min-width: 750px) {
  .impression__anc:hover {
    background-color: #fff;
    color: #cf1e64
  }
}
@media screen and (max-width: 749px) {
  .gallery {
    padding: 5rem 0
  }
}
@media screen and (min-width: 750px) {
  .gallery__head {
    margin-bottom: 7rem
  }
}
.gallery__cont {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}
@media screen and (max-width: 749px) {
  .gallery__cont {
    margin-bottom: 5rem
  }
}
.gallery__item {
  cursor: pointer;
  position: relative
}
@media screen and (min-width: 750px) {
  .gallery__item {
    width: 33.3333%
  }
}
@media screen and (max-width: 749px) {
  .gallery__item {
    width: 50%
  }
}
.gallery__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #cf1e64;
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s
}
.gallery__item:hover::after {
  opacity: .45
}
.gallery__btnBox {
  text-align: center;
  max-width: 444px;
  width: 80%;
  position: relative
}
@media screen and (min-width: 750px) {
  .gallery__btnBox {
    margin: 11rem auto 0
  }
}
@media screen and (max-width: 749px) {
  .gallery__btnBox {
    margin: 4rem auto 0
  }
}
.gallery__btnBox::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  background-image: linear-gradient(-40deg, #0672bc 0%, #6d5f9c 70%, #dd4a78 100%);
  opacity: .7;
  -webkit-filter: blur(1.5rem);
  filter: blur(1.5rem)
}
.gallery__btn {
  width: 100%
}
.gallery__anc {
  display: block;
  font-weight: 500;
  color: #fff;
  letter-spacing: .14em;
  background-color: #cf1e64;
  border: 2px solid #cf1e64;
  position: relative;
  padding: 1.7rem 0 1.2rem;
  border-radius: .6rem;
  -webkit-transition: .3s;
  transition: .3s;
  position: relative
}
@media screen and (min-width: 750px) {
  .gallery__anc {
    font-size: 2.4rem;
    line-height: .8
  }
}
@media screen and (max-width: 749px) {
  .gallery__anc {
    font-size: 2rem;
    line-height: 1
  }
}
.gallery__anc::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 1.5rem;
  height: 1.3rem;
  background: url(../img/common/btn_blank.svg) no-repeat center/contain;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}
@media screen and (min-width: 750px) {
  .gallery__anc:hover {
    background-color: #fff;
    color: #cf1e64
  }
  .gallery__anc:hover::after {
    background: url(../img/common/btn_blank_hover.svg) no-repeat center/contain
  }
}
.gallery__ancSub {
  letter-spacing: 0;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: "Roboto", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif
}
@media screen and (min-width: 750px) {
  .campaign {
    padding: 14rem 0
  }
}
@media screen and (max-width: 749px) {
  .campaign {
    padding: 2rem 0 5rem
  }
}
@media screen and (min-width: 750px) {
  .campaign__head {
    margin-bottom: 7rem
  }
}
.cam__anc {
  -webkit-transition: .3s;
  transition: .3s
}
@media screen and (min-width: 750px) {
  .cam__anc:hover {
    opacity: .6
  }
}
.about {
  background-color: #242424
}
@media screen and (min-width: 750px) {
  .about {
    padding: 12rem 0
  }
}
@media screen and (max-width: 749px) {
  .about {
    padding: 5rem 0
  }
}
.about .sec__head {
  color: #fff
}
.about__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
@media screen and (min-width: 750px) {
  .about__cont {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
}
@media screen and (max-width: 749px) {
  .about__cont {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
}
.about__img {
  max-width: 414px
}
@media screen and (min-width: 750px) {
  .about__img {
    width: 40.4296875%;
    margin-left: 6.4rem
  }
}
@media screen and (max-width: 749px) {
  .about__img {
    width: 100%;
    margin-bottom: 2rem
  }
}
.about__txt {
  max-width: 448px;
  font-weight: 500;
  letter-spacing: .05em;
  color: #fff;
  line-height: 2
}
@media screen and (min-width: 750px) {
  .about__txt {
    font-size: 1.6rem;
    width: 43.75%
  }
}
@media screen and (max-width: 749px) {
  .about__txt {
    font-size: 1.4rem;
    width: 100%
  }
}
.swiper {
  border-radius: 1rem
}
.swiper-pagination {
  text-align: left
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 36px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 4px));
  border-radius: 0
}
.swiper-pagination-bullet-active {
  background: #dd4a78
}
@media screen and (min-width: 750px) {
  .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -30px
  }
}
@media screen and (max-width: 749px) {
  .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -40px
  }
}
/*GD2023*/
.good-design-2023-model{
  margin: 10rem 0;
}
.good-design-2023-model-body{
  width: 95%;
  max-width: 1024px;
  margin: 0 auto;
}
.good-design-2023-model-body .logo-good-design-2023{
  width: 50%;
  margin: 0 auto;
  display: block;
}
.good-design-2023-model-body h3{
  margin-top: 2rem;
  margin-bottom: 5rem;
  letter-spacing: .02em;
  font-size: 3.2rem;
  font-weight: 900;
  text-align: center;
}
.good-design-2023-model-body h4{
  margin-bottom: 2rem;
  font-size: 2.8rem;
  font-weight: 700;
}
.good-design-2023-model-body p{
  line-height: 2;
  font-size: 1.6rem;
}
.good-design-2023-model-body p+p{
  margin-top: 1rem;
}
.good-design-2023-model-body p+h4{
  margin-top: 5rem;
}
.about-good-design-2023{
  text-align: right;
}
.good-design-2023-model-body .btn{
  display: inline-block;
  background-color: rgb(207, 30, 100);
  border: 1px solid rgb(207, 30, 100);
  color: rgb(255, 255, 255);
  font-size: 1.8rem;
  font-weight: bold;
  font-family: Roboto, YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  border-radius: 0.6rem;
  padding: 0.7rem 5rem;
  transition: all 0.3s ease 0s;
}
.good-design-2023-model-body .btn:hover{
  background-color: #fff;
  color: #cf1e64;
}
.good-design-2023-model-body .model{
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
}
.good-design-2023-model-body .model-list{
  width: calc((100% - 5rem) / 2);
  padding: 2rem;
  background-image: linear-gradient(rgba(175, 178, 180, 0.6) 0%, rgba(175, 178, 180, 0.6) 33px, rgba(175, 178, 180, 0) 306px);
  border-radius: 1.6rem;
  position: relative;
}
.good-design-2023-model-body .model-list h5{
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 2rem;
}
.icon-gd{
  width: 8rem;
  position: absolute;
  right: 2rem;
  top: 0rem;
}
.p-product-show-detail__spec-list{
  margin: 2rem 0;
  font-size: 1.6rem;
}
.p-product-show-detail__spec-list li{
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(72, 72, 72);
}
.p-product-show-detail__spec-list li:last-child{
  border-bottom: none;
}
.p-product-show-detail__spec-list li>.label{
  width: 10rem;
  margin-right: 0.5rem;
  padding: 0.5rem 0.25rem;
  background: rgb(72, 72, 72);
  color: #fff;
  display: inline-block;
  font-size: 1.2rem;
  text-align: center;
}
.good-design-2023-model-body .model-list .btn{
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 749px) {
  .top__txt .logo-good-design-2023{
    width: 24rem;
  }
  .good-design-2023-model{
    margin: 10rem 0 0 0;
  }
  .good-design-2023-model-body {
    width: 100%;
    margin: 0 auto;
    padding: 0 1.6rem;
  }
  .good-design-2023-model-body .logo-good-design-2023{
    width: 100%;
  }
  .good-design-2023-model-body .model-list {
    width: 100%;
  }
  .good-design-2023-model-body h3{
    font-size: 2.4rem;
  }
  .good-design-2023-model-body h4{
    font-size: 2.2rem;
  }
  .good-design-2023-model-body .btn{
    width: 100%;
    padding: 0.7rem;
    text-align: center;
  }
  .icon-gd{
    width: 6rem;
  }
}
@media screen and (min-width: 750px) and (max-width:1024px) {
  .icon-gd{
    width: 6rem;
  }
}

.modal {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%
}
.modal-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, .8)
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: scroll;
  background: #fff;
  padding: 40px
}
@media screen and (min-width: 750px) {
  .modal-content {
    height: 80%;
    width: 70%
  }
}
@media screen and (max-width: 749px) {
  .modal-content {
    height: 60%;
    width: 100%
  }
}
.modal__inner {
  position: relative;
  width: 100%;
  height: 100%
}
.-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
  cursor: pointer;
  z-index: 500
}
.close__inner {
  position: relative;
  width: 100%;
  height: 100%
}
.close__inner::before {
  content: "";
  width: 100%;
  height: .3rem;
  position: absolute;
  top: 2rem;
  left: 0;
  background-color: #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
.close__inner::after {
  content: "";
  width: 100%;
  height: .3rem;
  position: absolute;
  top: 2rem;
  left: 0;
  background-color: #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0
}
.modal__img {
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  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
}