@charset"utf-8";


/*全ての要素のマージン・余白を０に初期化*/
*{
 margin:0 auto;
 padding:0 auto;
 box-sizing:border-box;
 }

body {
background:url(../image/haikei.jpg) repeat;
background-psition:-12px;
align:center;
font-family:Arial, Helvetica, sans-serif;
font-color: #000;
text-align:center;			/*IE6以下でセンタリングするための対策*/
}

a {
color:#0080ff;
text-decoration:none;
}

ul {
list-style:none;
}

/**********コンテンツ枠**********/

/* スマホ */
@media only screen and (max-width:599px) { 
div#box {
width:100%;
margin:0 auto;
padding:0 18px 6px 0;
border-radius:10px;
}

div#box img{
width:100%;
padding-right:21px;
}

div#box ul {
width:100%;
margin:0 auto;
}

div#box ul li{
width:100%;
height:100%;
clear:both;
font-size:22px;
padding-top:80px;
margin:0 10px 18px 0;
background:rgba(400,400,400,0.6);
}

div#box a{
width:80px;
font-size:22px;
color:#0080ff;
padding:4px 4px;
border:1px solid #0080ff;
border-radius:5px;
background:#fff;
display:inlineblock;
margin:20px 16px 0 0;
}

div#box a:hover {
color:#fff;
background:rgba(1,80,200,0.5);
padding:4px 4px;
border:1px solid #0080ff;
border-radius:5px;
overflow:hidden;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
}

/* PC */
@media only screen and (min-width:600px){
div#box {
width:760px;
margin:0 auto;
padding:6px 0 ;
}

div#box img{
margin:0 auto;
width:100%;
}

div#box ul {
width:740px;
}

div#box ul li {
padding:20px 0;
font-size:20px;
display:bkock;
}

div#box a{
font-size:20px;
color:#0080ff;
padding:4px 4px;
display:inlineblock;
border:1px solid #0080ff;
border-radius:5px;
background:#fff;
}

div#box a:hover {
color:#fff;
background:rgba(1,80,200,0.5);
padding:4px 4px;
border:1px solid #0080ff;
border-radius:5px;
overflow:hidden;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
}


/*********************** wrap ***********************/

/* スマホ */
@media only screen and (max-width:599px) { 
div#wrap {
margin:0 auto;
width:100%;
box-sizing:border-box;
webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
}

/* PC */
@media only screen and (min-width:600px){
div#wrap {
margin:0 auto;
width:800px;
}
}


/**********フォントサイズ指定**********/

span.small {
font-size:80%;
}

span.bigger {
line-height:30px;
font-size:150%;
margin:10px 10px;
}

/******ボタン*******/

/* スマホ */
@media only screen and (max-width:599px) { 
div#button {
position: fixed;
bottom: 80px;
right: 48px;
}

div#button a {
font-size:22px;
width: 80px;
height: 80px;
display: block;
background:rgba(400,400,400,0.8);
border:5px solid #fef;
border-radius:20px;
padding-top:10px;
text-decoration: none;
opacity: 0.7;
}

div#button a:hover {
opacity: 1;
}
}

/* PC */
@media only screen and (min-width:600px){
div#button {
position: fixed;
bottom: 200px;
right: 166px;
}

div#button a {
font-size:22px;
width: 80px;
height: 80px;
display: block;
background:rgba(400,400,400,0.8);
border:5px solid #fef;
border-radius:20px;
padding-top:10px;
text-decoration: none;
opacity: 0.7;
}

div#button a:hover {
opacity: 1;
}
}


/******CSS Slider*******/


/* 画像縮小スマホ */
@media only screen and (max-width:599px) { 
.slider{
width:100%;
height:140px;
margin:0 auto;
position:relative;
}

.slider ul{
margin:0;
padding:0;
list-style:none;
}

.slider ul li{
width:100%;
height:140px;
position:absolute;
top:0;
left:0;
animation-iteration-count:infinite;
animation-duration:24s;
}

.slider ul li img.change1 {
width:90%;
height:auto;
box-sizing:border-box;
webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
border-radius:5px;
}
}

/* 画像縮小PC */
@media only screen and (min-width:600px){
div.slider{
width:100%;
height:220px;
margin:0 auto;
position:relative;
}

div.slider ul{
margin:0;
padding:0;
list-style:none;
}

div.slider ul li{
width:800px;
height:220px;
position:absolute;
top:0;
left:0;
animation-iteration-count:infinite;
animation-duration:24s;
}

div.slider ul li img.change1 {
width:94%;
height:auto;
box-sizing:border-box;
webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
border-radius:5px;
}
}

div.slider ul li:nth-child(1){
animation-name:slider;
animation-delay:-3s;
}

div.slider ul li:nth-child(2){
animation-name:slider;
animation-delay:5s;
opacity:0;
}

div.slider ul li:nth-child(3){
animation-name:slider;
animation-delay:13s;
opacity:0;
}

@keyframes slider{
	0%{
		opacity:0;
	}
	20.83%{
		opacity:1;
	}
	33.33%{
		opacity:1;
	}
	45.83%{
		opacity:0;
	}
	100%{
		opacity:0;
	}	
}