@charset "UTF-8";
/*-------------------------------------------------------------------
リセット
/*-------------------------------------------------------------------*/
*, *:before, *:after {
  box-sizing: border-box;
}

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 {
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  letter-spacing: 0.03em;
}

body {
  font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
  /* safari hover対策 */
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.6;
  width: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ul, ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

a {
  color: inherit;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

ins {
  background-color: #ffff99;
  color: #000000;
  text-decoration: none;
}

mark {
  background-color: #ffff99;
  color: #000000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  border: 0;
  border-top: 1px solid #cccccc;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

img {
  line-height: 1;
  vertical-align: bottom;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  outline: none;
  padding: 0;
}

*, *:before, *:after {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.sp {
  display: none !important;
}

.sp_inline {
  display: none;
}

.pc_inline {
  display: inline;
}

@media screen and (min-width: 768px) {
  .imgalpha {
    cursor: pointer;
    transition: opacity 0.6s;
  }
  .imgalpha:hover {
    opacity: 0.6 !important;
  }
}
.test {
  color: #263c64;
}

/*-------------------------------------------------------------------
common
/*-------------------------------------------------------------------*/
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
}
body * {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 100%;
  }
  img {
    height: auto;
    width: 100%;
  }
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  .sp_inline {
    display: inline !important;
  }
  .pc_inline {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .wrap {
    max-width: 100vw;
    overflow: hidden;
  }
}
/*-------------------------------------------------------------------
ボタン
/*-------------------------------------------------------------------*/
.cv_btn {
  display: flex;
  width: 270px;
  height: 60px;
  padding: 20px 46px 20px 26px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #FFF;
  border-radius: 40px;
  background: #E88282;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 17px;
  font-family: "Zen Kaku Gothic New";
  font-weight: 700;
  line-height: 125%;
  /* 18.75px */
  letter-spacing: 2.4px;
  background-image: url(../img/mvBtn_ico01.svg);
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: 90% 48%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .cv_btn {
    width: 72vw;
    height: 16vw;
    padding: 5.3333333333vw 6.9333333333vw;
    font-size: 3.7333333333vw;
    line-height: 5.0666666667vw;
    letter-spacing: 0.5546666667vw;
  }
}

.wave_ttl {
  color: #2A7186;
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  line-height: 33px;
  /* 132% */
  line-height: 180%;
  /* 180% */
  font-family: "Zen Kaku Gothic New";
  background-size: 41px;
  background-repeat: no-repeat;
  background-position: center bottom;
  padding-bottom: 10px;
  letter-spacing: 2.5px;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .wave_ttl {
    font-size: 5.3333333333vw;
    line-height: 8.8vw;
    letter-spacing: 0.5333333333vw;
    margin-bottom: 2.6666666667vw;
  }
}
.wave_ttl .num {
  font-size: 30px;
  font-family: "Montserrat";
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .wave_ttl .num {
    font-size: 7.4666666667vw;
  }
}
.wave_ttl .bold {
  font-weight: 700;
}

/*-------------------------------------------------------------------
header
/*-------------------------------------------------------------------*/
header {
  height: 90px;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}
@media screen and (max-width: 768px) {
  header {
    height: 16vw;
  }
}
header .header_mainLogo {
  width: 156px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin-left: -410px;
}
@media (max-width: 1024px) {
  header .header_mainLogo {
    margin-left: 0px;
    transform: translateX(0%) translateY(-50%);
    left: 20px;
  }
}
@media screen and (max-width: 768px) {
  header .header_mainLogo {
    width: 20.8vw;
    left: 5.8666666667vw;
  }
}
header .header_mainLogo img {
  width: 100%;
}
header .header_logo {
  width: 191px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  header .header_logo {
    width: 31.4666666667vw;
  }
}
header .header_logo img {
  width: 100%;
}
header .header_menu {
  position: absolute;
  top: 0;
  right: 0px;
  width: 100px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  header .header_menu {
    width: 16vw;
    height: 16vw;
  }
  header .header_menu img {
    width: 7.2vw;
    padding-top: 1.8666666667vw;
  }
}

/*-------------------------------------------------------------------
mv
/*-------------------------------------------------------------------*/
.mv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 740px;
}
@media screen and (max-width: 768px) {
  .mv {
    height: 172vw;
  }
}
.mv .mv_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .mv .mv_bg {
    height: 178.6666666667vw;
  }
}
.mv .mv_bg img, .mv .mv_bg video {
  width: 100%;
  min-height: 850px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media screen and (max-width: 768px) {
  .mv .mv_bg img, .mv .mv_bg video {
    min-height: unset;
    -o-object-position: 25%;
       object-position: 25%;
    height: 178.6666666667vw;
  }
}
.mv .mv_inner {
  width: 1040px;
  margin: 0 auto;
  padding-top: 0px;
  margin-top: -50px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .mv .mv_inner {
    width: 100%;
    padding-top: 0;
    margin-top: -56vw;
    padding-left: 4vw;
    padding-right: 4vw;
  }
}
.mv .mv_ttl {
  width: 369px;
  margin-bottom: -20px;
  margin-right: 100px;
  margin-left: auto;
}
.mv .mv_ttl img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .mv .mv_ttl {
    width: 71.4666666667vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.6666666667vw;
  }
}
.mv .mv_logo {
  width: 284px;
}
@media screen and (max-width: 768px) {
  .mv .mv_logo {
    width: 48.5333333333vw;
    margin-bottom: 2.6666666667vw;
  }
}
.mv .mv_logo img {
  width: 100%;
}
.mv .mv_txt {
  color: #FFF;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  font-family: "Zen Kaku Gothic New";
  font-size: 25px;
  font-weight: 700;
  line-height: 200%;
  /* 225% */
  letter-spacing: 3px;
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  .mv .mv_txt {
    text-shadow: 0px 0px 2.6666666667vw rgba(0, 0, 0, 0.2);
    font-size: 4vw;
    line-height: 8.5333333333vw;
    letter-spacing: 0.6vw;
    padding-left: 2.6666666667vw;
  }
}

.mv_btn {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 1000;
}
.mv_btn .mv_btnInner {
  display: flex;
  width: 270px;
  height: 60px;
  padding: 20px 42px 20px 30px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #FFF;
  border-radius: 40px;
  opacity: 0.85;
  background: #E88282;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 15px;
  font-family: "Zen Kaku Gothic New";
  font-weight: 700;
  line-height: 125%;
  /* 18.75px */
  letter-spacing: 2.4px;
  background-image: url(../img/mvBtn_ico01.svg);
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: 92% 50%;
}
@media screen and (max-width: 768px) {
  .mv_btn .mv_btnInner {
    width: 48.2666666667vw;
    height: 16vw;
    padding: 5.3333333333vw 6.9333333333vw;
    font-size: 3.4666666667vw;
    line-height: 5.0666666667vw;
    letter-spacing: 0.5546666667vw;
  }
}
@media screen and (max-width: 768px) {
  .mv_btn {
    bottom: 5.3333333333vw;
    right: 5.3333333333vw;
  }
}

/*-------------------------------------------------------------------
intro
/*-------------------------------------------------------------------*/
.intro {
  background-image: url(/assets/img/intro_bg01_pc.jpg);
  -webkit-mask-image: url(/assets/img/intro_mask01_pc.svg);
          mask-image: url(/assets/img/intro_mask01_pc.svg);
  mask-mode: alpha;
  -webkit-mask-size: 1920px;
          mask-size: 1920px;
  background-position: center;
  background-size: 180%;
  height: 1226px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .intro {
    background-image: url(/assets/img/intro_bg01_sp.jpg);
    -webkit-mask-image: url(/assets/img/intro_mask01_sp.svg);
            mask-image: url(/assets/img/intro_mask01_sp.svg);
    mask-mode: alpha;
    -webkit-mask-size: 100vw;
            mask-size: 100vw;
    background-position: center;
    background-size: 100vw;
    height: 253.3333333333vw;
    display: block;
    padding-top: 10.6666666667vw;
  }
}
@keyframes move {
  0% {
    -webkit-mask-position: 0% bottom;
  }
  100% {
    -webkit-mask-position: -1920px bottom;
  }
}
@keyframes move_sp {
  0% {
    -webkit-mask-position: 0% bottom;
  }
  100% {
    -webkit-mask-position: -100vw bottom;
  }
}
.intro .intro_img {
  width: 239px;
  margin: 0 auto 40px;
}
@media screen and (max-width: 768px) {
  .intro .intro_img {
    width: 55.2vw;
    margin-bottom: 4vw;
  }
}
.intro .intro_img img {
  width: 100%;
}
.intro .intro_read {
  color: #2A7186;
  text-align: center;
  font-family: "Zen Kaku Gothic New";
  font-size: 30px;
  font-weight: 500;
  line-height: 160%;
  /* 160% */
  letter-spacing: 3px;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .intro .intro_read {
    font-size: 5.3333333333vw;
    font-weight: 700;
    line-height: 12.8vw;
    letter-spacing: 0.5333333333vw;
    margin-bottom: 5.3333333333vw;
  }
}
.intro .intro_txt {
  color: #363636;
  text-align: center;
  font-size: 21px;
  font-weight: 500;
  line-height: 223%;
  /* 231.25% */
  letter-spacing: 1.6px;
  margin-bottom: 45px;
}
@media screen and (max-width: 768px) {
  .intro .intro_txt {
    font-size: 4.2666666667vw;
    line-height: 9.6vw;
    letter-spacing: 0.4266666667vw;
    margin-bottom: 13.3333333333vw;
  }
}
.intro .youtube {
  position: relative;
  width: 100%;
  width: 700px;
  flex-shrink: 0;
  aspect-ratio: 500/281.25;
  border-radius: 11.278px;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .intro .youtube {
    width: 80vw;
    margin-bottom: 2.6666666667vw;
    border-radius: 2.6666666667vw;
  }
}
.intro .youtube video {
  width: 100%;
}
.intro .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.intro .intro_link {
  color: #2A7186;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 30px;
  text-decoration: underline;
  margin: 0 auto;
  display: table;
}
@media screen and (max-width: 768px) {
  .intro .intro_link {
    font-size: 4vw;
    line-height: 8vw;
    letter-spacing: 0.4vw;
  }
}

/*-------------------------------------------------------------------
deviceKit
/*-------------------------------------------------------------------*/
.deviceKit {
  background-color: #ECF5F5;
  padding-top: 140px;
  padding-bottom: 180px;
  margin-top: -100px;
}
@media screen and (max-width: 768px) {
  .deviceKit {
    padding-top: 37.3333333333vw;
    padding-bottom: 42.6666666667vw;
    margin-top: -26.6666666667vw;
  }
}
.deviceKit .deviceKit_read {
  color: #2A7186;
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  line-height: 112%;
  letter-spacing: 2px;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_read {
    font-size: 4vw;
    font-weight: 700;
    line-height: 7.4666666667vw;
    letter-spacing: 0.4vw;
    margin-bottom: 4vw;
  }
}
.deviceKit .deviceKit_logo {
  width: 191px;
  margin: 0 auto 80px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_logo {
    width: 40.5333333333vw;
    margin-bottom: 8vw;
  }
}
.deviceKit .deviceKit_logo img {
  width: 100%;
}
.deviceKit .deviceKit_box {
  width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  background: #FFF;
  padding: 70px 80px 80px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_box {
    padding: 13.3333333333vw 0vw 10.6666666667vw;
    width: 93.3333333333vw;
    border-radius: 5.3333333333vw;
  }
}
.deviceKit .deviceKit_item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 115px;
}
.deviceKit .deviceKit_item:last-of-type {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_item:last-of-type {
    margin-bottom: 0;
  }
}
.deviceKit .deviceKit_itemImg {
  width: 299px;
  margin-top: -35px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_itemImg {
    margin-top: 0;
    width: 43.7333333333vw;
  }
}
.deviceKit .deviceKit_itemImg img {
  width: 100%;
}
.deviceKit .deviceKit_itemTxtBox {
  display: block;
  width: 401px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_itemTxtBox {
    width: 53.3333333333vw;
  }
}
.deviceKit .deviceKit_itemTxtBox .deviceKit_itemTtl {
  color: #363636;
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 25px;
  display: block;
  /* 130.435% */
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_itemTxtBox .deviceKit_itemTtl {
    font-size: 6.1333333333vw;
    line-height: 8vw;
    letter-spacing: 0.4vw;
    margin-bottom: 4vw;
  }
}
.deviceKit .deviceKit_itemTxtBox .deviceKit_itemTxt {
  color: #363636;
  font-size: 17px;
  font-weight: 500;
  line-height: 170%;
  letter-spacing: 1.3px;
  display: block;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_itemTxtBox .deviceKit_itemTxt {
    font-size: 3.7333333333vw;
    line-height: 6.4vw;
    letter-spacing: 0.2933333333vw;
    margin-bottom: 2.6666666667vw;
  }
}
.deviceKit .deviceKit_bottomImg {
  width: 427px;
  margin: 15px auto 30px;
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_bottomImg {
    width: 69.3333333333vw;
    margin: 13.3333333333vw auto 10.6666666667vw;
  }
}
.deviceKit .deviceKit_bottomImg img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .deviceKit .item01 {
    margin-bottom: 46.6666666667vw;
    flex-direction: row-reverse;
    padding-left: 5.3333333333vw;
  }
  .deviceKit .item01 .deviceKit_itemImg {
    margin-left: -21.3333333333vw;
    margin-top: -2.6666666667vw;
  }
  .deviceKit .item02 {
    padding-right: 5.3333333333vw;
    align-items: flex-start;
    margin-bottom: 44vw !important;
  }
  .deviceKit .item02 .deviceKit_itemImg {
    width: 40vw;
    margin-right: -64vw;
  }
}
@media screen and (max-width: 768px) {
  .deviceKit .deviceKit_itemSpec {
    width: 66.6666666667vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/*-------------------------------------------------------------------
anxiety
/*-------------------------------------------------------------------*/
.anxiety {
  background-image: url(/assets/img/anxiety_bg01_pc.jpg);
  -webkit-mask-image: url(/assets/img/anxiety_mask01_pc.svg);
          mask-image: url(/assets/img/anxiety_mask01_pc.svg);
  mask-mode: alpha;
  -webkit-mask-size: 1920px;
          mask-size: 1920px;
  background-position: center;
  background-size: 160%;
  height: 1207px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -120px;
  padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .anxiety {
    background-image: url(/assets/img/anxiety_bg01_sp.jpg);
    -webkit-mask-image: url(/assets/img/anxiety_mask01_sp.svg);
            mask-image: url(/assets/img/anxiety_mask01_sp.svg);
    -webkit-mask-size: 100vw;
            mask-size: 100vw;
    background-size: 100vw;
    height: 340.2666666667vw;
    margin-top: -32vw;
    padding-bottom: 8vw;
  }
}
.anxiety .anxiety_box {
  padding-right: 20px;
  display: flex;
  align-items: center;
  gap: 25px;
  flex-direction: row-reverse;
  justify-content: center;
  margin-bottom: 5px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .anxiety .anxiety_box {
    display: block;
    margin: 0 auto;
    margin-bottom: 8vw;
    padding: 0;
  }
  .anxiety .anxiety_box:last-child {
    margin-bottom: 0vw;
  }
}
.anxiety .anxiety_box .anxiety_boxTtl {
  color: #363636;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  line-height: 25px;
  /* 147.059% */
  background-image: url(/assets/img/anxiety_boxTtlBg_pc.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 537px;
  height: 84px;
  letter-spacing: 0.7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .anxiety .anxiety_box .anxiety_boxTtl {
    font-size: 4vw;
    line-height: 6.6666666667vw;
    letter-spacing: 0.4vw;
    margin: 0 auto;
    width: 60vw;
    height: 23.7333333333vw;
    background-size: 69.3333333333vw 13.3333333333vw;
    background-image: url(/assets/img/anxiety_boxTtlBg_sp.svg);
    background-size: cover;
    padding-left: 2.6666666667vw;
  }
}
.anxiety .anxiety_box .anxiety_boxImg {
  width: 400px;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .anxiety .anxiety_box .anxiety_boxImg {
    width: 85.3333333333vw;
    border-radius: 2.6666666667vw;
    margin: 4vw auto 0;
  }
}
.anxiety .anxiety_box .anxiety_boxImg img {
  width: 100%;
}
.anxiety .anxiety_box.box02 {
  flex-direction: unset;
  padding-left: 0px;
  padding-right: 0;
}
@media screen and (max-width: 768px) {
  .anxiety .anxiety_box.box02 {
    padding-left: 0vw;
  }
}
.anxiety .anxiety_box.box02 .anxiety_boxTtl {
  width: 580px;
  background-image: url(/assets/img/anxiety_boxTtlBg02_pc.svg);
  padding-left: 10px;
}
@media screen and (max-width: 768px) {
  .anxiety .anxiety_box.box02 .anxiety_boxTtl {
    width: 60vw;
    height: 23.7333333333vw;
    background-size: cover;
    background-image: url(/assets/img/anxiety_boxTtlBg_sp.svg);
  }
}
.anxiety .anxiety_bottomTxt {
  display: table;
  margin: 50px auto 0;
  color: #2A7186;
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  line-height: 45px;
  /* 180% */
  letter-spacing: 2.5px;
}
@media screen and (max-width: 768px) {
  .anxiety .anxiety_bottomTxt {
    font-size: 4vw;
    line-height: 7.4666666667vw;
    letter-spacing: 0.4vw;
    margin-top: 8vw;
  }
}

/*-------------------------------------------------------------------
object
/*-------------------------------------------------------------------*/
.object {
  position: relative;
}

.resolution_topObject {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
}
@media screen and (max-width: 768px) {
  .resolution_topObject {
    top: -10.6666666667vw;
    width: 2.9333333333vw;
  }
}

/*-------------------------------------------------------------------
resolution
/*-------------------------------------------------------------------*/
.resolution {
  padding-top: 200px;
  padding-bottom: 100px;
  margin-top: -100px;
  background-image: url(/assets/img/resolution_bg01.jpg);
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .resolution {
    padding-top: 40vw;
    padding-bottom: 26.6666666667vw;
    margin-top: -26.6666666667vw;
  }
}
@media screen and (max-width: 768px) {
  .resolution .spLine1 {
    font-size: 4.2666666667vw;
  }
  .resolution .spLine2 {
    font-size: 5.3333333333vw;
  }
  .resolution .spLine3 {
    font-size: 4.5333333333vw;
  }
}
.resolution .resolution_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  width: 1040px;
  margin: 0 auto 20px;
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding: 0 30px;
}
@media screen and (max-width: 768px) {
  .resolution .resolution_box {
    width: 100%;
    padding: 0 4vw;
    gap: 5.3333333333vw;
    display: block;
    margin-bottom: 8vw;
  }
  .resolution .resolution_box.box03 {
    margin-bottom: 0vw;
  }
}
.resolution .resolution_boxImg {
  width: 404px;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .resolution .resolution_boxImg {
    width: 84vw;
    border-radius: 2.6666666667vw;
    margin: 0 auto;
  }
}
.resolution .resolution_boxImg img {
  width: 100%;
}
.resolution .resolution_boxTtl {
  height: 76px;
  border-radius: 15px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  position: relative;
  font-weight: 500;
  font-size: 22px;
}
.resolution .resolution_boxTtl .bold {
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .resolution .resolution_boxTtl {
    height: 13.3333333333vw;
    min-width: 21.3333333333vw;
    margin: 0 auto;
    border-radius: 2.6666666667vw;
    padding: 0 6.6666666667vw 0 6.6666666667vw;
    margin-bottom: 8vw;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 4.2666666667vw;
  }
}
.resolution .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 20px solid #fff;
  border-left: 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-100%) translateY(-50%);
}
@media screen and (max-width: 768px) {
  .resolution .triangle {
    border-right: 3.2vw solid transparent;
    border-left: 3.2vw solid transparent;
    border-top: 4vw solid #fff;
    border-bottom: 0;
    top: auto;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
  }
}
.resolution .check {
  width: 50px;
  position: absolute;
  top: -20%;
  right: -10%;
}
@media screen and (max-width: 768px) {
  .resolution .check {
    width: 10.6666666667vw;
    top: -4vw;
    right: -2.6666666667vw;
  }
}
.resolution .box02 {
  flex-direction: unset;
  justify-content: flex-end;
}
.resolution .box02 .triangle {
  left: auto;
  right: 0;
  transform: translateX(100%) translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #fff;
  border-right: 0px solid #fff;
}
@media screen and (max-width: 768px) {
  .resolution .box02 .triangle {
    border-right: 3.2vw solid transparent;
    border-left: 3.2vw solid transparent;
    border-top: 4vw solid #fff;
    border-bottom: 0;
    top: auto;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
  }
}
.resolution .box02 .check {
  right: auto;
  left: -10%;
}
@media screen and (max-width: 768px) {
  .resolution .box02 .check {
    left: auto;
    width: 10.6666666667vw;
    top: -5.3333333333vw;
    right: -2.6666666667vw;
  }
}
.resolution .resolution_bottom {
  width: 600px;
  height: 194px;
  flex-shrink: 0;
  border-radius: 12.47px;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .resolution .resolution_bottom {
    width: 85.6vw;
    height: 44.2666666667vw;
    border-radius: 2.6666666667vw;
    margin-top: 10.6666666667vw;
  }
}
.resolution .resolution_bottomTtl {
  color: #2A7186;
  font-size: 20px;
  font-weight: 500;
  line-height: 175%;
  /* 174.578% */
  letter-spacing: 2px;
  text-align: center;
}
.resolution .resolution_bottomTtl .red {
  color: #E46D6D;
  text-decoration-line: underline;
}
@media screen and (max-width: 768px) {
  .resolution .resolution_bottomTtl {
    color: #2A7186;
    font-size: 4vw;
    line-height: 7.4666666667vw;
    letter-spacing: 0.4vw;
    margin-top: 2.6666666667vw;
    margin-bottom: 2.6666666667vw;
  }
}
.resolution .resolution_bottomObject01 {
  width: 156px;
  position: absolute;
  top: -40px;
  right: -160px;
}
@media screen and (max-width: 768px) {
  .resolution .resolution_bottomObject01 {
    display: block;
    width: 15.7333333333vw;
    top: auto;
    bottom: -2.6666666667vw;
    right: -4vw;
  }
}
.resolution .resolution_bottomObject01 img {
  width: 100%;
}
.resolution .resolution_bottomObject02 {
  width: 147px;
  position: absolute;
  top: 60px;
  left: -160px;
}
@media screen and (max-width: 768px) {
  .resolution .resolution_bottomObject02 {
    display: block;
    width: 16vw;
    top: auto;
    bottom: -5.3333333333vw;
    left: -4vw;
  }
}
.resolution .resolution_bottomObject02 img {
  width: 100%;
}

/*-------------------------------------------------------------------
commitment
/*-------------------------------------------------------------------*/
.commitment {
  background-image: url(/assets/img/commitment_bg01_pc.jpg);
  -webkit-mask-image: url(/assets/img/commitment_mask01_pc.svg);
          mask-image: url(/assets/img/commitment_mask01_pc.svg);
  mask-mode: alpha;
  -webkit-mask-size: 1920px;
          mask-size: 1920px;
  background-position: 100% 80%;
  background-size: 180%;
  height: 669px;
  padding-top: 100px;
  margin-top: -40px;
}
@media screen and (max-width: 768px) {
  .commitment {
    background-image: url(/assets/img/commitment_bg01_sp.jpg);
    -webkit-mask-image: url(/assets/img/commitment_mask01_sp.svg);
            mask-image: url(/assets/img/commitment_mask01_sp.svg);
    -webkit-mask-size: 100vw;
            mask-size: 100vw;
    background-size: 100vw;
    height: 203.4666666667vw;
    margin-top: -16vw;
    padding-bottom: 8vw;
    padding-top: 16vw;
  }
}
.commitment .commitment_logo {
  width: 152px;
  margin: 0 auto 10px;
}
@media screen and (max-width: 768px) {
  .commitment .commitment_logo {
    width: 40.5333333333vw;
    margin-bottom: 5.3333333333vw;
  }
}
.commitment .commitment_logo img {
  width: 100%;
}
.commitment .wave_ttl {
  margin-bottom: 0px;
}
.commitment .commitment_listWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .commitment .commitment_listWrap {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .commitment .commitment_list {
    margin-bottom: -9.3333333333vw;
    display: flex;
    align-items: center;
  }
}
.commitment .commitment_list .commitment_listImg {
  width: 273px;
  margin-bottom: -10px;
}
@media screen and (max-width: 768px) {
  .commitment .commitment_list .commitment_listImg {
    width: 49.8666666667vw;
  }
}
.commitment .commitment_list .commitment_listImg img {
  width: 100%;
}
.commitment .commitment_listInfo {
  display: flex;
  gap: 20px;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .commitment .commitment_listInfo {
    gap: 5.3333333333vw;
  }
}
.commitment .commitment_listInfoNum {
  width: 63px;
}
@media screen and (max-width: 768px) {
  .commitment .commitment_listInfoNum {
    width: 16.8vw;
  }
}
.commitment .commitment_listInfoTxt {
  color: #2A7186;
  font-size: 17px;
  font-weight: 500;
  line-height: 176%;
  letter-spacing: 1.7px;
  border-bottom: 1px dashed #2A7186;
  padding-bottom: 5px;
}
@media screen and (max-width: 768px) {
  .commitment .commitment_listInfoTxt {
    font-size: 4.5333333333vw;
    letter-spacing: 0.4vw;
  }
}
.commitment .commitment_listInfoTxt .bold {
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .commitment .item01 .commitment_listImg {
    margin-right: -16vw;
  }
}
.commitment .item02 {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .commitment .item02 .commitment_listImg {
    margin-left: -16vw;
  }
}
@media screen and (max-width: 768px) {
  .commitment .item03 .commitment_listImg {
    margin-right: -0.8vw;
  }
}

/*-------------------------------------------------------------------
usage
/*-------------------------------------------------------------------*/
.usage {
  background-color: #EFF7F7;
  padding: 180px 0 120px;
  margin-top: -120px;
}
@media screen and (max-width: 768px) {
  .usage {
    padding: 42.6666666667vw 0 37.3333333333vw;
    margin-top: -32vw;
  }
}
.usage .usage_listWrap {
  width: 800px;
  margin: 0 auto 40px;
}
@media screen and (max-width: 768px) {
  .usage .usage_listWrap {
    width: 90.6666666667vw;
    margin: 0 auto 10.6666666667vw;
  }
}
.usage .wave_ttl {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .usage .wave_ttl {
    margin-bottom: 10.6666666667vw;
    font-size: 6.1333333333vw;
  }
  .usage .wave_ttl .num {
    font-size: 8.5333333333vw;
  }
}
.usage .usage_listWrapNote {
  width: 800px;
  margin: 55px auto 22px;
}
.usage .usage_listWrapNote img {
  width: 210px;
}
.usage .usage_list {
  display: flex;
  gap: 40px;
  align-items: center;
  padding-bottom: 40px;
  background-image: url(/assets/img/usage_listLine01.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  margin-bottom: 25px;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 768px) {
  .usage .usage_list {
    gap: 6.6666666667vw;
    padding-bottom: 9.3333333333vw;
    background-size: 100%;
    margin-bottom: 6.6666666667vw;
    padding-left: 0vw;
    padding-right: 0vw;
    background-image: url(/assets/img/usage_listLine01_sp.svg);
    align-items: flex-start;
  }
}
.usage .usage_list.item04 {
  background: none;
}
.usage .usage_list .usage_listImg {
  width: 150px;
  border-radius: 13px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .usage .usage_list .usage_listImg {
    width: 32vw;
  }
}
.usage .usage_list .usage_listImg img, .usage .usage_list .usage_listImg video {
  width: 100%;
  display: block;
}
.usage .usage_list .usage_listInfoTop {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .usage .usage_list .usage_listInfoTop {
    gap: 2.6666666667vw;
    margin-bottom: 2.6666666667vw;
    display: block;
  }
}
.usage .usage_list .usage_listInfo {
  width: 570px;
}
@media screen and (max-width: 768px) {
  .usage .usage_list .usage_listInfo {
    width: 50vw;
  }
}
.usage .usage_list .usage_listInfoStep {
  width: 63px;
  height: 23px;
  border-radius: 40px;
  background: #D6EEEE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A7186;
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: 1.2px;
}
@media screen and (max-width: 768px) {
  .usage .usage_list .usage_listInfoStep {
    width: 16.8vw;
    height: 6.1333333333vw;
    border-radius: 10.6666666667vw;
    background: #D6EEEE;
    font-size: 3.2vw;
    line-height: 125%;
    margin-bottom: 3.4666666667vw;
  }
}
.usage .usage_list .usage_listInfoTtl {
  color: #2A7186;
  font-size: 22px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
  .usage .usage_list .usage_listInfoTtl {
    font-size: 4vw;
    font-weight: 700;
    line-height: 153%;
    letter-spacing: 0vw;
  }
}
.usage .usage_list .usage_listInfoTxt {
  color: #363636;
  font-family: "Zen Kaku Gothic New";
  font-size: 17px;
  font-weight: 500;
  line-height: 173%;
  /* 173.333% */
  letter-spacing: 0.75px;
}
@media screen and (max-width: 768px) {
  .usage .usage_list .usage_listInfoTxt {
    color: #363636;
    font-family: "Zen Kaku Gothic New";
    font-size: 3.7333333333vw;
    line-height: 169%;
    letter-spacing: 0.1733333333vw;
  }
}
.usage .youtube {
  position: relative;
  width: 100%;
  width: 700px;
  flex-shrink: 0;
  aspect-ratio: 500/281.25;
  border-radius: 11.278px;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .usage .youtube {
    width: 80vw;
    margin-bottom: 2.6666666667vw;
    border-radius: 2.6666666667vw;
  }
}
.usage .youtube video {
  width: 100%;
}
.usage .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.usage .intro_link {
  color: #2A7186;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 30px;
  text-decoration: underline;
  margin: 0 auto;
  display: table;
}
@media screen and (max-width: 768px) {
  .usage .intro_link {
    font-size: 4vw;
    line-height: 8vw;
    letter-spacing: 0.4vw;
  }
}
.usage .usage_videoTtl {
  width: 280px;
  height: 38px;
  border-radius: 40px;
  background: #D6EEEE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30px;
  color: #363636;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 200%;
  letter-spacing: 1.5px;
}
@media screen and (max-width: 768px) {
  .usage .usage_videoTtl {
    width: 57.6vw;
    height: 8vw;
    border-radius: 10.6666666667vw;
    margin: 0 auto 2.6666666667vw;
    font-size: 4vw;
    letter-spacing: 0.4vw;
  }
}

/*-------------------------------------------------------------------
reason
/*-------------------------------------------------------------------*/
.reason {
  background-image: url(/assets/img/reason_bg01_pc.jpg);
  -webkit-mask-image: url(/assets/img/reason_mask01_pc.svg);
          mask-image: url(/assets/img/reason_mask01_pc.svg);
  mask-mode: alpha;
  -webkit-mask-size: 1920px;
          mask-size: 1920px;
  background-position: center;
  background-size: 100% 150%;
  height: 1460px;
  padding-top: 70px;
  margin-top: -40px;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .reason {
    background-image: url(/assets/img/reason_bg01_sp.jpg);
    -webkit-mask-image: url(/assets/img/reason_mask01_sp.svg);
            mask-image: url(/assets/img/reason_mask01_sp.svg);
    -webkit-mask-size: 100vw;
            mask-size: 100vw;
    background-size: 100vw;
    height: 539.2vw;
    margin-top: -16vw;
    padding-top: 13.3333333333vw;
    padding-bottom: 8vw;
  }
}
.reason .usage_listWrapNote {
  width: 830px;
  margin: 15px auto 22px;
}
.reason .usage_listWrapNote img {
  display: block;
  margin-right: 0;
  margin-left: auto;
  width: 290px;
}
@media screen and (max-width: 768px) {
  .reason .reason_inner {
    padding-top: 8vw;
  }
}
.reason .wave_ttl {
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .reason .wave_ttl {
    margin-bottom: 12vw;
  }
}
.reason .reason_read {
  margin: 0 auto 50px;
  display: table;
}
@media screen and (max-width: 768px) {
  .reason .reason_read {
    margin-bottom: 10.6666666667vw;
  }
}
.reason .reason_listInfo {
  min-height: 160px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .reason .reason_listInfo {
    min-height: auto;
    display: block;
  }
}
.reason .reason_listInfoPoint {
  width: 68px;
  height: 23px;
  border-radius: 40px;
  background: #D6EEEE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A7186;
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: 1.2px;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .reason .reason_listInfoPoint {
    width: 18.1333333333vw;
    height: 6.1333333333vw;
    margin: 0 auto;
    border-radius: 10.6666666667vw;
    background: #D6EEEE;
    font-size: 3.2vw;
    line-height: 125%;
    margin-bottom: 3.4666666667vw;
  }
}
.reason .reason_list {
  position: relative;
  width: 830px;
  margin: 0 auto 40px;
}
@media screen and (max-width: 768px) {
  .reason .reason_list {
    width: 85.3333333333vw;
    margin-bottom: 14.6666666667vw;
  }
}
.reason .reason_listInfoTtl {
  color: #2A7186;
  font-family: "Zen Kaku Gothic New";
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  /* 140% */
  letter-spacing: 2px;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .reason .reason_listInfoTtl {
    font-size: 4.8vw;
    letter-spacing: 0.5333333333vw;
    text-align: center;
    margin-bottom: 5.3333333333vw;
  }
}
.reason .reason_listImg {
  width: 290px;
  position: absolute;
  top: 50%;
  height: 163px;
  right: 0;
  transform: translateY(-50%);
}
.reason .reason_listImg video, .reason .reason_listImg img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .reason .reason_listImg {
    width: 62.6666666667vw;
    height: auto;
    transform: translateY(0%);
    position: static;
    margin: 0 auto 2.6666666667vw;
    display: block;
  }
}
.reason .reason_listInfoTxt {
  color: #363636;
  font-family: "Zen Kaku Gothic New";
  font-size: 17px;
  font-weight: 500;
  line-height: 1.64;
  /* 173.333% */
  letter-spacing: 1.5px;
  padding-left: 1em;
  width: 480px;
}
@media screen and (max-width: 768px) {
  .reason .reason_listInfoTxt {
    font-size: 3.7333333333vw;
    letter-spacing: 0.3466666667vw;
    width: 62.6666666667vw;
    margin: 0 auto;
    padding-left: 0vw;
    text-align: center;
  }
}
.reason .reason_bottom .reason_bottomTtl {
  color: #2A7186;
  text-align: center;
  font-size: 25.658px;
  font-weight: 500;
  line-height: 65px;
  /* 253.333% */
  letter-spacing: 2.566px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .reason .reason_bottom .reason_bottomTtl {
    font-size: 4vw;
    letter-spacing: 0.5333333333vw;
    margin-bottom: 8vw;
    line-height: 253.333%;
  }
}
.reason .reason_bottom .reason_bottomTtl .bold {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .reason .reason_bottom .reason_bottomTtl .bold {
    font-size: 4.8vw;
  }
}
.reason .reason_bottom .reason_bottomImg {
  display: table;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .reason .reason_bottom .reason_bottomImg {
    width: 78.1333333333vw;
  }
}

/*-------------------------------------------------------------------
customer
/*-------------------------------------------------------------------*/
.customer {
  background-color: #EEF6F6;
  padding-top: 70px;
  padding-bottom: 100px;
  margin-top: -80px;
}
@media screen and (max-width: 768px) {
  .customer {
    padding-top: 32vw;
    padding-bottom: 13.3333333333vw;
    margin-top: -21.3333333333vw;
  }
}
.customer .voice {
  border-radius: 20px;
  background: #FFF;
  width: 900px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 90px;
}
@media screen and (max-width: 768px) {
  .customer .voice {
    width: 89.3333333333vw;
    padding-top: 8vw;
    padding-bottom: 8vw;
  }
}
.customer .wave_ttl {
  margin-bottom: 10px;
  font-size: 30px;
}
@media screen and (max-width: 768px) {
  .customer .wave_ttl {
    font-size: 6.1333333333vw;
    margin-bottom: 8vw;
  }
}
.customer .voice_listWrap .voice_list {
  width: 710px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 10px 0;
  margin-bottom: 80px;
}
.customer .voice_listWrap .voice_list:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .customer .voice_listWrap .voice_list {
    width: 76vw;
    margin: 0 auto;
    margin-bottom: 5.3333333333vw;
    gap: 2.6666666667vw;
    align-items: flex-start;
  }
}
.customer .voice_listWrap .voice_list.list02, .customer .voice_listWrap .voice_list.list04 {
  flex-direction: row-reverse;
}
.customer .voice_listWrap .voice_list.list02 .voice_listInfoTtk, .customer .voice_listWrap .voice_list.list04 .voice_listInfoTtk {
  margin-right: 0;
  margin-left: auto;
  margin-right: 4vw;
}
@media screen and (max-width: 768px) {
  .customer .voice_listWrap .voice_listImg {
    width: 18.6666666667vw;
    margin: 0 auto;
  }
}
.customer .voice_listWrap .voice_listInfoTtk {
  border-radius: 30px;
  background: #EDF5F5;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 1px 20px;
  display: table;
  margin-bottom: 13px;
}
@media screen and (max-width: 768px) {
  .customer .voice_listWrap .voice_listInfoTtk {
    height: 8vw;
    margin-bottom: 3.4666666667vw;
    padding: 0.8vw 2.6666666667vw 0.2666666667vw;
    font-size: 3.2vw;
    line-height: 183%;
    letter-spacing: 0.0533333333vw;
  }
}
.customer .voice_listWrap .voice_listInfoTxt {
  color: #363636;
  font-size: 15px;
  font-weight: 500;
  line-height: 173.333%;
  letter-spacing: 0.75px;
}
@media screen and (max-width: 768px) {
  .customer .voice_listWrap .voice_listInfoTxt {
    font-size: 3.4666666667vw;
    letter-spacing: 0.3466666667vw;
    line-height: 169.231%;
  }
}
@media screen and (max-width: 768px) {
  .customer .voice_listInfo {
    width: 53.3333333333vw;
  }
}

/*-------------------------------------------------------------------
faq
/*-------------------------------------------------------------------*/
.faq {
  margin-top: 75px;
}
@media screen and (max-width: 768px) {
  .faq {
    margin-top: 8vw;
  }
}
@media screen and (max-width: 768px) {
  .faq .wave_ttl {
    font-size: 6.9333333333vw;
  }
}
.faq .faq_listWrap .faq_list {
  width: 824px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list {
    width: 88vw;
    margin: 0 auto;
  }
}
.faq .faq_listWrap .faq_list .faq_listTxt {
  width: 790px;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list .faq_listTxt {
    width: 66.6666666667vw;
  }
}
.faq .faq_listWrap .faq_list dt {
  display: flex;
  gap: 17px;
  padding: 20px 8px 20px;
  margin-top: 10px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list dt {
    padding: 4vw 2.1333333333vw 4vw;
    margin-top: 2.6666666667vw;
  }
}
.faq .faq_listWrap .faq_list dt .faq_listIco {
  width: 42px;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list dt .faq_listIco {
    width: 11.2vw;
  }
}
.faq .faq_listWrap .faq_list dt .faq_listTtl {
  color: #363636;
  font-size: 17px;
  font-weight: 700;
  line-height: 156.277%;
  letter-spacing: 1.6px;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list dt .faq_listTtl {
    font-size: 3.7333333333vw;
    width: 69.3333333333vw;
    letter-spacing: 0.3733333333vw;
  }
}
.faq .faq_listWrap .faq_list dd {
  display: flex;
  padding: 10px 15px;
  align-items: center;
  gap: 15px;
  background-color: #fff;
  border-radius: 10.871px;
  background: #FFF;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list dd {
    padding: 2.6666666667vw 4vw;
  }
}
.faq .faq_listWrap .faq_list dd .faq_listIco {
  width: 30px;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list dd .faq_listIco {
    width: 8vw;
  }
}
.faq .faq_listWrap .faq_list dd .faq_listTxt {
  color: #363636;
  font-size: 17px;
  font-weight: 500;
  line-height: 181.19%;
  letter-spacing: 1.5px;
}
@media screen and (max-width: 768px) {
  .faq .faq_listWrap .faq_list dd .faq_listTxt {
    font-size: 3.4666666667vw;
    letter-spacing: 0.3466666667vw;
  }
}
.faq .faq_btn {
  display: flex;
  width: 305px;
  height: 60px;
  padding: 20px 0px;
  padding-right: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #FFF;
  border-radius: 40px;
  background: #6ABBBA;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
  color: #FFF;
  text-align: center;
  font-family: Inter;
  font-size: 17px;
  font-family: "Zen Kaku Gothic New";
  font-weight: 700;
  line-height: 125%;
  /* 18.75px */
  letter-spacing: 2.4px;
  background-image: url(../img/faq_btn01.svg);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 68% 51%;
  margin: 56px auto 0;
}
.faq .faq_btn.active {
  background-image: url(../img/faq_btn02.svg);
  background-position: 62% 51%;
}
@media screen and (max-width: 768px) {
  .faq .faq_btn {
    width: 81.3333333333vw;
    height: 16vw;
    padding: 5.3333333333vw 6.9333333333vw;
    bottom: -26.6666666667vw;
    right: 4vw;
    margin-top: 8vw;
    font-size: 3.7333333333vw;
    line-height: 5.0666666667vw;
    letter-spacing: 0.5546666667vw;
  }
}
.faq .faq_listWrap .faq_list {
  display: none;
}
.faq .faq_listWrap.show-all .faq_list {
  display: block;
}
.faq .faq_listWrap:not(.show-all) .faq_list:nth-child(-n+4) {
  display: block;
}

/*-------------------------------------------------------------------
katachi
/*-------------------------------------------------------------------*/
.katachi {
  background-image: url(/assets/img/katachi_bg01_pc.jpg);
  -webkit-mask-image: url(/assets/img/katachi_mask01_pc.svg);
          mask-image: url(/assets/img/katachi_mask01_pc.svg);
  mask-mode: alpha;
  -webkit-mask-size: 1920px;
          mask-size: 1920px;
  background-position: center;
  background-size: cover;
  height: 782px;
  padding-top: 0;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .katachi {
    background-image: url(/assets/img/katachi_bg01_sp.jpg);
    -webkit-mask-image: url(/assets/img/katachi_mask01_sp.svg);
            mask-image: url(/assets/img/katachi_mask01_sp.svg);
    -webkit-mask-size: 100vw;
            mask-size: 100vw;
    background-size: 100vw;
    height: 222.6666666667vw;
    margin-top: -5vw;
    padding-top: 13vw;
    padding-bottom: 12vw;
  }
}
.katachi .katachi_ttl {
  color: #363636;
  text-align: center;
  font-size: 25px;
  font-weight: 600;
  line-height: 175%;
  text-align: center;
  /* 175% */
  letter-spacing: 1.6px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .katachi .katachi_ttl {
    font-size: 4vw;
    letter-spacing: 0.3733333333vw;
  }
}
.katachi .katachi_ttl .blue {
  color: #6ABBBA;
}
@media screen and (max-width: 768px) {
  .katachi .katachi_ttl {
    margin-bottom: 5.3333333333vw;
  }
}
.katachi .katachi_logo {
  width: 200px;
  margin: 0 auto 80px;
}
@media screen and (max-width: 768px) {
  .katachi .katachi_logo {
    width: 53.3333333333vw;
    margin-bottom: 21.3333333333vw;
  }
}
.katachi .katachi_logo img {
  width: 100%;
}
.katachi .katachi_read {
  width: 578px;
  margin: 0 auto 60px;
}
@media screen and (max-width: 768px) {
  .katachi .katachi_read {
    width: 94.6666666667vw;
    margin-bottom: 13.3333333333vw;
  }
}
.katachi .katachi_read img {
  width: 100%;
}
.katachi .katachi_img {
  width: 820px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .katachi .katachi_img {
    width: 84vw;
    margin: 0 auto;
  }
}
.katachi .katachi_img img {
  width: 100%;
}

/*-------------------------------------------------------------------
developer
/*-------------------------------------------------------------------*/
.developer {
  background-color: #f7f5f4;
  margin-top: -120px;
  padding: 200px 0 40px;
}
@media screen and (max-width: 768px) {
  .developer {
    padding: 26.6666666667vw 0 0vw;
    margin-top: -15vw;
  }
}
@media screen and (max-width: 768px) {
  .developer .wave_ttl {
    font-size: 6.6666666667vw;
  }
}
.developer .developer_contTop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .developer .developer_contTop {
    gap: 5.3333333333vw;
    margin-bottom: 5.3333333333vw;
    display: block;
  }
}
.developer .developer_contTop .developer_contTopItem {
  width: 385px;
}
.developer .developer_contTop .developer_contTopItem img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .developer .developer_contTop .developer_contTopItem:nth-child(1) {
    width: 84.2666666667vw;
    margin: 0 auto 14.9333333333vw;
  }
  .developer .developer_contTop .developer_contTopItem:nth-child(2) {
    width: 84.2666666667vw;
    margin: 0 auto 12vw;
  }
}
.developer .cv_btn {
  margin-top: 20px;
  margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
  .developer .cv_btn {
    margin-bottom: 2.6666666667vw;
    margin-top: 5.3333333333vw;
    bottom: 0;
    margin-bottom: 0;
  }
}
.developer .message {
  width: 800px;
  background-color: #fff;
  border-radius: 20px;
  position: relative;
  margin: 0 auto;
}
.developer .message .wave_ttl {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .developer .message {
    width: 93.3333333333vw;
    border-radius: 5.3333333333vw;
    margin: 0 auto;
  }
}
.developer .message .message_txt {
  color: #363636;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 37px;
  /* 246.667% */
  letter-spacing: 1.5px;
}
@media screen and (max-width: 768px) {
  .developer .message .message_txt {
    font-size: 3.2vw;
    line-height: 8vw;
    letter-spacing: 0.32vw;
  }
}
.developer .message .message_inner {
  overflow: hidden;
  height: 330px;
  padding: 50px 0 80px;
  transition: height 0.3s ease-in-out;
  /* マスク（フェードアウト効果） */
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.developer .message .message_inner.active {
  height: 987px;
  -webkit-mask-image: none;
  mask-image: none;
}
@media screen and (max-width: 768px) {
  .developer .message .message_inner.active {
    height: 273.8666666667vw;
  }
}
@media screen and (max-width: 768px) {
  .developer .message .message_inner {
    height: 98.4vw;
    padding: 10.6666666667vw 0 21.3333333333vw;
  }
}
.developer .message .message_logo {
  width: 228px;
  margin: 40px auto 0;
}
@media screen and (max-width: 768px) {
  .developer .message .message_logo {
    width: 40vw;
    margin: 5.3333333333vw auto 0;
  }
}
.developer .message_ico {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  cursor: pointer;
  width: 35px;
}
.developer .message_ico.active {
  transform: translateX(-50%) translateY(50%) rotate(180deg);
}
@media screen and (max-width: 768px) {
  .developer .message_ico {
    width: 9.3333333333vw;
  }
}
.developer .message_ico img {
  width: 100%;
}

/*-------------------------------------------------------------------
footer
/*-------------------------------------------------------------------*/
footer {
  background-color: #6ABBBA;
  padding: 35px 0 20px;
}
@media screen and (max-width: 768px) {
  footer {
    padding: 9.3333333333vw 0 5.3333333333vw;
  }
}
footer ul {
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  footer ul {
    margin-bottom: 6.6666666667vw;
  }
}
footer ul li {
  color: #FFF;
  text-align: center;
  font-family: "Zen Kaku Gothic New";
  font-size: 13px;
  font-weight: 700;
  line-height: 30px;
  /* 230.769% */
}
@media screen and (max-width: 768px) {
  footer ul li {
    font-size: 3.2vw;
    line-height: 250%;
    letter-spacing: 0.3466666667vw;
  }
}
footer .copyright {
  color: #FFF;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  footer .copyright {
    font-size: 2.4vw;
    line-height: 160%;
  }
}

/*-------------------------------------------------------------------
yuagari
/*-------------------------------------------------------------------*/
.yuagari {
  background-image: url(/assets/img/yuagari_bg01_pc.jpg);
  mask-mode: alpha;
  -webkit-mask-size: 1920px;
          mask-size: 1920px;
  background-position: center;
  background-size: 140%;
  -webkit-mask-position: top center;
          mask-position: top center;
  position: relative;
  padding-top: 105px;
  margin-top: -20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .yuagari {
    background-image: url(/assets/img/yuagari_bg01_sp.jpg);
    -webkit-mask-image: none;
            mask-image: none;
    -webkit-mask-size: 100vw;
            mask-size: 100vw;
    background-size: 130vw;
    height: unset;
    margin-top: -18.8vw;
    padding-top: 26.6666666667vw;
    padding-bottom: 8vw;
  }
}
.yuagari .yuagari_ttl {
  color: #FFF;
  text-align: center;
  text-shadow: 0px 0px 8px rgba(38, 38, 38, 0.5);
  font-size: 19px;
  font-weight: 700;
  line-height: 190%;
  margin-bottom: 35px;
  letter-spacing: 1.9px;
}
@media screen and (max-width: 768px) {
  .yuagari .yuagari_ttl {
    color: #FFF;
    text-shadow: 0px 0px 3px rgba(100, 108, 108, 0.8);
    font-size: 4vw;
    line-height: 200%;
    letter-spacing: 0.4vw;
    margin-bottom: 5.3333333333vw;
  }
}
.yuagari .yuagari_box {
  position: relative;
  border-radius: 20px;
  width: 800px;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.15));
  background-image: url(/assets/img/yuagari_box01_pc.jpg);
  background-position: center;
  margin: 0 auto;
  padding: 40px 0;
  background-size: cover;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .yuagari .yuagari_box {
    width: 93.3333333333vw;
    margin: 0 auto;
    padding: 10.6666666667vw 0;
    margin-bottom: 5.3333333333vw;
  }
}
.yuagari .yuagari_boxTtl {
  color: #2A7186;
  text-align: center;
  font-family: "Zen Kaku Gothic New";
  font-size: 25px;
  font-weight: 500;
  line-height: 140%;
  /* 140% */
  letter-spacing: 2.5px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .yuagari .yuagari_boxTtl {
    font-size: 6.6666666667vw;
    line-height: 140%;
    letter-spacing: 0.6666666667vw;
  }
}
.yuagari .yuagari_logo {
  width: 520px;
  margin: 40px auto 0;
}
.yuagari .yuagari_logo img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .yuagari .yuagari_logo {
    width: 69.3333333333vw;
    margin: 5.3333333333vw auto 0;
  }
}
.yuagari .youtube {
  position: relative;
  width: 100%;
  width: 470px;
  flex-shrink: 0;
  aspect-ratio: 500/281.25;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 10px;
}
.yuagari .youtube video {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .yuagari .youtube {
    width: 80vw;
    margin-bottom: 2.6666666667vw;
    border-radius: 2.6666666667vw;
  }
}
.yuagari .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.yuagari .intro_link {
  color: #000;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  text-decoration: underline;
  margin: 0 auto;
  display: table;
}
@media screen and (max-width: 768px) {
  .yuagari .intro_link {
    font-size: 4vw;
    line-height: 8vw;
    letter-spacing: 0.4vw;
  }
}
.yuagari .yuagari_txt {
  color: #000;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  line-height: 217%;
  letter-spacing: 0.6px;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .yuagari .yuagari_txt {
    margin-top: 10.6666666667vw;
    color: #000;
    font-size: 12px;
    font-weight: 500;
    line-height: 250%;
    letter-spacing: 0.48px;
  }
}
.yuagari .yuagari_boxInner {
  overflow: hidden;
  height: 700px;
  transition: height 0.3s ease-in-out;
  /* マスク（フェードアウト効果） */
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.yuagari .yuagari_boxInner.active {
  height: 1441px;
  -webkit-mask-image: none;
  mask-image: none;
}
@media screen and (max-width: 768px) {
  .yuagari .yuagari_boxInner.active {
    height: 285vw;
  }
}
@media screen and (max-width: 768px) {
  .yuagari .yuagari_boxInner {
    height: 138.6666666667vw;
  }
}
.yuagari .message_ico {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  width: 35px;
}
.yuagari .message_ico.active {
  transform: translateX(-50%) translateY(50%) rotate(180deg);
}
@media screen and (max-width: 768px) {
  .yuagari .message_ico {
    width: 9.3333333333vw;
  }
}
.yuagari .message_ico img {
  width: 100%;
}

/*-------------------------------------------------------------------
header_nav
/*-------------------------------------------------------------------*/
.header_nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  width: 415px;
  height: 100vh;
  z-index: 2000;
  padding: 20px 0;
  background-image: url(/assets/img/headerNav_bg01.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.header_nav.active {
  transform: translateX(0);
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.25));
}
.header_nav .close_btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50px;
  cursor: pointer;
  right: 20px;
}
.header_nav .close_btn img {
  width: 23px;
}
.header_nav .header_navList {
  padding-top: 100px;
  padding-left: 80px;
}
.header_nav .header_navList .header_navItem {
  margin-bottom: 20px;
}
.header_nav .header_navList .header_navItem a {
  color: #2A7186;
  font-family: "Zen Kaku Gothic New";
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}
.header_nav .header_navBtn {
  display: flex;
  width: 228px;
  height: 60px;
  padding: 20px 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: "Zen Kaku Gothic New";
  color: #FFF;
  border-radius: 40px;
  opacity: 0.85;
  background: #E88282;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
  color: #FFF;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 125%;
  /* 18.75px */
  letter-spacing: 2.4px;
  margin: 40px 46px auto auto;
}
@media screen and (max-width: 768px) {
  .header_nav .header_navBtn {
    width: 48.2666666667vw;
    height: 16vw;
    padding: 5.3333333333vw 6.9333333333vw;
    bottom: -26.6666666667vw;
    right: 4vw;
    font-size: 3.4666666667vw;
    line-height: 5.0666666667vw;
    letter-spacing: 0.5546666667vw;
  }
}

.developer_bottom {
  background-image: url(/assets/img/developer_bottom.svg);
  height: 71px;
  width: 100%;
  background-position: bottom;
  background-size: 1920px;
  background-repeat: repeat-x;
  margin-top: 0px;
  z-index: 100;
  position: relative;
  margin-bottom: -50px;
}
@keyframes move_bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1920px 0;
  }
}
@media screen and (max-width: 768px) {
  .developer_bottom {
    height: 18.9333333333vw;
    background-size: 100vw;
    background-image: url(/assets/img/developer_bottom_sp.png);
  }
}

.active .header_nav {
  transform: translateX(0);
}

.mv_btnInner,
.cv_btn {
  overflow: hidden;
  position: relative;
}
.mv_btnInner::after,
.cv_btn::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 75%);
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-15deg);
  width: 100%;
}

@keyframes shine {
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
/* 初期状態で非表示 */
.gif-wrap .gif-anim {
  display: none;
}

.gif-wrap .gif-mobile {
  display: none;
}

/* PC表示のみ：ホバーでGIF再生 */
@media (hover: hover) and (pointer: fine) {
  .gif-wrap {
    position: relative;
    display: inline-block;
  }
  .gif-wrap .gif-static,
  .gif-wrap .gif-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  .gif-wrap:hover .gif-anim {
    display: block;
  }
  .gif-wrap:hover .gif-static {
    display: none;
  }
}
.gif-static {
  position: relative;
}

/* スマホ表示：常時GIF */
@media screen and (max-width: 768px) {
  .gif-wrap .gif-static,
  .gif-wrap .gif-anim {
    display: none;
  }
  .gif-wrap .gif-mobile {
    display: block;
    width: 100%;
    height: auto;
  }
}
.reason_listImgObje {
  width: 126px;
  display: block;
  position: absolute;
  top: -40px;
  left: 360px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .reason_listImgObje {
    width: 26.6666666667vw;
    position: static;
    top: 0;
    left: auto;
    right: 0;
    margin: -16vw -2vw -2vw auto;
    z-index: 10;
    position: relative;
  }
}
.reason_listImgObje img {
  width: 100%;
}

.usage_listImg {
  position: relative;
  display: inline-block;
}

.usage_listImg img,
.usage_listImg video {
  display: block;
  width: 100%;
  height: auto;
}

.usage_listImg video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  /* 初期は透明 */
  pointer-events: none;
  /* マウス操作は透過 */
}

.usage_listImg:hover video {
  opacity: 1;
  /* ホバー中だけ見える */
}

.usage_listImg:hover img {
  opacity: 0;
  /* ホバー中は画像を隠す */
}

@media screen and (max-width: 768px) {
  .usage_listImg img {
    opacity: 1 !important;
    /* ホバー中は画像を隠す */
  }
  .usage_listImg video {
    opacity: 0 !important;
  }
}
.still_btn {
  width: 216px;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .still_btn {
    width: 50.6666666667vw;
  }
}
.still_btn img {
  width: 100%;
}

.still_btn2 {
  padding: 0;
  width: 270px;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .still_btn2 {
    width: 72vw;
  }
}
.still_btn2 img {
  width: 100%;
}/*# sourceMappingURL=style.css.map */