@charset "UTF-8";
@keyframes hoverin {
  0% {
    transform: translateX(-101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoverout {
  0% {
    transform: translateY(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateY(0);
    left: 101%;
    opacity: 1; } }
@keyframes hoverin_reverse {
  0% {
    transform: translateX(101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoverout_reverse {
  0% {
    transform: translateY(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateY(0);
    left: -101%;
    opacity: 1; } }
.buruburu {
  display: inline-block;
  animation: hurueru .1s  infinite; }

@keyframes hurueru {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg); }
  25% {
    transform: translate(2px, 2px) rotateZ(1deg); }
  50% {
    transform: translate(0px, 2px) rotateZ(0deg); }
  75% {
    transform: translate(2px, 0px) rotateZ(-1deg); }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg); } }
@keyframes wave {
  0% {
    background-position: 0 0; }
  100% {
    background-position: round-decimal(6.25vw, 3) 0; } }
@media screen and (min-width: 640px) {
  @keyframes wave {
    0% {
      background-position: 0 0; }
    100% {
      background-position: 100px 0; } } 



	
}
.siteheader {
  top: 0; }

#contents {
  padding-bottom: 0;
  min-width: 1200px;
  font-size: 0;
  line-height: 1; }
  #contents .bg {
    position: relative; }
  #contents .bgwrite {
    background: url("../img/lp/bg.jpg") no-repeat center top/100% auto;
    width: 100%;
    height: 85.813vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    min-width: 1200px;
    min-height: 1254.75px; }
  #contents section {
    z-index: 100; }
  #contents .mv {
    width: 100vw;
    height: 104.563vw;
    min-width: 1200px;
    min-height: 1254.75px; }
    #contents .mv img {
      width: 100%;
      height: auto; }
  #contents .mv + .bg .bgwrite {
    margin-top: -12.5vw; }
  #contents .design_senario {
    background: url("../img/lp/design_scenario.png") no-repeat center top;
    height: 150px;
    margin: 100px auto 25px; }
  #contents .point {
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 10;
    max-width: 1600px;
    display: block;
    justify-content: center; }
    #contents .point img {
      width: 100%;
      height: auto; }
    #contents .point h2, #contents .point ul {
      display: none; }
  #contents .character {
    height: 588px;
    position: relative;
    margin-top: -138px;
    z-index: 5; }
    #contents .character h2 {
      background: url("../img/lp/character_title.png") right top no-repeat;
      width: 100%;
      height: 98px; }
    #contents .character .bg_grade {
      display: block;
      height: 588px;
      width: 1604px;
      position: absolute;
      right: 50%;
      top: 0;
      z-index: 0;
      background-image: linear-gradient(to bottom right, #8cd3f0, #fffcbc);
      margin-right: -500px; }
    #contents .character .chara {
      width: 1082px;
      height: 618px;
      position: absolute;
      right: 50%;
      bottom: 0;
      z-index: 1;
      margin-right: -212px; }
    #contents .character .text {
      position: absolute;
      z-index: 10;
      text-align: right;
      padding: 300px 60px 0 0;
      width: 43.75vw;
      left: 50%;
      top: 0;
      min-width: 660px; }
      #contents .character .text p {
        font-size: 20px;
        line-height: 41px;
        color: #0c63bb;
        margin-top: 40px; }
  #contents .uservoice {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 126px auto 0;
    /*
    .img{position: absolute; left: 50%; top: 0; z-index: 10; display: none;}
    .img01 {z-index: 100; width: vw(731); height:auto; min-width: m(731); margin-left: -86px;}
    .img02 {z-index: 50; width: vw(527); top: 255px; height:auto; min-width: m(527); margin-right: 56px; left: inherit; right: 50%;}
    */ }
    #contents .uservoice .wrap {
      padding-top: 25px; }
    #contents .uservoice h2, #contents .uservoice ul {
      display: none; }
  #contents .movie {
    padding: 95px 0 106px; }
  #contents .atelier {
    height: 540px;
    background: url("../img/lp/atelier_bg.png") no-repeat center center/cover;
    position: relative; }
    #contents .atelier .text {
      color: #fff;
      text-align: left;
      width: 690px;
      position: absolute;
      left: 50%;
      top: 136px;
      margin-left: -28px; }
      #contents .atelier .text p {
        font-size: 1.25vw;
        line-height: 2;
        white-space: nowrap;
        margin-top: 30px; }
    #contents .atelier .chara {
      display: block;
      background: url("../img/lp/atelier_illust.png") no-repeat left top/cover;
      width: 722px;
      height: 542px;
      position: absolute;
      right: 50%;
      bottom: 0;
      margin-right: 60px; }
  #contents #prod {
    background: url("../img/lp/bg.jpg") no-repeat center top;
    background-size: 100% auto;
    padding: 100px 0 120px; }
    #contents #prod h2 + p {
      font-size: 18px;
      line-height: 37px;
      text-align: center;
      margin: 32px 0 0; }



@media screen and (max-width: 1200px) {
  #contents .atelier .text p {
    font-size: 15px; } }
@media screen and (max-width: 1260px) {
  #contents .character .text {
    padding: 300px 80px 0 0; } }
@media screen and (min-width: 1600px) {
  #contents .atelier .text p {
    font-size: 20px; }
  #contents .character .bg_grade {
    width: 100.25vw;
    background-image: linear-gradient(to bottom right, #8cd3f0, #fffcbc);
    margin-right: -500px; }
  #contents .character .text {
    width: 700px; } }
#contents ul.promo {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  line-height: 1;
  font-size: 0;
  margin-top: 50px;
  margin-bottom: 0; }

#contents ul.promo h3 {
  font-size: 20px;
  line-height: 1;
  min-height: 33px;
  color: #fff;
  margin: 21px auto 0;
  max-width: 560px; }

#contents ul.promo h3 span {
  min-width: 320px;
  padding: 9px 16px 3px;
  border-radius: 32px;
  background: #0961ba;
  transform: rotate(0.05deg);
  display: inline-block; }

#contents ul.promo li {
  padding: 0;
  position: relative;
  margin: 0 20px; }

#contents ul.promo li a {
  position: relative;
  display: block;
  overflow: hidden; }

#contents ul.promo li b {
  z-index: 10;
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 19px;
  color: #d8245b;
  width: 80px;
  height: 20px;
  text-align: center;
  background: #fffba7;
  padding: 2px 0 0; }

#contents ul.promo li a img {
  transform-origin: center center;
  transition: 0.6s; }

#contents ul.promo li a:hover img {
  transition: 0.4s;
  transform: scale(1.1); }

#contents ul.promo li a::after {
  content: '';
  width: 102px;
  height: 102px;
  border: 1px solid #0961ba;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -51px 0 0 -51px;
  z-index: 10;
  border-radius: 100%; }

#contents ul.promo li a::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 19.5px 0 19.5px 34px;
  border-color: transparent transparent transparent #0961ba;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -18px 0 0 -12px;
  z-index: 20; }

h2.grade {
  background-image: url("../img/bg_gradetext.jpg");
  background-position: center center;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
  font-size: 47px; }

.ie11 h2.grade {
  background: none;
  color: #0961ba; }

.ln_parent {
  display: flex;
  justify-content: center;
  width: 1200px;
  margin: 44px auto 11px;
  align-content: center;
  align-items: center; }

.ln_parent a {
  background: #d8245b;
  color: #fff;
  height: 105px;
  width: 290px;
  font-size: 20px;
  line-height: 30px;
  position: relative;
  transform: rotate(0.05deg);
  padding: 4px; }

.ln_parent a::after {
  content: '';
  width: calc( 100% - 8px);
  height: calc( 100% - 8px);
  background: #d8245b;
  z-index: 5;
  position: absolute;
  left: 4px;
  top: 4px;
  transition: background 0.2s; }

.ln_parent a i {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc( 100% - 8px);
  height: calc( 100% - 8px);
  border: 1px solid #ffa4a4;
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 10; }

.ln_parent a:hover {
  background: #d8245b;
  color: #d8245b; }

.ln_parent a:hover::after {
  background-color: #fffba7; }

.uatablet .ln_parent a:hover {
  background: #d8245b;
  color: #fff; }

.uatablet .ln_parent a:hover::after {
  background-color: #d8245b; }

.ln_parent a::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 22px 0 22px;
  border-color: #0961ba transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: 4px;
  margin: 0 0 0 -22px;
  z-index: -1;
  opacity: 1;
  transition: bottom 0.1s; }

.ln_parent a + a {
  margin-left: 13px; }

.ln_parent a.active {
  pointer-events: none;
  background: #0961ba;
  transform: rotate(0.05deg);
  color: #fff !important; }

.ln_parent a.active i {
  border-color: #0961ba; }

.ln_parent a.active::after {
  background: #0961ba; }

.ln_parent a.active::before {
  content: '';
  bottom: -21px;
  opacity: 1;
  transition: bottom 0.3s; }

.prodwrap {
  width: 1200px;
  margin: 0 auto;
  border: 4px solid #0961ba;
  background: rgba(255, 255, 255, 0.5); }

.prod {
  padding: 73px 90px 55px;
  display: none;
  font-family: "M PLUS Rounded 1c", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }

.prod h2 {
  margin-bottom: 45px; }

.prod h3 {
  margin-bottom: 0;
  font-size: 27px;
  line-height: 1;
  font-weight: 500;
  position: relative;
    padding: 0 0 3vw 0;}
  .prod h3 span {
    display: inline-block;
    padding: 0 128px;
    position: relative; }
    .prod h3 span::before, .prod h3 span:after {
      content: '';
      width: 112px;
      height: 2px;
      background: #0961ba;
      position: absolute;
      left: 0;
      top: 50%; }
    .prod h3 span::after {
      left: inherit;
      right: 0; }
  .prod h3 i {
    display: inline-block;
    position: absolute;
    bottom: -54px; }
    .prod h3 i.pop {
      right: 50%;
      transform: translateX(-224px); }
    .prod h3 i.pop.normal1 {
      right: 25%;
    transform: translateX(-284px); }
    .prod h3 i.off {
      left: 50%;
      transform: translateX(238px);
      bottom: -68px; }

.prod.prod01 {
  display: block; }

.prod.prod05 h3 i.pop {
  bottom: -44px; }

.prod.prod05 h3 i.off {
  bottom: -58px; }

.prod p.price {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 20px;
  margin-top: 0px;
  letter-spacing: 0; }

.prod p.price.note{
  font-size: 18px; }

.prod p.price b {
  font-size: 27px;
  font-weight: bold;
  color: #d8245b; }

.prod p.price b ~ b {
  font-size: 37px; }

b {
  font-weight: bold; }

.prod h3 + p.price {
  margin-top: 10px; }

.prod p.price + h3 {
  margin-top: 34px; }

.prod figure {
  margin-top: 48px; }

.prod .btns {
  display: flex;
  padding: 65px 0 0;
  justify-content: center; }
  .prod .btns li {
    padding: 0 5px; }
    .prod .btns li a {
      width: 295px;
      height: 80px;
      background: #d8245b;
      display: block;
      margin: 0 auto;
      color: #fff;
      font-size: 20px;
      border: 4px solid #d8245b;
      padding: 25px 0 0;
      position: relative;
      transition: 0.3s;
      transform: rotate(0.05deg);
      letter-spacing: 0.01em; }
    .prod .btns li a::after {
      content: '';
      width: calc( 100% - 0px);
      height: calc( 100% - 0px);
      border: 1px solid #ffa4a4;
      position: absolute;
      left: 0;
      top: 0;
      transition: 0.4s; }
    .prod .btns li a:hover {
      background: #fffba7;
      border-color: #d8245b;
      color: #d8245b; }

.prod .btns + .btns {
  padding-top: 40px; }
  .prod .btns + .btns a {
    background-color: #0a62ba;
    border-color: #0a62ba; }
  .prod .btns + .btns a::after {
    border-color: #fff; }

@media screen and (max-width: 640px) {
  /*  	SP STYLE  *************************************************************/
  #contents {
    min-width: inherit; }
    #contents .bgwrite {
      background: url("../img/lp/bg@sp.jpg") no-repeat center top/100% auto;
      width: 100%;
      height: 128.75vw;
      min-width: inherit;
      min-height: inherit; }
    #contents section {
      z-index: 100; }
    #contents .mv {
      width: 100%;
      height: 204.688vw;
      min-width: inherit;
      min-height: inherit; }
    #contents .mv + .bg .bgwrite {
      margin-top: -31.25vw; }
    #contents .design_senario {
      background: url("../img/lp/design_scenario@sp.png") no-repeat center top/100% auto;
      height: 14.063vw;
      margin: 12.188vw 0 5.938vw; }
    #contents .point {
      height: 106.25vw;
      min-width: inherit;
      min-height: inherit; }
    #contents .character {
      height: 89.219vw;
      margin-top: 0; }
      #contents .character .chara {
        position: absolute;
        left: 0;
        top: 0;
        right: inherit;
        margin: 0;
        width: 100%;
        height: auto; }
      #contents .character .bg_grade {
        display: none; }
      #contents .character h2 {
        display: none; }
      #contents .character .text {
        padding: 26.563vw 3.125vw 0 0;
        width: 100%;
        left: 0;
        top: 0;
        min-width: inherit; }
        #contents .character .text p {
          font-size: 2.813vw;
          line-height: 5.625vw;
          margin-top: 0;
          letter-spacing: 0.075em; }
    #contents .uservoice {
      height: 169.531vw;
      min-height: inherit;
      min-width: inherit;
      margin: 12.188vw auto 0; }
      #contents .uservoice .wrap {
        padding-top: 0; }
    #contents .movie {
      padding: 15.625vw 0 0; }
      #contents .movie h2 img {
        height: 16.25vw; }
      #contents .movie ul.promo {
        margin-top: 7.813vw;
        display: block;
        padding-bottom: 7.813vw; }
      #contents .movie ul.promo h3 {
        font-size: 3.125vw;
        line-height: 1;
        min-height: 5vw;
        color: #fff;
        margin: 3.75vw auto 0;
        max-width: 560px; }
      #contents .movie ul.promo h3 span {
        min-width: 50vw;
        padding: 1.406vw 2.5vw 0.469vw;
        border-radius: 5vw; }
      #contents .movie ul.promo li {
        padding: 0 6.25vw 9.375vw;
        position: relative;
        margin: 0 0; }
      #contents .movie ul.promo li a::after {
        content: '';
        width: 15.938vw;
        height: 15.938vw;
        border: 1px solid #0961ba;
        background: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -7.969vw 0 0 -7.969vw;
        z-index: 10;
        border-radius: 100%; }
      #contents .movie ul.promo li a::before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 3.047vw 0 3.047vw 5.313vw;
        border-color: transparent transparent transparent #0961ba;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -2.813vw 0 0 -1.875vw;
        z-index: 20; }
    #contents .atelier {
      height: 139.219vw;
      background: url("../img/lp/atelier@sp.png") no-repeat center center/cover;
      position: relative; }
      #contents .atelier h2 {
        display: none; }
      #contents .atelier .text {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        margin-left: 0; }
        #contents .atelier .text p {
          font-size: 3.125vw;
          margin-top: 0;
          text-align: center;
          padding: 31.25vw 6.25vw 0;
          white-space: inherit;
          letter-spacing: 0.1em; }
      #contents .atelier .chara {
        display: none; }
    #contents #prod {
      background: url("../img/lp/products@sp.jpg") no-repeat center -25vw;
      background-size: 100% auto;
      padding: 39.063vw 0 21.875vw; }
      #contents #prod h2 {
        display: none; }
      #contents #prod h2.grade {
        display: block; }
      #contents #prod h2 + p {
        font-size: 2.813vw;
        line-height: 5.781vw;
        margin: 0;
        letter-spacing: 0.1em; }

  h2.grade {
    font-size: 7.34375vw; }

  .ln_parent {
    width: 92.813vw;
    margin: 9.375vw auto 1.5625vw; }

  .ln_parent a {
    height: 16.40625vw;
    width: 46.094vw;
    font-size: 2.96875vw;
    line-height: 3.90625vw;
    letter-spacing: 0.01em;
    transition: none; }

  .ln_parent a + a {
    margin-left: 1.25vw; }

  .ln_parent a.active {
    background: #0961ba !important;
    transition: none; }

  .ln_parent a.active::before {
    border-width: 3.4375vw 3.4375vw 0 3.4375vw;
    border-color: #0961ba transparent transparent transparent;
    position: absolute;
    left: 50%;
    bottom: -3.28125vw;
    margin: 0 0 0 -3.4375vw; }

  .prodwrap {
    width: 95.313vw;
    border: 0.625vw solid #0961ba;
    background: rgba(255, 255, 255, 0.5); }

  .prod {
    padding: 10.938vw 0 12.5vw; }

  .prod h2 {
    margin-bottom: 0vw;
    font-size: 7.344vw; }

  .prod h3 {
    margin-bottom: 0;
    font-size: 4.219vw;
    letter-spacing: 0em;
    margin-top: 5.781vw; }
    .prod h3 span {
      display: inline-block;
      padding: 0 20vw; }
      .prod h3 span::before, .prod h3 span:after {
        content: '';
        width: 17.5vw;
        height: 0.313vw; }
    .prod h3 i {
      display: inline-block;
      position: absolute;
      bottom: -4.688vw; }
      .prod h3 i.pop {
        right: 50%;
        transform: translateX(-21.406vw); }
        .prod h3 i.pop img {
          height: 17.813vw; }
      .prod h3 i.off {
        transform: translateX(27.813vw);
        bottom: -7.5vw;
        z-index: 100; }
        .prod h3 i.off img {
          width: 19.531vw; }

  .prod.prod05 h3 {
    margin-top: 12.5vw; }

  .prod.prod05 h3 i.off {
    bottom: -6.563vw;
    transform: translateX(28.75vw); }

  .prod.prod05 h3 i.pop {
    transform: translateX(-24.219vw);
    bottom: -5.469vw; }
    .prod.prod05 h3 i.pop img {
      width: 29.375vw;
      height: auto; }

  .prod p.price {
    font-size: 3.125vw;
    margin-bottom: 0vw; }

  .prod p.price b {
    font-size: 4.219vw; }

  .prod p.price b ~ b {
    font-size: 5.781vw; }

  .prod figure {
    padding: 0 10.156vw; }

  .prod h3 + p.price {
    margin-top: 1.563vw; }

  .prod p.price + h3 {
    margin-top: 7.813vw; }

  .prod figure {
    margin-top: 7.5vw; }

  .prod .btns {
    display: flex;
    padding: 9.375vw 0 0;
    flex-wrap: wrap; }
    .prod .btns li {
      padding: 0 0.781vw 1.563vw; }
      .prod .btns li a {
        width: 41.563vw;
        height: 11.406vw;
        font-size: 2.813vw;
        border: 0.469vw solid #d8245b;
        padding: 3.594vw 0 0; }
      .prod .btns li a::after {
        content: '';
        width: calc( 100% - 0px);
        height: calc( 100% - 0px);
        border: 1px solid #ffa4a4; }
      .prod .btns li a:hover {
        background: #fffba7;
        border-color: #d8245b;
        color: #d8245b; }

  .prod .btns + .btns {
    padding-top: 1.563vw; } 


.prod h3 i.pop.normal1 {
    right: 44%;
    transform: translateX(-25vw);}

.prod p.price.note{
     font-size: 3vw; }
}