@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald:500&display=swap');
body{
	margin: 0px;
	padding: 0px;
	color: #8b4e21;
	font-size: 14px;
	font-family: 'Noto Sans JP','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	background: #fbfbfb;
}
a {
	color: #8b4e21;
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, img, form,iframe{
	margin: 0;
	padding: 0;
	border: none;
	line-height: 1.5em;
	list-style-type: none;
	font-style: normal;
	font-weight: normal;
	text-align: left;
}
/* デフォルト状態のインライン要素をブロック要素に指定 */
article, aside, figure, figcaption, details, footer, header, hgroup, nav, section, summary{
	display: block;
	margin: 0;
	padding: 0;
}


/*--------------------------------------/
/Header
/*-------------------------------------*/


/* ---------------- navbar layout */
nav#submenu{
	width: 100%;
	height: 50px;
    position: fixed;
    background: #fbfbfb;
	z-index: 9999;
}
.drawer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 9999;
    background: #fbfbfb;
}

/* ---------------- navbar toggle */
.navbar_toggle{
	z-index: 9998;
	margin-right: 10px;
}
.navbar_toggle_icon{
	position: relative;
	display: block;
	height: 2px;
	width: 20px;
	background: #8b4e21;
	-webkit-transition: ease.7s;
	transition: ease.7s;
	margin-top:4px;
}
.navbar_toggle_icon:nth-child(1) {
    top: 0;
}
.navbar_toggle_icon:nth-child(2) {
    margin: 4px 0;
}
.navbar_toggle_icon:nth-child(3) {
    top: 0;
}
.menu.open {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
	z-index: 9990;
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
  top: 7px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
  top: -5px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.menu{
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%);
  -webkit-transition:ease .7s;
  transition:ease .7s;
  z-index:1000;
  background-color:#fff;
  width:200px;
  margin:0 0 0 auto;
}

.menu ul li{
  padding: 10px 0 10px 20px;
}
.navbar_logo{
	width: 100%;
	margin: 7px 0 7px 30px;
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.20em;
	box-sizing: border-box;
}
.navbar_logo a{
	width: 207px;
}
.navbar_logo img{
	width: 207px;height: auto;
	margin-top: 5px;
}


@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}
.loop_wrap img:first-child {
	animation: loop 50s -25s linear infinite;
	flex-shrink: 0;
}
.loop_wrap img:last-child {
	animation: loop2 50s linear infinite;
	flex-shrink: 0;
}

/*--------------------------------------/
/Footer
/*-------------------------------------*/
#page_top{
	width: 38px;
	height: 38px;
	position: fixed;
	right: 0;
	bottom: 0;
	margin: 0 10px 10px 0;
	background: #8b4e21;
	opacity: 0.8;
	border-radius: 50%;
}
#page_top a{
	position: relative;
	display: block;
	width: 38px;
	height: 38px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f062';
	font-size: 16px;
	color: #fff;
	position: absolute;
	width: 16px;
	height: 16px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
footer{
	width: 100%;
	background-color: #eee6d6;
	text-align: center;
	padding: 20px 0;
	margin-top:40px;
}
footer img{
	width: 240px;
}
footer p{
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.05em;
}

/*======================
           mb           
======================*/
@media screen and (max-width: 768px) {
	body p{
		font-size: 12px;
		line-height: 1.75em;
	}
	.loop_wrap {
		padding-top: 55px;
		display: flex;
		width: 100vw;
		overflow: hidden;
	}
	.loop_wrap img {
		width: 640px;
		height: 75px;
	}

	/*-------------------------------------/
	/top
	/*------------------------------------*/
	#hello{
		margin: 25px 15px;
	}
	#hello h1{
		font-size: 20px;
		font-weight: bold;
		margin: 10px 0 ;
	}
	#hello h1:after{
		content: 'AS A PARTNER';
		font-family: 'Raleway', sans-serif;
		color: #d5c8ad;
		font-size: 1.1em;
		display: block;
		letter-spacing: 0.1em;
		text-align: right;
		margin-top: 5px;
	}
	#hello p{
		margin-bottom: 10px;
	}
	.white_sheet{
		background-color: rgba(255,255,255,0.8);
		padding: 10px 10px 30px;
		margin-bottom: 40px;
	}
	.white_sheet h2{
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		margin: 20px 0 15px 0;
		line-height: 1.3em;
	}
	.white_sheet h2 > span{
		font-size: 20px;
	}
	.white_sheet h2 + p{
		margin: 0 0 20px;
	}
	.main_button{
		position: relative;
	}
	.main_button a {
		display: block;
		padding: 10px 0 10px;
		box-sizing: border-box;
		text-align: center;
		background-image: url(/static/s_support/images/check.png), url(/static/s_support/images/yajirusi.png);
		background-position: 50% 13px, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: auto 24px, 6px auto;
		padding: 42px 10px 10px 0;
		font-size: 18px;
		line-height: 1.05em;
		font-weight: bold;
		letter-spacing: 0.05em;
	}
	.main_button a > span {
		font-size: 11px;
		font-weight: bold;
		padding: 0 17px 0 30px;
		letter-spacing: 0.025em;
	}
	.main_button img{
		width: 37px; height: auto;
		position: absolute;
		top: -3px;
		left: -6px;
	}
	.main_button p{
		font-size: 0.75em;
		color: #1ca595;
		margin: 5px 15px 20px;
	}
	.sub_button a {
		display: block;
		padding: 13px 0 15px 50px;
		box-sizing: border-box;
		position: relative;
		background: #fff url(/static/s_support/images/yajirusi.png) 98% 50% no-repeat;
		background-size: 6px auto;
		border: 2px solid #8b4e21;
		border-radius: 10px;
		font-size: 17px;
		font-weight: bold;
		letter-spacing: 0.05em;
		margin-top: 10px;
		line-height:1em;
	}
	.sub_button a > span {
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0.025em;
	}
	.sub_button p{
		font-size: 0.75em;
		color: #1ca595;
		margin: 5px 15px 20px;
	}
	.sub_button a.pdf {
		background-image: url(/static/s_support/images/icon_pdf.png), url(/static/s_support/images/yajirusi.png);
		background-position: 5% 50%, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: 22px auto, 6px auto;
	}
	.sub_button a.tube {
		background-image: url(/static/s_support/images/icon_tube.png), url(/static/s_support/images/yajirusi.png);
		background-position: 5% 50%, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: 26px auto, 6px auto;
	}
	.sub_button a.hatena {
		background-image: url(/static/s_support/images/icon_hatena.png), url(/static/s_support/images/yajirusi.png);
		background-position: 5% 50%, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: 21px auto, 6px auto;
	}

	/* ---------------- 個別 handmade */
	#handmade .main_button a{
		background-color: #ffd5dc;
	}
	#handmade{
		background: url(/static/s_support/images/mainimg_handmade.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 60.53% 10px 10px;
	}
	#handmade h2:after{
		content: 'HANDMADE';
		font-family: 'Raleway', sans-serif;
		color: #aaaaaa;
		font-size: 0.6em;
		display: block;
		letter-spacing: 0.2em;
	}

	/* ---------------- 個別 custommade */
	#custommade{
		background: url(/static/s_support/images/mainimg_custommade.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 60.53% 10px 10px;
	}
	#custommade .white_sheet{
		position: relative;
	}
	#custommade .white_sheet img{
		position: absolute;
		width: 99px; height: 99px;
		top: -50px;
		right: -5px;
	}
	#custommade h2:after{
		content: 'CUSTOM MADE';
		font-family: 'Raleway', sans-serif;
		color: #aaaaaa;
		font-size: 0.6em;
		display: block;
		letter-spacing: 0.2em;
	}
	#custommade .main_button a{
		background-color: #72ffd2;
	}

	/* ---------------- 個別 readymade */
	#readymade{
		background: url(/static/s_support/images/mainimg_readymade.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 60.53% 10px 10px;
	}
	#readymade h2:after{
		content: 'READY MADE';
		font-family: 'Raleway', sans-serif;
		color: #aaaaaa;
		font-size: 0.6em;
		display: block;
		letter-spacing: 0.2em;
	}
	#readymade .main_button a{
		background-color: #ffe560;
	}

	/*-------------------------------------/
	/first
	/*------------------------------------*/

	#first{
		padding-top: 57px;
	}
	#first p + p{
		margin-top: 8px;
	}
	#first #step1 > h3,
	#first #step2 > h3,
	#first #step3 > h3,
	#first #step4 > h3,
	#first #step5 > h3{
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding-bottom: 3px;
		margin: 40px 0 15px;
	}
	#first #step1,
	#first #step2,
	#first #step3,
	#first #step4,
	#first #step5 {
		position: relative;
		margin: 30px 15px 0;
	}
	#first section > h2{
		color: #f0626a;
		font-size: 17px;
		font-weight: bold;
		min-height: 30px;
		padding: 2px 0 0 80px;
		box-sizing: border-box;
		margin:0 0 10px;
	}
	#first .step{
		position: absolute;
		background-color: #f0626a;
		color: #fff;
		font-size: 12px;
		font-family: 'Oswald', sans-serif;
		font-weight: 500;
		letter-spacing: 0.1em;
		display: inline-block;
		text-align: center;
		min-height: 30px;
		min-width: 70px;
		padding-top: 4px;
		box-sizing: border-box;
	}
	#first .step > span{
		font-size: 18px;
		margin: 0 0 0 3px;
	}
	#first .sub_button {
		margin: 30px 0 40px;
	}
	#first .top_margin{
		margin: 30px 0 0 0;
	}
	#first .no_margin{
		margin: 0;
	}
	#first .sub_button a > span {
		margin-right: 8px;
	}

	/* --------------------------- header */
	#first img{
		width:100%;
	}
	#first figure{
		margin: 15px 0;
	}
	#first header{
		background: url(/static/s_support/images/page_bg.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding-top: 48%;
		position: relative;
	}
	#first header h1{
		text-align: center;
		font-size: 21px;
		font-weight: bold;
		line-height: 1.15em;
		margin: 20px 0 15px;
	}
	#first header h1 > span{
		font-size: 12px;
	}

	#first header p{
		margin: 0 15px;
	}

	/* --------------------------- mokuji */
	#first #mokuji{
		border: 2px dashed #eee6d6;
		margin: 15px;
		padding: 15px 25px 15px 0;
		font-size: 13px;
	}
	#first #mokuji .title{
		font-size: 13px;
		text-align: center;
		background-color:#eee6d6;
		margin:0 0 10px 25px;
		padding: 2px;
	}
	#first #mokuji a{
		display: block;
	}
	#first #mokuji ul{
		margin:0 0 10px 25px;
	}
	#first #mokuji ul li{
		margin:5px 0;
	}
	#first #mokuji ul.level1 a{
		border-bottom: 1px solid #eee6d6;
		padding:3px 0;
	}
	#first #mokuji ullevel2 a{
		border-bottom: 1px dashed #eee6d6;
	}

	/* ---------------------------- check */
	#first .check{
		background-color: #fff;
		padding: 10px;
		margin-top: 15px;
		border-radius: 10px;
	}
	#first .check .flex_outer{
		display: flex;
	}
	#first .check .flex_left{
		width: 56px;
		padding: 5px;
	}
	#first .check .flex_right{
		padding: 5px;
		flex: 1;
	}
	#first .check h3{
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 5px;
	}
	#first .check .title{
		text-align: center;
		font-size: 18px;
	}

	/* ---------------------------- question */
	#first .question{
		padding: 15px 0 15px 0;
		margin: 15px 0;
	}
	#first .question .flex_outer{
		display: flex;
		margin-top: 20px;
	}
	#first .question .flex_left{
		width: 71px;
		padding: 5px;
	}
	#first .question .flex_right{
		padding: 5px;
		flex: 1;
	}
	#first .question h3.mama{
		font-size: 17px;
		font-weight: bold;
		line-height: 1.55em;
		margin-bottom: 10px;
		color: #f0626a;
		background-image: url(/static/s_support/images/question.png), url(/static/s_support/images/mama1.png);
		background-position: 0 15%, 98% 100%;
		background-repeat: no-repeat, no-repeat;
		background-size: 108px auto, 58px auto;
		padding: 60px 80px 0 0;
	}
	#first .question h3.papa{
		font-size: 17px;
		font-weight: bold;
		line-height: 1.55em;
		margin-bottom: 10px;
		color: #f0626a;
		background-image: url(/static/s_support/images/question.png), url(/static/s_support/images/papa.png);
		background-position: 0 15%, 98% 100%;
		background-repeat: no-repeat, no-repeat;
		background-size: 108px auto, 58px auto;
		padding: 60px 80px 0 0;
	}
	#first .question .anser{
		font-size: 15px;
		color: #f0626a;
		font-weight: bold;
		margin-bottom: 7px;
		line-height: 1.5em;
	}
	#first .question figure {
		text-align: center;
	}
	#first .question figure > img{
		width: 150px;
	}

	/* ---------------------------- breaktime */
	#first .breaktime{
		padding: 15px 15px 25px;
		margin: 40px 15px;
		background: url(/static/s_support/images/coffee.png) no-repeat 50% 6%;
		background-size: 188px auto;
		border: 2px dashed #e0e0e0;
	}
	#first .breaktime div.title{
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 10px;
		padding: 75px 0 0 0;
		border: none;
	}

	/* ---------------------------- step3 */
	#first #step3_3,#first #step3_4{
		margin-top: 40px;
	}
	#first #step3_3 h3, #first #step3_4 h3{
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding-bottom: 3px;
		margin: 40px 0 15px;
	}
	#first #step3_3 h3 + p , #first #step3_4 h3 + p{
		margin: 20px 0 30px;
	}
	#first .hidden_box{
		border-bottom: 2px dashed #ffe560;
		margin-top: 10px;
		padding-bottom: 14px;
	}
	#first .hidden_box label {
		display: block;
		padding: 4px 0 0 38px;
		min-height: 30px;
		color: #f0626a;
		font-size: 0.9em;
		cursor: pointer;
		background: url(/static/s_support/images/icon_q.png) no-repeat 0 0;
		background-size: 30px auto;
		font-weight: bold;
	}
	#first .hidden_box input {
		display: none;
	}
	#first .hidden_box .hidden_show {
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: 0.8s;
		padding: 0 0 0 38px;
	}
	#first .hidden_box input:checked ~ .hidden_show {
		padding: 4px 0 0 38px;
		margin-top: 5px;
		height: auto;
		opacity: 1;
		background: url(/static/s_support/images/icon_a.png) no-repeat 0 0;
		background-size: 30px auto;
	}
	#first .price_line{
		text-align: right;
		color: #f0626a;
	}
	#first .price_line span{
	}
	#first .misin_pinch{
		color: #f0626a;
		background-color: #ffe560;
		padding: 5px 15px;
		border-radius: 5px;
	}
	#first .misin_list{
		margin-bottom: 60px;
	}
	#first .misin_list h4 {
		text-align: center;
		margin-bottom: 5px;
	}
	#first .misin_list h4 img{
		width: 269px; height: auto;
	}
	#first .misin_single{
		display: flex;
		margin-top: 20px;
		padding-top: 20px;
	    border-top: 1px solid #eee6d6;
	}
	#first .misin_img{
		width:153px;
	}
	#first .misin_txt{
		flex: 1;
		margin-left: 8px;
	}
	#first .misin_txt h5{
		font-weight: bold;
		font-size: 1.2em;
		margin-bottom: 5px;
	}
	#first .misin_txt a{
		display: block;
		text-align: center;
		padding: 7px 3px 7px 0;
		box-sizing: border-box;
		background: #fff url(/static/s_support/images/yajirusi.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #8b4e21 2px solid;
		border-radius: 5px;
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 0.05em;
		margin-top: 10px;
		line-height:1em;
	}

	/* ---------------------------- step4 */

	#first #step4 #title_fabric{
		text-align: center;
		font-weight: bold;
		font-size: 1.5em;
		margin: 30px 0 20px;
	}
	#first #step4 #title_fabric:before{
		content: '1';
		background: #ffe560;
		border-radius:50%;
		display: block;
		width: 35px;
		height: 35px;
		margin: 0 auto 10px;
	}
	#first #step4 #title_parts{
		text-align: center;
		font-weight: bold;
		font-size: 1.5em;
		margin: 50px 0 30px;
	}
	#first #step4 #title_parts:before{
		content: '2';
		background: #ffe560;
		border-radius:50%;
		display: block;
		width: 35px;
		height: 35px;
		margin: 0 auto 10px;
	}

	#first #step4 .flex_box {
		display: flex;
		justify-content: space-between;
		margin: 15px 0;
		padding-bottom: 15px;
		border-bottom: 2px solid #cfcfcf;
	}
	#first #step4 .flex_box .flex_left {
		width: 32%;
	}
	#first #step4 .flex_box .flex_right {
		flex: 1;
		margin-left: 15px;
	}
	#first #step4 .flex_box .flex_left figure{
		margin: 5px 0 0;
	}
	#first #step4 h4{
		font-weight: bold;
		font-size: 1em;
	}
	

	/* ---------------------------- mamadvice */
	#first #mamadvice{
		padding: 30px 10px 30px;
		margin: 30px 0 10px;
		position: relative;
	}
	#first #mamadvice img#fukidashi{
		position: absolute;
		width: 198px; height: auto;
		top: -2px;
		left: 0;
		right: 0;
		margin: auto;
	}
	#first #mamadvice .pickup{
		margin-top: 20px;
		background-color: #ffe560;
		padding: 15px;
		border-radius: 5px;
	}
	#first #mamadvice .pickup img{
	}
	#first #mamadvice h1{
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: #f0626a;
	}
	#first #mamadvice h2{
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		text-align: center;
		line-height: 1.4em;
	}
	#first #mamadvice h2 span {
		font-size: 12px;
	}
	#first #mamadvice .flex_outer{
		display: flex;
		margin-top: 10px;
	}
	#first #mamadvice .flex_right{
		width: 67px;
		padding: 5px;
	}
	#first #mamadvice .flex_left{
		padding: 5px;
		flex: 1;
	}
	#first .nameorder_link{
		margin: 20px auto 0;
	}
	#first .nameorder_link img{
		border-radius: 10px;
	}

	/* ---------------------------- step5 */
	#first #step5 figure {
		text-align: center;
		margin: 15px 0 10px;
	}
	#first #step5 img#book {
		width:200px;
	}
	#first #step5 figure + p {
		text-align: center;
		font-size:14px;
		font-weight:bold;
		margin-bottom: 10px;
	}

	/* ---------------------------- links */
	#first #buttons, #book #buttons{
		margin: 50px 15px ;
	}
	#first #buttons .main_button, #book #buttons .main_button{
		margin:0 0 15px;
	}
	#first #buttons #pink a, #book #buttons #pink a{
		background-color: #ffd5dc;
	}
	#first #buttons #green a, #book #buttons #green a{
		background-color: #72ffd2;
	}
	#first #buttons #yellow a, #book #buttons #yellow a{
		background-color: #ffe560;
	}
	#first #buttons #blue, #book #buttons #blue a{
		background-color: #a8c9ff;
	}

	/*-------------------------------------/
	/book
	/*------------------------------------*/

	#book{
		padding-top: 57px;
	}
	#book p + p{
		margin-top: 8px;
	}

	#book h2{
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		line-height: 1.1em;
		margin-bottom: 60px;
	}
	#book h2 span{
		font-size: 14px;
	}
	#book h2 b{
		font-size: 23px;
		color: #ffb700;
	}
	#book h3 {
		font-size: 17px;
		font-weight: bold;
		text-align: center;
		line-height: 1.4em;
		margin-bottom: 8px;
	}
	#book .shop_button {
		width :260px;
		margin: 25px auto;
	}
	#book .shop_button a{
		display: block;
		color: #fff;
		font-weight: bold;
		background: #ff4b8f url(/static/s_support/images/yajirusi_w.png) 96% 50% no-repeat;
		background-size: 6px auto;
		padding: 8px 0 8px;
		box-sizing: border-box;
		border-radius: 45px;
		text-align: center;
		text-decoration: none;
	}
	/* --------------------------- header */
	#book img{
		width:100%;
	}
	#book figure{
		margin-top:10px;
	}
	#book header{
		background: url(/static/s_support/images/book/page_bg.jpg) 50% 0 no-repeat;
		background-size: auto 130px;
		padding: 130px 10px 35px 10px;
		position: relative;
		overflow: hidden;
	}
	#book header h1{
		text-align: center;
		font-size: 21px;
		font-weight: bold;
		line-height: 1.15em;
		margin: 20px 0 25px;
	}
	#book header h1 > span{
		font-size: 12px;
	}
	#book header p{
		width: 49%;
		float: left;
	}
	#book header .bookinfo{
		width:49%;
		float: right;
	}
	#book header .bookinfo p{
		width: 100%;
		text-align: center;
		background-color: #efefdd;
		line-height: 1.5em;
		padding: 5px 0;
	}
	#book header .bookinfo p span{
		color: #ee1c23;
	}

	#book #point{
		border-top :2px solid #e4e4cd;
		padding: 30px 0 0;
		margin: 0 10px;
	}
	#book .point_box{
		position: relative;
		margin: 40px 0 0;
	}
	#book .point_box figure{
		position: absolute;
		width: 70px;
		top: -8%;
		left: 0;
		right: 0;
		margin: auto;
	}
	#book #point1{
		background: url(/static/s_support/images/book/point1_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 58% 5px 10px;
	}
	#book #point2{
		background: url(/static/s_support/images/book/point2_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 58% 5px 10px;
	}
	#book #point3{
		background: url(/static/s_support/images/book/point3_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 58% 5px 10px;
	}
	#book #point4{
		background: url(/static/s_support/images/book/point4_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 58% 5px 10px;
	}
	#book #point1 .color_sheet{
		background-color: rgba(251,232,76,0.8);
	}
	#book #point2 .color_sheet{
		background-color: rgba(152,218,254,0.8);
	}
	#book #point3 .color_sheet{
		background-color: rgba(159,232,192,0.8);
	}
	#book #point4 .color_sheet{
		background-color: rgba(255,167,202,0.8);
	}
	#book .color_sheet{
		padding: 15px 10px;
	}


	#book #publish{
		margin: 50px 0 0;
	}
	#book #publish h2{
		margin-bottom: 0;
	}
	#book #publish h3{
		margin-top : 40px;
	}
	#book #publish h3 span{
		font-size:0.75em;
	}
	#book #publish .works_box{
		margin: 40px 15px 0;
	}
	#book #publish h4{
		font-weight: bold;
		font-size: 0.95em;
		margin-top:5px;
	}
	#book #publish h4 span{
		font-size: 1.05em;
		margin-right: 5px;
	}
	#book #publish ul{
		overflow: hidden;
		margin-top:10px;
	}
	#book #publish li{
		float: left;
		color:#fff;
		margin-right: 5px;
		font-size: 11px;
		background-color: #ffbe19;
		border-radius: 15px;
		padding: 1px 6px;
		margin-bottom: 5px;
	}
	#book #publish p{
		background-color: #efefdd;
		padding: 10px;
		margin-top:10px;
	}

	#book #publish .flex_outer{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 15px;
	}
	#book #publish .flex_outer p{
		background: none;
		padding: 0;
		width:49%;
	}

	#book #information {
		margin-top: 50px;
	}
	#book #information p{
		margin: 15px;
	}
	#book #information h2{
		margin-bottom: 25px;
	}
	#book #information .bookinfo{
		text-align: center;
	}
	#book #information .bookinfo img{
		width: 50%;
	}
	#book #information h3{
		font-size: 16px;
		letter-spacing: 0.05em;
		margin : 0;
	}
	#book #information .bookinfo h3 + p{
		text-align: center;
		font-size: 1em;
		margin : 0;
	}
	#book #information .bookinfo p span{
		color: #ee1c23;
	}
	#book #information h5{
		font-size:15px;
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding-bottom: 3px;
		margin: 25px 15px 10px;
	}

	/*-------------------------------------/
	/products
	/*------------------------------------*/

	#products{
		padding-top: 57px;
	}
	#products p + p{
		margin-top: 8px;
	}

	#products h2{
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1em;
		margin: 40px 0 20px;
		color: #f0626a;
		text-align: center;
	}
	#products h2 span{
		font-size: 0.6em;
		letter-spacing: 0.2em;
	}
	#products h3.mokuji {
		margin: 1%;
		text-align: center;
		font-weight: bold;
		font-size: 0.9em;
	}
	#products h4 {
		font-size: 1.1em;
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding: 5px;
		margin: 10px 2% 20px;
	}
	#products h4 {
		font-size: 1.1em;
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding: 5px;
		margin: 10px 2% 20px;
	}
	#products #itemlist .itembox h3 {
		font-size: 1em;
		margin-top: 8px;
	}

	/* --------------------------- header */
	#products img{
		width:100%;
	}
	#products figure{
		margin-top:10px;
	}
	#products header{
		margin: 0 2% 0;
	}
	#products header h1{
		text-align: center;
		font-size: 21px;
		font-weight: bold;
		line-height: 1.15em;
		margin: 20px 0 25px;
	}
	#products header h1 > span{
		font-size: 12px;
	}
	#products p.attention{
		color: #f0626a;
		background-color: #ffe560;
		padding: 5px 15px;
		border-radius: 5px;
		margin: 20px 2%;
	}
	#products p.attention a{
		color: #60b515;
	}

	#products #itemlist .genre a{
		width:;
	}
	#products #itemlist .genre{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 0 1% 30px ;
	}
	#products #itemlist .genre:after {
		display: block;
		content:"";
		width: 47%;
	}
	#products #itemlist .genre a{
		width: 47%;
		position:relative;
		background: #f3f3f3;
		padding: 3px;
		margin: 5px 0 0;
	}
	#products #itemlist .genre a:before{
		content:"・";
		margin-right: 5px;
		color: #ccc;
		min-height: 15px;
		line-height: 15px;
	}
	#products #itemlist .outer{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 1%;
	}
	#products #itemlist .outer:after {
		display: block;
		content:"";
		width: 47%;
	}
	#products #itemlist .itembox{
		width: 47%;
		position:relative;
		padding-bottom: 50px;
		margin-bottom: 40px;
	}
	#products #itemlist .shop_button{
		width: 100%;
		position: absolute; 
		bottom: 0;
	}
	#products #itemlist .shop_button a{
		display: block;
		text-align: center;
		min-height: 2.1em;
		line-height: 2.1em;
		box-sizing: border-box;
		background: #fff url(/static/s_support/images/yajirusi.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #8b4e21 2px solid;
		border-radius: 15px;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0.05em;
	}
	#products #itemlist .shop_button a.b_rakuten{
		background: #bf0000 url(/static/s_support/images/yajirusi_w.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #bf0000 2px solid;
		color: #fff;
	}
	#products #itemlist .shop_button a.b_yahoo{
		background: #fff url(/static/s_support/images/yajirusi_g.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #999999 2px solid;
		color: #ff0033;
	}
	#products #itemlist .shop_button a + a{
		margin-top: 6px;
	}
	#products .itembox ul {
		display: flex;
	}
	#products .itembox ul li {
		font-size: 0.7em;
		padding: 0 6px;
		line-height: 1.7em;
		margin-right: 2px;
	}
	#products .itembox li.tag_original{
		background-color: #f0626a;
		border-radius: 20px;
		color: #fff;
	}
	#products .itembox li.tag_onlineshop{
		background-color: #9de89f;
		border-radius: 20px;
	}
	#products .itembox li.tag_byebyekin{
		background-color: #b5ded5;
		border-radius: 20px;
	}
	#products .itembox li.tag_quilt{
		background-color: #ffe560;
		border-radius: 20px;
	}


	/* ---------------------------- links */
	#products #buttons, #book #buttons{
		margin: 50px 15px ;
	}
	#products #buttons .main_button, #book #buttons .main_button{
		margin:0 0 15px;
	}
	#products #buttons #pink a, #book #buttons #pink a{
		background-color: #ffd5dc;
	}
	#products #buttons #green a, #book #buttons #green a{
		background-color: #72ffd2;
	}
	#products #buttons #yellow a, #book #buttons #yellow a{
		background-color: #ffe560;
	}
}


/*======================
           pc          
======================*/
@media print, screen and (min-width: 769px) {

	.loop_wrap {
		padding-top: 55px;
		display: flex;
		width: 100vw;
		overflow: hidden;
	}
	.loop_wrap img {
	}
	#article_contents_top{
		width:960px;
		margin:0 auto;
	}
	#article_contents{
		width:840px;
		margin:0 auto;
	}
	/*-------------------------------------/
	/top
	/*------------------------------------*/
	#hello{
		margin: 130px 15px;
	}
	#hello h1{
		font-size: 23px;
		font-weight: bold;
		margin: 10px 0 40px;
		text-align: center;
	}
	#hello h1 > br{
		display: none;
	}
	#hello h1:after{
		content: 'AS A PARTNER';
		font-family: 'Raleway', sans-serif;
		color: #d5c8ad;
		font-size: 1.1em;
		display: block;
		letter-spacing: 0.1em;
		margin-top: 20px;
	}
	#hello p{
		margin-bottom: 10px;
	}
	.white_sheet{
		background-color: rgba(255,255,255,0.8);
		padding: 30px;
		margin: 0 0 40px auto;
		width: 710px;
		box-sizing: border-box;
	}
	.white_sheet h2{
		font-size: 23px;
		text-align: center;
		font-weight: bold;
		margin: 20px 0 25px 0;
		line-height: 1.3em;
	}
	.white_sheet h2 > span{
		font-size: 28px;
	}
	.white_sheet h2 + p{
		margin: 0 0 20px;
	}
	.main_button{
		position: relative;
	}
	.main_button a {
		width:400px;
		margin:0 auto;
		display: block;
		box-sizing: border-box;
		text-align: center;
		background-image: url(/static/s_support/images/check.png), url(/static/s_support/images/yajirusi.png);
		background-position: 50% 13px, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: auto 24px, 6px auto;
		padding: 42px 10px 10px 0;
		font-size: 18px;
		line-height: 1.05em;
		font-weight: bold;
		letter-spacing: 0.05em;
	}
	.main_button a > span {
		font-size: 11px;
		font-weight: bold;
		padding: 0 17px 0 30px;
		letter-spacing: 0.025em;
	}
	.main_button img{
		width: 50px; height: auto;
		position: absolute;
		left: 120px;
		top: -6px;
	}
	.main_button p{
		color: #1ca595;
		margin: 5px 15px 20px;
	}
	.sub_button a {
		width:450px;
		display: block;
		padding: 18px 0 20px 60px;
		box-sizing: border-box;
		position: relative;
		background: #fff url(/static/s_support/images/yajirusi.png) 98% 50% no-repeat;
		background-size: 6px auto;
		border: 2px solid #8b4e21;
		border-radius: 10px;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 0.05em;
		margin: 30px auto;
		line-height:1.1em;
	}
	.sub_button a > span {
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0.025em;
	}
	.sub_button p{
		color: #1ca595;
		margin: 5px 15px 20px;
	}
	.sub_button a.pdf {
		background-image: url(/static/s_support/images/icon_pdf.png), url(/static/s_support/images/yajirusi.png);
		background-position: 5% 50%, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: 22px auto, 6px auto;
	}
	.sub_button a.tube {
		background-image: url(/static/s_support/images/icon_tube.png), url(/static/s_support/images/yajirusi.png);
		background-position: 5% 50%, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: 26px auto, 6px auto;
	}
	.sub_button a.hatena {
		background-image: url(/static/s_support/images/icon_hatena.png), url(/static/s_support/images/yajirusi.png);
		background-position: 5% 50%, 98% 50%;
		background-repeat: no-repeat, no-repeat;
		background-size: 21px auto, 6px auto;
	}

	/* ---------------- 個別 handmade */
	#handmade .main_button a{
		background-color: #ffd5dc;
	}
	#handmade{
		background: url(/static/s_support/images/mainimg_handmade.jpg) 0 0 no-repeat;
		background-size: 600px auto;
		padding: 30% 10px 10px;
	}
	#handmade h2:after{
		content: 'HANDMADE';
		font-family: 'Raleway', sans-serif;
		color: #aaaaaa;
		font-size: 0.5em;
		display: block;
		letter-spacing: 0.2em;
	}

	/* ---------------- 個別 custommade */
	#custommade{
		background: url(/static/s_support/images/mainimg_custommade.jpg) 0 0 no-repeat;
		background-size: 600px auto;
		padding: 30% 10px 10px;
	}
	#custommade .white_sheet{
		position: relative;
	}
	#custommade .white_sheet img{
		position: absolute;
		top: -100px;
		right: 0px;
	}
	#custommade h2:after{
		content: 'CUSTOM MADE';
		font-family: 'Raleway', sans-serif;
		color: #aaaaaa;
		font-size: 0.5em;
		display: block;
		letter-spacing: 0.2em;
	}
	#custommade .main_button a{
		background-color: #72ffd2;
	}

	/* ---------------- 個別 readymade */
	#readymade{
		background: url(/static/s_support/images/mainimg_readymade.jpg) 0 0 no-repeat;
		background-size: 600px auto;
		padding: 30% 10px 10px;
	}
	#readymade h2:after{
		content: 'READY MADE';
		font-family: 'Raleway', sans-serif;
		color: #aaaaaa;
		font-size: 0.5em;
		display: block;
		letter-spacing: 0.2em;
	}
	#readymade .main_button a{
		background-color: #ffe560;
	}

	/*-------------------------------------/
	/first
	/*------------------------------------*/

	#first{
		padding-top: 57px;
		font-size: 16px;
	}
	#first p{
		line-height:1.75em;
	}
	#first p + p{
		margin-top: 8px;
	}
	#first #step1 > h3,
	#first #step2 > h3,
	#first #step3 > h3,
	#first #step4 > h3,
	#first #step5 > h3 {
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding-bottom: 5px;
		margin: 70px 0 10px;
		font-size:1.2em;
	}
	#first #step1,
	#first #step2,
	#first #step3,
	#first #step4,
	#first #step5 {
		position: relative;
		margin: 80px 15px 0;
	}
	#first section > h2{
		color: #f0626a;
		font-size: 22px;
		font-weight: bold;
		height: 38px;
		padding: 2px 0 0 90px;
		-ms-padding: 13px 0 0 90px;
		box-sizing: border-box;
		margin:0 0 30px;
	}
	#first .step{
		position: absolute;
		background-color: #f0626a;
		color: #fff;
		font-size: 18px;
		font-family: 'Oswald', sans-serif;
		font-weight: 500;
		letter-spacing: 0.1em;
		display: inline-block;
		text-align: center;
		height: 38px;
		min-width: 80px;
		padding-top: 2px;
		box-sizing: border-box;
	}
	#first .step > span{
		font-size: 24px;
		margin: 0 0 0 3px;
	}
	#first .sub_button {
		margin: 20px 0 40px;
	}
	#first .sub_button a > span {
		margin-right: 8px;
	}

	/* --------------------------- header */

	#first figure{
		margin:30px 0;
		text-align:center;
	}
	#first header{
		background:url(/static/s_support/images/page_bg.jpg) 50% 0 no-repeat;
		background-size: 640px auto;
		padding-top: 22%;
	}
	#first header h1{
		position: relative;
		text-align: center;
		font-size: 2em;
		line-height: 1.15em;
		margin: 20px 0 15px;
		font-weight: bold;
	}
	#first header h1 > span{
		font-size: 0.5em;
		letter-spacing:0.08em;
	}
	#first header p{
		margin: 30px 0;
		text-align: center;
	}

	/* --------------------------- mokuji */
	#first #mokuji{
		border: 2px dashed #eee6d6;
		margin: 30px auto 0;
		padding: 15px 25px 15px 0;
		font-size: 14px;
		width:400px;
	}
	#first #mokuji .title{
		font-size: 13px;
		text-align: center;
		background-color:#eee6d6;
		margin:0 0 10px 25px;
		padding: 2px;
	}
	#first #mokuji a{
		display: block;
	}
	#first #mokuji ul{
		margin:0 0 10px 25px;
	}
	#first #mokuji ul li{
		margin:5px 0;
	}
	#first #mokuji ul.level1 a{
		border-bottom: 1px solid #eee6d6;
		padding:3px 0;
	}
	#first #mokuji ul.level2 a{
		border-bottom: 1px dashed #eee6d6;
	}

	/* ---------------------------- check */
	#first .check{
		background-color: #fff;
		padding: 20px;
		margin-top: 40px;
		border-radius: 10px;
	}
	#first .check .flex_outer{
		display: flex;
	}
	#first .check .flex_left{
		width: 128px;
		padding: 15px;
	}
	#first .check .flex_left img{
		width: 100%;
	}
	#first .check .flex_right{
		padding: 10px;
		flex: 1;
	}
	#first .check h3{
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		padding: 5px 0;
	}
	#first .check h3 > br {
		display: none;
	}
	#first .check .anser{
		color: #f0626a;
		font-weight: bold;
		text-align: center;
	}
	#first .check .title{
		color: #f0626a;
		font-weight: bold;
		text-align: center;
		font-size: 1.5em;
	}

	/* ---------------------------- question */
	#first .question{
		margin: 40px 15px;
		box-sizing: border-box;
		background-image: url(/static/s_support/images/question.png), url(/static/s_support/images/mama1.png);
		background-position: 0 0px, 100% 0;
		background-repeat: no-repeat, no-repeat;
		background-size: 180px auto, 116px auto;
	}
	#first .question .flex_outer{
		display: flex;
		margin-top: 40px;
	}
	#first .question .flex_left{
		width: 142px;
		padding: 15px;
	}
	#first .question .flex_left img{
		width: 100%;
	}
	#first .question .flex_right{
		padding: 10px;
		flex: 1;
	}
	#first .question h3{
		font-size: 22px;
		font-weight: bold;
		line-height: 1.3em;
		margin-bottom: 10px;
		color: #f0626a;
		padding: 80px 90px 0 0;
	}
	#first .question h3 > br {
		display: none;
	}
	#first .question h3 + p{
		padding-right: 140px;
	}
	#first .question .anser{
		font-size: 20px;
		color: #f0626a;
		font-weight: bold;
		margin-bottom: 7px;
	}
	#first .question figure {
		text-align: center;
	}
	#first .question figure > img{
		width: 150px;
	}

	/* ---------------------------- breaktime */
	#first .breaktime{
		padding: 30px;
		margin: 40px 0;
		background:  url(/static/s_support/images/coffee.png) no-repeat 50% 40px;
		background-size: 260px auto;
		border: 2px dashed #e0e0e0;
	}
	#first .breaktime .title{
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 25px;
		padding: 100px 0 0 0;
		border: none;
		text-align: center;
	}
	#first .breaktime .title > br{
		display: none;
	}

	/* ---------------------------- step3 */
	#first #step3_3,#first #step3_4{
		margin-top: 80px;
	}
	#first #step3_3 h3, #first #step3_4 h3{
		background: url(/static/s_support/images/misin_icon.png) no-repeat 50% 0;
		background-size: 65px auto;
		text-align: center;
		font-weight: bold;
		border-bottom: 3px solid #ffe560;
		padding: 65px 0 15px;
		margin: 0 auto;
	}
	#first #step3_3 h3 + p , #first #step3_4 h3 + p{
		margin: 20px 0 30px;
	}
	#first .hidden_box{
		border-bottom: 2px dashed #ffe560;
		margin-top: 15px;
		padding-bottom: 19px;
	}
	#first .hidden_box label {
		display: block;
		padding: 4px 0 0 38px;
		min-height: 30px;
		color: #f0626a;
		cursor: pointer;
		background: url(/static/s_support/images/icon_q.png) no-repeat 0 0;
		background-size: 30px auto;
	}
	#first .hidden_box input {
		display: none;
	}
	#first .hidden_box .hidden_show {
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: 0.8s;
		padding: 0 0 0 38px;
	}
	#first .hidden_box input:checked ~ .hidden_show {
		padding: 4px 0 0 38px;
		margin-top: 5px;
		height: auto;
		opacity: 1;
		background: url(/static/s_support/images/icon_a.png) no-repeat 0 0;
		background-size: 30px auto;
	}
	#first .price_line{
		text-align: right;
		color: #ed8f9f;
	}
	#first .price_line span{
		color: #8b4e21;
	}
	#first .misin_pinch{
		color: #f0626a;
		background-color: #ffe560;
		padding: 5px 15px;
		border-radius: 5px;
	}
	#first .misin_list{
		margin-bottom: 60px;
	}
	#first .misin_list h4 {
		margin-top: 50px;
		margin-bottom: 20px;
		text-align: center;
	}
	#first .misin_list h4 img{
		width: 400px; height: auto;
	}
	#first .misin_flex{
	    border-top: 1px solid #eee6d6;
	    margin-top: 20px;
	}
	#first .misin_single{
		display: flex;
		margin: 20px 0;
		padding: 0 0 20px;
	    border-bottom: 1px solid #eee6d6;
	}
	#first .misin_img{
		width: 306px;
		margin-right: 30px;
	}
	#first .misin_img img{
		width: 306px;
	}
	#first .misin_txt{
		margin-left: 8px;
	}
	#first .misin_txt h5{
		font-weight: bold;
		font-size: 1.2em;
		margin: 15px 0;
	}
	#first .misin_txt a{
		display: block;
		text-align: center;
		padding: 10px 3px 10px 0;
		box-sizing: border-box;
		background: #fff url(/static/s_support/images/yajirusi.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #8b4e21 2px solid;
		border-radius: 5px;
		font-size: 13px;
		font-weight: bold;
		letter-spacing: 0.05em;
		margin-top: 25px;
		line-height:1em;
	}

	/* ---------------------------- step4 */

	#first #step4 #title_fabric{
		text-align: center;
		font-weight: bold;
		font-size: 1.7em;
		margin: 80px 0 30px;
	}
	#first #step4 #title_fabric:before{
		content: '1';
		background: #ffe560;
		border-radius:50%;
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto 10px;
		padding-top: 3px;
	}
	#first #step4 #title_parts{
		text-align: center;
		font-weight: bold;
		font-size: 1.7em;
		margin: 80px 0 30px;
	}
	#first #step4 #title_parts:before{
		content: '2';
		background: #ffe560;
		border-radius:50%;
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto 10px;
	}
	#first #step4 .flex_box p > span{
		font-size: 20px;
		color: #53bfc4;
	}
	#first #step4 .flex_box {
		display: flex;
		justify-content: space-between;
		margin: 15px 0;
		padding-bottom: 15px;
		border-bottom: 2px solid #cfcfcf;
	}
	#first #step4 .flex_box .flex_left {
		width: 220px;
		margin: 15px;
	}
	#first #step4 .flex_box .flex_right {
		flex: 1;
		margin: 15px 15px 15px 30px;
	}
	#first #step4 .flex_box .flex_left figure{
		margin: 5px 0 0;
	}
	#first #step4 h4{
		font-weight: bold;
		font-size: 1.25em;
		margin-bottom: 15px;
	}


	/* ---------------------------- mamadvice */
	#first #mamadvice{
		padding: 60px 30px 30px;
		margin: 80px 15px 10px;
		position: relative;
	}
	#first #mamadvice img#fukidashi{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	#first #mamadvice .pickup{
		background-color: #ffe560;
		padding: 30px 40px;
		margin-top: 15px;
		border-radius: 10px;
	}
	#first #mamadvice .pickup img{
		margin-bottom: 0px;
	}
	#first #mamadvice h2{
		font-size: 26px;
		font-weight: bold;
		margin-bottom: 5px;
		text-align: center;
		line-height: 1.2em;
	}
	#first #mamadvice h2 span {
		font-size: 16px;
	}
	#first #mamadvice h1{
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		color: #ed565e;
	}
	#first #mamadvice .flex_outer{
		display: flex;
		margin-top: 10px;
	}
	#first #mamadvice .flex_right{
		width: 110px;
		padding: 0 15px 15px;
		margin-right: 15px;
	}
	#first #mamadvice .flex_right img{
		width: 100%;
	}
	#first #mamadvice .flex_left{
		padding: 5px;
		flex: 1;
	}
	#first .nameorder_link{
		width: 690px;
		margin: 40px auto 0;
	}
	#first .nameorder_link img{
		width: 100%;
		border-radius: 10px;
	}

	/* ---------------------------- step5 */
	#first #step5 figure {
		text-align: center;
		margin: 15px 0 10px;
	}
	#first #step5 img#book_img{
		width:200px;
	}
	#first #step5 figure + p{
		text-align: center;
		font-size:16px;
		font-weight:bold;
		margin-bottom: 15px;
	}

	/* ---------------------------- links */
	#first #buttons,
	#book #buttons{
		margin: 70px 0 ;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#first #buttons .main_button,
	#book #buttons .main_button{
		margin:0 5px 15px;
	}
	#first #buttons #pink a,
	#book #buttons #pink a{
		background-color: #ffd5dc;
	}
	#first #buttons #green a,
	#book #buttons #green a{
		background-color: #72ffd2;
	}
	#first #buttons #yellow a,
	#book #buttons #yellow a{
		background-color: #ffe560;
	}
	#first #buttons #blue,
	#book #buttons #blue a{
		background-color: #a8c9ff;
	}

	/*-------------------------------------/
	/book
	/*------------------------------------*/

	#book{
		padding-top: 57px;
		background:url(/static/s_support/images/book/page_bg.jpg) 50% 0 no-repeat;
		padding-top: 260px;
	}
	#book p + p{
		margin-top: 8px;
	}

	#book h2{
		font-size: 1.8em;
		font-weight: bold;
		text-align: center;
		line-height: 1.1em;
		margin-bottom: 30px;
	}
	#book h2 span{
		font-size: 0.55em;
	}
	#book h2 b{
		font-size: 23px;
		color: #ffb700;
	}
	#book h3 {
		font-size: 17px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 15px;
	}
	#book .shop_button {
		width :360px;
		margin: 25px auto;
	}
	#book .shop_button a{
		display: block;
		color: #fff;
		background: #ff4b8f url(/static/s_support/images/yajirusi_w.png) 96% 50% no-repeat;
		background-size: 6px auto;
		padding: 11px 0 11px;
		box-sizing: border-box;
		border-radius: 45px;
		text-align: center;
		text-decoration: none;
	}
	/* --------------------------- header */

	#book header{
		overflow: hidden;
		width: 760px;
		margin: 0 auto;
		padding-bottom: 50px;
	}
	#book header h1{
		position: relative;
		text-align: center;
		font-size: 2em;
		line-height: 1.15em;
		margin: 20px 0 40px;
		font-weight: bold;
	}
	#book header h1 > span{
		font-size: 0.5em;
		letter-spacing:0.08em;
	}
	#book header p{
		width: 460px;
		float: left;
	}
	#book header .bookinfo{
		width: 260px;
		float: right;
	}
	#book header .bookinfo img{
		width: 260px;
	}
	#book header .bookinfo p{
		width: 100%;
		text-align: center;
		line-height: 1.5em;
		padding: 5px 0;
	}
	#book header .bookinfo p span{
		color: #ee1c23;
	}



	#book #point{
		border-top :2px solid #e4e4cd;
		padding: 30px 0 0;
		margin: 0 10px;
	}
	#book #point .outer{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#book .point_box{
		position: relative;
		margin: 50px 0 0;
		width: 400px;
	}
	#book .point_box figure{
		position: absolute;
		width: 70px;
		top: -8%;
		left: 0;
		right: 0;
		margin: auto;
	}
	#book .point_box figure img{
		width: 100%;
	}
	#book #point1{
		background: url(/static/s_support/images/book/point1_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 34% 0 10px;
	}
	#book #point2{
		background: url(/static/s_support/images/book/point2_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 34% 0 10px;
	}
	#book #point3{
		background: url(/static/s_support/images/book/point3_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 34% 0 10px;
	}
	#book #point4{
		background: url(/static/s_support/images/book/point4_img.jpg) 50% 0 no-repeat;
		background-size: 100% auto;
		padding: 34% 0 10px;
	}
	#book #point1 .color_sheet{
		background-color: rgba(251,232,76,0.8);
	}
	#book #point2 .color_sheet{
		background-color: rgba(152,218,254,0.8);
	}
	#book #point3 .color_sheet{
		background-color: rgba(159,232,192,0.8);
	}
	#book #point4 .color_sheet{
		background-color: rgba(255,167,202,0.8);
	}
	#book .color_sheet{
		padding: 15px;
		height: 12em;
	}


	#book #publish{
		margin: 150px 0 0;
		padding-bottom: 30px;
		border: 4px solid #ffbe19;
		position: relative;
	}
	#book #publish h2{
		margin-bottom: 0;
		position: absolute;
		top: -65px;
		left: 0;
		right: 0;
		margin: auto;
	}
	#book #publish h2 img{
		width: 500px;
	}
	#book #publish h3{
		margin-top : 80px;
		font-size: 1.7em;
		line-height: 1.1em;
	}
	#book #publish h3 span{
		font-size:0.75em;
	}
	#book #publish .works_box{
		margin: 60px auto 0;
		width: 690px;
	}
	#book #publish h4{
		font-weight: bold;
		font-size: 1.3em;
		margin-top:5px;
	}
	#book #publish h4 span{
		font-size: 1.05em;
		margin-right: 5px;
	}
	#book #publish ul{
		overflow: hidden;
		margin-top:10px;
	}
	#book #publish li{
		float: left;
		color:#fff;
		margin-right: 5px;
		font-size: 13px;
		background-color: #ffbe19;
		border-radius: 15px;
		padding: 1px 6px;
		margin-bottom: 5px;
	}
	#book #publish p{
		background-color: #efefdd;
		padding: 10px;
		margin-top: 20px;
	}

	#book #publish .flex_outer{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 15px auto;
		width: 690px;
	}
	#book #publish .flex_outer p{
		background: none;
		padding: 0;
		width:49%;
	}

	#book #information {
		margin-top: 50px;
	}
	#book #information p{
		margin: 15px;
	}
	#book #information h2{
		margin-bottom: 25px;
	}
	#book #information h2 img{
		width: 500px;
	}
	#book #information .bookinfo{
		text-align: center;
	}
	#book #information .bookinfo img{
		width: 325px;
	}
	#book #information h3{
		font-size: 16px;
		letter-spacing: 0.05em;
		margin : 0;
	}
	#book #information .bookinfo h3 + p{
		text-align: center;
		font-size: 1em;
		margin : 0;
	}
	#book #information .bookinfo p span{
		color: #ee1c23;
	}
	#book #information h5{
		font-size:17px;
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding-bottom: 3px;
		margin: 50px 15px 10px;
	}

	/*-------------------------------------/
	/products
	/*------------------------------------*/

	#products{
		padding-top: 57px;
	}
	#products p + p{
		margin-top: 8px;
	}

	#products h2{
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1em;
		margin: 40px 0 20px;
		color: #f0626a;
		text-align: center;
	}
	#products h2 span{
		font-size: 0.6em;
		letter-spacing: 0.2em;
	}
	#products h3.mokuji {
		margin: 1%;
		text-align: center;
		font-weight: bold;
		font-size: 0.9em;
	}
	#products h4 {
		font-size: 1.1em;
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding: 5px;
		margin: 10px 2% 20px;
	}
	#products h4 {
		font-size: 1.1em;
		font-weight: bold;
		border-bottom: 2px solid #8b4e21;
		padding: 5px;
		margin: 10px 0 30px;
	}
	#products #itemlist .itembox h3 {
		font-size: 1em;
		margin-top: 8px;
	}


	/* --------------------------- header */
	#products img{
		width:100%;
	}
	#products figure{
		margin-top:10px;
	}
	#products header{
		width: 840px;
		margin: 0 auto;
	}
	#products header h1{
		text-align: center;
		font-size: 21px;
		font-weight: bold;
		line-height: 1.15em;
		margin: 20px 0 25px;
	}
	#products header h1 > span{
		font-size: 12px;
	}
	#products header p{
	}
	#products  p.attention{
		width: 810px;
		color: #f0626a;
		background-color: #ffe560;
		padding: 5px 15px;
		border-radius: 5px;
		margin: 20px auto;
	}
	#products p.attention a{
		color: #60b515;
	}

	#products #itemlist .genre a{
		width:;
	}
	#products #itemlist .genre{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 1% 30px ;
	}
	#products #itemlist .genre:after {
		display: block;
		content:"";
		width: 31%;
	}
	#products #itemlist .genre a{
		width: 31%;
		position:relative;
		background: #f3f3f3;
		padding: 3px;
		margin: 5px 0 0;
	}
	#products #itemlist .genre a:before{
		content:"・";
		margin-right: 5px;
		color: #ccc;
		min-height: 15px;
		line-height: 15px;
	}

	#products #itemlist .outer{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 1% ;
	}
	#products #itemlist .outer:after {
		display: block;
		content:"";
		width: 30%;
	}

	#products #itemlist .itembox{
		width: 30%;
		position:relative;
		padding-bottom: 50px;
		margin: 0 0 50px 0;
	}
	#products #itemlist .shop_button{
		width: 80%;
		margin:0 10%;
		position: absolute; 
		bottom: 0;
	}
	#products #itemlist .shop_button a{
		display: block;
		text-align: center;
		min-height: 2.1em;
		line-height: 2.1em;
		box-sizing: border-box;
		background: #fff url(/static/s_support/images/yajirusi.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #8b4e21 2px solid;
		border-radius: 15px;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0.05em;
	}
	#products #itemlist .shop_button a.b_rakuten{
		background: #bf0000 url(/static/s_support/images/yajirusi_w.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #bf0000 2px solid;
		color: #fff;
	}
	#products #itemlist .shop_button a.b_yahoo{
		background: #fff url(/static/s_support/images/yajirusi_g.png) 95% 50% no-repeat;
		background-size: 6px auto;
		border: #999999 2px solid;
		color: #ff0033;
	}
	#products #itemlist .shop_button a + a{
		margin-top: 6px;
	}
	#products .itembox ul {
		display: flex;
	}
	#products .itembox ul li {
		font-size: 0.8em;
		padding: 0 10px;
		line-height: 1.7em;
		margin-right: 3px;
		letter-spacing: 0.05em
	}
	#products .itembox li.tag_original{
		background-color: #f0626a;
		border-radius: 20px;
		color: #fff;
	}
	#products .itembox li.tag_onlineshop{
		background-color: #9de89f;
		border-radius: 20px;
	}
	#products .itembox li.tag_byebyekin{
		background-color: #b5ded5;
		border-radius: 20px;
	}
	#products .itembox li.tag_quilt{
		background-color: #ffe560;
		border-radius: 20px;
	}


	/* ---------------------------- links */
	#products #buttons, #book #buttons{
		margin: 50px 15px ;
	}
	#products #buttons .main_button, #book #buttons .main_button{
		margin:0 0 15px;
	}
	#products #buttons #pink a, #book #buttons #pink a{
		background-color: #ffd5dc;
	}
	#products #buttons #green a, #book #buttons #green a{
		background-color: #72ffd2;
	}
	#products #buttons #yellow a, #book #buttons #yellow a{
		background-color: #ffe560;
	}

}