:root {
      --sp-width: 640px;
    }
    .slideshow-container {
      position: relative;
      width: 100vw;
      height: 640px;
		background-color: #000;
      overflow: hidden;
    }
    @media (max-width: 768px) {
      .slideshow-container {
        height: 560px;
      }
      .pc-only { display: none !important; }
      .sp-only { display: block !important; }
    }
    @media (min-width: 769px) {
      .pc-only { display: block !important; }
      .sp-only { display: none !important; }
    }
    .slideshow-container .slide {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .slide.active {
      display: flex;
      animation: fade 6s linear;
    }
    @keyframes fade {
      0% { opacity: 0; }
      20% { opacity: 1; }
      90% { opacity: 1; }
      100% { opacity: 0; }
    }
    .slideshow-container .slide a {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
    }
    .slideshow-container .slide img,
    .slideshow-container .slide video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }
    .slideshow-container .slide img.zoom, 
    .slideshow-container .slide video {
      display: block;
    }
    .slideshow-container .slide img.zoom {
      animation: zoomIn 7s linear forwards;
    }
    @keyframes zoomIn {
      from { transform: scale(1); }
      to { transform: scale(1.1); }
    }
    .caption {
  width: 100%;
      position: absolute;
      z-index: 3;
    }
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 2;
    }
    .progress-bar {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 1px;
      background: rgba(255,255,255,0.2);
      overflow: hidden;
      z-index: 4;
    }
    .progress-fill {
      width: 0;
      height: 100%;
      background: #FFF;
      animation: none;
    }
    @keyframes fill {
      from { width: 0%; }
      to { width: 100%; }
    }
    .loading-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
    .loading-bar {
      width: 200px;
      height: 1px;
      background: rgba(255, 255, 255, 0.2);
      position: relative;
      margin-top: 10px;
    }
    .loading-fill {
      width: 0;
      height: 100%;
      background: #FFF;
    }
    .loading-text {
      color: #fff;
    }


.caption-inner {
  width: 100%;
max-width:1000px;
	color: #FFF;
margin:0 auto;
}
    .caption h2 {
text-align:left;
padding-top:400px;
font-size:320%;
font-weight:bold;
}
    .caption p {
font-size:120%;
line-height:140%;
text-align:left;
margin-top:30px;
}


#mb_message {
 width:100%;
 max-width:1000px;
padding:64px 0;
margin:0 auto;
}
#mb_message h3 {
text-align:left;
font-size:200%;
line-height:150%;
font-weight:bold;
}
#mb_message p {
text-align:left;
font-size:120%;
line-height:160%;
padding-top:24px;
}



#mb_protewaza {
 width:100%;
 max-width:1000px;
padding:48px 0;
margin:80px auto 0;
	border-top: 2px solid #000;
}
#mb_protewaza h3 {
text-align:center;
font-size:200%;
line-height:150%;
font-weight:bold;
}
#mb_protewaza p {
text-align:center;
font-size:120%;
line-height:160%;
padding-top:24px;
}


/* SMARTPHONE ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {

.slideshow-container {
  height: 560px;
}

.caption-inner {
  width: 100%;
max-width:100%;
padding:8vw;
}
    .caption h2 {
padding-top:350px;
font-size:200%;
}
    .caption p {
font-size:85%;
line-height:140%;
margin-top:20px;
}


#mb_message {
  width: 100%;
max-width:100%;
padding:64px 8vw;
}
#mb_message h3 {
font-size:180%;
line-height:150%;
font-weight:bold;
}
#mb_message p {
font-size:98%;
line-height:160%;
padding-top:24px;
}
	
#mb_protewaza {
  width: 100%;
max-width:100%;
padding:64px 8vw;
margin:80px auto 0;
	border-top: 2px solid #000;
}
#mb_protewaza h3 {
text-align:left;
font-size:180%;
line-height:150%;
font-weight:bold;
}
#mb_protewaza p {
text-align:left;
font-size:98%;
line-height:160%;
padding-top:24px;
}

}