@charset "UTF-8";
/* ===============================================
    ! Foundation !
=============================================== */
/* =====================================
    * setting for animation style *
===================================== */
.fadeIn {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 1500ms;
    transition: all 1500ms;
  }
  
  /* jQueryでスクロール量に応じて付与された 'scrollIn' のスタイル */
  .fadeIn.scrollIn {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
/* =================
	all
================= */
img{
    color: inherit;
    text-decoration: none;
    -webkit-transition: .3s;
    transition: .3s;
    width: 100%;
}
.main-area .main-inner{
    width: 100%;
    margin: 0 auto;
}
#spn_1210{
    width: 100%;
    margin: 0 auto;
    font-feature-settings: "palt";
    box-sizing: border-box;
}
/* #spn_1210 .flexbox{
    display: flex;
    flex-flow: wrap;
} */
#spn_1210 .price{
    font-size: calc( 24 * (100vw / 750));
    margin-top: calc( 18 * (100vw / 750));
    display: block;
    font-family: quasimoda, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.1em;
}
#spn_1210 .txt{
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: calc( 24 * (100vw / 750));
    letter-spacing: 0.16em;
    font-feature-settings: "palt";
    text-align: justify;
    line-height: 1.75;
}
::before{
    content: "";
    position: absolute;
    z-index: -1;
}
#spn_1210 .sub{
    position: absolute;
}
.pc_only{
    display: none !important;
}
/* =================
	ttl
================= */
#spn_1210 .cnt_1210{
    width: calc( 750 * (100vw / 750));
    margin: 0 auto;
    margin-top: calc( 104 * (100vw / 750));
    margin-bottom: 141px;
}
#spn_1210 h2{
    width: calc( 555 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 98 * (100vw / 750));
}
/* =================
	sec1
================= */
#spn_1210 .sec1{
    width: calc( 750 * (100vw / 750));
    margin: 0 auto calc( 223 * (100vw / 750));
}
#spn_1210 .sec1 ._01{
    width: calc( 488 * (100vw / 750));
    margin: 0 0 calc( 110 * (100vw / 750)) calc( 50 * (100vw / 750));
    position: relative;
}
#spn_1210 .sec1 ._01 .sub{
    width: calc( 300 * (100vw / 750));
    top: calc( 100 * (100vw / 750));
    left: calc( 400 * (100vw / 750));
}
#spn_1210 .sec1 ._01::before{
    background-color: #e88e7c;
    width: calc( 488 * (100vw / 750));
    height: calc( 488 * (100vw / 750));
    top: calc( 50 * (100vw / 750));
    left: calc( -50 * (100vw / 750));
}
#spn_1210 .sec1 ._02 .imgbox{
    width: calc( 525 * (100vw / 750));
    margin: 0 0 calc( 59 * (100vw / 750)) auto;
}
#spn_1210 .sec1 ._03{
    width: calc( 488 * (100vw / 750));
    margin: 0 0 calc( 52 * (100vw / 750)) calc( 37 * (100vw / 750));
}
#spn_1210 .sec1 ._04{
    width: calc( 676 * (100vw / 750));
    margin-left: calc( 37 * (100vw / 750));
    letter-spacing: 0.14em;
}
/* =================
	sec2
================= */
#spn_1210 .sec2{
    width: calc( 750 * (100vw / 750));
    margin: 0 auto calc( 155 * (100vw / 750));
}
#spn_1210 .sec2 .flexbox._1 .imgbox{
    width: calc( 562 * (100vw / 750));
    margin: 0 0 calc( 62 * (100vw / 750)) calc( 119 * (100vw / 750));
    position: relative;
}
#spn_1210 .sec2 .flexbox._1 .imgbox .sub{
    width: calc( 360 * (100vw / 750));
    top: calc( 255 * (100vw / 750));
    left: calc( 270 * (100vw / 750));
}
#spn_1210 .sec2 .flexbox._1 .imgbox::before{
    background-color: #d1d3af;
    width: calc( 562 * (100vw / 750));
    height: calc( 562 * (100vw / 750));
    top: calc( -60 * (100vw / 750));
    left: calc( -50 * (100vw / 750));
}
#spn_1210 .sec2 .flexbox._2{
    display: flex;
    margin-bottom: calc( 52 * (100vw / 750));
}
#spn_1210 .sec2 .flexbox._2 a:first-child{
    width: calc( 390 * (100vw / 750));
    margin-top: calc( 250 * (100vw / 750));
    z-index: 10;
}
#spn_1210 .sec2 .flexbox._2 a:nth-child(2){
    width: calc( 412 * (100vw / 750));
    margin-left: calc( -50 * (100vw / 750));
}
#spn_1210 .sec2 .sp_only ._03{
    width: calc( 676 * (100vw / 750));
    margin-left: calc( 37 * (100vw / 750));
}
#spn_1210 .sec2 .sp_only .price{
    margin-left: calc( 37 * (100vw / 750));
}
/* =================
	sec3
================= */
#spn_1210 .sec3{
    width: calc( 750 * (100vw / 750));
    margin: 0 auto calc( 154 * (100vw / 750));
}
#spn_1210 .sec3 ._01{
    width: calc( 562 * (100vw / 750));
    margin: 0 0 calc( 60 * (100vw / 750)) calc( 37 * (100vw / 750));
}
#spn_1210 .sec3 ._02{
    width: calc( 525 * (100vw / 750));
    margin: 0 0 calc( 104 * (100vw / 750)) calc( 175 * (100vw / 750));
    position: relative;
}
#spn_1210 .sec3 ._02 .sub{
    width: calc( 318 * (100vw / 750));
    top: calc( 300 * (100vw / 750));
    left: calc( -186 * (100vw / 750));
}
#spn_1210 .sec3 ._02::before{
    width: calc( 525 * (100vw / 750));
    height: calc( 788 * (100vw / 750));
    top: calc( 50 * (100vw / 750));
    left: calc( 50 * (100vw / 750));
    background-color: #a19aaf;
}
#spn_1210 .sec3 ._03{
    width: calc( 676 * (100vw / 750));
    margin-left: calc( 37 * (100vw / 750));
}
/* =================
	sec4
================= */
#spn_1210 .sec4{
    width: calc( 750 * (100vw / 750));
    margin: 0 auto calc( 156 * (100vw / 750));
}
#spn_1210 .sec4 ._01{
    width: calc( 488 * (100vw / 750));
    margin: 0 0 calc( 110 * (100vw / 750)) calc( 156 * (100vw / 750));
    position: relative;
}
#spn_1210 .sec4 ._01 .sub{
    width: calc( 277 * (100vw / 750));
    top: calc( 100 * (100vw / 750));
    left: calc( -157 * (100vw / 750));
}
#spn_1210 .sec4 ._01::before{
    width: calc( 488 * (100vw / 750));
    height: calc( 732 * (100vw / 750));
    top: calc( 50 * (100vw / 750));
    left: calc( 50 * (100vw / 750));
    background-color: #57A1CE;
}
#spn_1210 .sec4 ._02{
    width: calc( 676 * (100vw / 750));
    margin: 0 auto calc( 50 * (100vw / 750));
}
#spn_1210 .sec4 ._03{
    width: calc( 676 * (100vw / 750));
    letter-spacing: 0.17em;
    margin-left: calc( 37 * (100vw / 750));
}
/* =================
	bnt
================= */
#spn_1210 .spn_btn{
    width: calc( 676 * (100vw / 750));
    margin: 0 auto calc( 202 * (100vw / 750));
}