@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%;
    max-width: none;
}
#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: 12px;
    margin-top: 24px;
    display: block;
    font-family: quasimoda, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 2;
    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: 13px;
    letter-spacing: 0.05em;
    line-height: 1.93;
    font-feature-settings: normal;
}
::before{
    content: "";
    position: absolute;
    z-index: -1;
}
#spn_1210 .sub{
    position: absolute;
}
.sp_only{
    display: none !important;
}
/* =================
	ttl
================= */
#spn_1210 .cnt_1210{
    width: 1200px;
    margin: 0 auto;
    margin-top: 74px;
    margin-bottom: 141px;
}
#spn_1210 h2{
    width: 423px;
    margin: 0 auto;
    margin-bottom: 95px;
}
/* =================
	sec1
================= */
#spn_1210 .sec1{
    width: 1090px;
    margin: 0 auto;
    margin-bottom: 180px;
}
#spn_1210 .sec1 ._01{
    width: 400px;
    margin-left: 139px;
    position: relative;
    z-index: 10;
}
#spn_1210 .sec1 ._01 .sub{
    width: 250px;
    top: 90px;
    left: 470px;
}
#spn_1210 .sec1 ._01::before{
    background-color: #e88e7c;
    width: 400px;
    height: 400px;
    top: 40px;
    left: 40px;
}
#spn_1210 .sec1 ._02 .flexbox{
    margin-top: -140px;
}
#spn_1210 .sec1 ._02 .flexbox .txt{
    width: 338px;
    margin: 215px 298px 0 2px;
    letter-spacing: 0.05em;
}
#spn_1210 .sec1 ._02 .flexbox .imgbox{
    width: 450px;
    z-index: 1;
}
#spn_1210 .sec1 .price{
    margin-left: auto;
}
#spn_1210 .sec1 ._03{
    width: 420px;
    margin: -306px 0 0 300px;
    z-index: 10;
    position: relative;
}
/* =================
	sec2
================= */
#spn_1210 .sec2{
    width: 970px;
    margin-bottom: 140px;
}
#spn_1210 .sec2 .flexbox._1 .imgbox{
    width: 420px;
    margin: 0 61px 0 135px;
    position: relative;
}
#spn_1210 .sec2 .flexbox._1 .imgbox .sub{
    width: 304px;
    top: 0px;
    left: 477px;
}
#spn_1210 .sec2 .flexbox._1 .imgbox::before{
    background-color: #d1d3af;
    width: 420px;
    height: 420px;
    top: -40px;
    left: -40px;
}
#spn_1210 .sec2 .flexbox._1 .txt{
    width: 307px;
    margin-top: 100px;
    letter-spacing: 0.07em;
    text-align: justify;
}
#spn_1210 .sec2 .flexbox._2{
    width: 780px;
    margin: -27px 0 0 325px;
    justify-content: space-between;
}
#spn_1210 .sec2 .flexbox._2 ._01,#spn_1210 .sec2 .flexbox._2 ._02{
    width: 350px;
}
#spn_1210 .sec2 .flexbox._2 ._01{
    margin-top: 230px;
}
#spn_1210 .sec2 .flexbox._2 .price{
    text-align: right;
    margin-left: auto;
}
/* =================
	sec3
================= */
#spn_1210 .sec3{
    width: 990px;
    margin: 0 0 135px 105px;
}
#spn_1210 .sec3 ._01{
    width: 450px;
    margin-right: 100px;
}
#spn_1210 .sec3 .price{
    margin-top: 18px;
}
#spn_1210 .sec3 ._02{
    width: 400px;
    margin-top: 150px;
    position: relative;
}
#spn_1210 .sec3 ._02 .sub{
    width: 243px;
    top: -107px;
    left: 198px;
}
#spn_1210 .sec3 ._02::before{
    width: 400px;
    height: 600px;
    top: 40px;
    left: 40px;
    background-color: #a19aaf;
}
#spn_1210 .sec3 ._03{
    width: 440px;
    margin: 85px 0px 0 auto;
    letter-spacing: 0.055em;
}
/* =================
	sec4
================= */
#spn_1210 .sec4{
    width: 990px;
    margin: 0 0 93px 105px;
}
#spn_1210 .sec4 ._01{
    width: 380px;
    margin: 0 120px 0 40px;
    position: relative;
}
#spn_1210 .sec4 ._01 .sub{
    width: 243px;
    top: 56px;
    left: 312px;
}
#spn_1210 .sec4 ._01::before{
    width: 380px;
    height: 570px;
    top: 40px;
    left: -40px;
    background-color: #57A1CE;
}
#spn_1210 .sec4 ._02{
    width: 450px;
    margin-top: 180px;
}
#spn_1210 .sec4 ._02 .price{
    text-align: right;
}
#spn_1210 .sec4 ._03{
    width: 380px;
    margin-top: -258px;
}
/* =================
	bnt
================= */
#spn_1210 .spn_btn{
    width: 420px;
    margin: 0 auto 137px;
}




/* for tablet */
@media only screen
and (min-width: 561px)
and (max-width: 1200px) {
/* =================
	all
================= */
#spn_1210 .price{
    font-size: calc( 12 * (100vw / 1200));
    margin-top: calc( 24 * (100vw / 1200));
}
#spn_1210 .txt{
    font-size: calc( 13 * (100vw / 1200));
}
.sp_only{
    display: none !important;
}
/* =================
	ttl
================= */
#spn_1210 .cnt_1210{
    width: calc( 1200 * (100vw / 1200));
    margin-top: calc( 74 * (100vw / 1200));
    margin-bottom: calc( 141 * (100vw / 1200));
}
#spn_1210 h2{
    width: calc( 423 * (100vw / 1200));
    margin-bottom: calc( 95 * (100vw / 1200));
}
/* =================
	sec1
================= */
#spn_1210 .sec1{
    width: calc( 1090 * (100vw / 1200));
    margin-bottom: calc( 180 * (100vw / 1200));
}
#spn_1210 .sec1 ._01{
    width: calc( 400 * (100vw / 1200));
    margin-left: calc( 139 * (100vw / 1200));
}
#spn_1210 .sec1 ._01 .sub{
    width: calc( 249 * (100vw / 1200));
    top: calc( 90 * (100vw / 1200));
    left: calc( 470 * (100vw / 1200));
}
#spn_1210 .sec1 ._01::before{
    width: calc( 400 * (100vw / 1200));
    height: calc( 400 * (100vw / 1200));
    top: calc( 40 * (100vw / 1200));
    left: calc( 40 * (100vw / 1200));
}
#spn_1210 .sec1 ._02 .flexbox{
    margin-top: calc( -140 * (100vw / 1200));
}
#spn_1210 .sec1 ._02 .flexbox .txt{
    width: calc( 338 * (100vw / 1200));
    margin: calc( 215 * (100vw / 1200)) calc( 298 * (100vw / 1200)) 0 calc( 2 * (100vw / 1200));
}
#spn_1210 .sec1 ._02 .flexbox .imgbox{
    width: calc( 450 * (100vw / 1200));
}
#spn_1210 .sec1 ._03{
    width: calc( 420 * (100vw / 1200));
    margin: calc( -306 * (100vw / 1200)) 0 0 calc( 300 * (100vw / 1200));
}
/* =================
	sec2
================= */
#spn_1210 .sec2{
    width: calc( 970 * (100vw / 1200));
    margin-bottom: calc( 139 * (100vw / 1200));
}
#spn_1210 .sec2 .flexbox._1 .imgbox{
    width: calc( 420 * (100vw / 1200));
    margin: 0 calc( 61 * (100vw / 1200)) 0 calc( 135 * (100vw / 1200));
}
#spn_1210 .sec2 .flexbox._1 .imgbox .sub{
    width: calc( 304 * (100vw / 1200));
    left: calc( 477 * (100vw / 1200));
}
#spn_1210 .sec2 .flexbox._1 .imgbox::before{
    width: calc( 420 * (100vw / 1200));
    height: calc( 420 * (100vw / 1200));
    top: calc( -40 * (100vw / 1200));
    left: calc( -40 * (100vw / 1200));
}
#spn_1210 .sec2 .flexbox._1 .txt{
    width: calc( 307 * (100vw / 1200));
    margin-top: calc( 100 * (100vw / 1200));
}
#spn_1210 .sec2 .flexbox._2{
    width: calc( 780 * (100vw / 1200));
    margin: calc( -25 * (100vw / 1200)) 0 0 calc( 325 * (100vw / 1200));
}
#spn_1210 .sec2 .flexbox._2 ._01,#spn_1210 .sec2 .flexbox._2 ._02{
    width: calc( 350 * (100vw / 1200));
}
#spn_1210 .sec2 .flexbox._2 ._01{
    margin-top: calc( 230 * (100vw / 1200));
}
/* =================
	sec3
================= */
#spn_1210 .sec3{
    width: calc( 990 * (100vw / 1200));
    margin: 0 0 calc( 135 * (100vw / 1200)) calc( 105 * (100vw / 1200));
}
#spn_1210 .sec3 ._01{
    width: calc( 450 * (100vw / 1200));
    margin-right: calc( 100 * (100vw / 1200));
}
#spn_1210 .sec3 .price{
    margin-top: calc( 18 * (100vw / 1200));
}
#spn_1210 .sec3 ._02{
    width: calc( 400 * (100vw / 1200));
    margin-top: calc( 150 * (100vw / 1200));
}
#spn_1210 .sec3 ._02 .sub{
    width: calc( 243 * (100vw / 1200));
    top: calc( -107 * (100vw / 1200));
    left: calc( 198 * (100vw / 1200));
}
#spn_1210 .sec3 ._02::before{
    width: calc( 400 * (100vw / 1200));
    height: calc( 600 * (100vw / 1200));
    top: calc( 40 * (100vw / 1200));
    left: calc( 40 * (100vw / 1200));
}
#spn_1210 .sec3 ._03{
    width: calc( 440 * (100vw / 1200));
    margin: calc( 85 * (100vw / 1200)) 0 0 auto;
}
/* =================
	sec4
================= */
#spn_1210 .sec4{
    width: calc( 990 * (100vw / 1200));
    margin: 0 0 calc( 93 * (100vw / 1200)) calc( 105 * (100vw / 1200));
}
#spn_1210 .sec4 ._01{
    width: calc( 380 * (100vw / 1200));
    margin: 0 calc( 120 * (100vw / 1200)) 0 calc( 40 * (100vw / 1200));
}
#spn_1210 .sec4 ._01 .sub{
    width: calc( 243 * (100vw / 1200));
    top: calc( 56 * (100vw / 1200));
    left: calc( 312 * (100vw / 1200));
}
#spn_1210 .sec4 ._01::before{
    width: calc( 380 * (100vw / 1200));
    height: calc( 570 * (100vw / 1200));
    top: calc( 40 * (100vw / 1200));
    left: calc( -40 * (100vw / 1200));
}
#spn_1210 .sec4 ._02{
    width: calc( 450 * (100vw / 1200));
    margin-top: calc( 180 * (100vw / 1200));
}
#spn_1210 .sec4 ._03{
    width: calc( 380 * (100vw / 1200));
    margin-top: calc( -258 * (100vw / 1200));
}
/* =================
	bnt
================= */
#spn_1210 .spn_btn{
    width: calc( 420 * (100vw / 1200));
    margin: 0 auto calc( 137 * (100vw / 1200));
}
}