/*
画像をいっぱいに表示するためのスタイルシート
横長のwindowのときはlandscapeクラスのスタイルを適用する。
縦長のwindowのときはportraitクラスのスタイルを適用する。
landscape,portraitクラスは、fullscreen_image_updater.jsで追加する。

Reveal.initialize(でwidth,heightを100%にする。

Reveal.initialize({
    width: '100%',
    height: '100%',

参考 https://github.com/hakimel/reveal.js/issues/2127

*/


/* スライドショーを非表示する。 (ページの読み込みが完了したときに解除する)*/
.start_hide {
    background-color: rgba(255, 255, 255, 0) !important;
    opacity: 0;
}

.reveal p {
    display: block;
    margin: .5em;
    height: auto;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6,
.reveal li {
    height: auto;
}


.reveal .slides {
    width: 100%;
    height: 100%;
    top: 0;
    /* margin-top: 0; */
}


.reveal .slides>section {
    padding: 0;
}

.reveal section img {
    border: none;
    margin: 0;
}


/* 横長のときにうまく表示されるスタイル landscapeクラス */

.reveal section.landscape {
    height: inherit;
}


.reveal img.landscape,
.reveal video.landscape,
.reveal iframe.landscape {
    max-height: 100%;
    height: 100%;
    max-width: 100%;
}


/* 縦長のときにうまく表示されるスタイル portraitクラス */

.reveal section.portrait {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.reveal img.portrait,
.reveal video.portrait,
.reveal iframe.portrait {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}

/* overview表示のとき 横長*/

.reveal.overview section.landscape {
    height: inherit;
}

.reveal.overview img.landscape,
.reveal.overview video.landscape,
.reveal.overview iframe.landscape {
    max-height: 100%;
    height: 100%;
    max-width: 100%;
}

/* overview表示のとき 縦長*/

.reveal.overview section.portrait {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.reveal.overview img.portrait,
.reveal.overview video.portrait,
.reveal.overview iframe.portrait {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}



/*  */

.reveal figure img {
    box-shadow: none;
    max-width: 100%;
    object-fit: contain;
}

.reveal figcaption {
    position: absolute;
    margin: auto;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 1em;
    height: auto;
    display: block;
    background-color: white;
    color: black;
    font-size: small;
    opacity: 0;
}

.reveal figcaption:hover {
    opacity: .9;
}