@charset "UTF-8";
/*
*******************************************************************************************************
# 『ボールコースター』を作ろう
*******************************************************************************************************
*/

/* 
	override
--------------------------------------------------------------- */
@media only screen and (max-width: 736px) {
	#contentArea .wrp-ballcoaster {
		border-top: 0;
	}
}

/* 
	layout
--------------------------------------------------------------- */

/* wrp-ballcoaster
----------------------------------- */
#contentArea .wrp-ballcoaster {
  background: url(/rwd/fun/make/special/ball_coaster/img/bg_pattern_ballcoaster.png) repeat 0 0;
  background-size: auto;
}

#contentArea .wrp-ballcoaster::before {
  content: '';
  display: block;
  position: absolute;
  top: 275px;
  left: 50%;
  width: 1280px;
  height: 1076px;
  margin-left: -640px;
  background: url(/rwd/fun/make/special/ball_coaster/img/bg_ballcoaster.png) no-repeat 0 0;
}

#contentArea .wrp-ballcoaster .contents-area-inner {
  position: relative;
}

#contentArea .wrp-ballcoaster .contents-area-inner::before {
  content: '';
  display: block;
  position: absolute;
  top: -55px;
  left: -142px;
  width: 197px;
  height: 194px;
  background: url(/rwd/fun/make/special/ball_coaster/img/bg_shape_circle.png) no-repeat 0 0;
}

#contentArea .wrp-ballcoaster .contents-area-head {
  position: relative;
}

#contentArea .wrp-ballcoaster .contents-area-head::before {
  content: '';
  display: block;
  position: absolute;
  top: 230px;
  left: -104px;
  width: 212px;
  height: 214px;
  background: url(/rwd/fun/make/special/ball_coaster/img/bg_ballcoaster_parts_1.png) no-repeat 0 0;
  z-index: -1;
}

#contentArea .wrp-ballcoaster .contents-area-head::after {
  content: '';
  display: block;
  position: absolute;
  top: 125px;
  right: -74px;
  width: 168px;
  height: 276px;
  background: url(/rwd/fun/make/special/ball_coaster/img/bg_ballcoaster_parts_2.png) no-repeat 0 0;
  z-index: -1;
}

#contentArea .wrp-ballcoaster .contents-area-head .ttl-sub {
  width: 630px;
}

#contentArea .wrp-ballcoaster .contents-area-head .lead-sub {
  padding: 28px 0 34px;
}

#contentArea .wrp-ballcoaster .contents-area-head .img-cfaft-ballcoaster {
  position: absolute;
  top: 240px;
  right: 48px;
}

#contentArea .wrp-ballcoaster .contents-area-craft {
  position: relative;
}

#contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list {
  position: relative;
  z-index: 2;
}

#contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list img.img-bdr {
  border: 10px solid #fff;
  box-shadow: 0px 0px 5.4px 0.6px rgba(4, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-pattern1 {
  width: 230px;
  margin-left: 94px;
  margin-bottom: 10px;
}

#contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-pattern1 + .pin {
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 100%;
  position: absolute;
  top: 10px;
  left: 190px;
}

#contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-pattern2 {
  position: absolute;
  top: 335px;
  left: 205px;
  width: 230px;
}

#contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-movie {
  width: 470px;
  margin-left: 470px;
}

#contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-movie .btn-more {
  width: 382px;
  margin: 23px auto;
}

#contentArea .wrp-ballcoaster .contents-area-original {
  padding: 133px 0 45px;
}

#contentArea .wrp-ballcoaster .contents-area-original .deco-original-balloon {
  top: -20px;
  left: 137px;
  right: auto;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

#contentArea .wrp-ballcoaster .contents-area-original .pic-1col, #contentArea .wrp-ballcoaster .contents-area-original .pic-2col {
  margin-bottom: 15px;
}

#contentArea .wrp-ballcoaster .contents-area-original .pic-2col .pic:nth-child(2n-1) {
  padding: 0 7px 0 0;
}

#contentArea .wrp-ballcoaster .contents-area-original .pic:nth-child(2n) {
  padding: 0 0 0 8px;
}

#contentArea .wrp-ballcoaster .balloon-sub {
  top: 67px;
  right: 75px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#contentArea .wrp-ballcoaster .btn-pdf a {
  margin: 30px 0 0;
}

/* 
	layout SP
--------------------------------------------------------------- */
@media only screen and (max-width: 736px) {
  /* wrp-ballcoaster
  ----------------------------------- */
  #contentArea .wrp-ballcoaster .lead-original {
    text-align: left;
  }
  #contentArea .wrp-ballcoaster::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 202px;
    margin-left: 0;
    background: url(/rwd/fun/make/special/ball_coaster/img/bg_ballcoaster_head_sp.png) no-repeat left top;
    background-size: contain;
  }
  #contentArea .wrp-ballcoaster .contents-area-inner::before, #contentArea .wrp-ballcoaster .contents-area-inner::after {
    display: none;
  }
  #contentArea .wrp-ballcoaster .contents-area-head::before, #contentArea .wrp-ballcoaster .contents-area-head::after {
    display: none;
  }
  #contentArea .wrp-ballcoaster .contents-area-head .ttl-sub {
    width: 100%;
  }
  #contentArea .wrp-ballcoaster .contents-area-craft::before {
    content: '';
    display: block;
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 964px;
    background: url(/rwd/fun/make/special/ball_coaster/img/bg_ballcoaster_sp.png) no-repeat left top;
    background-size: contain;
  }
  #contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list {
    width: 93.75%;
    margin: 0 auto;
  }
  #contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-pattern1 {
    width: 51.6%;
    margin-left: 0;
    margin-bottom: 0;
  }
  #contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-pattern2 {
    position: absolute;
    top: 35px;
    left: auto;
    right: 0;
    width: 51.6%;
    z-index: -1;
  }
  #contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-movie {
    position: relative;
    width: 100%;
    margin: 111px 0 0 0;
  }
  #contentArea .wrp-ballcoaster .contents-area-craft .box-craft-list .pic-craft-movie .btn-more {
    position: static;
    width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
    margin: 15px auto;
    -webkit-transform: none;
    transform: none;
  }
  #contentArea .wrp-ballcoaster .contents-area-original {
    padding: 32px 0 20px;
  }
  #contentArea .wrp-ballcoaster .contents-area-original .deco-original-balloon {
    left: 15px;
  }
  #contentArea .wrp-ballcoaster .contents-area-original .pic-1col, #contentArea .wrp-ballcoaster .contents-area-original .pic-2col {
    margin-bottom: 5px;
  }
  #contentArea .wrp-ballcoaster .contents-area-original .pic-2col .pic:nth-child(2n-1) {
    padding: 0 2px 0 0;
  }
  #contentArea .wrp-ballcoaster .contents-area-original .pic:nth-child(2n) {
    padding: 0 0 0 3px;
  }
  #contentArea .wrp-ballcoaster .balloon-sub {
    top: -5%;
    right: 3.1%;
    width: 13%;
  }
  #contentArea .wrp-ballcoaster .btn-pdf a {
    margin: 30px auto 0;
  }
}