/* ----- reset-css ----- */
input[type=text],
input[type=email],
input[type=tel],
input[type=password] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}

button,
input[type=submit],
input[type=button] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  border-radius: 0;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  background: none;
}

input[type=radio],
input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  resize: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
}

ol,
ul {
  list-style: none;
}

/* ----- common-css ----- */
@media screen and (max-width: 1330px) {
  html,
body {
    font-size: 0.7518796992vw;
  }
}
@font-face {
  font-family: "beautifulfont";
  src: url(../font/beautifulfont.woff2) format("woff2"), url(../font/beautifulfont.eot) format("eot");
}
@font-face {
  font-family: "axis";
  src: url(../font/axis.woff2) format("woff2");
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #333;
}

.hidden {
  overflow: hidden;
}

.sp {
  display: none;
}

.tb {
  display: none;
}

.pc {
  display: block;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animation-handwriting path,
.animation-handwriting line {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}

#animation06 path {
  stroke-width: 10;
}

#animation08 path {
  stroke-width: 10;
}

/* ----- imgAnimation -----*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 2.7s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #c72355;
  z-index: 2;
  opacity: 0;
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0;
  }
  1% {
    transform-origin: left;
    transform: scaleX(0);
    opacity: 1;
  }
  40% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
    opacity: 1;
  }
  75% {
    transform-origin: right;
    transform: scaleX(0);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 2.7s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #c72355;
  z-index: 2;
  opacity: 0;
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
    opacity: 0;
  }
  1% {
    transform-origin: right;
    transform: scaleX(0);
    opacity: 1;
  }
  35% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
    opacity: 1;
  }
  75% {
    transform-origin: left;
    transform: scaleX(0);
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1.1s;
  animation-delay: 1.4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.bgappearTrigger,
.bgappearTrigger-lg,
.bgappearTrigger-sml,
.bgappearTrigger-TopSml,
.bgappearTrigger-TopLg,
.bgappearTrigger-TopSmall_X,
.bgLRextendTrigger,
.bgLRextendTrigger-lg,
.bgLRextendTrigger-sml,
.bgLRextendTrigger-TopLg,
.bgLRextendTrigger-TopSmall_X,
.bgLRextendTrigger-TopSml {
  opacity: 0;
}

/* ----- ttl -----*/
.ttl {
  font-size: 11rem;
  font-family: lato, sans-serif;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.ttl.ttl--white {
  color: #fff;
}
.ttl.ttl--mid {
  font-size: 9rem;
}

.ttl.ttl--mid1 {
  font-size: 8rem;
}

.ttl.ttl--sml {
  font-size: 6rem;
  color: #333;
}

/* ----- subTtl -----*/
.subTtl {
  font-size: 2rem;
  margin-top: 2.5rem;
  font-weight: 400;
}

/* ----- commonBtn -----*/
.commonBtn {
  width: 18.4rem;
  height: 5.5rem;
  position: relative;
}
.commonBtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: -moz-linear-gradient(left, #c72355, #de8da6);
  background: -webkit-linear-gradient(left, #c72355, #de8da6);
  background: linear-gradient(to right, #c72355, #de8da6);
  pointer-events: none;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
@media (min-width: 1330px) {
  .commonBtn:hover::before {
    width: 100%;
    height: 5.5rem;
    border-radius: 3rem;
    transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  }
  .commonBtn:hover::after {
    color: #fff;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  }
}
.commonBtn::after {
  content: "Read More";
  position: absolute;
  top: 50%;
  right: 2.2rem;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 500;
  font-family: lato, sans-serif;
  letter-spacing: 0.05em;
  color: #333;
  pointer-events: none;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.commonBtn.commonBtn--white::after {
  color: #fff;
}
.commonBtn .circle {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
}
.commonBtn .circle .arrow {
  position: absolute;
  top: 50%;
  left: 2.2rem;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  background-image: url(../img/common/btn_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
@media (min-width: 1330px) {
  .commonBtn .circle:hover .arrow {
    width: 2.2rem;
    transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  }
}
.commonBtn.commonBtn--white::before {
  background: #fff;
}
.commonBtn.commonBtn--white::after {
  color: #fff;
  transition: all 0.45s;
}
@media (min-width: 1330px) {
  .commonBtn.commonBtn--white:hover::after {
    color: #c72355;
    transition: all 0.45s;
  }
}
.commonBtn.commonBtn--white .arrow {
  background-image: url(../img/common/btn_arrow_pink.svg);
}

/* ----- contactBanner -----*/
.contactBanner {
  height: 20rem;
  background-image: url(../img/common/contactBanner-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.3s;
  position: relative;
}
@media (min-width: 1330px) {
  .contactBanner:hover {
    opacity: 0.7;
    transition: all 0.3s;
  }
}
.contactBanner a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.contactBanner__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.contactBanner__content::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../img/common/contactBanner_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 6rem;
  height: 6rem;
  animation-name: contactBanner;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes contactBanner {
  from {
    right: -9rem;
    opacity: 0;
  }
  30% {
    right: -9rem;
    opacity: 1;
  }
  to {
    right: -16rem;
    opacity: 0;
  }
}
/* ----- breadcrumbs -----*/
.breadcrumbs {
  margin-top: 3.3rem;
  word-break: break-all;
}
.breadcrumbs .breadcrumbs__inner {
  padding: 0 13rem;
}
.breadcrumbs .breadcrumbs__inner a {
  font-size: 1.2rem;
  color: #333;
}
.breadcrumbs .breadcrumbs__inner span {
  font-size: 1.2rem;
}
.breadcrumbs .breadcrumbs__inner .breadcrumbs__arrow {
  display: inline-block;
  margin: 0 1.6rem;
}

/* ----- underFv -----*/
.underFv {
  margin-top: 5.3rem;
  padding: 8.8rem 0 18.8rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.underFv .ttl {
  text-align: center;
}
.underFv p {
  font-size: 2.4rem;
  font-weight: 700;
  margin-top: 2.3rem;
  text-align: center;
}
.underFv ul {
  display: flex;
  justify-content: space-between;
  width: 77rem;
  margin: 20.4rem auto 0;
}
.underFv li {
  position: relative;
  /* width: 20.2rem; */
  /* 2022-08 18.2rem */
  width: 18.2rem;
  border-bottom: 1px solid #707070;
}
.underFv li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../img/common/underFv_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 0.8rem;
  height: 1.6rem;
  pointer-events: none;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.underFv li:hover::before {
  top: 40%;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.underFv li a {
  display: inline-block;
  font-size: 2.4rem;
  font-family: lato, sans-serif;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: #333;
  width: 100%;
  padding-bottom: 2.25rem;
}
.underFv li a span {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 1.2rem;
}

/* ----- underFv2 -----*/
.underFv2 {
  margin-top: 5.3rem;
  padding: 8.8rem 0 18.8rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.underFv2 .ttl {
  text-align: center;
}
.underFv2 p {
  font-size: 2.4rem;
  font-weight: 700;
  margin-top: 2.3rem;
  text-align: center;
}
.underFv2 ul {
  display: flex;
  justify-content: space-between;
  width: 77rem;
  margin: 20.4rem auto 0;
}
.underFv2 li {
  position: relative;
  /* width: 20.2rem; */
  /* 2022-08 */
  width: 19.2rem !important;
  border-bottom: 1px solid #707070;
}
.underFv2 li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../img/common/underFv_arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 0.8rem;
  height: 1.6rem;
  pointer-events: none;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.underFv2 li:hover::before {
  top: 40%;
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.underFv2 li a {
  display: inline-block;
  font-size: 2.4rem;
  font-family: lato, sans-serif;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: #333;
  width: 100%;
  padding-bottom: 2.25rem;
}
.underFv2 li a span {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 1.2rem;
}


/* ----- heading -----*/
.heading {
  font-size: 3.8rem;
  font-family: lato, sans-serif;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.03em;
  position: relative;
}
.heading::before {
  content: "";
  position: absolute;
  top: -2.8rem;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  background-color: #333;
  width: 4rem;
  height: 1px;
}
.heading span {
  font-size: 1.4rem;
  font-weight: 400;
  display: block;
  margin-top: 0.9rem;
  color: #c72355;
  font-family: "Noto Sans JP", sans-serif;
}
.heading + p {
  font-size: 3rem;
  line-height: 1.53;
  font-weight: 700;
  color: #c72355;
  display: flex;
  justify-content: center;
  margin-top: 6.1rem;
}

/* ------------------------------------------
/* tablet
/* ------------------------------------------ */
@media (max-width: 1329px) {
  .pc {
    display: none;
  }

  .tb {
    display: block;
  }
}
/* ------------------------------------------
/* tablet
/* ------------------------------------------ */
@media (max-width: 767px) {
  html,
body {
    font-size: 2.6666666667vw;
  }

  .tb {
    display: none;
  }

  .sp {
    display: block;
  }

  /* ----- ttl -----*/
  .ttl {
    font-size: 11.733333vw;
    font-family: lato, sans-serif;
    font-weight: 900;
    letter-spacing: 0.03em;
  }
  .ttl.ttl--white {
    color: #fff;
  }
  .ttl.ttl--mid {
    font-size: 11.733333vw;
  }
	
  .ttl.ttl--mid1 {
  font-size: 11.733333vw;
  }
	
  .ttl.ttl--sml {
    font-size: 11.733333vw;
    color: #333;
  }

  /* ----- subTtl -----*/
  .subTtl {
    font-size: 3.733333vw;
    margin-top: 3.73vw;
    font-weight: 400;
  }

  /* ----- commonBtn -----*/
  .commonBtn {
    width: 36.8vw;
    height: 13.33333vw;
    position: relative;
  }
  .commonBtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 13.33333vw;
    height: 13.33333vw;
    border-radius: 50%;
    background: -moz-linear-gradient(left, #c72355, #de8da6);
    background: -webkit-linear-gradient(left, #c72355, #de8da6);
    background: linear-gradient(to right, #c72355, #de8da6);
    pointer-events: none;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  }
  .commonBtn::after {
    content: "Read More";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 3.466666vw;
    font-weight: 500;
    font-family: lato, sans-serif;
    letter-spacing: 0.05em;
    color: #333;
    pointer-events: none;
  }
  .commonBtn.commonBtn--white::after {
    color: #fff;
  }
  .commonBtn .circle {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .commonBtn .circle .arrow {
    position: absolute;
    top: 50%;
    left: 5.266666vw;
    transform: translateY(-50%);
    width: 2.66666vw;
    height: 2.6933333vw;
    background-image: url(../img/common/btn_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  }
  .commonBtn.commonBtn--white::before {
    background: #fff;
  }
  .commonBtn.commonBtn--white::after {
    color: #fff;
    transition: all 0.45s;
  }
  .commonBtn.commonBtn--white .arrow {
    background-image: url(../img/common/btn_arrow_pink.svg);
  }

  /* ----- contactBanner -----*/
  .contactBanner {
    height: 40vw;
    background-image: url(../img/common/contactBanner-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 0.3s;
    position: relative;
  }

  .contactBanner__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58.93vw;
  }
  .contactBanner__content::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../img/common/contactBanner_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 12vw;
    height: 12vw;
    animation-name: contactBanner;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes contactBanner {
    from {
      right: 0;
      opacity: 0;
    }
    20% {
      right: 0;
      opacity: 1;
    }
    to {
      right: -10vw;
      opacity: 0;
    }
  }
  /* ----- breadcrumbs -----*/
  .breadcrumbs {
    margin-top: 19.466666vw;
  }
  .breadcrumbs .breadcrumbs__inner {
    padding: 0 5.3vw;
  }
  .breadcrumbs .breadcrumbs__inner a {
    font-size: 2.933333vw;
    color: #333;
  }
  .breadcrumbs .breadcrumbs__inner span {
    font-size: 2.933333vw;
  }
  .breadcrumbs .breadcrumbs__inner .breadcrumbs__arrow {
    display: inline-block;
    margin: 0 2.6vw;
  }

  /* ----- underFv -----*/
  .underFv {
    margin-top: 7.73vw;
    padding: 8vw 0 28.8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .underFv .ttl {
    text-align: center;
    font-size: 13.33333vw;
  }
  .underFv p {
    font-size: 4.266666vw;
    font-family: 700;
    margin-top: 4vw;
    text-align: center;
  }
  .underFv ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 66.93vw;
    margin: 24.8vw auto 0;
  }
  .underFv li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #707070;
  }
  .underFv li:not(:first-of-type) {
    margin-top: 5.33333vw;
  }
  .underFv li::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-image: url(../img/common/underFv_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 2.13vw;
    height: 4.13vw;
    pointer-events: none;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  }
  .underFv li:hover::before {
    top: 40%;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  }
  .underFv li a {
    display: inline-block;
    font-size: 5.33333vw;
    font-family: lato, sans-serif;
    letter-spacing: 0.03em;
    font-weight: 500;
    color: #333;
    width: 100%;
    padding-bottom: 3.33333vw;
  }
  .underFv li a span {
    font-size: 3.466666vw;
    font-weight: 400;
    margin-top: 2.4vw;
  }

  /* ----- heading -----*/
  .heading {
    font-size: 9.06vw;
    font-family: lato, sans-serif;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.03em;
    position: relative;
  }
  .heading::before {
    content: "";
    position: absolute;
    top: -7.4vw;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    background-color: #333;
    width: 10.9vw;
    height: 1px;
  }
  .heading span {
    font-size: 3.733333vw;
    font-weight: 400;
    display: block;
    margin-top: 2.4vw;
    color: #c72355;
    font-family: "Noto Sans JP", sans-serif;
  }
  .heading + p {
    font-size: 5.33333vw;
    line-height: 1.5;
    font-weight: 700;
    color: #c72355;
    display: flex;
    justify-content: center;
    margin-top: 11.3vw;
    padding: 0 4.1vw;
  }
}