@charset "UTF-8";
/*
*******************************************************************************************************
# ステーショナリーを作ろう
*******************************************************************************************************
*/
/*
	override
--------------------------------------------------------------- */
#contentArea .wrp-stationery .btn-craft a:before {
	display: none;
}

#contentArea .wrp-stationery .contents-area-inner:before {
	display: none;
}

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

/*
	layout
--------------------------------------------------------------- */
/* wrp-stationery
----------------------------------- */
/*背景*/
#contentArea .wrp-stationery {
	/* background-color: #006cd4;
	background-image: linear-gradient(0, #006cd4 0%, #064078 100%); */
	background: url(/rwd/fun/make/special/stationery/img/bg_pattern.png) repeat 0 0;
	background-size: auto;
}

#contentArea .wrp-stationery::before {
	content: '';
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 570px;
    background: url(/rwd/fun/make/special/stationery/img/img_yane.png) repeat-x 0 0;
    z-index: 1;
}

#contentArea .wrp-stationery::after {
	content: '';
	display: block;
	position: absolute;
	top: -50px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 1500px;
	height: 100%;
	background-image: url();
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

#contentArea .wrp-stationery .bg-contents {
	position: relative;
	z-index: 2;
	background: url(/rwd/fun/make/special/stationery/img/title-base.png) no-repeat center 20px;
	background-size: 999px 460px;
}

#contentArea .wrp-stationery .icn1{
	position: absolute;
	top: 99px;
	left: -137px;
	width: 66px;
	height: 77px;
}

#contentArea .wrp-stationery .icn2{
	position: absolute;
	top: 250px;
	left: -97px;
	transform: rotate(180deg);
	width: 119px;
	height: 280px;
}

#contentArea .wrp-stationery .icn3{
	position: absolute;
	top: 235px;
	left: 910px;
	width: 250px;
	height: 334px;
	transform: rotate(321deg);
}

#contentArea .wrp-stationery .icn4{
	position: absolute;
	top: 127px;
	left: 992px;
	width: 105px;
	height: 123px;
}
#contentArea .wrp-stationery .balloon-sub {
	top: 94px;
	right: 39px;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg);
}

#contentArea .wrp-stationery .caption-sub {
  padding: 120px 0 19px;
}

#contentArea .wrp-stationery .ttl-sub {
  width: 900px;
}

/*工作*/
#contentArea .wrp-stationery .contents-area-craft {
  position: relative;
　overflow: hidden;
}
#contentArea .wrp-stationery .box-craft-list{
	width: auto;
}
#contentArea .wrp-stationery .box-craft-flex{
	width: 1147px;
	margin: 140px auto 0;
	display: flex;
	justify-content: space-between
}
#contentArea .wrp-stationery .box-craft-flex2{
	margin: 0 auto;
	width: 1098px;
}
#contentArea .wrp-stationery .ttl-craft {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: #00ADCD;
	text-align: center;
	color: #ffffff;
	font-size: 36px;
	font-weight: bold;
	line-height: 1.2;
	padding-top: 48px;
	box-sizing: border-box;
	z-index: 100;
	position: relative;
}

/* カードケース */
#contentArea .wrp-stationery .box-craft-cardcase .pic-craft-item img{
	width: 557px;
}

#contentArea .wrp-stationery .box-craft-cardcase .ttl-craft {
	margin-left: 20px;
	margin-top: -130px;
}

#contentArea .wrp-stationery .box-craft-cardcase .btn-craft {
  margin: 40px 74px 0 100px;
}


/* 小物入れ */
#contentArea .wrp-stationery .box-craft-accessorycase {
	margin: 207px 0 0 auto;
}
#contentArea .wrp-stationery .box-craft-accessorycase .icn5{
	position: absolute;
	width: 58px;
	height: 69px;
	top: -185px;
	left: 99px;
}

#contentArea .wrp-stationery .box-craft-accessorycase .icn6{
	position: absolute;
	top: -110px;
	left: 277px;
	width: 48.24px;
	height: 71.14px;
	transform: rotate(165deg);
}

#contentArea .wrp-stationery .box-craft-accessorycase .pic-craft-item img{
	width: 570px;
}

#contentArea .wrp-stationery .box-craft-accessorycase .ttl-craft {
	margin: -130px -24px 0 auto;
	line-height: 2.45;
}

#contentArea .wrp-stationery .box-craft-accessorycase .btn-craft {
  margin: 42px 94px 0 93px;
}

/* ペン立て */
#contentArea .wrp-stationery .box-craft-penstand{
	width: 666px;
}

#contentArea .wrp-stationery .box-craft-penstand .icn7{
	position: absolute;
	top: -302px;
	left: -181px;
	width: 185px;
	height: 297px;
}

#contentArea .wrp-stationery .box-craft-penstand .icn8{
	position: absolute;
	top: 0;
	left: 433px;
	width: 65.41px;
	height: 65.41px;
	transform: rotate(96deg);
}

#contentArea .wrp-stationery .box-craft-penstand .icn9{
	position: absolute;
	top: 174px;
	left: 768px;
	width: 65.41px;
	height: 77.09px;
}

#contentArea .wrp-stationery .box-craft-penstand .icn10{
	position: absolute;
	top: 238px;
	left: 920px;
	width: 49.47px;
	height: 54.24px;
	transform: rotate(196deg);
}

#contentArea .wrp-stationery .box-craft-penstand .icn11{
	position: absolute;
	top: 538px;
	right: -568px;
	width: 241.51px;
	height: 316.11px;
	transform: rotate(349deg);
}
#contentArea .wrp-stationery .box-craft-penstand .pic-craft-item img{
	margin-top: -120px;
}

#contentArea .wrp-stationery .box-craft-penstand .ttl-craft {
	margin: -365px 0 0 705px;
}

#contentArea .wrp-stationery .box-craft-penstand .btn-craft {
  margin: 40px -322px 0 604px;
}

/* スマホスタンド */
#contentArea .wrp-stationery .box-craft-stand .icn12{
	position: absolute;
	left: 22px;
	top: -110px;
	width: 107.32px;
	height: 121.41px;
	transform: rotate(109deg);
}

#contentArea .wrp-stationery .box-craft-stand .icn13{
	position: absolute;
	top: 68px;
	left: 278px;
	width: 45.94px;
	height: 67.75px;
	transform: rotate(355deg);
}

#contentArea .wrp-stationery .box-craft-stand .icn14{
	position: absolute;
	top: -14px;
	right: 116px;
	width: 65.41px;
	height: 77.09px;
	transform: rotate(184deg);
}
#contentArea .wrp-stationery .box-craft-stand .pic-craft-item img{
	margin-top: 220px;
	margin-left: 51px;
	width: 517px;
}

#contentArea .wrp-stationery .box-craft-stand .ttl-craft {
	margin: -143px 0 0 24px;
}

#contentArea .wrp-stationery .box-craft-stand .btn-craft {
  margin: 40px 90px 0 100px;
}

/* 卓上ごみ箱 */
#contentArea .wrp-stationery .box-craft-garbage{
	order: 1;
}
#contentArea .wrp-stationery .box-craft-garbage .pic-craft-item img{
	margin-top: -19px;
	width: 500px;
	margin-right: 65px;
}

#contentArea .wrp-stationery .box-craft-garbage .ttl-craft {
	margin: -140px 20px 0 auto;
}

#contentArea .wrp-stationery .box-craft-garbage .btn-craft {
  margin: 40px 136px 0 45px;
}

/* ラインナップ */
#contentArea .wrp-stationery .box-craft-lineup{
	background: url(/rwd/fun/make/special/stationery/img/base_6_pc.png) no-repeat center 94px;
	background-size: 1146px 834px;
	padding-bottom: 82px;
}
#contentArea .wrp-stationery .box-craft-lineup .box-craft-lineup__inner{
	position: relative;
	width: 1146px;
	margin: 0 auto;
}
#contentArea .wrp-stationery .box-craft-lineup .icn15{
	position: absolute;
	left: -130px;
	top: 29px;
	width: 187.04px;
	height: 250.05px;
	transform: rotate(354deg);
}

#contentArea .wrp-stationery .box-craft-lineup .icn16{
	position: absolute;
	right: -17px;
	top: -67px;
	width: 166px;
	height: 259px;
}

#contentArea .wrp-stationery .box-craft-lineup .icn17{
	position: absolute;
	left: -11px;
	bottom: 118px;
	width: 88.9px;
	height: 103.93px;
	transform: rotate(62deg);
}

#contentArea .wrp-stationery .box-craft-lineup .icn18{
	position: absolute;
	left: 120px;
	bottom: -150px;
	width: 119px;
	height: 280px;
	transform: rotate(1deg);
}

#contentArea .wrp-stationery .box-craft-lineup .icn19{
	position: absolute;
	right: 30px;
	bottom: 141px;
	width: 91.89px;
	height: 103.95px;
	transform: rotate(15deg);
}

#contentArea .wrp-stationery .box-craft-lineup .icn20{
	position: absolute;
	right: 115px;
	bottom: 32px;
	width: 63.56px;
	height: 74.91px;
	transform: rotate(107deg);
}

#contentArea .wrp-stationery .box-craft-lineup .box-craft-list p{
	text-align: center;
	padding-bottom: 48px;
}

#contentArea .wrp-stationery .box-craft-lineup .box-craft-list img{
	width: 935px;
	margin: 66px auto 0 17px;
}

#content #pageBanner .banner-summer-festival:before {
    background-image: url(/rwd/fun/make/special/img/img_summer-festival_banner.png);
    -webkit-background-size: cover;
    background-size: cover;
}


/*
	layout SP
--------------------------------------------------------------- */
@media only screen and (max-width: 736px) {
	/* wrp-stationery
----------------------------------- */
	#contentArea .wrp-stationery::before {
		content: '';
		display: block;
		position: absolute;
		top: -10px;
		left: 0;
		width: 100%;
		height: 100%;
		margin-left: 0;
		background: url(/rwd/fun/make/special/stationery/img/img_yane_sp.png) no-repeat 0 0;
		background-size: contain;
		-webkit-transform: none;
		transform: none;
	}
	#contentArea .wrp-stationery::after {
		left: 0;
		top: 0;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		width: 100%;
		height: 100%;
		background-image: url();
	}
	#contentArea .wrp-stationery .contents-area-head::after {
		margin: 0;
		width: 100%;
		height: 500px;
		background-image: url();
		background-position: 0 120px;
		top: 0;
	}
	#contentArea .wrp-stationery .balloon-sub {
		top: -15px;
		right: 0px;
		width: 57px;
	}
	#contentArea .wrp-stationery {
		background-size: 8%;
	}
	#contentArea .wrp-stationery .bg-contents {
		background: url(/rwd/fun/make/special/stationery/img/title-base_sp.png) no-repeat center 2%;
		background-size: auto;
		background-size: 94%;
	}
	#contentArea .wrp-stationery .caption-sub {
	  padding: 13% 0 19px;
	}
	#contentArea .wrp-stationery .ttl-sub {
	  width: 100%;
	}
	#contentArea .wrp-stationery .icn1 {
	  top: 150%;
	  left: -3%;
	  width: 38px;
	  height: 44px;
	}
	#contentArea .wrp-stationery .icn2 {
	  	top: 72%;/*250px*/
	  	width: 85px;
	  	height: 200px;
		left: -6%;/*-23px*/
	}
	#contentArea .wrp-stationery .icn3 {
	  top: 90%;/*259px*/
	  right: -27%;/*-102px*/
	  width: 135px;
	  height: 191px;
	  left: auto;
	}
	#contentArea .wrp-stationery .box-craft-flex {
	  width: 100%;
	  margin: 140px auto 0;
	  display: block;
	}
	#contentArea .wrp-stationery .box-craft-flex ~ .box-craft-flex {
		margin-top: 50px;
	}
	#contentArea .wrp-stationery .ttl-craft {
	  width: 95px;
	  height: 95px;
	  font-size: 18px;
	}

	#contentArea .wrp-stationery .box-craft-cardcase .btn-craft,
	#contentArea .wrp-stationery .box-craft-accessorycase .btn-craft,
	#contentArea .wrp-stationery .box-craft-penstand .btn-craft,
	#contentArea .wrp-stationery .box-craft-stand .btn-craft,
	#contentArea .wrp-stationery .box-craft-garbage .btn-craft{
	  	margin: 20px auto;
	  	width: 224px;
		position: relative;
		z-index: 100;
	}

	#contentArea .wrp-stationery .contents-area-craft .ttl-craft {
		padding-top: 27px;
	}

	/*カードケース*/
	#contentArea .wrp-stationery .box-craft-cardcase .pic-craft-item img {
	  width: 309px;
	  margin: 0 auto;
	}
	#contentArea .wrp-stationery .box-craft-cardcase .ttl-craft {
	  margin-left: 10%;
	  margin-top: -86px;
	}

	/*小物入れ*/
	#contentArea .wrp-stationery .box-craft-accessorycase {
	  margin: 77px 0 0 auto;
	}
	#contentArea .wrp-stationery .box-craft-accessorycase .icn5 {
	  width: 37.33px;
	  height: 44px;
	  top: -11%;/*-45px*/
	  left: 20%;/*72px*/
	  transform: rotate(96deg);
	}
	#contentArea .wrp-stationery .box-craft-accessorycase .icn6 {
	  top: -108%;/*-449px*/
	  right: -7px;
	  width: 31.94px;
	  height: 46.75px;
	  left: auto;
	}
	#contentArea .wrp-stationery .box-craft-accessorycase .pic-craft-item img {
  		width: 315.5px;
		margin: 0 auto;
	}
	#contentArea .wrp-stationery .box-craft-accessorycase .ttl-craft {
	  margin: -66px 52px 0 auto;
	  line-height: 2.45;
	  padding-top: 26px;
	}

	/*ペンスタンド*/
	#contentArea .wrp-stationery .box-craft-flex2 {
	  margin: 75px auto 0;
	  width: 100%;
	}
	#contentArea .wrp-stationery .box-craft-penstand {
	  width: 100%;
	}
	#contentArea .wrp-stationery .box-craft-penstand .icn7 {
	 	top: -137%;/*-586px*/
	 	left: -14%;/*-51px*/
		width: 103px;
		height: 167px;
	}
	#contentArea .wrp-stationery .box-craft-penstand .icn9 {
		top: -11%;/*-49px*/
		right: 7%;/*29px*/
		width: 37.33px;
		height: 44px;
		left: auto;
	}
	#contentArea .wrp-stationery .box-craft-penstand .icn10 {
		top: -22%;/*-96px*/
		right: -3%;/*-10px*/
		width: 35.47px;
		height: 38.24px;
		left: auto;
	}
	#contentArea .wrp-stationery .box-craft-penstand .icn11 {
	  	top: 188%;/*792px*/
	  	right: -13%;/*-44px*/
	  	width: 120.47px;
	  	height: 157.68px;
	}
	#contentArea .wrp-stationery .box-craft-penstand .pic-craft-item img {
	  	margin-top: 0;
		width: 395px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
	#contentArea .wrp-stationery .box-craft-penstand .ttl-craft {
	  	margin: -142px 0 0 47px;
	}

	/*ゴミ箱*/
	#contentArea .wrp-stationery .box-craft-garbage .pic-craft-item img {
		width: 278px;
	  	margin: 0 auto;
	}
	#contentArea .wrp-stationery .box-craft-garbage .ttl-craft {
	  	margin: -75px 45px 0 auto;
	}

	/*スマホスタンド*/
	#contentArea .wrp-stationery .box-craft-stand .pic-craft-item img {
	  	width: 278px;
	  	margin: 65px auto 0;
	}
	#contentArea .wrp-stationery .box-craft-stand .icn12 {
	  left: 0%;/*-1px*/
	  top: -14%;/*-52px*/
	  width: 58.93px;
	  height: 66.66px;
	}
	#contentArea .wrp-stationery .box-craft-stand .icn13 {
	  top: -115%;/*-423px*/
	  left: -1%;/*-6px*/
	  width: 28.89px;
	  height: 42.6px;
	  transform: rotate(355deg);
	}
	#contentArea .wrp-stationery .box-craft-stand .icn14 {
	  top: -129%;/*-475px*/
	  right: 79%;/*305px*/
	  width: 37.33px;
	  height: 44px;
	}
	#contentArea .wrp-stationery .box-craft-stand .ttl-craft {
	  margin: -75px 0 0 45px;
	}

	/*ラインナップ*/
	#contentArea .wrp-stationery .box-craft-lineup {
	  background: url(/rwd/fun/make/special/stationery/img/base_6_sp.png) no-repeat center 0;
	  background-size: 96%;
	  padding-bottom: 82px;
		margin: 83px auto 0;
	}
	#contentArea .wrp-stationery .box-craft-lineup .box-craft-lineup__inner {
	  width: 100%;
	}
	#contentArea .wrp-stationery .box-craft-lineup .box-craft-list img {
	  width: 90%;
	margin: -21px auto 0 14px;
	}
	#contentArea .wrp-stationery .box-craft-lineup .box-craft-list p {
	  text-align: center;
	  padding-bottom: 41px;
	}
	#contentArea .wrp-stationery .box-craft-lineup .icn15 {
	  left: -8%;/*-33px*/
	  top: -48%;/*-153px*/
	  width: 80.91px;
	  height: 108.49px;
	}
	#contentArea .wrp-stationery .box-craft-lineup .icn16 {
	  right: 0;/*1px*/
	  top: -43%;/*-135px*/
	  width: 97.73px;
	  height: 153.48px;
	}
	#contentArea .wrp-stationery .box-craft-lineup .icn17 {
	  left: -1%;/*-4px*/
	  bottom: -4%;/*-12px*/
	  width: 57.65px;
	  height: 67.4px;
	}
	#contentArea .wrp-stationery .box-craft-lineup .icn18 {
	  left: 21%;/*80px*/
	  bottom: -35%;/*-112px*/
	  width: 61.93px;
	  height: 145.75px;
	}
	#contentArea .wrp-stationery .box-craft-lineup .icn19 {
	  right: 9%;/*34.5px*/
	  bottom: -8%;/*-26px*/
	  width: 58.93px;
	  height: 66.66px;
	  transform: rotate(0deg);
	}
	#contentArea .wrp-stationery .box-craft-lineup .icn20 {
	  right: 27%;/*104px*/
	  bottom: -19%;/*-58px*/
	  width: 37.33px;
	  height: 44px;
	  transform: rotate(90deg);
	}

	#pageBanner {
	  z-index: 2;
	}
	#pageBanner .banner-summer-festival::before {
	  	background-image: url(/rwd/fun/make/special/stationery/img/img_banner_sp.png);
	  	background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
	}
	#pageBanner .banner-summer-festival .banner-inner {
	  padding: 29px 40px 90px;
	}
}