html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}

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

body {
  margin-right: auto;
  margin-left: auto;
  background: #fffafa;
  color: #333333;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2;
  font-feature-settings: "palt";
}

@media (min-width: 768px) {
  body {
   width: 750px;
   margin: 0 auto;
    max-width: 100%;
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  body {
    max-width: 100%;
    font-size: calc(26 / 750 * 100vw);
  }
}

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

a {
  text-decoration: none;
}

main {
  margin-right: auto;
  margin-left: auto;
  width: 750px;
  /*padding-bottom: 190px;*/
  overflow: hidden;
  box-shadow: 6px 0 5px -5px rgba(28, 10, 0, .1), -6px 0 5px -5px rgba(28, 10, 0, .1);
}

@media (max-width: 767px) {
  main {
    max-width: 100%;
    padding-bottom: calc(190 / 750 * 100vw);
  }
}

.container {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    /*width: 1200px;*/
  }
}

@media (max-width: 767px) {
  .container {
    /*width: calc(100% - (10px * 2));*/
  }
}

.clearfix * {
  zoom: 1;
}

.clearfix::before, .clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.hide {
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

.u-en {
  font-family: "Montserrat", sans-serif;
}

.u-serif {
  font-family: "Noto Serif JP", serif;
}

.u-bold {
  font-weight: bold;
}

.u-sup {
  font-size: 50%;
  vertical-align: top;
  position: relative;
  top: -0.01em;
}

.u-note {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .u-note {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .u-note {
    display: block;
  }
}
.notes{
  font-size: 18px;
  width: 670px;
    margin: 0 auto;
    line-height: 1.5em;
    letter-spacing: 0.03em;
    text-indent: -2em;
    padding-left: 2em;
}
@media screen and (max-width: 768px) {
  .notes{
    font-size: calc(17/750 * 100vw);
    width: calc(670/750 * 100vw);
  }
}
.txt{
  font-size: 32px;
  text-align: center;
  line-height: 1.7em;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .txt{
    font-size:calc(32/750 * 100vw);
  }
}

.pr{
  position: relative;
}
.frame{
  position: absolute;
}

/*----------------------------
scroll_up
----------------------------*/
.s-up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.s-up.on {
  transform: translateY(0);
  opacity: 1.0;
}


/* ==========================================================
  makeup
=====*/
.makeup {
  display: block;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 768px) {
  .makeup {
    padding: 180px 0 80px;
  }
}

@media (max-width: 767px) {
  .makeup {
    padding: calc(100 / 750 * 100vw) 0 calc(80 / 750 * 100vw);
  }
}

.makeup-ttl {
  width: 460px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .makeup-ttl {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .makeup-ttl {
    margin-bottom: calc(20 / 750 * 100vw);
    width: calc(460/750 * 100vw);
  }
}

.makeup-ttl .u-en {
  display: block;
}

@media (min-width: 768px) {
  .makeup-ttl .u-en {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  .makeup-ttl .u-en {
    font-size: calc(60 / 750 * 100vw);
  }
}

.makeup-txt {
  display: block;
}

@media (min-width: 768px) {
  .makeup-txt {
    margin-bottom: 30px;
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .makeup-txt {
    margin-bottom: calc(30 / 750 * 100vw);
  }
}

.makeup #YMK-module {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .makeup #YMK-module {
    width: 360px;
  }
}

@media (max-width: 767px) {
  .makeup #YMK-module {
    width: calc(670 / 750 * 100vw);
  }
}

.makeup #YMK-module * {
  width: 100% !important;
}

.makeup .YMK-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .makeup .YMK-list {
    width: 360px;
  }
}

@media (max-width: 767px) {
  .makeup .YMK-list {
    width: calc(670 / 750 * 100vw);
  }
}

.makeup .YMK-list button {
  width: 50%;
  background: #000;
  color: #fff;
  font-size: 14px;
  display: block;
  height: 70px;
}
/* ==========================================================
  mv
=====*/
h1{
  opacity: 0;
}

.mv {
  position: relative;
  background: url(../img/mv_bg.png) top center/100% auto no-repeat;
  padding: 0;
  width: 100%;
  height: 1437px;
}
@media screen and (max-width: 768px) {
  .mv{
    height: calc(1437/750 * 100vw);
  }
}

.mv-parts{
  position: absolute;
}

.header-parts{
  top: 0;
  left: 19px;
  width: 162px;
}
@media screen and (max-width: 768px) {
  .header-parts{
    left: calc(19/750 * 100vw);
  width: calc(162/750 * 100vw);
}
}

.mv-ttl-parts-01{
  top: 112px;
  left: 25px;
  width: 724px;
}
@media screen and (max-width: 768px) {
 .mv-ttl-parts-01{
  top:calc(112/750 * 100vw);
  left: calc(25/750 * 100vw);
  width: calc(724/750 * 100vw);
} 
}

.mv-parts-01{
  left: 42px;
  bottom: 358px;
  width: 263px;
}
@media screen and (max-width: 768px) {
  .mv-parts-01{
    left: calc(42/750 * 100vw);
   bottom: calc(358/750 * 100vw);
   width: calc(263/750 * 100vw);
  }
}
.mv-parts-02{
  left: 272px;
  bottom: 358px;
    width: 264px;
}
@media screen and (max-width: 768px) {
  .mv-parts-02{
    left: calc(272/750 * 100vw);
    bottom: calc(358/750 * 100vw);
    width: calc(264/750 * 100vw);
  }
}
.mv-parts-03{
  left: 504px;
  bottom: 358px;
   width: 251px;
}
@media screen and (max-width: 768px) {
  .mv-parts-03{
    left: calc(504/750 * 100vw);
   bottom: calc(358/750 * 100vw);
   width: calc(251/750 * 100vw);
  }
}

.mv-parts-04{
  top: 1094px;
  width: 670px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
.mv-parts-04{
  top: calc(1094/750 * 100vw);
  width: calc(670/750 * 100vw);
}
}

.mv-notes-box{
   width: 670px;
   bottom: 27px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
.mv-notes-box{
  bottom: calc(27/750 * 100vw);
  width: calc(670/750 * 100vw);
}
}


/* ==========================================================
cv
=====*/
.cv-area{
  position: relative;
  width: 750px;
  margin:0 auto;
  background: url(../img/cta_bg.png) top center/100% auto no-repeat;
  height: 1485px;
  padding-top: 50px;
}
@media screen and (max-width: 768px) {
  .cv-area{
    width:calc(750/750 * 100vw);
    margin:0 auto;
    background: url(../img/cta_bg.png) top center/calc(750 / 750 * 100vw) auto no-repeat;
    height:calc(1485/750 * 100vw);
    padding-top: calc(50/750 * 100vw);
  }
}

.cv-area-ttl{
  width: 695px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .cv-area-ttl{
  width: calc(695/750 * 100vw);
}
}

.cv-area-img-01{
 position: absolute;
 right: 0;
 left: 0;
 margin: 0 auto;
  width: 710px;
}
@media screen and (max-width: 768px) {
  .cv-area-img-01{
  width: calc(710/750 * 100vw);
   position: absolute;
 right: 0;
 left: 0;
 margin: 0 auto;
}
}
.cv-area-img-02{
  position: absolute;
  width: 632px;
 left: 60px;
 top: 322px;
         z-index: 1;
}
@media screen and (max-width: 768px) {
  .cv-area-img-02{
  width: calc(632/750 * 100vw);
  left: calc(60/750 * 100vw);
  top: calc(322/750 * 100vw);
}
}
.cv-area-img-03{
  position: absolute;
  bottom: 643px;
  width: 149px;
  right: 7px;
}
@media screen and (max-width: 768px) {
  .cv-area-img-03{
  bottom: calc(643/750 * 100vw);
  width: calc(149/750 * 100vw);
  right: calc(7/750 * 100vw); 
}
}
.cv-area-img-04{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: 522px;
  width: 648px;
}
@media screen and (max-width: 768px) {
  .cv-area-img-04{
  bottom: calc(522/750 * 100vw);
  width: calc(648/750 * 100vw);
}
}
.cv-area-img-05{
  position: absolute;
  left: 291px;
  margin: 0 auto;
  top: 332px;
  width: 196px;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .cv-area-img-05{
  top: calc(332/750 * 100vw);
  width: calc(196/750 * 100vw);
  left: calc(291/750 * 100vw);
}
}
.cv-btn{
margin: 0 auto;
  width: 677px;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .cv-btn{
    width: calc(677/750 * 100vw);
    margin: 0 auto;
  }
}
.cv-area .cv-btn{
  position: absolute;
right: 0;
left: 0;
  bottom: 320px;
}
@media screen and (max-width: 768px) {
  .cv-area .cv-btn{
    bottom: calc(320/750 * 100vw);
  }
}

.cv-area .notes-box{
bottom: 140px;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .cv-area .notes-box{
bottom: calc(140/750 * 100vw);
}
}

/* ==========================================================
trouble
=====*/
.trouble{
background: url(../img/troble_bg.png) top center/100% auto no-repeat;
height: 2545px;
background-size: cover;
padding-top: 80px;
}
@media screen and (max-width: 768px) {
  .trouble{
    height:calc(2545/750 * 100vw);
    padding-top: calc(80/750 * 100vw);
    }
}
.trouble-img-01{
width: 577px;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .trouble-img-01{
    width:calc(577/750 * 100vw);
    }
}
.trouble-img-02{
  width: 536px;
  top: 323px;
  right: 32px;
      z-index: 0;
  }
  @media screen and (max-width: 768px) {
    .trouble-img-02{
      width: calc(536/750 * 100vw);
      top:calc(323/750 * 100vw);
      right: calc(32/750 * 100vw);
      }
  }
  .trouble-img-03{
    width: 611px;
    top: 509px;
    left: 48px;
        z-index: 1;
    }
    @media screen and (max-width: 768px) {
      .trouble-img-03{
        width: calc(611/750 * 100vw);
        top: calc(509/750 * 100vw);
        left: calc(48/750 * 100vw);
        }
    }
    .trouble-img-04{
      width: 537px;
      top: 739px;
     right: 80px;
      z-index: 2;
      }
      @media screen and (max-width: 768px) {
        .trouble-img-04{
          width: calc(537/750 * 100vw);
          top: calc(739/750 * 100vw);
          right: calc(80/750 * 100vw);
          }
      }
      .trouble-img-05{
        width: 711px;
       bottom: 569px;
       position: absolute;
       right: 0;
       left: 0;
       margin: 0 auto;
        }
        @media screen and (max-width: 768px) {
          .trouble-img-05{
            width: calc(711/750 * 100vw);
            bottom: calc(569/750 * 100vw);
           
            }
        }

/* ==========================================================
double
=====*/
.double{
  background: url(../img/double_bg.png) top center/100% auto no-repeat;
  height: 2111px;
  padding-top: 52px;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .double{
    height: calc(2111/750 * 100vw);
    padding-top: calc(52/750 * 100vw);
  }
}
.double-img-01{
  top: 336px;
  right: 0;
  width: 716px;
}
@media screen and (max-width: 768px) {
  .double-img-01{
  top: calc(336/750 * 100vw);
  right: 0;
  width: calc(716/750 * 100vw);
}
}
.double-img-02{
  bottom: 306px;
  right: 139px;
  width: 226px;
}
@media screen and (max-width: 768px) {
  .double-img-02{
  bottom: calc(306/750 * 100vw);
 right: calc(139/750 * 100vw);
  width: calc(226/750 * 100vw);
}
}

.double .notes-box{
  position: absolute;
   width: 670px;
   bottom: 65px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
.double .notes-box{
  bottom: calc(65/750 * 100vw);
  width: calc(670/750 * 100vw);
}
}

/* ==========================================================
effect
=====*/

.effect{
  background: url(../img/effect_bg.png) top center/100% auto no-repeat;
  height: 2727px;
  padding-top: 72px;
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 768px) {
  .effect{
    height: calc(2727/750 * 100vw);
    padding-top: calc(72/750 * 100vw);
  }
}

.effect-before,
.effect-after{
    width: 590px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .effect-before,
.effect-after{
    width: calc(590/750 * 100vw);
}
}

.effect-ttl{
  background-color: #616161;
  width: 400px;
  display: block;
  margin: 0 auto;
  border-radius: 100px;
  padding: 10px 0;
  text-align: center;
  color: #ffffff;
  font-size: 38px;
  font-weight:500;
  line-height: 1;
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .effect-ttl{
  width: calc(400/750 * 100vw);
  border-radius: calc(100/750 * 100vw);
  padding: calc(10/750 * 100vw) 0;
  font-size:  calc(38/750 * 100vw);
  margin-bottom:   calc(32/750 * 100vw);
}
}
.effect-after .effect-img,
.effect-before .effect-img{
   margin-bottom: 28px;
}
@media screen and (max-width: 768px) {
 .effect-after .effect-img,
  .effect-before .effect-img{
   margin-bottom: calc(28/750 * 100vw);
}
}
.effect-txt{
  font-size: 26px;
  line-height: 1.5em;
}
@media screen and (max-width: 768px) {
.effect-txt{
  font-size: calc(26/750 * 100vw);
}
}
.effect-before{
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .effect-before{
  margin-bottom: calc(60/750 * 100vw);
}
}
.effect-after .effect-ttl{
  background-color: #1da7ef;
}
.effect-img-02{
  width: 616px;
  bottom: 796px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .effect-img-02{
  width: calc(616 / 750 * 100vw);
  bottom: calc(796 / 750 * 100vw);
}
}
.effect .notes-box{
  position: absolute;
   width: 670px;
   bottom: 82px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
.effect .notes-box{
  bottom: calc(82/750 * 100vw);
  width: calc(670/750 * 100vw);
}
}



/* ==========================================================
care
=====*/
.care{
  background: url(../img/care_bg.png) top center/100% auto no-repeat;
  height: 3830px;
  padding-top: 275px;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .care{
    height: calc(3830/750 * 100vw);
    padding-top: calc(275/750 * 100vw);
  }
}
.care-img-01{
  width: 607px;
  margin: 0 auto;
  margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .care-img-01{
  width:calc(607/750 * 100vw);
  margin-bottom: calc(48/750 * 100vw);
}
}
.cri-liveact-player-embed{
  width: 590px;
  height: 590px;
  margin-left: 80px;
}
@media screen and (max-width: 768px) {
  .cri-liveact-player-embed{
  width: calc(590/750 * 100vw);
  height: calc(590/750 * 100vw);
  margin-left:  calc(80/750 * 100vw);
}
}
.care-img-02{
  width: 506px;
  margin: 0 auto;
  margin-bottom: 29px;
  margin-top: 89px;
}
@media screen and (max-width: 768px) {
  .care-img-02{
  width:calc(506/750 * 100vw);
  margin-bottom: calc(29/750 * 100vw);
  margin-top:calc(89/750 * 100vw);
}
}
.care-img-03{
  width: 666px;
  margin: 0 auto;
  margin-bottom: 13px;
  margin-top: 546px;
}
@media screen and (max-width: 768px) {
  .care-img-03{
  width:calc(666/750 * 100vw);
  margin-bottom: calc(13/750 * 100vw);
  margin-top: calc(546/750 * 100vw);
}
}
.care-img-04{
  width: 343px;
  margin-left: 388px;
  margin-top: 90px;
}
@media screen and (max-width: 768px) {
  .care-img-04{
  width: calc(343/750 * 100vw);
  margin-left: calc(388/750 * 100vw);
  margin-top: calc(90/750 * 100vw);
}
}

/* ==========================================================
user
=====*/
.user{
  background: url(../img/user_bg.png) top center/100% auto no-repeat;
  height: 1299px;
  padding-top: 80px;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .user{
    height: calc(1299/750 * 100vw);
    padding-top: calc(80/750 * 100vw);
  }
}
.user-img-01{
  width: 528px;
margin: 0 auto;
margin-bottom: 47px;
}
@media screen and (max-width: 768px) {
  .user-img-01{
  width: calc(528/750 * 100vw);
margin-bottom:calc(47/750 * 100vw);
}
}
.user-img-02{
  width: 670px;
margin: 0 auto;
margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .user-img-02{
 width: calc(670/750 * 100vw);
margin-bottom: calc(15/750 * 100vw);
}
}
.user .notes{
  text-align: center;
}


/* ==========================================================
true
=====*/
.true{
  background: url(../img/true_bg.png) top center/100% auto no-repeat;
  height: 2405px;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .true{
    height:calc(2405/750 * 100vw);
  }
}
.true-img-01{
  top: 702px;
  left: 38px;
  width: 391px;
}
@media screen and (max-width: 768px) {
  .true-img-01{
  top: calc(702/750 * 100vw);
  left:calc(38/750 * 100vw);
  width: calc(391/750 * 100vw);
}
}
.true-img-02{
  top: 791px;
  right: 42px;
  width: 423px;
}
@media screen and (max-width: 768px) {
  .true-img-02{
  top: calc(791/750 * 100vw);
  right: calc(42/750 * 100vw);
  width:  calc(423/750 * 100vw);
}
}
.true-img-03{
  top: 880px;
  left: 38px;
  width: 483px;
}
@media screen and (max-width: 768px) {
  .true-img-03{
  top:calc(880/750 * 100vw);
  left:calc(38/750 * 100vw);
  width:calc(483/750 * 100vw);
}
}
.true-img-04{
    bottom: 11px;
    width: 273px;
    left: 290px;
}
@media screen and (max-width: 768px) {
.true-img-04{
    bottom: calc(11/750 * 100vw);
    width: calc(273/750 * 100vw);
    left: calc(290/750 * 100vw);
}
}
.true .cri-liveact-player-embed{
  margin-top: 988px;
}
@media screen and (max-width: 768px) {
  .true .cri-liveact-player-embed{
  margin-top:calc(988/750 * 100vw);
}
}


/* ==========================================================
point
=====*/
.point{
  background: url(../img/point_bg.png) top center/100% auto no-repeat;
  height: 6093px;
  padding-top: 165px;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .point{
    height:calc(6093/750 * 100vw);
    padding-top: calc(165/750 * 100vw);
  }
}
.point-img-01{
  width: 559px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .point-img-01{
  width: calc(559/750 * 100vw);
}
}
.point-img-02{
  width: 579px;
  margin: 0 auto;
  margin-top: 184px;
  margin-bottom: 269px;
}
@media screen and (max-width: 768px) {
  .point-img-02{
  width: calc(579/750 * 100vw);
  margin-top:calc(184/750 * 100vw);
  margin-bottom: calc(269/750 * 100vw);
}
}
.point-img-03{
   margin: 0 auto;
  margin-top: 1731px;
width: 632px;
}
@media screen and (max-width: 768px) {
.point-img-03{
  margin-top: calc(1731/750 * 100vw);
width: calc(632/750 * 100vw);
}
}
.point-img-04{
  margin-top: 249px;
width: 316px;
margin-left: 390px;
}
@media screen and (max-width: 768px) {
  .point-img-04{
  margin-top:  calc(249/750 * 100vw);
width:  calc(316/750 * 100vw);
margin-left:  calc(390/750 * 100vw);
}
}
.point-img-05{
  margin-top: 185px;
width: 288px;
margin-left: 43px;
}
@media screen and (max-width: 768px) {
  .point-img-05{
  margin-top: calc(185/750 * 100vw);
width: calc(288/750 * 100vw);
margin-left: calc(43/750 * 100vw);
}
}
.point-img-06{
  margin-top: 200px;
width: 263px;
margin-left: 390px;
}
@media screen and (max-width: 768px) {
  .point-img-06{
  margin-top: calc(200/750 * 100vw);
width: calc(263/750 * 100vw);
margin-left:calc(390/750 * 100vw);
}
}
.point-img-07{
  margin-top: 173px;
width: 250px;
margin-left: 43px;
}
@media screen and (max-width: 768px) {
  .point-img-07{
  margin-top: calc(173/750 * 100vw);
width:calc(250/750 * 100vw);
margin-left: calc(43/750 * 100vw);
}
}
.point-img-08{
  margin-top: 215px;
width: 267px;
margin-left: 390px;
}
@media screen and (max-width: 768px) {
  .point-img-08{
  margin-top:calc(215/750 * 100vw);
width:calc(267/750 * 100vw);
margin-left: calc(390/750 * 100vw);
}
}
.point-img-09{
  margin: 0 auto;
  margin-top: 343px;
width: 418px;
}
@media screen and (max-width: 768px) {
  .point-img-09{
  margin-top: calc(343/750 * 100vw);
width: calc(418/750 * 100vw);
}
}
.point .effect-img{
  width: 128px;
}
@media screen and (max-width: 768px) {
 .point .effect-img{
  width:calc(128/750 * 100vw);
}
}
.effect-01{
      top: 993px;
    left: 380px;
}
@media screen and (max-width: 768px) {
  .effect-01{
      top:calc(993/750 * 100vw);
    left: calc(380/750 * 100vw);
}
}
.effect-02{
      top: 1062px;
    left: 514px;
}
@media screen and (max-width: 768px) {
  .effect-02{
      top: calc(1062/750 * 100vw);
    left: calc(514/750 * 100vw);
}
}
.effect-03{
      top: 1185px;
    left: 592px;
}
@media screen and (max-width: 768px) {
  .effect-03{
      top: calc(1185/750 * 100vw);
    left:  calc(592/750 * 100vw);
}
}
.effect-04{
      top: 1332px;
    left: 590px;
}
@media screen and (max-width: 768px) {
  .effect-04{
      top: calc(1332/750 * 100vw);
    left: calc(590/750 * 100vw);
}
}
.effect-05{
      top: 1471px;
    left: 548px;
}
@media screen and (max-width: 768px) {
  .effect-05{
      top: calc(1471/750 * 100vw);
    left: calc(548/750 * 100vw);
}
}
.effect-06{
      top: 1582px;
    left: 454px;
}
@media screen and (max-width: 768px) {
  .effect-06{
      top:calc(1582/750 * 100vw);
    left:calc(454/750 * 100vw);
}
}
.effect-07{
      top: 1610px;
    left: 311px;
}
@media screen and (max-width: 768px) {
  .effect-07{
      top: calc(1610/750 * 100vw);
    left:calc(311/750 * 100vw);
}
}
.effect-08{
      top: 1582px;
    left: 167px;
}
@media screen and (max-width: 768px) {
  .effect-08{
      top: calc(1582/750 * 100vw);
    left: calc(167/750 * 100vw);
}
}
.effect-09{
      top: 1471px;
    left: 69px;
}
@media screen and (max-width: 768px) {
  .effect-09{
      top: calc(1471/750 * 100vw);
    left: calc(69/750 * 100vw)
}
}
.effect-10{
      top: 1332px;
    left: 29px;
}
@media screen and (max-width: 768px) {
  .effect-10{
      top:calc(1332/750 * 100vw);
    left: calc(29/750 * 100vw);
}
}
.effect-11{
      top: 1185px;
    left: 28px;
}
@media screen and (max-width: 768px) {
  .effect-11{
      top: calc(1185/750 * 100vw);
    left: calc(28/750 * 100vw);
}
}
.effect-12{
      top: 1062px;
    left: 113px;
}
@media screen and (max-width: 768px) {
  .effect-12{
      top:calc(1062/750 * 100vw);
    left: calc(113/750 * 100vw);
}
}
.effect-13{
      top: 993px;
    left: 240px;
}
@media screen and (max-width: 768px) {
  .effect-13{
      top: calc(993/750 * 100vw);
    left:calc(240/750 * 100vw);
}
}

.point-effect-img{
  width: 192px;
}
@media screen and (max-width: 768px) {
  .point-effect-img{
  width: calc(192/750 * 100vw);
}
}
.point-img-10{
bottom: 909px;
left: 160px;
}
.point-img-11{
bottom: 909px;
left: 394px;
}
.point-img-12{
bottom: 707px;
left: 53px;
}
.point-img-13{
bottom: 707px;
left: 272px;
}
.point-img-14{
bottom: 707px;
left: 504px;
}
.point-img-15{
bottom: 517px;
left: 161px;
}
.point-img-16{
bottom: 517px;
left: 391px;
}
@media screen and (max-width: 768px) {
  .point-img-10 {
  bottom: calc(909 / 750 * 100vw);
  left: calc(160 / 750 * 100vw);
}

.point-img-11 {
  bottom: calc(909 / 750 * 100vw);
  left: calc(394 / 750 * 100vw);
}

.point-img-12 {
  bottom: calc(707 / 750 * 100vw);
  left: calc(53 / 750 * 100vw);
}

.point-img-13 {
  bottom: calc(707 / 750 * 100vw);
  left: calc(272 / 750 * 100vw);
}

.point-img-14 {
  bottom: calc(707 / 750 * 100vw);
  left: calc(504 / 750 * 100vw);
}

.point-img-15 {
  bottom: calc(517 / 750 * 100vw);
  left: calc(161 / 750 * 100vw);
}

.point-img-16 {
  bottom: calc(517 / 750 * 100vw);
  left: calc(391 / 750 * 100vw);
}
}



/* ==========================================================
voice
=====*/
.voice{
  background: url(../img/voice_bg.png) top center/100% auto no-repeat;
  height: 2863px;
  padding-top: 40px;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .voice{
    height:calc(2863/750 * 100vw);
    padding-top: calc(40/750 * 100vw);
  }
}
.voice-img-01{
  width: 507px;
  margin: 0 auto;
  margin-bottom: 66px;
}
.voice-img-02,
.voice-img-04{
  width: 691px;
  margin-right: 0;
  margin-left: auto;
  margin-bottom: 29px;
}
.voice-img-03{
  width: 691px;
 margin-left: 0;
 margin-right: auto;
  margin-bottom: 30px;
}
.voice .notes{
  text-align: center;
}
@media screen and (max-width: 768px) {
  .voice-img-01 {
  width: calc(507 / 750 * 100vw);
  margin: 0 auto;
  margin-bottom: calc(66 / 750 * 100vw);
}

.voice-img-02,
.voice-img-04 {
  width: calc(691 / 750 * 100vw);
  margin-right: 0;
  margin-left: auto;
  margin-bottom: calc(29 / 750 * 100vw);
}

.voice-img-03 {
  width: calc(691 / 750 * 100vw);
  margin-left: 0;
  margin-right: auto;
  margin-bottom: calc(30 / 750 * 100vw);
}
}


.voice .notes {
  text-align: center;
}


.floating {
  background: #ffc8f0;
  padding: 100px 0 100px 0;
  position: fixed;
  bottom: 0;
  width: 750px;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .floating {
    padding: calc(100/750 * 100vw) 0 calc(100/750 * 100vw) 0;
    width: calc(750/750 * 100vw);
  }
}

.floating.show {
  opacity: 1;
}

.floating .cv-btn{
width: 670px;
height: auto;
}
@media screen and (max-width: 768px) {
  .floating .cv-btn{
    width: calc(670/750 * 100vw);
    }
}
.floating-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:710px;
  margin:0 auto;
}
@media screen and (max-width: 768px) {
  .floating-inner{
    width:calc(710/750 * 100vw);
  }
}
sup{
  font-size: 0.5em;
  vertical-align: top;
}
@media screen and (max-width: 768px) {
  sup{
    font-size: 0.5em;
    vertical-align: top;
    position: relative;
    top:calc(-5/750 * 100vw);
  }
}

/* ==========================================================
animation
=====*/
/*--------------------------------------------------
スクロールで出現
--------------------------------------------------*/
.sa {
  opacity: 0;
  transition: all .8s ease;
  }
  .sa.show {
  opacity: 1;
  transform: none;
  }
  .sa--lr {
  transform: translate(-100px, 0);
  }
  .sa--rl {
  transform: translate(100px, 0);
  }
  .sa--up {
  transform: translate(0, 50px);
  }
  .sa--down {
  transform: translate(0, -100px);
  }
  .sa--scaleUp {
  transform: scale(.8);
  }

/*--------------------------------------------------
どきどきボタン
--------------------------------------------------*/
.dokidoki{   
animation-name:dokidoki;	/* アニメーション名の指定 */
animation-delay:0s;		/* アニメーションの開始時間指定 */
animation-duration: 3s;	/* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out;
/* アニメーションの動き（徐々に早く徐々に遅く）*/
animation-iteration-count: infinite; /* アニメーションをループさせる */
}
@keyframes dokidoki {
0% {
transform: scale(1);
}
40% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
60% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

/* 初期状態: 非表示 */
.photo {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* スムーズに遷移 */
}

/* show クラスが付与されるとアニメーションが実行される */
.photo.show {
  opacity: 1;
}
/* zoom アニメーション */
.photo.zoom.show {
  animation: zoomIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 光彩 */
.shine {
  margin: 0 auto 0;
  position: relative;
  overflow: hidden; /*拡大してはみ出る要素を隠す*/
}

.shine span.mask {
  position: relative; /*キラッの基点となる位置を定義*/
  display: block;
  line-height: 0; /*行の高さを0にする*/
  overflow: hidden; /*拡大してはみ出る要素を隠す*/
}

.shine span.mask::before {
  position: absolute;
  content: "";
  width: 50%; /*キラッの横幅*/
  height: 100%; /*キラッの縦幅*/
  top: 0; /*.shine span.maskのトップ0を基点*/
  left: -75%; /*画面の見えていない左から右へ移動するスタート地点*/
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
          transform: skewX(-25deg); /*背景白透過を斜めに*/
  z-index: 2;
}

@-webkit-keyframes shine {
  100% {
    left: 125%; /*画面の見えていない左から右へ移動する終了地点*/
  }
}

@keyframes shine {
  100% {
    left: 125%; /*画面の見えていない左から右へ移動する終了地点*/
  }
}
.shine span.mask::before {
  -webkit-animation: shine 1.4s ease-in infinite;
          animation: shine 1.4s ease-in infinite; /*アニメーションの名前と速度を定義*/
}