/*----------------------------------------
	このCSSファイルにはHOME（index.html）に使用されるCSSを記載する
----------------------------------------*/

/* .wrapper {
    height: 100dvh;
} */

.main {
    margin-bottom: 0px;

    flex: none; /* これ、common.cssにflex1書いてるけど、実際ひつようなのか。 */
}

.kv-wrap{
    position: relative;
    width: 100vw;
    height: calc(100dvh - 108px); /* 100dvh - (ヘッダー＋フッターの高さ) */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* .kv-wrap img */
.kv-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.more {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 90px;
    height: auto;
}

.more svg {
    transition: opacity 0.3s ease;
}

.more svg path {
    stroke-width: 2px;
    stroke-linecap: round;
}

.label {
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fefdfc;
    transition: opacity 0.3s ease;
}

/*========= PC用：hover =========*/
@media (hover: hover) and (pointer: fine) {
    .more:hover svg,
    .more:hover .label {
        opacity: 0.7;
    }
}
/*========= スマホ用：タップ中だけ =========*/
.more:active svg,
.more:active .label {
    opacity: 0.7;
}
/*========= ここまで =========*/


/* ▼ スマホ（大） / 小型タブレット向け (540px以上） */
@media (min-width: 540px) {
    .kv-wrap {
        height: calc(100dvh - 118px); /* 100dvh - (ヘッダー＋フッターの高さ) */
    }
}

/* ▼ タブレット / 小型ノートPC向け （768px以上） */
@media (min-width: 768px) {
    .kv-wrap {
        height: calc(100dvh - 128px); /* 100dvh - (ヘッダー＋フッターの高さ) */
    }
}

/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .kv-wrap {
        height: calc(100dvh - 138px); /* 100dvh - (ヘッダー＋フッターの高さ) */
    }
}




/* いったんOK（2025.11.10。16:58） */