@charset "UTF-8";
/*------------------------------------------------------------
	オプション
------------------------------------------------------------*/
.-fz120_percent {
  font-size: 120%;
}

.-fz140_percent {
  font-size: 140%;
}

.-fz_bold_900 {
  font-weight: 900;
  letter-spacing: 0.1rem;
}

.-shadow {
  -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}

.-tac {
  text-align: center !important;
}

.-any_color {
  color: #d42f2f !important;
}

.-mark {
  line-height: 1.45;
  display: inline;
  padding-bottom: 0em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #edf7fd));
  background: linear-gradient(transparent 60%, #edf7fd 60%);
}

.-mark_02 {
  background-color: #edf7fd;
}

.-mt0 {
  margin-top: 0 !important;
}
@media screen and (max-width: 599px) {
  .-mt0 {
    margin-top: 0vw !important;
  }
}

.-mt10 {
  margin-top: 10px !important;
}
@media screen and (max-width: 599px) {
  .-mt10 {
    margin-top: 1.6666666667vw !important;
  }
}

.-mt20 {
  margin-top: 20px !important;
}
@media screen and (max-width: 599px) {
  .-mt20 {
    margin-top: 3.3333333333vw !important;
  }
}

.-mt30 {
  margin-top: 30px !important;
}
@media screen and (max-width: 599px) {
  .-mt30 {
    margin-top: 5vw !important;
  }
}

.-mt40 {
  margin-top: 40px !important;
}
@media screen and (max-width: 599px) {
  .-mt40 {
    margin-top: 6.6666666667vw !important;
  }
}

.-mt50 {
  margin-top: 50px !important;
}
@media screen and (max-width: 599px) {
  .-mt50 {
    margin-top: 8.3333333333vw !important;
  }
}

.-mt60 {
  margin-top: 60px !important;
}
@media screen and (max-width: 599px) {
  .-mt60 {
    margin-top: 10vw !important;
  }
}

.-mt70 {
  margin-top: 70px !important;
}
@media screen and (max-width: 599px) {
  .-mt70 {
    margin-top: 11.6666666667vw !important;
  }
}

.-mt80 {
  margin-top: 80px !important;
}
@media screen and (max-width: 599px) {
  .-mt80 {
    margin-top: 13.3333333333vw !important;
  }
}

.-mt90 {
  margin-top: 90px !important;
}
@media screen and (max-width: 599px) {
  .-mt90 {
    margin-top: 15vw !important;
  }
}

.-mb0 {
  margin-bottom: 0 !important;
}
@media screen and (max-width: 599px) {
  .-mb0 {
    margin-bottom: 0vw !important;
  }
}

.-mb10 {
  margin-bottom: 10px !important;
}
@media screen and (max-width: 599px) {
  .-mb10 {
    margin-bottom: 1.6666666667vw !important;
  }
}

.-mb20 {
  margin-bottom: 20px !important;
}
@media screen and (max-width: 599px) {
  .-mb20 {
    margin-bottom: 3.3333333333vw !important;
  }
}

.-mb30 {
  margin-bottom: 30px !important;
}
@media screen and (max-width: 599px) {
  .-mb30 {
    margin-bottom: 5vw !important;
  }
}

.-mb40 {
  margin-bottom: 40px !important;
}
@media screen and (max-width: 599px) {
  .-mb40 {
    margin-bottom: 6.6666666667vw !important;
  }
}

.-mb50 {
  margin-bottom: 50px !important;
}
@media screen and (max-width: 599px) {
  .-mb50 {
    margin-bottom: 8.3333333333vw !important;
  }
}

.-mb60 {
  margin-bottom: 60px !important;
}
@media screen and (max-width: 599px) {
  .-mb60 {
    margin-bottom: 10vw !important;
  }
}

.-mb70 {
  margin-bottom: 70px !important;
}
@media screen and (max-width: 599px) {
  .-mb70 {
    margin-bottom: 11.6666666667vw !important;
  }
}

.-mb80 {
  margin-bottom: 80px !important;
}
@media screen and (max-width: 599px) {
  .-mb80 {
    margin-bottom: 13.3333333333vw !important;
  }
}

.-mb90 {
  margin-bottom: 90px !important;
}
@media screen and (max-width: 599px) {
  .-mb90 {
    margin-bottom: 15vw !important;
  }
}

.-mb100 {
  margin-bottom: 100px !important;
}
@media screen and (max-width: 599px) {
  .-mb100 {
    margin-bottom: 16.6666666667vw !important;
  }
}

/*------------------------------------------------------------
	basic
------------------------------------------------------------*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  -webkit-text-size-adjust: 100%;
  font-family: "M PLUS 1p", sans-serif, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #231815;
}
@media screen and (max-width: 599px) {
  body {
    font-size: 1.5rem;
    line-height: 2.2;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
  }
}

.main {
  display: block;
}

img {
  vertical-align: middle;
  border: none;
}

a {
  color: #231815;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a:hover {
  opacity: 0.8;
}

ul {
  margin: 0;
  padding: 0;
}

li, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc_show {
  display: block;
}
@media screen and (max-width: 599px) {
  .pc_show {
    display: none;
  }
}

.tb_show {
  display: none;
}
@media screen and (max-width: 959px) {
  .tb_show {
    display: block;
  }
}

.sp_show {
  display: none;
}
@media screen and (max-width: 599px) {
  .sp_show {
    display: block;
  }
}

.inner {
  padding: 0 20px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
@media screen and (max-width: 599px) {
  .inner {
    padding: 0 6.24%;
  }
}
@media screen and (max-width: 599px) {
  .inner.sns {
    padding: 0 3%;
  }
}

img.multiply {
  mix-blend-mode: multiply;
}
img.character {
  position: absolute;
  right: -1%;
  bottom: 0;
  width: 247px;
  z-index: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 1499px) {
  img.character {
    display: none;
  }
}
img.figure_01 {
  max-width: 913px;
  margin: 0 auto;
}
img.figure_02 {
  max-width: 891px;
  margin: 0 auto;
}
img.sekou_area_img {
  max-width: 938px;
  margin: 0 auto;
}

.anime {
  background: url("../image/long_img.png");
  width: 100%;
  height: 363px;
  -webkit-animation: loop 50s linear infinite;
          animation: loop 50s linear infinite;
}
@media screen and (max-width: 959px) {
  .anime {
    height: 300px;
    background-size: cover;
  }
}
@media screen and (max-width: 599px) {
  .anime {
    height: 200px;
  }
}

@-webkit-keyframes loop {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: -3770px 0;
  }
}

@keyframes loop {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: -3770px 0;
  }
}
/*------------------------------------------------------------
	モジュール
------------------------------------------------------------*/
#page_top {
  position: fixed;
  right: 3%;
  bottom: 6%;
  z-index: 100;
  opacity: 0.8;
}
@media screen and (max-width: 599px) {
  #page_top {
    bottom: 14%;
  }
}

.nav {
  position: fixed;
  z-index: 100;
  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;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  padding: 20px 4% 26px;
  background: rgb(0, 0, 0);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}
.nav img {
  max-width: 160px;
}
.nav .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 2em;
}
.nav .list a {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sec_ttl {
  font-size: 4rem;
  color: #49b681;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.3;
}
@media screen and (max-width: 599px) {
  .sec_ttl {
    font-size: 3.4rem;
    margin-bottom: 32px;
  }
}

.container_sub_ttl {
  position: relative;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.3;
  color: #333;
}
.container_sub_ttl::before {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background-color: #49b681;
  position: absolute;
  top: 50%;
  left: 0;
}
.container_sub_ttl span {
  font-size: 2.4rem;
  font-weight: 500;
  display: inline-block;
  background-color: #c8e5d3;
  padding: 0 0.7em;
  position: relative;
}

.container {
  position: relative;
  padding: 70px 0 100px;
}
@media screen and (max-width: 599px) {
  .container {
    padding: 50px 0 80px;
  }
}
.container.bg_01 {
  position: relative;
  z-index: 10;
  background: url("../image/bug_bg.png");
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 599px) {
  .container.bg_01 {
    background: url("../image/bug_bg_sp.png");
    background-size: cover;
    background-position: center;
  }
}
.container.bg_01::before {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 80px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(30%, #fff));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 30%);
}
.container.bg_02 {
  position: relative;
  z-index: 10;
  padding-top: 68px;
  background: url("../image/baby_bg.png");
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 599px) {
  .container.bg_02 {
    background: url("../image/baby_bg_sp.png") no-repeat;
    background-size: contain;
    background-position: bottom;
  }
}
.container.bg_03 {
  background-color: #c8e5d3;
}

.kv_area {
  position: relative;
  width: 100%;
  height: 800px;
}
@media screen and (max-width: 959px) {
  .kv_area {
    height: 600px;
  }
}
@media screen and (max-width: 599px) {
  .kv_area {
    height: 74vh;
    max-height: 640px;
  }
}
.kv_area .kv {
  position: absolute;
  margin-top: 0.5%;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 1168px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 959px) {
  .kv_area .kv {
    padding: 0 2%;
    width: auto;
  }
}
@media screen and (max-width: 599px) {
  .kv_area .kv {
    margin-top: 10.5%;
    padding: 0 4%;
  }
}

.slider {
  position: relative;
  z-index: 1;
  background: #f1f1f1;
}
.slider .item {
  width: 100%;
}
.slider img {
  height: 800px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 959px) {
  .slider img {
    height: 600px;
  }
}
@media screen and (max-width: 599px) {
  .slider img {
    height: 74vh;
    max-height: 640px;
  }
}
.slider .slick-prev,
.slider .slick-next {
  display: none !important;
  position: absolute;
  z-index: 3;
  top: 50%;
  margin-top: -20px;
  cursor: pointer;
  outline: none;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  height: 25px;
  width: 24px;
}
.slider .slick-prev {
  left: 2.5%;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.slider .slick-next {
  right: 2.5%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.slider .slick-dots {
  display: none !important;
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -60px 0 0 0;
}
.slider .slick-dots li {
  display: inline-block;
  margin: 0 8px;
}
.slider .slick-dots button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background-color: #fff;
}
.slider .slick-dots .slick-active button {
  background-color: #333;
}

.cov_btn {
  display: block;
  max-width: 833px;
  margin: 0 auto;
}

.catch_txt {
  margin-bottom: 70px;
  padding: 0 20px;
}
@media screen and (max-width: 599px) {
  .catch_txt {
    padding: 0;
  }
}
.catch_txt img {
  margin: 0 auto;
  display: block;
}
.catch_txt .ttl {
  font-size: 3.6rem;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media screen and (max-width: 959px) {
  .catch_txt .ttl {
    line-height: 1.2;
  }
}
@media screen and (max-width: 599px) {
  .catch_txt .ttl {
    font-size: 3rem;
  }
}
.catch_txt .ttl .size_l {
  display: block;
  font-size: 5.6rem;
  color: #5aba89;
}
@media screen and (max-width: 959px) {
  .catch_txt .ttl .size_l {
    margin-top: 10px;
  }
}
@media screen and (max-width: 599px) {
  .catch_txt .ttl .size_l {
    font-size: 4rem;
  }
}
.catch_txt .ttl .size_s {
  margin-top: 6px;
  display: block;
  font-size: 1.9rem;
}
@media screen and (max-width: 599px) {
  .catch_txt .ttl .size_s {
    font-size: 1.7rem;
  }
}
.catch_txt .txt {
  font-size: 2.8rem;
  line-height: 1.4;
}
@media screen and (max-width: 599px) {
  .catch_txt .txt {
    font-size: 2.3rem;
  }
}

.catch_sub_txt {
  font-weight: 400;
  font-size: 2.6rem;
  margin-bottom: 9px;
}

.caption {
  line-height: 2.7;
  font-weight: 400;
}

.full_img {
  margin: 0 auto;
}
.full_img img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 959px) {
  .full_img img.tb_max_w {
    padding: 0 3%;
    max-width: 600px;
    margin: 0 auto;
  }
}
.full_img img.set {
  max-width: 833px;
  margin: 0 auto;
}
@media screen and (max-width: 959px) {
  .full_img img.set {
    max-width: 703px;
  }
}
@media screen and (max-width: 599px) {
  .full_img.scroll-x_sp {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
}
@media screen and (max-width: 599px) {
  .full_img.scroll-x_sp img {
    max-width: none;
    width: auto;
    height: 250px;
  }
}

.img_bg_txt_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0 2%;
}
.img_bg_txt_box .txt_r {
  width: 49%;
}

.cards {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  z-index: 10;
}
.cards .card {
  display: block;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background-color: #fff;
}
.cards .card.triangle {
  margin: 0 auto;
  position: relative;
}
.cards .card.triangle::after {
  content: "New";
  display: block;
  top: 8px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  color: #fff;
  left: 2px;
  position: absolute;
  z-index: 101;
}
.cards .card.triangle::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 4em solid transparent;
  border-left: 4em solid #bb0000;
  position: absolute;
  z-index: 100;
}
.cards .card .img_area {
  position: relative;
}
.cards .card .img_area.ico_window::before {
  content: "\e89e";
  font-family: "Material Icons";
  font-size: 38px;
  position: absolute;
  color: #fff;
  right: 10px;
  bottom: 10px;
  font-weight: 300;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
          filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  line-height: 1;
}
.cards .card .img_area img {
  width: 100%;
}
.cards .card .img_area img.cut {
  -o-object-fit: cover;
     object-fit: cover;
}
.cards .card .img_area img.aspect4-3 {
  aspect-ratio: 4/3;
  height: 100%;
}
.cards .card .img_area img.aspect8-5 {
  aspect-ratio: 8/5;
  height: 100%;
}
.cards .card .img_area img.aspect16-9 {
  aspect-ratio: 16/9;
  height: 100%;
}
.cards .card .img_area figcaption {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0.4em 20px;
  background-color: rgba(255, 255, 255, 0.4);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.cards .card .img_area figcaption span {
  display: inline-block;
}
.cards .card .img_area figcaption .cat {
  margin-left: 0.6em;
}
.cards .card .txt_area {
  padding: 20px;
}

.cards.col_02 {
  gap: 24px 2%;
}
.cards.col_02 .card {
  width: 49%;
}
@media screen and (max-width: 599px) {
  .cards.col_02 .card {
    width: 100%;
  }
}

.cards.col_03 {
  gap: 24px 2%;
}
@media screen and (max-width: 959px) {
  .cards.col_03 {
    gap: 24px 3%;
  }
}
.cards.col_03 .card {
  width: 32%;
}
@media screen and (max-width: 959px) {
  .cards.col_03 .card {
    width: 48.5%;
  }
}
@media screen and (max-width: 599px) {
  .cards.col_03 .card {
    width: 100%;
  }
}
.cards.col_03 .card .ttl {
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.4;
  margin-bottom: 10px;
}
@media screen and (max-width: 599px) {
  .cards.col_03 .card .ttl {
    font-size: 1.8rem;
  }
}
.cards.col_03 .card .txt {
  font-size: 1.6rem;
  font-weight: 400;
}
@media screen and (max-width: 599px) {
  .cards.col_03 .card .txt {
    font-size: 1.5rem;
    line-height: 1.6;
  }
}

.cards.col_04 {
  gap: 24px 2%;
}
@media screen and (max-width: 599px) {
  .cards.col_04 {
    gap: 24px 4%;
  }
}
.cards.col_04 .card {
  width: 23.5%;
}
@media screen and (max-width: 959px) {
  .cards.col_04 .card {
    width: 32%;
  }
}
@media screen and (max-width: 599px) {
  .cards.col_04 .card {
    width: 100%;
  }
}
.cards.col_04 .card .ttl {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.5;
}
.cards.col_04 .card .txt {
  font-size: 1.5rem;
}

.cards.movie .img_area::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.cards.movie .img_area::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../image/play_icon.svg") no-repeat;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  margin-left: -35px;
  z-index: 10;
  opacity: 0.8;
}
@media screen and (max-width: 599px) {
  .cards.movie .img_area::after {
    width: 56px;
    height: 56px;
    margin-top: -28px;
    margin-left: -28px;
  }
}

.point_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 1.83%;
  margin-bottom: 60px;
  position: relative;
}
@media screen and (max-width: 599px) {
  .point_box {
    display: block;
    margin-bottom: 48px;
  }
}
.point_box .txt_area {
  position: relative;
  top: -140px;
  width: 54%;
  padding: 24px 2%;
  gap: 0 22px;
}
@media screen and (max-width: 599px) {
  .point_box .txt_area {
    width: 100%;
  }
}
.point_box .txt_area .ttl_img {
  position: relative;
  left: -5%;
}
@media screen and (max-width: 599px) {
  .point_box .txt_area .ttl_img {
    left: -3%;
  }
}
.point_box .txt_area .ttl {
  margin: 6px auto 18px;
  width: 92%;
  text-align: center;
  gap: 0 2%;
  line-height: 1.2;
}
@media screen and (max-width: 599px) {
  .point_box .txt_area .ttl {
    margin-bottom: 12px;
    width: 100%;
  }
}
.point_box .txt_area .ttl span {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 86%;
          flex: 0 0 86%;
  font-size: 2.4rem;
  color: #5aba89;
}
@media screen and (max-width: 959px) {
  .point_box .txt_area .ttl span {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 77%;
            flex: 0 0 77%;
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 599px) {
  .point_box .txt_area .ttl span {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 86%;
            flex: 0 0 86%;
    font-size: 2rem;
  }
}
.point_box .txt_area .ttl .num {
  color: #edf7fd;
  font-family: "roboto";
  font-size: 4.8rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 57px;
          flex: 0 0 57px;
  font-weight: 600;
}
@media screen and (max-width: 959px) {
  .point_box .txt_area .ttl .num {
    font-size: 4.4rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 22%;
            flex: 0 0 22%;
  }
}
@media screen and (max-width: 599px) {
  .point_box .txt_area .ttl .num {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 45px;
            flex: 0 0 45px;
    font-size: 3.8rem;
  }
}
.point_box .txt_area .txt {
  margin: 0 auto;
  width: 92%;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 2.2;
  font-size: 1.5rem;
  text-shadow: 0 0 8px #fff;
}
@media screen and (max-width: 599px) {
  .point_box .txt_area .txt {
    width: 100%;
  }
}
.point_box .txt_area .point_img {
  margin-top: 16px;
  position: absolute;
  bottom: -260px;
  display: block;
}
@media screen and (max-width: 599px) {
  .point_box .txt_area .point_img {
    bottom: -240px;
  }
}
@media screen and (max-width: 599px) {
  .point_box .txt_area .point_img {
    max-width: 400px;
    right: 0;
  }
}
@media screen and (max-width: 499px) {
  .point_box .txt_area .point_img {
    bottom: -58vw;
    width: 40vw;
  }
}
.point_box .img_area {
  width: 48.17%;
  height: 100%;
}
@media screen and (max-width: 599px) {
  .point_box .img_area {
    width: 100%;
  }
}
.point_box .img_area .filter {
  position: relative;
  display: block;
}
.point_box .img_area .filter::after {
  content: "";
  background: url("../image/st_ptn_op20.png");
  top: 16px;
  left: 16px;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media screen and (max-width: 599px) {
  .point_box .img_area .filter::after {
    top: 8px;
    left: 8px;
  }
}
.point_box .img_area .filter:nth-child(2) {
  margin-top: 54px;
}
.point_box .img_area img {
  position: relative;
  z-index: 10;
  border-radius: 2px;
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.point_box.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.img_comment_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 834px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 44px;
  margin: 0 auto 24px;
}
@media screen and (max-width: 959px) {
  .img_comment_box {
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 599px) {
  .img_comment_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 40px 0;
  }
}
.img_comment_box:last-child {
  margin-bottom: 0;
}
.img_comment_box .img_area {
  width: 123px;
}
@media screen and (max-width: 599px) {
  .img_comment_box .img_area {
    margin: 0 auto;
    max-width: 180px;
  }
}
.img_comment_box .img_area img {
  border-radius: 50%;
}
.img_comment_box .txt_area {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: #fff;
  padding: 1.3em 1.3em;
  border-radius: 32px;
}
@media screen and (max-width: 959px) {
  .img_comment_box .txt_area {
    -webkit-box-flex: 70%;
        -ms-flex: 70%;
            flex: 70%;
  }
}
@media screen and (max-width: 599px) {
  .img_comment_box .txt_area {
    padding: 1.2em 1.4em;
  }
}
.img_comment_box .txt_area::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -16px;
  border-style: solid;
  border-width: 16px 28px 16px 0;
  border-color: transparent #fff transparent transparent;
}
@media screen and (max-width: 599px) {
  .img_comment_box .txt_area::before {
    border-width: 28px 16px 0 16px;
    border-color: #fff transparent transparent transparent;
    top: auto;
    left: 50%;
    bottom: -27px;
    margin-top: 0;
    margin-left: -16px;
    line-height: 1.3;
  }
}
.img_comment_box .txt_area .ttl {
  font-size: 1.8rem;
  font-weight: 700;
}
.img_comment_box .txt_area .txt {
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-size: 1.8rem;
}
@media screen and (max-width: 599px) {
  .img_comment_box .txt_area .txt {
    font-size: 1.6rem;
  }
}

.sns_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 32px;
}
@media screen and (max-width: 768px) {
  .sns_area {
    display: block;
  }
}
.sns_area .twitter {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 280px;
}
@media screen and (max-width: 768px) {
  .sns_area .twitter {
    width: 100%;
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 768px) {
  .sns_area .facebook {
    margin: 0 auto;
    text-align: center;
    display: block;
  }
}
@media screen and (max-width: 599px) {
  .sns_area .facebook {
    width: 100%;
  }
}

.footer {
  border-top: solid 16px #fff;
  background-color: #f0f6e5;
  padding: 30px 0 0;
}
@media screen and (max-width: 599px) {
  .footer {
    padding: 50px 0 calc(10vw + 28px);
    border-top: solid 12px #fff;
  }
}
.footer .txt {
  text-align: center;
  font-weight: 400;
  font-size: 1.7rem;
  margin-top: 6px;
}
@media screen and (max-width: 959px) {
  .footer .txt {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}
@media screen and (max-width: 599px) {
  .footer .txt {
    margin-top: 10px;
  }
}
.footer .flex_box {
  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;
  gap: 0 16px;
  padding-bottom: 40px;
}
@media screen and (max-width: 599px) {
  .footer .flex_box {
    display: block;
    padding-bottom: 60px;
  }
}
.footer .flex_box .flex_l {
  margin-bottom: 40px;
}
.footer .flex_box .flex_r {
  margin-top: 10px;
}
.footer .copy {
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
}
@media screen and (max-width: 599px) {
  .footer .copy {
    font-size: 1.4rem;
  }
}

.modaal-video-wrap {
  margin: 0 auto !important;
}

.flow_bnr {
  opacity: 0;
  display: block;
  visibility: hidden;
  position: fixed;
  z-index: 10000;
  bottom: 40vh;
  right: 0;
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-transition: 1.4s;
  transition: 1.4s;
}
.flow_bnr.active {
  opacity: 1;
  visibility: visible;
}
.flow_bnr:hover {
  opacity: 0.8;
}
@media screen and (max-width: 599px) {
  .flow_bnr {
    display: none;
  }
}

.flow_bnr_sp {
  opacity: 0;
  visibility: hidden;
  display: none;
}
@media screen and (max-width: 599px) {
  .flow_bnr_sp {
    position: fixed;
    display: block;
    z-index: 10000;
    bottom: 0px;
    right: 0px;
    width: 100%;
    -webkit-transition: 1.4s;
    transition: 1.4s;
  }
  .flow_bnr_sp .flow_bnr_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .flow_bnr_sp .tel,
.flow_bnr_sp .mail {
    width: 50%;
    display: block;
    padding: 14px 4%;
  }
  .flow_bnr_sp .tel {
    background-color: #c02220;
  }
  .flow_bnr_sp .mail {
    background-color: #ef9d28;
  }
  .flow_bnr_sp.active {
    opacity: 1;
    visibility: visible;
  }
}