@media screen and (max-width:1000px) {		/*タブレット用CSS*/
#send{
	-webkit-flex-wrap: wrap;/* Safari etc. */
	flex-wrap: wrap;
}

#send li{
	width:100%;
	margin-bottom:5px;
	text-align:center;
}
}

/* 流れ
-----------------------------------------*/
h3{
	padding:0 0 10px;
}

h3:first-letter{
	font-size:48px;
	font-weight:normal;
	vertical-align:bottom;
	display:inline-block;
	margin-right:5px;
	line-height:120%;
}

h4{
	font-size:18px;
	margin:30px 0 5px;
}

h5{
	font-size:18px;
	margin:30px 0 5px;
}


@media screen and (max-width:480px) {		/*スマホ用CSS*/
h5{
	font-size:15px;
}
}
/*共通事項*/
#contents{
	padding:0 0 40px;

}

#contents p:nth-of-type(n+2){
	margin-bottom:20px;
}

#contents a{
	text-decoration:underline !important;
}

#contents a:hover{
	text-decoration:none !important;

}

#contents p{
	margin:10px 0 10px;
}


.link_area{
	margin:20px 0;
}

.link_area li{
	background:url(../img/flow/icon_arrow.png) no-repeat left center;
	padding-left:25px;
}

.att,.att2{
	margin:20px 0;
}

.att li,.att2 li{
	line-height:120%;
	margin-bottom:10px;
	padding-left:1em;
	text-indent:-1em;
}

.att li::before{
	content:"\0030fb";
	margin-right:5px;
}

.att2 li::before{
	content:"\203B";
	margin-right:5px;
}



/*フローチャート*/
#contents .flow {
   	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: left;
    justify-content: left;
  	align-items: center;
	-webkit-align-items: center;


}

#contents .flow li {
	width:16.66%;
	font-size:16px;
    background: #221815;
    position: relative;
	text-align:center;
	padding-left:15px;
	box-sizing:border-box;
}

#contents .flow li:nth-child(2n) {
	background-color:#6d5750;
}

#contents .flow li:nth-child(n+7) {
	display:none;
}


#contents .flow li:before {
    border-left: 20px solid #221815; /* １番目の三角形は背景色と同じ色を指定 */
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    content: "";
    position: absolute;
    left: 0; /* ボックスの左に合わせて三角形を作る */
    top: 0;
}

#contents .flow li:nth-child(2n+3)::before {
 	border-left-color: #6d5750;
 }
 
/* 最後のボックスにだけ、右側に付ける三角形を作成する */
#contents .flow li:nth-child(6)::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
    border-left: 20px solid #6d5750;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}

#contents .flow li a{
	display:block;
	color:#FFF;
	text-decoration:none !important;
	padding-top:17px;
    height: 43px;
}

#contents .flow li a:hover{
	color:#ffc435;
	text-decoration:none;
}

#contents .first{
	margin:10px 0;

}

@media screen and (max-width:1200px) {		/*タブレット用CSS*/
#contents .flow li {
	font-size:15px;
}
}

@media screen and (max-width:1000px) {		/*タブレット用CSS*/
#contents .flow li {
	font-size:14px;
	width:16%;
}

#contents .flow li:nth-child(6){
	width:20%;
}
}

@media screen and (max-width:767px) {		/*タブレット用CSS*/
#contents .flow{
	-webkit-flex-wrap: wrap;/* Safari etc. */
	flex-wrap: wrap;

}

#contents .flow li,#contents .flow li:nth-child(6){
	font-size:12px;
	width:33.3%;
	padding-left:6px;
}

#contents .flow li a::before{
	content:"\25BC";
	color:#FFF;
	margin-right:5px;
	margin-left:-5px;
}

#contents .flow li:nth-child(n+7) a::before{
	color:#221815;
}


#contents .flow li::before,#contents .flow li:nth-child(6)::after {
	content:none;
}

#contents .flow li:nth-child(7){
	margin-right:1%;
} 

#contents .flow li:nth-child(n+7) {
	display:block;
	width:49.5%;
	background-color:#f5f2da;
	margin-top:10px;
	border:solid 1px #221815;

}

#contents .flow li:nth-child(n+7) a{
	color:#221815;
}

#contents .flow li a{
	padding:15px 0;
    height: auto;
}
}

@media screen and (max-width:480px) {		/*スマホ用CSS*/
#contents .flow li,#contents .flow li:nth-child(6){
	width:38%;
	font-size:11px;
}

#contents .flow li:nth-child(3n+1){
	width:33%;
}

#contents .flow li:nth-child(3n+2){
	width:29%;
}

#contents .flow li:nth-child(7){
	width:100%;
	font-size:12px;
	margin:10px 0 0 0;
}

#contents .flow li:nth-child(8) {
	width:100%;
	font-size:12px;
	margin-top:0;
	border-top:none;
}
}

/*仕様選択*/
#f01 #select{
    display: flex;
   	display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  	align-items: flex-end;
	-webkit-align-items: flex-end;
}

#f01 #select table{
	margin:30px 0 0 20px;
}

#f01 #select th,td{
	padding:12px 15px;
	border:solid 1px #ccc;
}

#f01 #select th{
	background-color:#f4f4f4;
	width:33.33%;
}

@media screen and (max-width:1000px) {		/*タブレット用CSS*/
#f01 #select{
	display:block;
}

#f01 #select table{
	margin:30px 0 0 0;
}
}


@media screen and (max-width:767px) {		/*タブレット用CSS*/
#f01 #select #c01_img{
	max-width:100%;
}
}

/*デザイン*/
#f03{
	text-align:center;
}

#f03 h3,#f03 div{
	text-align:left;
}

#f03 #f03_stn{
	width:100%;
	max-width:995px;
}

#f03 #design{
    display: flex;
   	display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#f03 #design div{
	width:49%;
	background-color:#f5f2da;

	position:relative;
	padding:30px;
	box-sizing:border-box;
}

#f03 #design h4 img{
	width:100%;
	margin-top:-50px;
}

#f03 #design li #send{
	margin:10px 0 20px;
}

#f03 #c01_img{
	margin-top:20px;
}

@media screen and (max-width:768px) {		/*タブレット用CSS*/
#f03 #design div{
	padding:20px;
}
}

@media screen and (max-width:600px) {		/*スマホ用CSS*/
#f03 #design{
	display:block;
}

#f03 #design div{
	width:100%;
}
}

/*お支払い*/


#f05 ul li{
	background-color:#221815;
	border-radius:30px;
	color:#FFF;
	padding:20px 30px 20px;
	margin-bottom:20px;
	box-sizing:border-box;
	font-size:90%;
	position:relative;
}

#f05 ul{
	margin-top:20px;

}

#f05 ul li img{
	position:absolute;
	top:0;
	bottom:0;
	left:30px;
	margin:auto;
}

#f05 ul li div{
	padding-left:180px;

}

#f05 ul li h4{
	margin:10px 0 5px;
	border-bottom:solid #FFF 1px;
	padding-bottom:10px;

}

#f05 ul li p{
	text-align:left;	
}


@media screen and (max-width:600px) {		/*スマホ用CSS*/
#f05 ul li{
	text-align:center;
}

#f05 ul li img{
	position:static;
	margin:0 auto;
}

#f05 ul li div{
	padding-left:0;

}
}


/*製造 / 商品発送*/
#f06 img{
	max-width:100%;
}