/*
######################################
▼基本▼
######################################
*/
*       { margin: 0;
          padding: 0; }

img     { border: none;
          vertical-align: top;   /*IEの画像ベースラインを変更 */
 }

body    { padding: 8px;
          font: 1em/1.6em sans-serif;
		  color: #555; }

a       { text-decoration: none; }
a:hover { text-decoration: underline; }



/*
==============================
▼3カラム▼
==============================
<!-- ┌     ┏━━━━━━┓           ┐
     │     ┃　タイトル　┃←header   │
     │     ┣━━┳━━━┫           │
     │     ┃mメ ┃ m　　┃←col      │
     │     ┃eニ ┃ a本　┃           │body
     │     ┃nュ ┃ i文　┃           │
     │     ┃u｜ ┃ n　　┃           │
     └     ┗━━┻━━━┛           ┘ -->
*/
.header  { width: 96%;
          max-width:960px;
          border-bottom:solid #66ff99 1px;
          margin: 0 auto; }

.bread	{ width: 96%;
		  max-width:960px;
		  margin: 0 auto;
		  position: relative;
		  font-size: 0.85em;
		  padding-top: 5px; }

.col    { width: 96%;
          max-width:960px;
          margin: 0 auto;
		  position: relative; }

.menu   { width: 250px;
		  position: absolute;
		  top: 0; }
.main   { margin-left: 250px;
		  /* border-left: 1px #ccc solid; */
		  padding-left: 4%; }
.footer  { width: 96%;
          max-width:960px;
          border-top:solid #66ff99 1px;
          margin: 0 auto; }


@media screen and (max-width: 960px) {
  /* ウインドウ横幅が960px以下のとき */
  .header { max-width: 922px;
            min-width: 600px; }
  .col    { max-width: 922px;
            min-width: 600px; }
  .menu   { width: 200px; }
  .main   { margin-left: 200px; }
  .footer { max-width: 922px;
            min-width: 600px; }
}
/*
==============================
▲3カラム▲
==============================
*/

/*
######################################
▲基本▲
######################################
*/


/*
==============================
▼文字装飾・角丸など▼
==============================
*/
.color0     { color: #555; }
.color1     { color: #588f34; }/*トップ・グリーン文字*/
.color2     { color: #3983bf; }/*トップ・ブルー文字*/
.no-deco    { text-decoration: none; }

.big0       { font: 0.91em/1.52em sans-serif; }
.big1       { font: 1em/1.6em sans-serif; }
.big2       { font: 1.2em/1.4em sans-serif; }
.big3       { font: 1.5em/1.2em serif; }


.round8 { border-radius: 8px;
		  -moz-border-radius: 8px;
		  -webkit-border-radius: 8px;
		  white-space: nowrap; }

.grad { background: linear-gradient(to top, #ccc, #fff); }
.grad2 { background: linear-gradient(to top, #2b95ff, #aad5ff); }


/*
==============================
▲文字装飾・角丸など▲
==============================
*/
/*
==============================
▼ボタン・マウスイベント？▼
==============================
*/

.opa:hover { opacity:0.7;  /* onMouseで半透明 */
             -moz-opacity:0.7;
		     -webkit-opacity:0.7;
		     filter: alpha(opacity=70);
             -ms-filter: "alpha(opacity=70)"; }


/*
==============================
▲ボタン・マウスイベント？▲
==============================
*/
/*
==============================
▼to-pagetop▼
==============================
*/
#back-top {
	position: fixed;
	bottom: 20px;
	right: 100px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(../img/to-pagetop.png) no-repeat center center;
     filter:alpha(opacity=85);
     -moz-opacity:0.85;
     -khtml-opacity: 0.85;
     opacity:0.85;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
     filter:alpha(opacity=85);
     -moz-opacity:0.85;
     -khtml-opacity: 0.85;
     opacity:0.85;
}
/*
==============================
▲to-pageto▲
==============================
*/