@import url(reset.css);
@import url(common.css);

@charset "utf-8";

/* wrapper  ---------------**/
#wrapper {
	width: 1100px;
	margin: 0 auto;
	background: #fff;
	border-right: 1px solid #3e3a39;
	border-left: 1px solid #3e3a39;
}


/* For PC
 * --------------------------------------------------------**/

#head_img{
	width: 800px;
	margin: 45px auto 0;
}

.tendou_img{
	width: 800px;
	height: 363px;
	background: url(../images/tendomokko/main.jpg) no-repeat;
	text-indent: -9999px;
}
.archive_t{
	font-size:15px;
	margin:-30px 0 20px;
	color:#555;
	letter-spacing:0.07em;
}
.archive_a{
	font-size:15px;
	margin:-30px 0 40px;
	color:#555;
	letter-spacing:0.07em;
}
.acrylic_img{
	width: 800px;
	height: 363px;
	background: url(../images/acrylic/main.jpg) no-repeat;
	text-indent: -9999px;
}

.tri_mark{
	display: none;
}


/*  contents ---------------**/
#contents {
	width: 600px;
	margin: 0 auto;
}

/*  subTtl ---------------**/
#subTtl{
	margin-top: 60px;
	margin-bottom: 60px;
}
#subTtl .line {
	border-top: 1px solid #714B2F;
	position: relative;
}
#subTtl .a_line {
	border-top: 1px solid #0071D2;
}
#subTtl h4 {
	width: 165px;
	position: absolute;
	background: #fff;
	padding-right: 5px;
	bottom: -12px;
}

/* #intro --------------- */
#intro{
	margin-bottom: 50px;
}


#intro p.text {
	text-align: left;
  padding-left: 120px;
  margin-bottom:40px;
  line-height: 2;
}


/*photo*/
.photo {
	text-align: center;
	width: 600px;
	padding-bottom: 30px;
	margin: 0 auto;
}

.photo img{
	width: 100%;
}

.photo .credit {
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.4px;
	line-height:1.6em;
	margin-top:7px;
	margin-bottom:10px;
}

.photo_mini {
	width: 380px;
}

.photo_tate {
	width: 400px;
}

.boxArea .photo .credit {
	font-size: 13px;
}

/* #making --------------- */
#making{
	margin-top: 10px;
	position: relative;
}

#making #makingTtl{
	background-color:#E5E5E5;
	font-size:25px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 50px;
	line-height:43px;
	text-align: center;
	
}

#making #makingTtl:after {
	content: "";
	width: 35px;
	height: 30px;
	position: absolute;
	left: 48%;
	
}

#making.make_tendomokko .t_ttl:after {
	background: url(../images/tendomokko/icon.png) no-repeat;
	top: 126px;
}

#making.make_acrylic #makingTtl{
	width: 80%;
}

#making.make_acrylic .t_ttl:after {
	background: url(../images/acrylic/icon.png) no-repeat;
	top: 83px;
}

.boxArea{
}

.boxArea .box_ttl p{
	display: inline-block;
	font-size:21px;
	padding: 5px 20px;
	margin-bottom: -1px;
	
}

.boxArea .box_honmon {
	font-size:17px;
	line-height:28px;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 2px;

}

.boxArea .box_txt{
	font-size:15px;
	line-height:32px;
	letter-spacing: 0px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 60px;
}

.make_tendomokko .boxArea .box_honmon{color:#714B2F;}
.make_acrylic .boxArea .box_honmon{color:#D75A92;}


.arrow {
	margin: 0 auto;
	margin-bottom: 20px;
	width: 45px;
}

/* Each Setting */
.make_tendomokko .boxArea .box_ttl{
	border-bottom: 1px solid #008C00;
	text-align: left;
}

.make_tendomokko .boxArea .box_ttl p{
	border: 1px solid #008C00;
	color: #008C00;
	
}

.make_acrylic .boxArea .box_ttl{
	border-bottom: 1px solid #0071D2;
	text-align: left;
}

.make_acrylic .boxArea .box_ttl p{
	border: 1px solid #0071D2;
	color: #0071D2;
	
}

/* #end --------------- */
#end{
	font-size:15px;
	line-height:32px;
	letter-spacing: 0px;
	text-align: left;
	padding-left: 20px;
	margin-top: 20px;
	margin-bottom: 30px;
}

#end .end1 span{
	border-bottom:1px solid;
	padding-bottom: 2px;
	display: inline-block;
}

#end .end2{
	padding-top: 10px;
	font-size:17px;
	margin-top: 20px;
	//border-bottom:1px solid;
	padding-bottom: 2px;
		
}

#end .end2 a:hover{
	color: #0071D2;
}

.ac_end span{
	border-bottom: 1px solid #0071d2;
}

#end p.ac_end_txt{
	font-size: 17px;
}


.green{	color: #008C00;}
.blue{	color: #0071D2;}
.brown {color: #714B2F;}
.brown a:link {color: #714B2F;}
.brown a:visited {color: #714B2F;}
.brown a:hover {color: #AA9483;}
.acrylic a:link {color: #0071D2;}
.acrylic a:visited {color: #0071D2;}
.acrylic a:hover {color: #89BDEA;}



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

#wrapper {
	width: auto;
	border-right: none;
	border-left: none;
}

#head_img{
	width: auto;
	margin: 0 auto 0;
}

#head_img img{
	width: 100%;
}

.tendou_img,
.acrylic_img{
	background: none;
	text-indent: 0;
	width: auto;
	height: auto;
}
.archive_a{
	font-size:13px;
	margin:0px 0 40px;
}
.archive_t{
	font-size:13px;
	margin:0px 0 20px;
}
/*  contents ---------------**/
#contents {
	width: auto;
	margin: 0 20px;
}

.boxArea .box_txt{
	margin-bottom: 20px; 
}

#subTtl{
	margin-top: 35px;
	margin-bottom: 35px;
	margin:  35px 15px 35px 0;
}

#subTtl h4 {
	width: 120px;
	position: absolute;
	padding-right: 0px;
	padding-left: 15px;
	bottom: -9px;
}

#subTtl h4 img{
	width: 100%;
}

.photo {
	text-align: center;
	width: auto;
	padding-bottom: 20px;
	margin: 0 auto;
}

.photo .credit{
	font-size: 13px;
	margin-bottom: 0;
}

#intro{
	margin: 0;
}

#intro p.text{
	padding: 0;
	font-size: 16px;
	margin: 0 0 20px 0;
}

#making #makingTtl{
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
	padding: 10px 0;
}

#making.make_acrylic #makingTtl{
	width: 100%;
}

#making #makingTtl:after{
	display: none;
}

.tri_mark{
	margin: 0 auto 15px;
	width: 30px;
	display: block;
}

.tri_mark img{
	width: 100%;
}

.boxArea .box_honmon{
	font-size: 16px;
}

.arrow {
	margin: -5px auto 20px;
	width: 45px;
}

#end{
	font-size:16px;
	line-height:32px;
	padding-left: 0px;
	margin-top: -10px;
	margin-bottom: 70px;
}

#end .end1 span{
	border-bottom: none;
	padding-bottom: 0px;
	display: inline-block;
}

#end .end2{
	padding-top: 0px;
	font-size:17px;
	margin-top: 30px;
	border-bottom: none;
	padding-bottom: 2px;
		
}

}