@charset "UTF-8";
/* CSS Document */

/* 要素リセット */
/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

/*----------------------------------ここまで------------------------------------------*//* CSS Document */
html{background-image:url(../images/hemp-cloth-03.jpg);
}
a{text-decoration:none;
}

body {
background-image:url(../images/bg034_01.gif);
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	max-width:1100px;
}


#top{background-color:#FC3;
height:80px;
overflow:hidden;
}

#top h1{float:left;
margin:10px 7% 10px 3%;
}
	
	
#top h2{font-size:1.25rem;
float:left;
background-color:#F60;
border:#FFF 1px solid;
padding:5px;
margin-top:20px;
}

#top h2 a{color:#FFF;
}

#top h2 a:hover{color:#FFF;
opacity:0.5;
}

/*--イメージ写真設定--*/
#img img{width:100%;
}

/*--新着情報設定--*/

#news h3{
font-size:1.5rem;
background-color:#F00;
color:#FFF;
padding:10px 10px 10px 20px;
}

#news{background-image:url(../images/bg034_03.gif);
overflow:hidden;
}

#box1{
float:left;
padding:2%;
width:39%;
}

#box1 p{
text-align:center;
}

#box2{
width:55%;
padding-top:20px;
padding-right:1%;
padding-bottom:10px;
float:left;
}

#box1 h4{width:100%;
}

#box1 img{width:100%;
}

#botan2 a:visited{
  color:#FFF;
}

#botan2{
font-weight:bold;
text-align:center;
margin-top:10px;
margin-left:auto;
margin-right:auto;
padding:3px;
background-color:#F00;
color:#FFF;
border-radius:10px;
width:60%;
}

#box2 dt{
font-weight:bold;
color:#008000;
margin:10px 0;
width:70px;
border-bottom:solid #008000;
}

#box2 dd{
margin:0 0 15px 10px;
font-weight:bold;
}

#botan1 a:visited{
  color: inherit;
}

#botan1{
 padding:5px;
  color: #fff;
  border-radius: 20vh;
  background-image: -webkit-gradient(linear, right top, left top, from(#9be15d), to(#00e3ae));
  background-image: -webkit-linear-gradient(right, #9be15d 0%, #00e3ae 100%);
  background-image: linear-gradient(to left, #9be15d 0%, #00e3ae 100%);
  text-align:center;
  width:200px;
}

#box2 .precaution{padding:0px 10px 10px 10px;
color:#C33;
}

#box0 {display:none;
}


/*--topへの移動--*/
.idou{
width:120px;
}

.idou a:hover{color:#FFF;
opacity:0.5;
}

#box2 .idou{margin-left:75%;
}

footer{
border-top: solid 3px #FF99FF;	
}

footer p{text-align:center;
}


/*------------ここまで indx/html ここからinfo.html-------------------------------------*/


.info{border-bottom:solid 3px #FF99FF;
}

.info h3{font-size:1.5rem;
background-color:#F00;
color:#FFF;
padding:10px 10px 10px 20px;
}

.info h4{margin-top:20px;
margin-left:6%;
margin-right:6%;
}

.info h4 img{width:100%;
}

.info  p{padding:20px;
}

.info  dl{margin-left:30px;
overflow:hidden;
}

.info  dt{
width:70px;
border:solid 1px;
padding:3px;
text-align:center;
float:left;
font-weight:bold;
}

.info  dd{
margin-left:90px;
margin-bottom:10px;
padding:4px;  
}

.under1{font-weight:bold;
color:#000;
}

.illustration{float:right;
max-width:30%;
height:auto;
margin:10px 20px 20px 20px;
}

.illustration img{width:100%
}

.box4{padding:10px;
margin:0 20px 10px 30px;
background-color:#FFF;
border:1px #FF0000 solid;
}

.box4 .precaution{padding:0;
margin:10px 20px;
color:#C33;
}
.info dd .precaution{
color:#C33;
}



/*---講師の紹介・展示の設定----*/
.instructor {padding:10px 0px;
	overflow:hidden;
	border-bottom:dotted #F6F 2px;
}

.photo {width:20%;
height:auto;
margin-left:3%;
float:left;
}

.photo img{width:100%;
height:auto;
}

.photo_yoko {width:20%;
height:auto;
margin-left:3%;
float:left;
}

.photo_yoko img{width:100%;
}

.name{float:left;
margin:0 2%;
width:72%;
}

.name dl dt{margin-bottom:10px;
font-weight:bold;
font-size:1.25rem;
}

.name  dl dd{margin-bottom:10px;
font-weight:bold;
}

.name .stilenone{
font-weight:100;
}

.name .precaution{
color:#C33;
}

.under2{font-weight:bold;
border-bottom: solid 3px #006400;
color:#006400;
}

/*---主催・協賛設定----*/

.box3 {padding:20px;
}

.box3 dl dt{margin-bottom:10px;
font-size:1.25rem;
}


.box3 dl dd{margin-left:20px;
margin-bottom:10px;
}

/*---申込方法設定----*/
.illustration2{float:right;
width:130px;
height:auto;
margin-right:100px;
}

.illustration2 img{width:100%;
height:auto;
}

.box5 ol {
  position:relative;
  margin:0px 20px 10px 40px;
  padding: 0
}

.box5 ol li  {
  list-style: none;
  list-style-position: outside;
  margin:5px 20px 0 0;
  padding-left: 1.5em;
}

.box5 ol li span {
  position: absolute;
  left: 0;
  margin: 0
}

.box5 p{padding:20px 20px 0 20px;
}

.box5 h5{padding:10px 0 10px 20px;
font-size:1.5rem;
background-color:#F00;
color:#FFF;
}

.box5 h6{padding:7px;
margin:20px;
text-align:center;
font-size:1rem;
width:100px;
background-color:#006400;
color:#FFF;
}

.box5 dl{margin:20px 20px 0 20px;
}

.box5 .precaution{color:#C33;
margin-top:0;
}

.under{font-weight:bold;
border-bottom: solid 3px #006400;
color:#006400;
}

.box5 dl dd{margin:10px 20px 20px 20px;
}
.box5 .precaution{padding:0;
margin:0 20px 10px 40px;
}


/*---トップへの移動設定----*/
#box2 .idou{margin-left:75%;
}

.box3 .idou{margin-left:85%;
}

.box5 .idou{margin-left:84%;
padding:3px;
margin-bottom:10px;
}

.instructor .idou{margin-left:81%;
}

.link{font-weight:bold;
border-bottom: solid 1px #3333FF;
}

/*---------------------------以下　画面サイズ変更----------------------------------------------- */


/*------------------------------------------------------------------

                         画面サイズ変更980?770px

------------------------------------------------------------------ */

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

#box1{
float:left;
padding:2%;
width:20%;
}

#box2{
width:73%;
padding-top:20px;
padding-right:1%;
padding-bottom:10px;
float:left;
}

#box2 .idou{margin-left:65%;
}


/*------------------info 修正分------------------- */

.illustration{
width:20%;
height:auto;
}

.illustration img{
width:100%;
height:auto;
}

.illustration2{
width:80px;
height:auto;
margin-right:50px;
}

.illustration2 img{width:100%;
height:auto;
}

}


/*------------------------------------------------------------------

                         画面サイズ変更770px?530px 

------------------------------------------------------------------ */
@media screen and (max-width: 770px) {
#box1{display:none;
}

#box2{
width:96%;
margin-left:auto;
margin-right:auto;
float:none;
}

#box2 .idou{display:none;
}

#box0{display:block; 
}

#box0 h4{
width:40%;
height:auto;
margin-bottom:5px;
margin-left:auto;
margin-right:auto;
}

#box0 img{width:100%;
}

#box0 p{text-align:center;
margin-top:10px;
}

#box0 #botan2{
text-align:center;
width:50%;
margin:10px 0 10px 25%;
}

#box0 .idou{margin-left:70%;
margin-bottom:10px;
}


/*------------------info 修正分------------------- */

.illustration{display:none;
}

.box4 .precaution{
margin:0;
color:#C33;
}

.illustration2 img{width:100%;
height:auto;
}

.instructor .idou{margin-left:76%;
}

.box3 .idou{margin-left:80%;
}

.box5 .idou{margin-left:79%;
padding:3px;
margin-bottom:10px;
}

}


/*------------------------------------------------------------------

                         画面サイズ変更530px以下 

------------------------------------------------------------------ */
@media screen and (max-width: 530px) {
body{font-size:10px;
}

#top{width:100%;
height:auto;
}

#top h1{width:50px;
margin:10px 0 0 10px;
float:none;
}

#top img{width:100%;
height:auto;
}

#top h2{
margin:0;
float:none;
border:#FFF 0.5px solid;
font-size:1rem;
padding:5px;
}

#box2{
padding-top:10px;
padding-bottom:5px;
}

#news h3{
padding:5px;
font-size:1rem;
}

#news p{
margin:0px;
}

#box2 dt{
margin:5px 0;
padding:2px;
width:40px;
}

#box2 dd{
margin:0 0 5px 5px;
}
#botan1{width:150px}

#box2 .precaution{padding:0px 10px 5px 5px;
}





#box0 .idou{margin-left:auto;
margin-right:auto;
}

/*------------------info 修正分------------------- */

.info h3{font-size:1rem;
padding:5px;
}

.info  p{padding:10px;
}

.info  dl{margin-left:10px;
}

.info  dt{
width:40px;
}

.info  dd{
margin-left:50px;
margin-bottom:5px;
padding:4px;  
}

.illustration{margin-left:auto;
margin-right:auto;
float:none;
}

.box4{padding:5px;
margin:0 10px 10px 10px;
}

.box4 .precaution{padding:0;
margin:0;
}

.instructor {padding:10px 0px;
	overflow:hidden;
	border-bottom:dotted #F6F 1.5px;
}


.name dl dt{margin-bottom:5px;
font-size:0.8rem;
}

.name  dl dd{margin-bottom:5px;
}



.box3 {padding:10px;
}

.box3 dl dt{margin-bottom:10px;
font-size:0.8rem;
}

.box3 dl dd{margin-left:10px;
}

.illustration2{
width:50px;
height:auto;
margin-right:10px;
margin-top:20px;
}



.box5 ol {
  margin:5px 10px 0 20px;
  padding: 0
}

.box5 ol li  {
  margin:5px 20px 0 0;
}

.box5 p{padding:10px 10px 0 10px;
}

.box5 h5{padding:5px;
font-size:1rem;
}

.box5 dl{margin:10px 10px 0 10px;
}

.box5 dl dd{margin:10px 10px 10px 10px;
}

.box5 h6{padding:5px;
margin:10px;
width:70px;
font-size:10px;
}

.box5 .precaution{padding:0;
margin:0 20px 10px 20px;
}


.instructor .idou{margin-left:56%;
}

.box3 .idou{margin-left:60%;
}

.box5 .idou{margin-left:59%;
padding:3px;
margin-bottom:10px;
}


}

/*------------------------------------------------------------------

                         画面サイズ変更240px以下 

------------------------------------------------------------------ */
@media screen and (max-width: 240px) {
	body{font-size:8px;
}

#top{width:100%;
}

#top h1{width:20px;
margin:5px 20px 5px 5px ;
}

#top h2{font-size:10px;
}

#top img{width:100%;
height:auto;
margin-left:5px;
}

#news {
	width:100%;
}

#news h3{
font-size:10px;
padding:5px;
margin-left:auto;
margin-right:auto;
}

#news img{width:100%;
}

#box1{float:left;
margin-left:auto;
margin-right:auto;
}

#box2{
	float:left;
	width:100%;
}

#news p{
margin-left:5px;
margin-bottom:5px;
}

#news .koumoku{font-size:1.125rem;
margin:20px 20px 5px 10px;
}

/*------------------info 修正分------------------- */

.info h3{padding:5px 5px 5px 5px;
font-size:10px;
}

.info  p{padding:5px;
}

.info  dl{margin-left:5px;
}

.info  dt{
float:none;
width:40px;
}

.info  dd{
float:none;
margin:0;
}

.illustration{margin-left:auto;
margin-right:auto;
float:none;
}

.info .precaution{padding:0 3px 5px 3px;
}

.instructor {padding:5px 0px;
}

.box0{margin:0px 5px 5px 5px;
}

.photo {
width:80px;
height:auto;
float:none;
margin-left:auto;
margin-right:auto;
margin-top:5px;
margin-bottom:5px;
}

.photo_yoko {
width:80px;
height:auto;
float:none;
margin-left:auto;
margin-right:auto;
margin-top:5px;
margin-bottom:5px;
}

.name{float:none;
width:94%;
margin:0 3%;
}

.box3 {padding:5px;
}

.box3 dl dt{margin-bottom:5px;
}

.box3 dl dd{margin-left:5px;
}


.illustration2{
width:40px;
height:auto;
margin-top:30px;
margin-right:5px;
}

.box4 ol {
  margin:5px 10px 5px 20px;
  padding: 0
}

.box4 ol li  {
  margin:5px 10px 0 0;
}

.box4 p{padding:5px 5px 0 5px;
}

.box4 h5{padding:5px 0 5px 5px;
font-size:10px;
}

.box4 h6{padding:5px;
font-size:10px;
}

.box4 dl{margin:5px 5px 0 5px;
}

.box4 dl dd{margin:5px;
}


.box4 .precaution{padding:0;
margin:0 5px 5px 10px;
}

.instructor .idou{
margin-left:auto;
margin-right:auto;
}

.box3 .idou{margin-left:auto;
margin-right:auto;
}

.box5 .idou{margin-left:auto;
margin-right:auto;
}


}