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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

*{
	text-decoration:none;
}

/*ページ基礎セッティング*/
html, body {
	font: 16px Tahoma, verdana, sans-serif;
	line-height:18px;
}
body{
	background-color:rgba(228,243,247,1);
	background-repeat:no-repeat;
	background-image:url(../images/hana.png);
	background-attachment: fixed;
	background-position:50% 0%;
}

@media only screen and (max-device-width : 480px) {
/* スマートフォンだけ以下を適用 */
.background-hack {
    z-index                 : -1;
    background-color        : rgba(228,243,247,1);
    background-image        : url(../images/hana.png);
    background-repeat       : no-repeat;
    background-size         : 100% auto;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}
}

a {
	color:#09F;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}
a:hover {
	color:#F00;
}
p{
	margin:3px;
	font: 16px;
	line-height:20px;
}

#wrapper {
	margin:0 auto;
	width:800px;
	height:100%;
}


#header{
	width:800px;
	margin:0 auto;
}
@media only screen and (min-device-width : 480px) {
#header{
	position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
}
}
#header img{
	width:100%;
}
@media only screen and (min-device-width : 480px) {
.air{
	margin:0 auto;
	width:800px;
	height:306px;
}
}
@media only screen and (max-device-width : 480px) {
.air{
	margin:0 auto;
	width:800px;
	height:0px;
}
}
ul{
	font-size: 0;
	line-height:0;
}
li {
	list-style-type: none;
  	display: inline-block;
  	width:400px;
}
li img{
	margin:0;
	padding:0;
	vertical-align: bottom;
}
#frameimg{
 z-index:2; 
 position:fixed; 
 top:50px;
}

.contents1{
	padding:20px 0;
	margin:0 auto;
	width:800px;
	height:12200px;
	background-image:url(../images/back.png);
	background-repeat: repeat-y repeat-x;
	text-align:center;
}

.contents2{
	padding:20px 0;
	margin:0 auto;
	width:800px;
	height:6300px;
	background-image:url(../images/back.png);
	background-repeat: repeat-y repeat-x;
}

.box{
	width:660px;
	margin:15px auto;
	padding:5px;
	line-height:20px;
}
.boxre{
	width:460px;
	margin:15px auto;
	padding:20px;
	line-height:20px;
}
.contents2 .box img{
	width:200px;
	margin:4px;
	border: 5px solid #ffffff ;
	box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 0.7);
}

.box2{
	margin:0 100px;
	padding:5px;
}
.contents2 .box2 ul{
	list-style-type: none;
	margin:0 40px;
	line-height:26px;
}
.last{
	width:650px;
	margin:15px auto;
}
#footer{
 z-index:1; 
 position:fixed; 
 bottom:0;
}

h1{
	width:630px;
	color:rgba(3,149,149,1);
	font-size:20px;
	font-weight:bold;
	text-align:center;
	background-color:rgba(252,228,155,1);
	padding:5px;
	margin:20px auto;
    border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 3px;   /* Firefox用 */  
}

h2{
	color:#F63;
	font-size:16px;
	margin:20px 0;
}

img {
	border:none;
	color: #A2A2A2;
}

img.bg{
	min-height:100%;
	min-width:800px;
	height:auto;
	width:100%;	
	position:fixed;
	bottom:0;
	right:0;
}

@media screen and (max-width: 1280px){
	img.bg {
		left:50%;
		margin-left: -512px;}
}


/*リンク*/
a. {color: #39F; text-decoration: none;}
a:link {color: #39F; text-decoration: none;} /* 通常時 */
a:visited {color: #39F; text-decoration: none;} /* 訪問済 */
a:active {color: #39F; text-decoration: none;} /* クリック時 */
a:hover {color: #F9C; text-decoration:underline;}　/* マウスオーバー時 */

a.sub {color: #CCCCFF; text-decoration: none;}
a.sub:link {color: #CCCCFF; text-decoration: none;} /* 通常時 */
a.sub:visited {color: #CCCCFF; text-decoration: none;} /* 訪問済 */
a.sub:active {color: #CCCCFF; text-decoration: none;} /* クリック時 */
a.sub:hover {color: #DDDDFF; text-decoration:underline;}　/* マウスオーバー時 */


/*Border関連*/

.border-solid{
	border:solid 1px #666;
}

.border-dotted{
	border:dotted 1px #666;
}

.border-double{
	border:double 3px #666;
}

.line-solid{
	border-bottom:solid 1px #666;
	margin:5px 0px;
}

.line-dotted{
	border-bottom:dotted 1px #333;
	margin:5px 0px;
	padding:5px 0px;
}

.line-double{
	border-bottom:double 3px #666;
	margin:5px 0px;
}

.line-orange{
	border-bottom:solid 2px #F60;
	margin:5px 0px;
}

hr {
	border-top: 1px solid #bbb;
	text-align: center;
}

.button {
	font-size:16px;
	width:300px;
	text-align: center;
	border-radius: 2px;
	margin: 20px auto;
	z-index: 2;
	background-color: rgba(255,255,255, 1);
	border: 2px solid rgba(255,190,255, 1);
	line-height: 50px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    -o-border-radius: 80px;
    -ms-border-radius: 80px;
    transiton:all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.button:hover {
	background-color:rgba(255,224,255, 1);
	border-color:  2px solid rgba(255,190,255, 1);
	color: #59b1eb;
	animation: inout 0.9s;
    animation-iteration-count: infinite;
    -webkit-animation: inout 0.9s; 
    -webkit-animation-iteration-count: infinite;
}