@charset "UTF-8";
/* 30th//TOPスライドショー（静止画用） */
.bg-fixed {
    position: relative !important;
}
#hero {
    position: relative;
    width: 100%;
    height: 528px; /* サイトのデザインに合わせて調整してください */
    overflow: hidden;
}
@media screen and (min-width: 1400px) {
	#hero {
        height: 800px; /* サイトのデザインに合わせて調整してください */
    }
}
@media screen and (max-width: 900px) {
	#hero {
        height: 60vw; /* 画面横幅に対して60%の高さにする設定（おすすめ） */
        /*height: 380px;*/
        min-height: 250px; 
    }
    .slider li img {
        /* 画像を中央に配置し、見切れ方を調整 */
        object-fit: cover;
        object-position: center;
    }
}
/* スマホ向けの調整 */
@media screen and (max-width: 480px) {
    #hero {
        height: 30vw; /* 画面横幅に対して60%の高さにする設定（おすすめ） */
        min-height: 150px; 
    }
}
/* 画像リストのスタイル */
.slider {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.slider li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 最初は透明 */
    transition: opacity 1.5s ease-in-out; /* 切り替わりを滑らかに */
    z-index: 1; 
}
/* 表示中の画像（activeクラス）を最前面に持ってくる */
.slider li.active {
    opacity: 1;
    z-index: 10; /* 他の画像より大きな数字を指定 */
}
/* リンクを画像と同じ大きさに広げる */
.slider li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer; /* 強制的に指マークにする */
}
/* ホバー時に少し透明にするなどの演出（任意） */
.slider li a:hover {
    opacity: 0.9;
}
/* 画像の表示調整 */
.slider li img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 領域に合わせて画像をクロップ */
}
/* 表示中（アクティブ）の画像 */
.slider li.active {
    opacity: 1; /* 不透明にして表示 */
}


@-webkit-keyframes $animation-name { 0% { opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@-moz-keyframes $animation-name { 0% { opacity: 0;
    transform: translateX(100%); }
  100% { opacity: 1;
    transform: translateX(0); } }

@keyframes $animation-name { 0% { opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% { opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.copyText { text-align: center; color: #000000; }

@media screen and (max-width: 640px) { .copyText { text-align: left; } }

.subHead { text-align: center; color: #000096; font-size: 28px; margin-top: 60px; line-height: 140%; }

.subHead br { display: none; }

@media screen and (max-width: 640px) { .subHead br { display: block; } }

@media screen and (max-width: 768px) { .subHead { font-size: 22px; } }

@media screen and (max-width: 640px) { .subHead { font-size: 18px; } }

.list_point { font-size: 18px; padding-top: 50px; }
@media screen and (max-width: 768px) { .list_point { padding-top: 30px; } }
@media screen and (max-width: 640px) { .list_point { padding-top: 0; font-size: 14px; } }

@media screen and (max-width: 640px){
	.video { width: 100%; height: 54.6vw; background: url(poster.jpg) no-repeat; background-size: 100%;
	}
}
@media screen and (max-width: 640px){
	video { width: 100%; display: block;
	}
}