@charset "UTF-8";
/* 共通 */
body {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  font-family: 'Zen Maru Gothic', sans-serif;
  max-width: 600px;
  margin: 0 auto;
  color: #333;
}

video{
  width: 100%;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.m0auto {
  margin: 0 auto;
}

.tac {
  text-align: center;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.fv img {
  width: 100%;
}

.fv_wrapper {
  position: relative;
  overflow: hidden;
}

.fv_wrapper>video{
  transform: translateX(-30%);
  width: auto;
  height: 70vh;
  height: 70dvh;
  vertical-align: bottom;
}


.fv_title {
  position: absolute;
  bottom: 30%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

img.fv_title {
  width: 90%;
}

@media (min-width: 400px){
  .fv_wrapper>video{
    transform: translateX(-25%);
   }
   img.fv_title {
    width: 80%;
  }
  }

.fv_circle {
  position: absolute;
  top: 5%;
  right: min(5vw, 30px);
}

img.fv_circle {
  width: 23%;
}


.fv__scroll{
position:absolute;
bottom:10%;
right:50%;
animation: arrow 1s ease-in-out infinite;
}

@keyframes arrow{
    0%{bottom:1%;}
    50%{bottom:3%;}
   100%{bottom:1%;}
}

.fv__scroll span{
position: absolute;
left:max(-3.667vw,-22px);
bottom:min(9vw,54px);
color: #eee;
font-size: min(2.333vw,14px);
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

.fv__scroll:before {
  content: "";
  position: absolute;
  bottom: min(8.333vw,50px);
  right: max(-1vw,-6px);
  width: min(0.333vw,2px);
  height: min(3.333vw,20px);
  background: #eee;
  transform: skewX(-31deg);
}

.fv__scroll:after{
content:"";
position: absolute;
bottom:min(8.333vw,50px);
right:0;
width:min(0.333vw,2px);
height: min(8.333vw,50px);
background:#eee;
}

.zoomIn {
  -webkit-animation: zoomIn 1s ease 0s 1 normal;
          animation: zoomIn 1s ease 0s 1 normal;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.c-marker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-marker {
  font-size: min(6.667vw, 40px);
  font-weight: 900;
  line-height: 2;
  display: inline-block;
  background-color: rgb(209, 247, 43);
  font-weight: 900;
  padding: 2px 8px;
  position: relative;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}

.c-marker.__anima {
  -webkit-animation: anima_4 0.4s linear forwards;
          animation: anima_4 0.4s linear forwards;
}

@-webkit-keyframes anima_4 {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
}

@keyframes anima_4 {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
}

.intro{
  position: relative;
  background-color: #ff99b1;
  color: #fff;
}

.intro-box span {
  display: inline-block;
  margin: min(9vw, 54px) 0;
}

.intro_title{
  width: 70%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-top: min(8.333vw,50px);
}

.intro__detail-wrapper{
  position:absolute;
  width: 96%;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  padding-top: min(23.333vw,140px);
}

.intro__left{
  position: relative;
  width: 42%;
  height: 100%;
  margin-right: 3%;
}

.intro__detail{
  text-align: center;
  position: absolute;
  width: 90%;
  left: 50%;
  top: 55%;
  color: #333;
  transform: translate(-50%,-50%);
}

.intro__icon{
  width: 30%;
  margin: 0 auto;
}

.intro__case-title {
  font-size: min(4vw,30px);
  font-weight: 900;
  padding: min(2.667vw,16px) 0 min(1.333vw,8px);
}

.intro__case-subtitle {
  font-size: min(2.4vw,14px);
}

.intro__btn{
  margin-top: min(2vw,12px);
}

.intro__right{
  font-size: min(4vw,24px);
  font-weight: 500;
  line-height: 1.6;
}

.section__title{
  width: 80%;
  margin: 0 auto;
  padding-top: min(8.333vw,50px);
}

.how-number,
.how-subtitle {
  font-size: min(6.667vw, 40px);
  font-weight: 900;
}

.how-number {
  color: #E97F7F;
  margin-right: min(3.333vw, 20px);
}

.how-subtitle {
  margin-bottom: min(5vw, 30px);
}

.how-summary {
  font-weight: 700;
  font-size: min(4.667vw, 28px);
}

.how-box_wrapper {
  padding: min(6.667vw, 40px) 16px 0;
  background: #fff;
  border-radius: min(3.333vw, 20px);
}

.how-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: min(6.667vw, 40px) 0;
  width: 94%;
  margin: 0 auto;
}

.how-box:last-of-type{
  padding-bottom: 0;
}

.how-box:after {
  position: absolute;
  content: "";
  width: min(80vw, 480px);
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 5px;
  background-image: linear-gradient(to right, #ff99b1, #ff99b1 10px, transparent 10px, transparent 8px);
  background-size: min(5vw, 30px) 5px;
  background-position: left bottom;
  background-repeat: repeat-x;
}

.how-last{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: min(6.667vw, 40px) 0;
  width: 94%;
  margin: 0 auto;
}


.how-box:first-of-type {
  padding-top: 0;
}

.how_01 > img {
  position: absolute;
  right: min(1.667vw, 10px);
  top: max(-3vw, -20px);
  width: 13%;
  -webkit-animation: ugoki 1s linear infinite alternate;
          animation: ugoki 1s linear infinite alternate;
}

@-webkit-keyframes ugoki {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ugoki {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

.how_02 > img {
  position: absolute;
  width: 20%;
  right: max(-0.833vw,-5px);
  top: min(1.667vw,10px);
  -webkit-animation: shake 2s infinite;
          animation: shake 2s infinite;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}

@-webkit-keyframes shake {
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}

@keyframes shake {
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
.how_03 > img {
  position: absolute;
  width: 23%;
  right: max(-1.667vw, -10px);
  top: 0px;
  -webkit-animation: hurueru 0.1s infinite;
          animation: hurueru 0.1s infinite;
}

@-webkit-keyframes hurueru {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(2px, 2px) rotateZ(1deg);
            transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 2px) rotateZ(0deg);
            transform: translate(0px, 2px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(2px, 0px) rotateZ(-1deg);
            transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}

@keyframes hurueru {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(2px, 2px) rotateZ(1deg);
            transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 2px) rotateZ(0deg);
            transform: translate(0px, 2px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(2px, 0px) rotateZ(-1deg);
            transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}

.how__mock{
  width: 50%;
  margin: 0 auto;
  margin-top: 3%;
}

.how__mock.how__video{
  width: 96%;
}

.how-last .how__video{
  width: 60%;
  margin: 0 auto;
  margin-top: 8%;
}

.women__img-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 94%;
  margin: 5% auto 0;
  padding-bottom: 8%;
}

.women{
  background-image: url(../img/women/women_bg.webp);
}

.women__img{
  width: 48%;
  margin: 0 auto;
  padding-bottom: 3%;
}

/* closing */
.closing-box {
  width: 100%;
  margin: 0 auto;
  padding: min(8.333vw,50px) 0;
  text-align: center;
}

.closing-cc {
  font-size: min(3.733vw, 28px);
  color: #ff99b1;
  font-weight: 500;
}

.closing-item_detail {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: min(5vw, 38px) 0 0;
}

.closing-item_left {
  width: 20%;
  margin-right: 3%;
}

.closing-item_right {
  width: 50%;
  text-align: left;
}

.closing-item_right p {
  font-size: min(3.2vw, 24px);
  color: #858585;
}

.closing-item_title {
  font-size: min(6vw, 48px);
  font-weight: bold;
  padding-bottom: min(2.667vw, 20px);
}

.btn {
  width: 80%;
  margin: 0 auto;
  border-radius: min(2.667vw, 20px);
}

.announce {
  padding-top: min(2.667vw, 20px);
  font-size: min(3.2vw, 20px);
}

/* footer */
footer {
  text-align: center;
  background: #ff99b1;
  color: #fff;
  padding: min(5vw, 30px) 0;
}

.promotion{
  position: relative;
}

.promotion:after{
  content: "PR";
  display: block;
  font-size: 8px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  color:#555;
  border: 1px solid #555;
  background-color: #FFF;
  padding: 1px 3px;
  border-radius: 5px;
}

.intro__btn.promotion:after{
  bottom: -8px;
}