@charset "UTF-8";
/*////////////////////////
locale-sagamiono.jp
home.css
///////////////////////*/


/* ローディング画面 */
#loading {
  position: fixed;
  inset: 0;
  background: #231815;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity .7s ease;
}

#loading .logo{
    width: 40%;
    margin: auto;
}

#loading.fadeout {
  opacity: 0;
  pointer-events: none;
}

@media screen and (min-width: 768px){
#loading .logo{
    width: 20%;
}
}

/* メイン */
#content.hidden {
  opacity: 0;
}

#content.show {
  opacity: 1;
  transition: opacity 1s ease;
}

/* オープンテキスト */
.swiper{
    position: relative;
}

.swiper .open_txt{
    position: absolute;
    right: 1rem;
    top: 15%;
    z-index: 5;
}

.swiper .open_txt h2{
    color: #F6F8F5;
    font-size: 7rem;
    line-height: 4rem;
    text-align: right;
    text-shadow: 1px 1px 2px #000;
}

.swiper .open_txt h2 span.jp1{
    display: block;
    margin-top: 2.5rem;
    font-size: 3rem;
}

.swiper .open_txt h2 span.jp2{
    display: block;
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
}


 /* スライダーの画像 */
.swiper-slide img {
    margin-top: 80px;
    width: 100%;
    height: 90vh;
    object-fit: cover;
    transition: transform 2.5s ease, opacity 2.5s ease; /* スムーズな遷移 */
    opacity: 0;
    transform: scale(1); /* 最初は画像を通常サイズで表示 */
    filter: brightness(0.8);
}

/* スライド中の画像 */
.swiper-slide-active img {
  opacity: 1; /* 表示中の画像を表示 */
  transform: scale(1.05); /* 少し拡大 */
}

/* 前のスライドが非表示になる時の設定 */
.swiper-slide-prev img {
  opacity: 0; /* 前のスライドは透明に */
  transform: scale(1); /* 元のサイズに戻す */
}


/* 進行ゲージ */
.custom-progress {
    position: absolute;
    bottom: 8rem;
    left: 3rem;
    height: 150px; /* 高さを100pxに設定 */
    width: 4px; /* 幅を調整 */
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.custom-progress-bar {
    height: 100%;
    width: 100%;
    background: #C9171E;
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform 0s linear;
}

/* カウンター */
.swiper-counter {
    position: absolute;
    bottom: 5rem;
    left: 1.6rem;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}


@media only screen and (max-width: 375px) {

.swiper .open_txt {
    top: 20%;
}
}

@media screen and (min-width: 768px){

.swiper .open_txt{
    right: inherit;
    left: 3rem;
    top: inherit;
    bottom: 6rem;
}

.swiper .open_txt h2 {
    letter-spacing: 3px;
    font-size: 10rem;
    line-height: 5.5rem;
    left: 10px;
    text-align: left;
}

.swiper .open_txt h2 span.jp1 {
    margin: 3rem 0 0 1rem;
    margin-top: 3.5rem;
    font-size: 4rem;
}

.swiper .open_txt h2 span.jp2 {
    display: block;
    font-size: 1.8rem;
    margin: 0 0 1rem 1rem;
}

.custom-progress{
    right: 3rem;
    left: inherit;
    top: 45%;
    bottom: inherit;
}

.swiper-counter{
    right: 1.6rem;
    left: inherit;
    top: 65%;
    bottom: inherit;
}

}


/*////////////////////////
リード文
///////////////////////*/
#read{
    padding: 6rem 3rem;
    line-height: 2.2;
}
#read .read_txt{
    text-align: center;
}


@media screen and (min-width: 768px){

#read {
    padding: 8rem 0 10rem;
}

#read .read_txt {
    font-size: 1.4rem;
    line-height: 2.2;
}
}