@charset "utf-8";

/* ==== CSSスライドショー（ベースはそのまま、PCのみサイズUP） ==== */

/*１枚目*/
@keyframes slide1 {
  0% {opacity: 0;}
  10% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
  0% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0;}
  100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
  0% {opacity: 0;}
  50% {opacity: 0;}
  60% {opacity: 1;}
  85% {opacity: 1;}
  95% {opacity: 0;}
  100% {opacity: 0;}
}

/* mainimg（ベース：従来どおり） */
#mainimg {
  float: right;           /*右に回り込み*/
  width: 65%;             /*★スマホ等のベースは従来のまま*/
  position: relative;
  top: 80px;              /*上からの配置*/
  right: 0px;             /*右からの配置*/
  overflow: hidden;       /*はみ出し防止（安全のため追加）*/
  box-shadow: -80px 80px rgba(0,0,0,0.2), 80px -80px rgba(255,255,255,0.1);
}

/* スライド画像（従来どおり・ズームなし） */
.slide1,.slide2,.slide3 {
  animation-duration: 12s;             /*アニメーション時間*/
  animation-iteration-count: infinite;
  position: absolute; left:0px; top:0px; width: 100%; height: auto;
  animation-fill-mode: both;
  animation-delay: 1s;
}
.slide0 {
  position: relative; width: 100%; height: auto;
  box-shadow: 0px 0px 50px rgba(0,0,0,0.7);
}
.slide1 { animation-name: slide1; }
.slide2 { animation-name: slide2; }
.slide3 { animation-name: slide3; }

/* === PCのみサイズUP（スマホは無変更） === */
@media (min-width: 801px){
  #mainimg{
    width: 70%;  /* ←PCだけ広げる：左30%＋右70%＝ちょうど100% */
  }
}

/* === 純粋なスマホ幅だけ、もう少し広げる例 === */
@media (max-width: 480px){
  #mainimg{
    width: 100%;        /* きっちり全幅に */
    top: 20px;          /* 余白微調整 */
  }
}

/* === SP/タブレットだけ #mainimg を広げる（PCはそのまま） === */
@media (max-width: 800px){
  #mainimg{
    width: 65%;         /* ← 65% → 92% に拡大（お好みで 85〜100%） */
    float: none;        /* 左の縦メニューと縦積みに */
    margin: 0 auto;     /* 中央寄せ */
    overflow: hidden;   /* はみ出し防止（保険） */
  }
}