@charset "UTF-8";

/* link
********************************************************/
a {
	color:#333;
	text-decoration: none;
	
}

a:hover{
	color:#ff8000;
}

a:hover img{
	color:#09C;
	outline:none;
	border: none;
	opacity:0.7;
	filter: alpha(opacity=70);


}


/* Body
********************************************************/
body { 
background: #c2b8a4;;
max-width: 1200px;
	width:1200px;
	padding:0px;
	margin: 0 auto;
	letter-spacing:0.05em;
	line-height:1.7;
	line-break: strict;
	word-break: normal;
	word-spacing: 0.06em;

}


/* box
********************************************************/
.box {
	font-size: 13px;
	margin: 5px;
	padding: 10px;
	background: #fff;
	float: left;
	-webkit-border-radius: 1px;
	   -moz-border-radius: 1px;
	        border-radius: 1px;
			border:0;
	display:block;
	position:relative;
	overflow:hidden;

	    
}

.tp {
	position:absolute;
	bottom:3px;
	right:3px;
	clear:both;
}

.tp img {
	width:16px;
	height:16px;
	
}
.point{height:5px;}

.nav {
	margin:0;
	padding:0px;
	list-style-type:none;
	float:left;
}


.nav img {	width:130px;}

.nav01 {
	margin:0;
	font: 12px/1.3em 'Helvetica',Arial,sans-serif;
	padding:8px 0px 8px 0px;
	list-style-type:none;
	border-bottom:2px #333 dotted;
}

.nav01 img { width:19px; height:15px; margin-bottom:0px;}

.nav02 {
	margin:0;
	font: 12px/1.8em 'Helvetica',Arial,sans-serif;
	padding:0px 0px 2px 0px;
	list-style-type:none;
}

.nav02 img { width:15px; margin-bottom:-2px;}


/****
Base
********************************************************/
.ex1 { width: 1170px;
background-image:url(../img/bg01.jpg);}
.ex1-01 { width:153px; height:153px; float:left;}
.ex1-01 img { width:153px; height:153px;}
.ex1-02 { width:200px; height:153px; float:left;}
.ex1-02 img { width:180px; height:90px; margin:0px; margin:30px 0px 0px 5px;}
.ex1-03 { width:680px; height:60px; float:left;}
.ex1-03 img { width:568px; height:44px;  margin:20px 0px 0px 10px;}
.ex1-04 { width:800px; height:50px; float:right; margin-top:30px;}
.ex1-04 img { width:130px; height:50px;}

.ex2 { width: 210px; overflow: auto;}
.ex2-coment { width: 100%; overflow: auto;}
.ex2-right01 { width: 290px; float:right;}
.ex2-left01 { width:80px; float:left;}
.ex2-left01 img{ width:80px; height:80px;}
.ex2-left02 { width: 290px; float:left;}
.ex2-right02 { width:80px; float:right;}
.ex2-right02 img{ width:80px; height:80px;}

.ex3 { width: 450px; overflow: auto;}
.ex3-coment { width: 100%; overflow: auto;}
.ex3-right01 { width: 370px; float:right;}
.ex3-left01 { width:80px; float:left;}
.ex3-left01 img{ width:80px; height:80px;}
.ex3-left02 { width: 370px; float:left;}
.ex3-right02 { width:80px; float:right;}
.ex3-right02 img{ width:80px; height:80px;}

.ex4 { width: 370px; overflow: auto;}
.ex4-coment { width: 100%; overflow: auto;}
.ex4-right01 { width: 370px; float:right;}
.ex4-left01 { width:80px; float:left;}
.ex4-left01 img{ width:80px; height:80px;}
.ex4-left02 { width: 370px; float:left;}
.ex4-right02 { width:80px; float:right;}
.ex4-right02 img{ width:80px; height:80px;}

.ex1 img, .ex1b img, .ex2 img, .ex3 img, .ex4 img{
	max-width: 100%;
	height: auto;
}



/*  4
********************************************************/
@media only screen and (max-width:630px) {
body { 
max-width: 620px;
	width: 310px;
	padding: 0px;
	margin: 0 auto;
}

.ex1 { width: 280px;background-image:url(../img/bg01.jpg);}
.ex1-01 { width:90px; height:90px; float:left;}
.ex1-01 img { width:90px; height:90px;}
.ex1-02 { width:180px; height:90px; float:left;}
.ex1-02 img { width:150px; margin-top:10px; margin-left:20px;}
.ex1-03 { width:280px; height:22px;}
.ex1-03 img { width:280px;  margin:0px 0px 0px 0px;}
.ex1-04 { width:280px; height:80px; float:right; margin-top:0px;}
.ex1-04 img { width:93px;}


.ex2 { width: 280px; overflow: auto;}
.ex2 img { width: 100%;}
.ex2-coment { width: 100%; overflow: auto;}
.ex2-right01 { width: 290px; float:right;}
.ex2-left01 { width:80px; float:left;}
.ex2-left01 img{ width:80px; height:80px;}
.ex2-left02 { width: 290px; float:left;}
.ex2-right02 { width:80px; float:right;}
.ex2-right02 img{ width:80px; height:80px;}

.ex3 { width: 280px; overflow: auto;}
.ex3 img { width: 100%;}
.ex3-coment { width: 100%; overflow: auto;}
.ex3-right01 { width: 290px; float:right;}
.ex3-left01 { width:80px; float:left;}
.ex3-left01 img{ width:80px; height:80px;}
.ex3-left02 { width: 290px; float:left;}
.ex3-right02 { width:80px; float:right;}
.ex3-right02 img{ width:80px; height:80px;}

.ex4 { width: 280px; overflow: auto;}
.ex4 img { width: 100%;}
.ex4-coment { width: 100%; overflow: auto;}
.ex4-right01 { width: 290px; float:right;}
.ex4-left01 { width:80px; float:left;}
.ex4-left01 img{ width:80px; height:80px;}
.ex4-left02 { width: 290px; float:left;}
.ex4-right02 { width:80px; float:right;}
.ex4-right02 img{ width:80px; height:80px;}


.tp {
	position:absolute;
	bottom:3px;
	right:3px;
	clear:both;
}

.tp img {
	width:16px;
	height:16px;
	
}
.point{height:5px;}
.pp img {	width:15px;}

.nav {
	margin:0;
	padding:0px;
	list-style-type:none;
	float:left;
}


.nav img {	width:93px;}

.nav01 {
	margin:0;
	font: 12px/1.3em 'Helvetica',Arial,sans-serif;
	padding:8px 0px 8px 0px;
	list-style-type:none;
	border-bottom:2px #333 dotted;
}

.nav01 img { width:19px; height:15px; margin-bottom:0px;}

.nav02 {
	margin:0;
	font: 12px/1.8em 'Helvetica',Arial,sans-serif;
	padding:0px 0px 2px 0px;
	list-style-type:none;
}

.nav02 img { width:15px; margin-bottom:-2px;}

}
/* / 4 */


/*  3
********************************************************/
@media only screen and (min-width:630px) and (max-width:730px) {
body { 
max-width: 730px;
	width: 620px;
	padding: 0px;
	margin: 0 auto;
}

.ex1 { width: 590px;background-image:url(../img/bg01.jpg);}
.ex1-01 { width:100px; height:100px; float:left;}
.ex1-01 img { width:100px; height:100px;}
.ex1-02 { width:130px; height:100px; float:left;}
.ex1-02 img { width:130px;}
.ex1-03 { width:0px; height:0px; float:left;}
.ex1-03 img { width:0px;  margin:0px 0px 0px 0px;}
.ex1-04 { width:330px; height:50px; float:right; margin-top:5px;}
.ex1-04 img { width:110px;}


.ex2 { width: 280px; overflow: auto;}
.ex2 img { width: 100%;}
.ex2-coment { width: 100%; overflow: auto;}
.ex2-right01 { width: 290px; float:right;}
.ex2-left01 { width:80px; float:left;}
.ex2-left01 img{ width:80px; height:80px;}
.ex2-left02 { width: 290px; float:left;}
.ex2-right02 { width:80px; float:right;}
.ex2-right02 img{ width:80px; height:80px;}

.ex3 { width: 280px; overflow: auto;}
.ex3 img { width: 100%;}
.ex3-coment { width: 100%; overflow: auto;}
.ex3-right01 { width: 290px; float:right;}
.ex3-left01 { width:80px; float:left;}
.ex3-left01 img{ width:80px; height:80px;}
.ex3-left02 { width: 290px; float:left;}
.ex3-right02 { width:80px; float:right;}
.ex3-right02 img{ width:80px; height:80px;}

.ex4 { width: 280px; overflow: auto;}
.ex4 img { width: 100%;}
.ex4-coment { width: 100%; overflow: auto;}
.ex4-right01 { width: 290px; float:right;}
.ex4-left01 { width:80px; float:left;}
.ex4-left01 img{ width:80px; height:80px;}
.ex4-left02 { width: 290px; float:left;}
.ex4-right02 { width:80px; float:right;}
.ex4-right02 img{ width:80px; height:80px;}


.tp {
	position:absolute;
	bottom:3px;
	right:3px;
	clear:both;
}

.tp img {
	width:16px;
	height:16px;
	
}
.point{height:5px;}
.pp img {	width:15px;}

.nav {
	margin:0;
	padding:0px;
	list-style-type:none;
	float:left;
}


.nav img {	width:110px;}

.nav01 {
	margin:0;
	font: 12px/1.3em 'Helvetica',Arial,sans-serif;
	padding:8px 0px 8px 0px;
	list-style-type:none;
	border-bottom:2px #333 dotted;
}

.nav01 img { width:19px; height:15px; margin-bottom:0px;}

.nav02 {
	margin:0;
	font: 12px/1.8em 'Helvetica',Arial,sans-serif;
	padding:0px 0px 2px 0px;
	list-style-type:none;
}

.nav02 img { width:15px; margin-bottom:-2px;}

}
/* / 3 */

/*  2
********************************************************/
@media only screen and (min-width:730px) and (max-width:970px) {
body { 
max-width: 970px;
	width: 720px;
	padding: 0px;
	margin: 0 auto;
}

.ex1 { width: 690px;background-image:url(../img/bg01.jpg);}
.ex1-01 { width:90px; height:90px; float:left;}
.ex1-01 img { width:90px; height:90px;}
.ex1-02 { width:0px; height:0px; float:left;}
.ex1-02 img { width:0px;}
.ex1-03 { width:600px; height:40px; float:left;}
.ex1-03 img { width:400px;  margin:10px 0px 0px 50px;}
.ex1-04 { width:600px; height:30px; float:right; margin-top:10px;}
.ex1-04 img { width:100px;}


.ex2 { width: 330px; overflow: auto;}
.ex2 img { width: 100%;}
.ex2-coment { width: 100%; overflow: auto;}
.ex2-right01 { width: 290px; float:right;}
.ex2-left01 { width:80px; float:left;}
.ex2-left01 img{ width:80px; height:80px;}
.ex2-left02 { width: 290px; float:left;}
.ex2-right02 { width:80px; float:right;}
.ex2-right02 img{ width:80px; height:80px;}

.ex3 { width: 330px; overflow: auto;}
.ex3 img { width: 100%;}
.ex3-coment { width: 100%; overflow: auto;}
.ex3-right01 { width: 290px; float:right;}
.ex3-left01 { width:80px; float:left;}
.ex3-left01 img{ width:80px; height:80px;}
.ex3-left02 { width: 290px; float:left;}
.ex3-right02 { width:80px; float:right;}
.ex3-right02 img{ width:80px; height:80px;}

.ex4 { width: 330px; overflow: auto;}
.ex4 img { width: 100%;}
.ex4-coment { width: 100%; overflow: auto;}
.ex4-right01 { width: 290px; float:right;}
.ex4-left01 { width:80px; float:left;}
.ex4-left01 img{ width:80px; height:80px;}
.ex4-left02 { width: 290px; float:left;}
.ex4-right02 { width:80px; float:right;}
.ex4-right02 img{ width:80px; height:80px;}


.tp {
	position:absolute;
	bottom:3px;
	right:3px;
	clear:both;
}

.tp img {
	width:16px;
	height:16px;
	
}
.point{height:5px;}
.pp img {	width:15px;}

.nav {
	margin:0;
	padding:0px;
	list-style-type:none;
	float:left;
}


.nav img {	width:115px;}

.nav01 {
	margin:0;
	font: 12px/1.3em 'Helvetica',Arial,sans-serif;
	padding:8px 0px 8px 0px;
	list-style-type:none;
	border-bottom:2px #333 dotted;
}

.nav01 img { width:19px; height:15px; margin-bottom:0px;}

.nav02 {
	margin:0;
	font: 12px/1.8em 'Helvetica',Arial,sans-serif;
	padding:0px 0px 2px 0px;
	list-style-type:none;
}

.nav02 img { width:15px; margin-bottom:-2px;}

}
/* / 2 */



/*  1
********************************************************/
@media only screen and (min-width:970px) and (max-width:1200px) {
body { 
max-width: 1200px;
	width: 960px;
	padding: 0px;
	margin: 0 auto;
}

.ex1 { width: 930px;background-image:url(../img/bg01.jpg);}
.ex1-01 { width:130px; height:130px; float:left;}
.ex1-01 img { width:120px; height:120px;}
.ex1-02 { width:140px; height:130px; float:left;}
.ex1-02 img { width:130px;  margin:0px; margin:30px 0px 0px 0px;}
.ex1-03 { width:660px; height:70px; float:left;}
.ex1-03 img { width:500px;  margin:20px 0px 0px 50px;}
.ex1-04 { width:660px; height:30px; float:right; margin-top:10px;}
.ex1-04 img { width:110px;}


.ex2 { width: 290px; overflow: auto;}
.ex2 img { width: 100%;}
.ex2-coment { width: 100%; overflow: auto;}
.ex2-right01 { width: 290px; float:right;}
.ex2-left01 { width:80px; float:left;}
.ex2-left01 img{ width:80px; height:80px;}
.ex2-left02 { width: 290px; float:left;}
.ex2-right02 { width:80px; float:right;}
.ex2-right02 img{ width:80px; height:80px;}

.ex3 { width: 290px; overflow: auto;}
.ex3 img { width: 100%;}
.ex3-coment { width: 100%; overflow: auto;}
.ex3-right01 { width: 290px; float:right;}
.ex3-left01 { width:80px; float:left;}
.ex3-left01 img{ width:80px; height:80px;}
.ex3-left02 { width: 290px; float:left;}
.ex3-right02 { width:80px; float:right;}
.ex3-right02 img{ width:80px; height:80px;}

.ex4 { width: 290px; overflow: auto;}
.ex4 img { width: 100%;}
.ex4-coment { width: 100%; overflow: auto;}
.ex4-right01 { width: 290px; float:right;}
.ex4-left01 { width:80px; float:left;}
.ex4-left01 img{ width:80px; height:80px;}
.ex4-left02 { width: 290px; float:left;}
.ex4-right02 { width:80px; float:right;}
.ex4-right02 img{ width:80px; height:80px;}


.tp {
	position:absolute;
	bottom:3px;
	right:3px;
	clear:both;
}

.tp img {
	width:16px;
	height:16px;
	
}
.point{height:5px;}
.pp img {	width:15px;}

.nav {
	margin:0;
	padding:0px;
	list-style-type:none;
	float:left;
}


.nav img {	width:130px;}

.nav01 {
	margin:0;
	font: 12px/1.3em 'Helvetica',Arial,sans-serif;
	padding:8px 0px 8px 0px;
	list-style-type:none;
	border-bottom:2px #333 dotted;
}

.nav01 img { width:19px; height:15px; margin-bottom:0px;}

.nav02 {
	margin:0;
	font: 12px/1.8em 'Helvetica',Arial,sans-serif;
	padding:0px 0px 2px 0px;
	list-style-type:none;
}

.nav02 img { width:15px; margin-bottom:-2px;}

}
/* / 1 */
img { border:0;}