@charset "utf-8";


.movie-inner {
    position: relative; /* 子要素の絶対配置の基準にする */
    width: 100%; /* または任意の幅 */
    padding-bottom: 56.25%; /* 16:9 のアスペクト比を維持 (幅の56.25%) */
    height: 0;
    overflow: hidden; /* 子要素がはみ出さないように */
}

.movie-inner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を維持しつつ要素を埋める */
}

.movie-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 1; /* 初期状態は不透明 */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* フェードアウトのアニメーション */
    background-color: #000; /* 背景が透けて見えないように */
    display: flex; /* 画像とアイコンを中央に配置するために */
    justify-content: center;
    align-items: center;
    z-index: 2; /* ビデオの上に重ねる */
}

.movie-cover.is-hidden {
    opacity: 0; /* フェードアウト後の透明状態 */
    visibility: hidden; /* フェードアウト後にイベントを受け付けなくする */
    pointer-events: none; /* クリックイベントを無効化 */
}

.movie-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をカバー全体に表示 */
    display: block; /* 余白をなくす */
}

.play-icon {
    position: absolute;
    font-size: 0px;
    color: white;
    background-color: rgba(0, 0, 0, 1.0);
    border-radius: 50%;
    width: 0px;
    height: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* クリックイベントを透過させる */
}

/*スマホ*/
@media screen and (max-width:750px){
 h2  {font-size:1.2rem;}
.moview {width:100%;height:auto;margin:0px auto 0px auto;padding: 20% 0% 15% 0.4%;text-align:center;background:#f3f4f4}
.moview2 {width:86%;height:auto;margin:3% auto 5% auto;padding: 3% 4% 7% 4%;text-align:center;z-index:0;color: #fff;background:linear-gradient(90deg,#898989, #b5b5b6)}
.info1 {margin:10px auto 0px;color:#000;padding:1% 0 0px 0;font-size: clamp(1.0rem, 1.4vw, 1.4rem);line-height:160% ;font-weight: 400;text-align:center;}
.info2-wrapper {text-align: center; margin: 10px auto 0px; }
.info2 {display: inline-block; position: relative; color: #000;padding: 2% 0 0px 0;font-size: clamp(1.2rem, 1.4vw, 1.4rem);font-weight: 400;}
.info2::after {content: '';position: absolute;bottom: -10px;left: 50%; transform: translateX(-50%); width: 160%; /* ★文字の幅（.info2の幅）の120% */border-bottom: 1px solid #000;}
.info3 {margin:10px auto 0px;color:#000;padding:2% 0 4% 0;font-size: clamp(1.8rem, 2.8vw, 3.6rem);line-height:100% ;font-weight: 400;text-align:center;letter-spacing:2px;}
.info4 {margin:10px auto 0px;color:#fff;padding:0% 0 4% 0;font-size: clamp(1.0rem, 1.3vw, 1.3rem);font-weight: 400;text-align:center;;line-height:160%}
}


/*PC*/
@media screen and (min-width:751px){

 h2  {font-size:1.8rem;}
.moview {width:80%;height:auto;margin:0px auto 0px auto;padding: 100px 10% 70px 10%;text-align:center;background:#f3f4f4}
.moview2 {max-width:1100px;width:94%;height:auto;margin:0px auto 5% auto;padding: 3% 3% 3% 3%;text-align:center;z-index:0;color: #fff;background:linear-gradient(90deg,#898989, #b5b5b6)}
.info1 {margin:10px auto 0px;color:#000;padding:2% 0 0px 0;font-size: clamp(1.0rem, 1.4vw, 1.4rem);line-height:160% ;font-weight: 400;text-align:center;}
.info2-wrapper {text-align: center; margin: 10px auto 0px; }
.info2 {display: inline-block; position: relative; color: #000;padding: 2% 0 0px 0;font-size: clamp(1.2rem, 1.4vw, 1.4rem);font-weight: 400;}
.info2::after {content: '';position: absolute;bottom: -10px;left: 50%; transform: translateX(-50%); width: 160%; /* ★文字の幅（.info2の幅）の120% */border-bottom: 1px solid #000;}
.info3 {margin:10px auto 0px;color:#000;padding:0.5% 0 3.0% 0;font-size: clamp(1.8rem, 2.8vw, 3.6rem);line-height:100% ;font-weight: 400;text-align:center;letter-spacing:2px;}
.info4 {margin:10px auto 0px;color:#fff;padding:0% 0 2.5% 0;font-size: clamp(1.0rem, 1.3vw, 1.3rem);font-weight: 400;text-align:center;;line-height:160%}
}