@charset "shift_jis";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		6;
	dw-num-cols-desktop:	9;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 93.3333%;
	padding-left: 3.3333%;
	padding-right: 3.3333%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #ffff00;
	font-weight: normal; color: #333333;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutDiv3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutDiv4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image: url(button/back.gif);
	background-color: #000000;
	font-weight: normal; color: #ffffff;
}
#LayoutDiv5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv7 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv8 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #ffff00;
	font-weight: normal; color: #333333;
}
#LayoutDiv9{
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
	word-wrap: break-word;
}

.body {font-size: 1.0em;}

h1 {
	font-weight: normal; font-size: 1.0em; margin: 0px 6px 0px; color: #333333; letter-spacing: 0.0em; line-height: 1.5em; }

h2
 {
	font-size: 1.2em;
	letter-spacing: 0.1em;
	margin-bottom:10px;
	margin-left:0px;
	color: #333333;
	padding-left: 8px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #000000;

	border-bottom-style: solid;
	border-bottom-color: #000000;

}


h3 {
	font-weight: bold; font-size: 1.0em; margin: 10px 0px 5px; color: #000000; letter-spacing: 0.0em; line-height: 1.2em; }

h4 {
	font-weight: normal; font-size: 1.0em; margin: 0px 1px 0px; color: #000000; letter-spacing: 0.0em; line-height: 1.1em; }

h5 {
	font-weight: normal; font-size: 1.0em; margin: 0px 0px 0px; color: #999999; letter-spacing: 0.0em; line-height: 1.1em; }

h6 {
	font-weight: normal; font-size: 0.8em; margin: 0px 6px 0px; color: #333333; letter-spacing: 0.0em; line-height: 1.5em; text-align: center;}


.title
 {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 0.9em;
	letter-spacing: 0.1em;
	margin-bottom:10px;
	margin-left:0px;
	color: #000000;
	padding-left: 8px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #000000;

	border-bottom-style: solid;
	border-bottom-color: #000000;

}

.menu
 {
	font-weight: normal; font-size: 1.2em; margin: 0px 0px 0px; color: #999999; letter-spacing: 0.0em; line-height: 1.1em; }

.btn {  

     background: #eeeeee;  

     border: 1px solid #000000;  

     border-radius: 8px;  

     -moz-border-radius: 8px;  

     -webkit-border-radius: 8px;  

     color: #333333;  

     width: 100px;  

     line-height: 3em; 

     padding: 9px 3px;  

 } 

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

hr.s00 {border-width: 1px 0px 0px 0px; border-style: solid; border-color: #999999; height: 1px; }

hr.s01 {border-width: 1px 0px 0px 0px; border-style: dashed; border-color: #999999; height: 1px; }

hr.s02 {border-width: 1px 0px 0px 0px; border-style: solid; border-color: #000000; height: 1px; }

hr.s03 {border-width: 3px 0px 0px 0px; border-style: solid; border-color: #000000; height: 1px; }

a:link    { color:#0000ff; text-decoration:none; }
a:visited { color:#0000ff; text-decoration:none; }
a:hover   { color:#ff0000; text-decoration:underline; position:relative; left:0px; top:1px; }
a:hover img{   
filter:alpha(opacity=70);/* ie用*/
-moz-opacity:0.7;/* firefox用 */
opacity:0.7;/* opera、safari用 */
}


.box100 {
  width: 100%;
}
 
.box80 {
  width: 80%;
}
 
.width100,
.width80 {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
.width100 {
  width: 100%;
}
 
.width80 {
  width: 80%;
}

aside{
    background-color:#e7ffe7;
	border-radius:8px;
	-webkit-border-radiux:8px;
	padding:10px;
	margin-bottom:20px;
	margin-right:8px;
	margin-left:8px;
}

aside p:last-child{
    margin-bottom:0;
}



/* タブレットレイアウト : 481 px 〜 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 93.3333%;
	padding-left: 3.3333%;
	padding-right: 3.3333%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #ffff00;
	font-weight: normal; color: #333333;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutDiv3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#LayoutDiv4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image: url(button/back.gif);
	background-color: #000000;
	font-weight: normal; color: #ffffff;
}
#LayoutDiv5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv7 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv8 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #ffff00;
	font-weight: normal; color: #333333;
}
#LayoutDiv9{
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
	word-wrap: break-word;
}

.body {font-size: 1.1em;}

h1 {
	font-weight: normal; font-size: 1.0em; margin: 0px 6px 0px; color: #333333; letter-spacing: 0.0em; line-height: 1.5em; }

h2
 {
	font-size: 1.2em;
	letter-spacing: 0.1em;
	margin-bottom:10px;
	margin-left:0px;
	color: #333333;
	padding-left: 8px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #000000;

	border-bottom-style: solid;
	border-bottom-color: #000000;
}


h3 {
	font-weight: bold; font-size: 1.0em; margin: 10px 0px 5px; color: #000000; letter-spacing: 0.0em; line-height: 1.2em; }

h4 {
	font-weight: normal; font-size: 1.0em; margin: 0px 1px 0px; color: #000000; letter-spacing: 0.0em; line-height: 1.1em; }

h5 {
	font-weight: normal; font-size: 1.0em; margin: 0px 0px 0px; color: #999999; letter-spacing: 0.0em; line-height: 1.1em; }

h6 {
	font-weight: normal; font-size: 0.9em; margin: 0px 6px 0px; color: #333333; letter-spacing: 0.0em; line-height: 1.5em; text-align: center;}


.title
 {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 0.9em;
	letter-spacing: 0.1em;
	margin-bottom:10px;
	margin-left:0px;
	color: #000000;
	padding-left: 8px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #000000;

	border-bottom-style: solid;
	border-bottom-color: #000000;

}

.menu
 {
	font-weight: normal; font-size: 1.2em; margin: 0px 0px 0px; color: #999999; letter-spacing: 0.0em; line-height: 1.1em; }

.btn {  

     background: #eeeeee;  

     border: 1px solid #000000;  

     border-radius: 8px;  

     -moz-border-radius: 8px;  

     -webkit-border-radius: 8px;  

     color: #333333;  

     width: 100px;  

     line-height: 3em; 

     padding: 9px 3px;  

 } 

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

hr.s00 {border-width: 1px 0px 0px 0px; border-style: solid; border-color: #999999; height: 1px; }

hr.s01 {border-width: 1px 0px 0px 0px; border-style: dashed; border-color: #999999; height: 1px; }

hr.s02 {border-width: 1px 0px 0px 0px; border-style: solid; border-color: #000000; height: 1px; }

hr.s03 {border-width: 3px 0px 0px 0px; border-style: solid; border-color: #000000; height: 1px; }

a:link    { color:#0000ff; text-decoration:none; }
a:visited { color:#0000ff; text-decoration:none; }
a:hover   { color:#ff0000; text-decoration:underline; position:relative; left:0px; top:1px; }
a:hover img{   
filter:alpha(opacity=70);/* ie用*/
-moz-opacity:0.7;/* firefox用 */
opacity:0.7;/* opera、safari用 */
}


.box100 {
  width: 100%;
}
 
.box80 {
  width: 80%;
}
 
.width100,
.width80 {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
.width100 {
  width: 100%;
}
 
.width80 {
  width: 80%;
}

aside{
    background-color:#e7ffe7;
	border-radius:8px;
	-webkit-border-radiux:8px;
	padding:10px;
	margin-bottom:20px;
	margin-right:8px;
	margin-left:8px;
}

aside p:last-child{
    margin-bottom:0;
}

}



/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

.back {
	width: 100%;

 border-top: 0px solid #000000;
 border-bottom: 0px solid #000000;
}

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 77.3333%;
	max-width: 900px;
 border-left: 0px solid #000000;
 border-right: 0px solid #000000;

	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	height: 3em;
	width: 100%;
	display: block;
	background-color: #ffff00;
	font-weight: normal; color: #333333;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 31.8181%;
	display: block;
}
#LayoutDiv3 {
	clear: none;
	float: right;
	margin-left: 2.2727%;
	width: 65.909%;
	display: block;
}
#LayoutDiv4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image: url(button/back.gif);
	background-color: #000000;
	font-weight: normal; color: #ffffff;
}
#LayoutDiv5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 77.2727%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv6 {
	clear: none;
	float: right;
	margin-left: 2.2727%;
	width: 20.4545%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv7 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}
#LayoutDiv8 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #ffff00;
	font-weight: normal; color: #333333;
}
#LayoutDiv9 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	word-wrap: break-word;
}

.body {margin: 0px 12px 0px; font-size: 1.2em; line-height: 1.5em;}

h1 {
	font-weight: normal; font-size: 1.0em; margin: 9px 6px 0px; color: #333333; letter-spacing: 0.0em; line-height: 1.1em; }


h2
 {
	font-size: 1.2em;
	letter-spacing: 0.1em;
	margin-bottom:10px;
	margin-left:0px;
	color: #333333;
	padding-left: 8px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #000000;

	border-bottom-style: solid;
	border-bottom-color: #000000;

}

h3 {
	font-weight: bold; font-size: 1.0em; margin: 10px 0px 10px; color: #000000; letter-spacing: 0.0em; line-height: 1.2em; }

h4 {
	font-weight: normal; font-size: 1.0em; margin: 0px 10px 0px; color: #000000; letter-spacing: 0.0em; line-height: 1.5em; }

h5 {
	font-weight: normal; font-size: 0.9em; margin: 0px 0px 0px; color: #999999; letter-spacing: 0.0em; line-height: 1.2em; }


h6 {
	font-weight: normal; font-size: 0.9em; margin: 0px 6px 0px; color: #333333; letter-spacing: 0.0em; line-height: 1.5em; text-align: center;}


.title
 {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 0.9em;
	letter-spacing: 0.1em;
	margin-bottom:10px;
	margin-left:0px;
	color: #000000;
	padding-left: 8px;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #000000;

	border-bottom-style: solid;
	border-bottom-color: #000000;

}

.menu
 {
	font-weight: normal; font-size: 1.2em; margin: 0px 0px 0px; color: #999999; letter-spacing: 0.0em; line-height: 1.1em; }

.btn {  

     background: #eeeeee;  

     border: 1px solid #000000;  

     border-radius: 8px;  

     -moz-border-radius: 8px;  

     -webkit-border-radius: 8px;  

     color: #333333;  

     width: 100px;  

     line-height: 3em; 

     padding: 9px 3px;  

 } 

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

hr.s00 {border-width: 1px 0px 0px 0px; border-style: solid; border-color: #999999; height: 1px; }

hr.s01 {border-width: 1px 0px 0px 0px; border-style: dashed; border-color: #999999; height: 1px; }

hr.s02 {border-width: 1px 0px 0px 0px; border-style: solid; border-color: #000000; height: 1px; }

hr.s03 {border-width: 3px 0px 0px 0px; border-style: solid; border-color: #000000; height: 1px; }

a:link    { color:#0000ff; text-decoration:none; }
a:visited { color:#0000ff; text-decoration:none; }
a:hover   { color:#ff0000; text-decoration:underline; position:relative; left:0px; top:1px; }
a:hover img{   
filter:alpha(opacity=70);/* ie用*/
-moz-opacity:0.7;/* firefox用 */
opacity:0.7;/* opera、safari用 */
}

.box100 {
  width: 100%;
}
 
.box80 {
  width: 80%;
}
 
.width100,
.width80 {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
.width100 {
  width: 100%;
}
 
.width80 {
  width: 80%;
}


aside{
    background-color:#e7ffe7;
	border-radius:8px;
	-webkit-border-radiux:8px;
	padding:10px;
	margin-bottom:20px;
	margin-right:8px;
	margin-left:8px;
}

aside p:last-child{
    margin-bottom:0;
}

}