@media screen and (max-width: 767px) and (orientation:portrait) {
	
}




#size{
	width:800px;
	margin:0 auto;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#size{
			width:90%;
			margin:0 auto;
		}
		}



#size > div{
	padding-left:30px;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#size > div{
			padding-left:0;
		}
		}


#page_title{
	font-size: 42px;
	font-family: '黎ミン L' , 'Reimin Light';
	margin-bottom:60px;
	margin-top:20px;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#page_title{
			font-size: 200%;
		}
		}


#size h3{
	font-size: 30px;
	font-family: '黎ミン M' , 'Reimin Medium';
	background: url(../images/howto/stripe.png) right center repeat-x;
	background-size:20px 20px;
/*	background-color:#0ff;
	background-image:-webkit-gradient(linear,0 0,100% 100%,
		color-stop(.25,#fff),color-stop(.25,transparent),
		color-stop(.5,transparent),color-stop(.5,#fff),
		color-stop(.75,#fff),color-stop(.75,transparent),
		to(transparent));
	-webkit-background-size:40px 40px;*/
	padding:0;
	margin:0;
}
#size h3 span{
				padding-right:1em;
				background-color:#fff;
			}

		@media screen and (max-width: 767px) and (orientation:portrait) {
			#size h3{
			font-size:150%;
			}

			#size h3 span{
				padding-right:0.5em;
				background-color:#fff;
			}

		}


#size_list{
	width:200px;
	float:left;
	margin:0;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#size_list{
		width:100%;
		float:none;
		}
		}



#size_list > dt{
	margin:0 0 10px 0;
	font-size:150%;
	font-family: '黎ミン M' , 'Reimin Medium';
}

#size_list > dd{
	margin:0 0 2em 1em;
	font-size:80%;
	color:#555;
	line-height: 140%;
	}

		@media screen and (max-width: 767px) and (orientation:portrait) {
		#size_list > dt{
		margin:0 0 0.2em 0;
		font-size:120%;
		}

		#size_list > dd{
			margin:0 0 2em 0;
			font-size:90%;
			}
		}


#size_visual{
	width:496px;
	float:right;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#size_visual{
			width:100%;
			float:none;
		}
		}

#ring_size{
	margin:80px 0 0 0 !important;
}

#ring_size ~ p{	/*同列の指定*/
		padding-right:330px !important;
}

#ring_visual{
	width:300px;
	float:right;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#ring_size ~ p{	/*同列の指定*/
		padding-right:0 !important;
		}

		#ring_visual{
			width:100%;
			margin-bottom:20px;
			float:none;
			margin:0;
		}
		}


/*つくりかた***************/
#howto_intro{
	width:100%;
	margin:100px 0 0 0;
	padding:100px 40px 10px 40px ;
	background:#eee;
	border-top: 20px solid #f50;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
			#howto_intro{
				width:100%;
				margin:100px 0 0 0;
				padding:2em 5% 1em 5% ;
				background:#eee;
				border-top: 10px solid #f50;
			}
		}

#howto_intro h2{
	font-size: 50px;
	font-family: '黎ミン R' , 'Reimin Regular';
	margin:0 0 30px 0;
	color:#542;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
			#howto_intro h2{
			font-size: 200%;
			font-family: '黎ミン R' , 'Reimin Regular';
			margin:0 0 30px 0;
			color:#542;
			}
		}

#howto_intro h2+p{
margin-bottom:0;
}

/*PDFの注意***************/
#howto_pdf{
	background: #444 url(../images/howto/attention_dialog.png) right center no-repeat;
	background-position:110% -30%;
}
	@media screen and (max-width: 767px) and (orientation:portrait) {
		#howto_pdf{
		background-image: none;
		}
	}



#howto_pdf > div{
	width:100%;
	margin:0;
	padding:50px 40px 20px 40px ;
	background-color: rgba(0,0,0,0.5);
	color:#888;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#howto_pdf > div{
			width:100%;
			margin:0;
			padding:5% ;
			background-color: #333;
			color:#ccc;
		}
		}


#howto_pdf div#pdf_attention{
	/*width:500px;*/
	padding-right:400px;
	font-size:14px;
	columns:2;
	-webkit-columns:2;
	-moz-columns:2;
	-ms-columns:2;
	-o-columns:2;

	column-gap: 20px;
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	-ms-column-gap: 20px;
	-o-column-gap: 20px;

}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#howto_pdf div#pdf_attention{
			/*width:500px;*/
			padding:0;
			font-size:80%;
			columns:1;
			-webkit-columns:1;
			-moz-columns:1;
			-ms-columns:1;
			-o-columns:1;
		}

		}




#howto_pdf img.adobereader_dl{
	display: block;
	margin:10px 0;
}

#howto_pdf h2{
	font-family: '黎ミン B' , 'Reimin Bold';
	color: #ccc;
	font-size:24px;
	margin:0 0 50px 0;
}

	@media screen and (max-width: 767px) and (orientation:portrait) {
		#howto_pdf h2{
			font-size:150%;
			margin:0 0 1em 0;
		}
	}


/*AパターンBパターン***************/
.pattern_wrap{
	width:100%;

}


#a_pattern{
	position:relative;
	width:50%;
	background:#84ccc9 url(../images/howto/rest.png) center 98% no-repeat;
	background-size: 90%;
	float:left;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
			#a_pattern{
				width:100%;
				background-image: none;
				padding-bottom:20px;
				float: none;
			}
		}

#b_pattern{
	position:relative;
	width:50%;
	background:#e06dad;
	float:right;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
			#b_pattern{
				width:100%;
				float: none;
			}
		}


.pattern_title{
	margin:0;
	padding:20px 10px 20px 30px;	/*これを外せばjQueryAutoHeight.jsが効く*/
	background-color:rgba(255,255,255,0.3);
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
			.pattern_title{
				padding:20px 10px 20px 10px;
			}
		}


.pattern_title h3{
	font-size: 26px;	/*26px*/
	margin:0;
	font-family: '黎ミン L' , 'Reimin Light','A-OTF Reimin Pro Light' ;
}

.pattern_title h3:first-letter{
	font-size: 72px;	/*72px*/
	float:left;
	line-height: 0.7em;
	margin:0 10px 0 0;
}

.pattern_title span{
	margin-left: 2px;
	font-size: 12px;
	
}
#a_pattern .pattern_title span{color:#079;}
#b_pattern .pattern_title span{color:#c05;}


.preparation{	/*	用意するもの	*/
	padding:0 30px 0 30px;
	border-bottom:2px dotted #555;
}
	@media screen and (max-width: 767px) and (orientation:portrait) {
		.preparation{
			padding:0 10px 0 10px;
			border-bottom:2px dotted #555;
		}
	}

.preparation .headword{
	font-weight: bold;
	display:block;
	margin-top:20px;
}

.preparation ul.item_list{
	/*background: #f00;*/
	margin:0 0 0 30px !important;
	padding:0;
	list-style-position: inside;
	list-style-type: disc !important;
}


span.recommend{
		display: block;
	text-align: right;
}
span.recommend a{
	text-decoration: none;
	border-bottom: 1px solid #f05;
	padding-bottom:0.1em;
	color:#f05;
}
span.recommend a:hover{
	color:#00f;
	border-bottom: 1px solid #00f;
}


#a_pattern ol , #b_pattern ol,
#a_pattern ul , #b_pattern ul
{
	position:relative;
	margin:30px;
	padding:0;
	list-style: none;
	font-size:14px;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
		#a_pattern ol , #b_pattern ol,
		#a_pattern ul , #b_pattern ul
		{
			margin:10px;
		}	

		}


#a_pattern ol li , #b_pattern ol li,
#a_pattern ul li , #b_pattern ul li{
	position: relative;
}



.flow h4{
	display: table;
	width:100%;
	margin:30px 0 10px 0;
	padding:0 0 0 70px;
	height:60px;

	text-align: left;
	color:#fff;
	font-family: '黎ミン B' , 'Reimin Bold' , 'A-OTF Reimin Pro B';
	font-size: 18px;
}

.flow h4 span{	
	display: table-cell;
	vertical-align: middle;}

.flow .step01 h4{	background:url(../images/howto/01.png) left center no-repeat;}
.flow .step02 h4{	background:url(../images/howto/02.png) left center no-repeat;}
.flow .step03 h4{	background:url(../images/howto/03.png) left center no-repeat;}
.flow .step04 h4{	background:url(../images/howto/04.png) left center no-repeat;}
.flow .step05 h4{	background:url(../images/howto/05.png) left center no-repeat;}

section#a_pattern .flow li.step01 > img,
section#a_pattern .flow li.step02 > img,
section#b_pattern .flow li.step01 > img,
section#b_pattern .flow li.step02 > img,
section#b_pattern .flow li.step03 > img{
	display:block;
	float:right;	
	margin-left:20px;
}
		@media screen and (max-width: 767px) and (orientation:portrait) {
			section#a_pattern .flow li.step01 > img,
			section#a_pattern .flow li.step02 > img,
			section#b_pattern .flow li.step01 > img,
			section#b_pattern .flow li.step02 > img,
			section#b_pattern .flow li.step03 > img{
				width:30%;
				margin-left:0.5em;
			}

		}




/*Aパターンのみ***********************/




/*Bパターンのみ***********************/
section#b_pattern .flow li.step04>div{

}

section#b_pattern .flow li.step04 div#punch_cap{
	position:relative;
	float:left;
	padding:0 10px 0 0;
	width:50%;
}
section#b_pattern .flow li.step04 div#punch_image{
	float:right;
	width:50%;
	margin:0;
	padding:0;
}

section#b_pattern .flow li.step04 dl#punch_howto{
margin:0;
padding:0;
}

section#b_pattern .flow li.step04 dl#punch_howto dt{

	background: #fad;
	width:100%;
	margin-top:20px;
	padding:0 0 0 10px;
	border-radius: 4px;
}
section#b_pattern .flow li.step04 dl#punch_howto dd{
	margin-left:10px;
	padding:10px;
}


dl.trim_caption{
	color: #d98;
	margin:0;
	padding:10px;
	line-height: 1.4em;
}
dl.trim_caption dt{
	font-weight: bold;
	font-size: 120%;
	margin-bottom:10px;
	color:#fff;
	}
dl.trim_caption dd{
	margin:0;

}

dl.trim_caption dd img{
	display: block;
width:100%;
margin-top:20px;
}

/*トンボの図解*/

div.cutline_wrap{
    width:100%;
    margin:20px 0 0 0;
    padding:0;
    color: #000;
}
div.cutline_wrap input{    display:none;  }

div.cutline_wrap label {
    display: inline-block;
    margin:0;
    padding:4px 1em;

    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#fff;
    font-size: 18px;
    text-align: center;
	border-radius:6px 6px 0 0; 
	background: #555; 
}

div.cutline_wrap label:hover{    background:rgba(0,190,255,0.7);    }

ul.tabcontents{
    margin:0 !important;
    padding:0;
    list-style: none;
    background: #501;
}

ul.tabcontents>li{
	
	margin:0;
	padding: 20px;
    display: none;    }



/*  「^=」でその文字から始まる場合 。 「*=」で含む場合 。「～」で後にある要素  */
/*　ID名はjQueryで追加される　*/

input[id*="toggle"]:checked +label{	/*toggleを含むものがチェックされたら*/
	background: #501; 

}

input[id*="toggle1"]:checked ~ ul.tabcontents li.cut_a5
{
 display: block;
 margin:0;
 padding:0;
}

input[id*="toggle2"]:checked ~ ul.tabcontents li.cut_bible
{
 display: block;
 padding:0;
}

input[id*="toggle3"]:checked ~ ul.tabcontents li.cut_mini
{
 display: block;
 padding:0;
}