@charset "utf-8";

*１枚目 */
/* 1枚目 */
@keyframes slide0 {
  0% {opacity: 1;}
  20% {opacity: 1;}
  25% {opacity: 0;}
  100% {opacity: 0;}
}

/* 2枚目 */
@keyframes slide1 {
  0% {opacity: 0;}
  25% {opacity: 0;}
  30% {opacity: 1;}
  50% {opacity: 1;}
  55% {opacity: 0;}
  100% {opacity: 0;}
}

/* 3枚目 */
@keyframes slide2 {
  0% {opacity: 0;}
  50% {opacity: 0;}
  55% {opacity: 1;}
  75% {opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}

/* 4枚目 */
@keyframes slide3 {
  0% {opacity: 0;}
  75% {opacity: 0;}
  80% {opacity: 1;}
  95% {opacity: 1;}
  100% {opacity: 0;}
}

  /*telop pc sumaho共通*/
  /* 外枠（窓） */
.news_ticker2{
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #0a4fa3;
    background: linear-gradient(90deg, #0a4fa3, #0f6fb8);
    color: #fff;
    position: relative;
}

/* フェードイン・アウト（左右の端をぼかす） */
.news_ticker2::before,
.news_ticker2::after{
    content:"";
    position:absolute;
    top:0;
    width:80px;
    height:100%;
    z-index:2;
}
.news_ticker2::before{
    left:0;
    background:linear-gradient(to right, #0a4fa3 0%, transparent 100%);
}
.news_ticker2::after{
    right:0;
    background:linear-gradient(to left, #0a4fa3 0%, transparent 100%);
}
 /* アニメーション */
@keyframes hscroll2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* マウスを乗せたら停止 */
.news_ticker2:hover ul{
    animation-play-state: paused;
}
/* 先頭にアイコンを付ける */
.news_ticker2 li::before{
    content: "▶ ";
    color: #ffeb3b;
    font-weight: bold;
} 
 footer{
   width: 100%;
   background: #111;
   color: #ccc;
   text-align: center;
   padding: 10px 0;
}
  footer p{
    margin: 0;
    padding: 0;
  }
/*==========================*/
@media (min-width: 768px){
  #content{
    width: 1000px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background-color:#dcdcdc;
    font-family:"Hiragino Kaku Gothic Pro",sans-serif;
    border: solid 2px #000080;
}

  /*telop　ｐｃ*/
  /* 外枠（窓） */

/* 流れる帯 */
.news_ticker2 ul{
    display: inline-block;
    margin: 0;
    padding: 0;
    animation: hscroll2 50s linear infinite;
}

/* 各項目 */
.news_ticker2 li{
    display: inline-block;
    padding: 0 60px; /* ← 帯の幅を広げる（文字間の余白） */
    font-size: 16px;
}
  
    /* スライドショーを大きくする */
  .mainimgbox{
    width:100%;
    height:600px;     /* ← ここを大きくすれば迫力UP */
    position:relative;
    overflow:hidden;
  }

  /* スライド画像 */
  .mainimgbox img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transition:opacity 1s;
  }
 

  /* 最初の画像だけ表示 */
  .slide0{
    opacity:1 !important;
  }
  /* アニメーション */
  .slide1, .slide2, .slide3{
    animation-duration:12s;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    animation-delay:3s;
  }

  .slide1{ animation-name:slide1; }
  .slide2{ animation-name:slide2; }
  .slide3{ animation-name:slide3; }
  

}
@media (max-width: 767px){
   #content{
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background-color:#dcdcdc;
    font-family:"Hiragino Kaku Gothic Pro",sans-serif;
    border: solid 2px #000080;
  }
  
/* telpo sumaho */
  .news_ticker2 ul{
    display: inline-block;
    margin: 0;
    padding: 0;
    animation: hscroll2 80s linear infinite;
}
 
  .news_ticker2 li{
    display: inline-block;
    padding: 0 40px;
    font-size: 14px;
  }
  
 /* スライドショーを大きくする */
  .mainimgbox{
    width:100%;
    height:250px;     /* ← ここを大きくすれば迫力UP */
    position:relative;
    overflow:hidden;
  }

  /* スライド画像 */
  .mainimgbox img{
    position:absolute;
    width:100%;
    height: auto;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transition:opacity 1s;
  }

  /* 最初の画像だけ表示 */
  .slide0{
    opacity:1 !important;
  }
  /* アニメーション */
  .slide1, .slide2, .slide3{
    animation-duration:12s;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    animation-delay:3s;
  }

  .slide1{ animation-name:slide1; }
  .slide2{ animation-name:slide2; }
  .slide3{ animation-name:slide3; }

}