@charset "utf-8";

/* clearfix */
.cf{ zoom:1;}
.cf:before, .cf:after{ contents:""; display:table;}
.cf:after{ clear:both;}


body{
width:100%;
font-family:"ＭＳ Ｐゴシック", "メイリオ", "ＭＳ ゴシック", sans-serif;
color:#000;
height: 100%;

}

a {
color:#666666;
text-decoration:none; 
}
a:hover{
color:#FF9900;
text-decoration:underlone;
}

a:hover img 
{ 
opacity:0.6; 
filter: alpha(opacity=80); 
-ms-filter: "alpha( opacity=80 )"; 
background: #fff; 
} 

/*ヘッダーのスタイル*/

header {
margin: 0 auto;
position:relative;
overflow:hidden;
margin-top:-17px;
}
header h1 {
width:100%;
background-color: #004433;
}
header h1 img {
width:100%;
max-width:480px;
}
header ul#s_nav {
list-style-type:none;
position:relative;
left:50%;
float:left;
}
header ul#s_nav li {
float:left;
position:relative;
left: -50%;
}
header ul#s_nav li a {
display:block;
font-size:.6em;
padding:10px 15px 5px 10px;
}
header ul#s_nav li.contact a {
background:url(/images/icn_contact.jpg) no-repeat left center;
}
header ul#s_nav li.news a {
background:url(/images/icn_news.jpg) no-repeat left center;
}
header ul#s_nav li.sitemap a {
background:url(/images/icn_sitemap.jpg) no-repeat left center;	
}
header ul#s_nav li.map a {
background:url(/images/icn_map.jpg) no-repeat left center;	
}
header ul#s_nav li.mixi a {
background:url(/images/icn_mixi.jpg) no-repeat left center;	
}
header ul#s_nav li.facebook a {
background:url(/images/icn_facebook.jpg) no-repeat left center;
}

header ul#s_nav li.twitter a {
background:url(/images/icn_twitter.jpg) no-repeat left center;	
}

/*パンくず*/
ol{
margin: 0;
padding: 0;
list-style: none;
background-color:#CCCCCC;
}

#number{
list-style-type: decimal;
background-color:#FFFFFF;
text-align: left;
padding: 0 0 0 10px;
margin:0 0 0 15px;
font-size:13px;
line-height: 1.5;
}

#breadcrumbs-one{
background: #eee;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
overflow: hidden;
width: 100%;
}

#breadcrumbs-one li{
font-size:.6em;
float: left;
}

#breadcrumbs-one a{
padding: .5em .5em .5em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#breadcrumbs-one li:first-child a{
padding-left: 1em;
}

#breadcrumbs-one a:hover{
background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;   
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}

#breadcrumbs-one a::after{ 
border-left-color: #ddd;  
}

#breadcrumbs-one a::before{
border-left-color: #ccc;  
right: -1.1em;
}

#breadcrumbs-one a:hover::after{
border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
background: none;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
content: normal;  
}

/* タイトル画像 */

#title{
width:100%;
background-color:#FFFFFF;
background-image:url(../images/about_top.gif);
background-repeat: no-repeat;
background-position: left;
padding:20px 0px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
text-shadow: 1px  1px 1px black,
1px  1px 1px black,
1px  1px 1px black,
1px  1px 1px black;
}

.title_text{
color:#999999;
text-align:center;
}


/* フォント */
sup{
font-size: 75.5%;
vertical-align: top;
position: relative;
top: -0.1em;
}

.top-level{
margin:10px;
font-size:0.8em;
}


div#tmp2nd{
display: inline-block; 
_display: inline;
}

.l{
text-align:left;
}


h2 {font-size: 1.0em;

}

h3 {
font-size: 0.9em;
text-align: left;
line-height: 15px;/*h3の高さ設定*/
padding: 7px;
color:#000000;
border-bottom:solid 3px;
border-bottom-color:#783c0a;
background-color:#fbeac6;
margin:20px 5px 10px 5px;
}



h4 {
font-size: 0.8em;
border-left: 4px solid #000000;/*文字の横に付箋のようなマークを入れる*/
border-bottom:dotted 1px #000000;/*文字の下に点線を入れる設定*/
line-height: 20px;/*h3の高さ設定*/
padding:2px 0px 2px 5px;/*文字の左にスペース*/
color:#333333; /*文字の色*/
margin:3px;
background-color:#FFFF99;
}


h5 {
font-size: 0.8em;
text-align: left;
padding: 5px;
border-bottom:dotted 1px #cccccc;/*文字の下に点線を入れる設定*/
border-bottom-color:#CCCCCC;
margin:3px;
margin-top:5px;
background-color:#EEEEEE;
}

h6 {
font-size: 0.8em;
text-align: left;
padding: 5px;
margin:3px;
margin-top:5px;
display:block;
border:dotted 1px #cccccc;/*文字の下に点線を入れる設定*/
}


#day{
font-size: 0.8em;
color:#666666;
padding:10px 5px 5px 0;
text-align: right;
}


.bold{
font-weight:700;
}

p{
line-height:1.4;
margin-top:5px;
margin-bottom:15px;
font-size:0.8em;
text-align:left;
padding-left:10px;
}

p.hr{
border-bottom:dotted 1px #cccccc;/*文字の下に点線を入れる設定*/
}

span.blue{
padding:5px;
}

span.orange{
padding:3px;
}

span.coment{
font-size:11px;
padding-left:5px;

}

.block{
display:block;
}

.right{
text-align:right;
font-size:0.9em;

}

.center{
text-align:center;
}

.left {
float: left;
margin-right:10px;
}

.clear {
clear: both;
}

.q{
font-size:1em;
color: #FF6699;
}

.indent-1 {
padding-left:1.7em;
text-indent:-1em;
}

.r{
font-size:1em;
color:#9966CC;
font-weight:700;
}



/*グローバルナビゲーション*/
nav {
margin:0 0 20px 0;
}

nav ul li {
text-align: center;
float: left;
width: 33%;
}

nav ul li a{
width: 88%;
}

/*コンテンツエリア全体のスタイル*/
#contents{
width:100%;
margin:0px 0 0 0 ;
color:#666;
padding:20px 0 0px 0;
}


/*ページトップへボタンのスタイル*/

a#pagetopBtn img {
z-index:4;
position: fixed;
bottom: 80px;
right: 1px;
}

/*フッターのスタイル*/

footer {
text-align: center;
height:80px;
background-color: #004433;
color:#FFFFFF;
position:relative;
bottom:0px;

}

footer div {
margin: 10px 0 0 0;
font-size: 10px;

}

div.middle p {
display: block;
vertical-align: middle;
margin: 0;
}

/*for IE6 */
* html .middle p {
display: inline;
zoom: 1;
}

/*for IE7 */
*:first-child+html .middle p {
display: inline;
zoom: 1;
}

/* ボタン　*/

.myButton {
-moz-box-shadow:inset 0px 0px 1px 1px #ffffff;
-webkit-box-shadow:inset 0px 0px 1px 1px #ffffff;
box-shadow:inset 0px 0px 1px 1px #ffffff;
background-color:#CCCC99;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #CCCC99;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:arial;
font-size:1.2em;
padding:10px 10px;
text-decoration:none;
text-shadow:0px 1px 2px #ffffff;
margin:0 0 5px 0;
}
.myButton:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.myButton:active {
position:relative;
top:1px;
}

.myButton2 {
-moz-box-shadow:inset 0px 0px 1px 1px #ffffff;
-webkit-box-shadow:inset 0px 0px 1px 1px #ffffff;
box-shadow:inset 0px 0px 1px 1px #ffffff;
background-color:#f08080;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #f08080;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:arial;
font-size:12px;
font-weight: 100px;
padding:10px 10px;
text-decoration:none;
text-shadow:0px 1px 2px #ffffff;
margin:10px 0 0px 0;
width:95%;
text-align:center;
}
.myButton2:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.myButton2:active {
position:relative;
top:1px;
}


.size42 {
width:42%;
}

/* 写真 */

.photo_align {
float:left;
margin:0px 5px 10px;
}

.clear_left{ 
clear:left;
}

.space{
margin:0px 20px 10px 10px;
}

.photo {
width:94%;
margin:4px;
}

.photo2 {
width:46%;
margin:4px;
}

.photo3 {
width:30%;
margin:4px;
}

.panf_2 {
width:45%;
margin:4px;
}


.panf_3 {
width:45%;
margin:4px;
}




/* 準備中 */

.wait{
background-color:#FFFF99;
border: double 4px #FFF;
padding: 2em;
text-align:center;
color:#339933;
font-weight:bold;
margin-top:15px;
margin-bottom:5px;
font-size:12px;
padding-left:0px;

}

#workshop{
position: relative;
z-index:1;
}

#workshop ul {
list-style-image: url("/images/arrow.jpg");
text-align: left;
padding: 0 0 0 10px;
margin:0 0 0 15px;
font-size:15px;
}

#workshop ul sq {
list-style-image: url("/images/square.jpg");
text-align: left;
padding:0 0 0 10px;
margin:0 0 0 10px;
color: #666666;/* 文字色 */
}


.box {
 position:relative;
 padding:20px;
 margin: 3.5em auto;
 width: 80%;
 color: #333333;/* 文字色 */
 background: #ffffdb;/*枠背景色*/ 
 box-shadow: 0 10px 6px -6px #999;
}

.boxtitle{
 position: absolute;
 top: -1em;
 padding: 0.25em 2em;
 content: "";
 color: #69821b;/* タイトル文字色 */
 font-weight: bold;/*太文字（必要なければ削除）*/
 background-color: rgba(255,255,127,.2);/*テープ色*/
 border-left:2px dotted rgba(0,0,0,.1);
 border-right:2px dotted rgba(0,0,0,.1);
 box-shadow:0 0 5px rgba(0,0,0,0.2); 
 transform: rotate(-5deg);
}

.box2 {
 position: relative;
 margin: .5em auto;
 padding: 1.5em 1em 1em 1em;
 color: #333333; /* 文章色 */
 border: 1px solid #333333; /* 枠線の太さ・色 */
 width: 90%;
}
.box2title {
 position: absolute;
 padding: 0 .5em;
 left: 18px;
 top: -9px;
 content: "";
 font-weight: bold;
 background-color: #fff;
 color: #333333; /* タイトル文字色 */
}

.box3 {
 position: relative;
 margin: 1em auto;
 padding: 5px;
 color: #66666; /* 文章色 */
 background-color:#E8E8E8;
 width: 90%;
 padding:20px;
}

.box3 li {
 padding: 5px;
}
.box3title {
 position: absolute;
 padding: 0.25em 1em;
 left: 10px;
 top: -11px;
 content: "";
 font-weight: bold;
 background-color:#FFFFFF;
 color: #333333; /* タイトル文字色 */
 border-left:2px dotted rgba(0,0,0,.1);
 border-right:2px dotted rgba(0,0,0,.1);
 box-shadow:0 0 5px rgba(0,0,0,0.2); 
 transform: rotate(-5deg);
}

.box4 {
 position: relative;
 margin: .5em auto;
 padding: 1em;
 color: #333333; /* 文章色 */
 border: 1px dotted #EEEEEE; /* 枠線の太さ・色 */
 width: 90%;
}
.box4title {
 position: absolute;
 padding: 0 .5em;
 left: 18px;
 top: -9px;
 content: "";
 font-weight: bold;
 background-color: #fff;
 color: #9966CC; /* タイトル文字色 */
}

.box4 ul li {
 font-size:0.9em;
 line-height:20px;
 }


.stitch {
color: #fff;
padding: 0px;
margin:2px;
background: #ff9900;
border: 1px dashed #F7F9CC;
border-radius: 5px;
box-shadow: 0 0 0 2px #ff9900;
width:98%;
text-align:center;
}


div#tmp2nd{
text-align:center;
}

/* 左バナー */
#banner {
font-size:.9em;
}

#banner ul {
width:49%;
}


#banner ul li{
list-style:none;
}


#banner ul li img {
width:100%;
} 

/* 右バナー */
#banner_right{
font-size:.9em;
}

#banner_right ul {
list-style:none;
width:49%;
position:relative;
top:16px;
float:right;
}

#banner_right ul li img {
width:100%;
} 

#ivent ul li {
list-style:none;
}


} 

/* PC向けおよび大型タブレット向けのレイアウトの指定：144px～960px */
@media only screen and (min-width: 568px) {

/*フッターのスタイル*/
footer {
height:70px;
width:568px;
}


.panf_3 {
width:30%;
margin:4px;
}



#workshop{
padding: 0 0 0 230px;
}



#title{
background-position: center;
}




/*index以外のナビ*/
nav {
max-width: 480px;
}
nav ul{
margin-left: auto;
margin-right: auto;
}
nav ul li {
}


/* 左バナー */

#banner {
}

#banner ul {
}

#banner ul li img {
width:200px;
} 

/* 右バナー */

#banner_right {
}

#banner_right ul {
}

#banner_right ul li img {
width:200px;
} 

.adsbygoogle{
background-color:#FFFFFF;
}

}


/* PC向けレイアウトの指定：961px以上では固定レイアウト */
@media only screen and (min-width: 768px) {
body{
width:768px;

margin:0 auto;
}


header {
width:768px;
margin-left:auto;
margin-right:auto;
}

/*フォント*/

h3 {
margin: 0px 3px 10px 3px;
}

h2 {font-size: 0.9em;

}

h3 {
font-size: 0.9em;
}


#day{
font-size: 0.9em;
}


h4 {
font-size: 0.9em;
}


h5 {
font-size: 0.9em;
}

h6 {
font-size: 0.9em;
}

h7 {
font-size: 0.9em;
}

p{
font-size:0.9em;
}

/*ヘッダーのスタイル*/


/*ナビゲーションバナー*/
nav {
max-width: 768px;
}
nav ul{
margin-left: auto;
margin-right: auto;
}
nav ul li {
width: 16.5%;
}




/*コンテンツエリア全体のスタイル*/
#contents{
}

div#contents p {
}

div#contents article h3 {
}

div#contents h2 {
}

#workshop{
width:330px;
padding: 0 0 0 230px ;
}



/*フッターのスタイル*/

footer {
width:768px;
height:40px;
bottom:0px;
}

footer div {
font-size: 10px;
margin: 0 auto;
padding-top:10px;

}

div.middle p {
display: table-cell;
vertical-align: middle;
}


/* 左バナー*/
#banner {
position:absolute;
z-index:2;
top:250px;
}

#banner ul {
display:block;
width:220px;
}

#banner ul li img {
} 

/* 右バナー */
#banner_right{
}


#banner_right ul {
display:block;
position:absolute;
top:250px;
padding: 0 0 0 567px ;
width:200px;

}
#banner_right ul li img {
} 



/* 写真 */

.photo{
width:320px;
}

.panf_3 {
width:45%;
margin:4px;
}


}

@media only screen and (min-width: 961px) {
body{
width:960px;
margin:0 auto;}


header {
width:960px;
margin-left:auto;
margin-right:auto;
}

#workshop{
width:520px;
padding: 0 0 0 230px ;
}



/*ナビゲーションバナー*/
nav {
max-width: 960px;
}


/*フッターのスタイル*/

footer {
width:960px;
}

#banner_right ul {
padding: 0 0 0 760px ;

}

.photo{
width:500px;
}


.panf_3 {
width:30%;
margin:4px;
}

}