@charset "UTF-8";

/*全ページ共通
-----------------------------------------*/
html {
height: 100%;
min-width: 720px;
position: relative;

background: #000;


background-image: url("../img/h2.jpg");
background-size:cover;
/*background-repeat: repeat-xy;/*background: #0CA3BC; 　全体の背景色 */
}

body {
font-size: 11px;
color: #666;
line-height: 1.2;
font-family: "Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
}

#wrapper {
width: 720px;
min-height: 100%;
position: relative;
margin: 0 auto;
}

#wrapper:before {
content: "";
display: block;
/*
background:#F9D5A0; /*#F66;*/  /* 文章内の背景色 */
background-image: url("../img/h1.jpg");
background-repeat: repeat-xy;/*background: #0CA3BC; 　全体の背景色 */



width: 720px;
position: absolute;
top: 210px;
bottom: 0;
left: 0;
}
a {
color: #00F;
}
a:hover {
color: #009;
}
hr, .clear {
border: none;
height: 0;
overflow: hidden;
clear: both;
}
header, footer, section, article, figure ,figcaption {
display: block;
}

/*ヘッダー
-----------------------------------------*/
body header {
width: 720px;
height: 200px;
}
/* ロゴ周り */
body header h1 {
color:#000;
}
body header h1 a {
text-decoration: none;

}
body header h1 a:hover {
color: #333;
}


#contents {
margin: 15px 0px 10px 30px;
width: 660px;
position: relative;

}

/* #contents：見出し
-----------------------------------------*/
#contents > section > h1 {
/*
background: url(../img/midashi1.png) no-repeat ;

color:#A5253A;
*/
color:#666;
font-size: 20px;
font-family: Arial,"Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-weight: bold;
position: relative;
/*
padding: 10px 0px 10px 35px;
*/
min-height: 19px;

}

/*フッター
-----------------------------------------*/
footer {
clear: both;
height: 100px;/* footer small + 上スペースの高さ */
}
*+html footer {
clear: none;
width: 940px;
}

footer small {
font-family: Arial,"Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
/*
background: url(../img/footer.jpg) no-repeat right top;
*/
display: block;
font-size: 14px;
color: #930;
line-height: 60px;
text-align: right;
padding-right: 65px;
height: 60px;
width: 700px;
position: absolute;
bottom: 0;
/*
right: 35px;
*/
z-index: 1000;
}

<style type="text/css">
 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 600px;
  height     : 200px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 60s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 10s }
.slide img:nth-of-type(3) { animation-delay: 20s }
.slide img:nth-of-type(4) { animation-delay: 30s }
.slide img:nth-of-type(5) { animation-delay: 40s }
.slide img:nth-of-type(6) { animation-delay: 50s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0; transform: scale(.1, .1)}
   8% { opacity: 0; transform: scale(1, 1)  }
  8% { opacity:1; transform: scale(1, 1)  }
  16% { opacity: 1; transform: scale(1, 1)  }
 100% { opacity: 0; transform: scale(1, 1)  }
}
/*
@keyframes slideAnime{
   0% { opacity: 0 }
   8% { opacity: 1 }
  16% { opacity: 1 }
  24% { opacity: 0 }
 100% { opacity: 0 }
}
*/
</style>
/*https://webparts.cman.jp/img/slideshow/*/


<style type="text/css">
.scroll {
}
.scroll span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime 15s linear infinite;
1
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
    5% { transform: translateX(-65%)}
  100% { transform: translateX(-65%)}

}
</style>


<style type="text/css">
.scroll2 {
}

.scroll2 span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime2 15s linear infinite;
}
@keyframes scrollAnime2{
  100% { transform: translateX(-55%)}
   7% { transform: translateX(-55%)}
   0% { transform: translateX(-100%)}

}
</style>

<style type="text/css">
.scroll3 {
}

.scroll3 span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime3 15s linear infinite;
}
@keyframes scrollAnime3{
    0% { transform: translateX(0%)}
   10% { transform: translateX(-45%)}
  100% { transform: translateX(-45%)}

}
</style>

/*https://webparts.cman.jp/string/scroll/*/
}