@charset "utf-8";
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	color:#fff;
}
/* Loading画像中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}
/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #333;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}
/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}


/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 50px 20px;
}
.sort-btn li {
    background: #eee;
    border-radius: 10px;
    cursor: pointer;
    padding: 10px;
    margin: 5px 10px;
}
.sort-btn li.active {
    /*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
    background: #bbb;
}
.sort-btn div {
    line-height: 25px;
}
.sort-btn p {
    margin: auto 10px;
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
    .sort-btn {
        justify-content: space-between;
    }
    .sort-btn li {
        width: 43%;
        margin: 0 0 10px 0;
        text-align: center;
    }
}


/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
    position: relative;
    /*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
    display: block;
    position: absolute;
    width: 31%;
    /*横並びで3つ表示*/
    padding: 0 1vw 0.5vw;
    /*画像に余白をつける*/
    z-index: 1;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /*画像の下にできる余白を削除*/
}
.grid video {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /*画像の下にできる余白を削除*/
}
.fancybox-slide--video .fancybox-content {
    width: initial !important;
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
    .item {
        width: 47%;
        /*横並びで2つ表示*/
        padding: 0 5px 10px 5px;
    }
}


/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}
.fancybox-thumbs__list a:before {
    border: 6px solid #f3373a;
}


/*========= レイアウトのためのCSS ===============*/
html {
    background-color: #c8c8c8;
    color: #262626;
    font-family: 'Yomogi', cursive;
    overflow-y: scroll;
    overflow-x: hidden;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    color: #333;
}
a:hover,
a:active {
    text-decoration: none;
}
h1 {
    text-align: center;
    font-size: 6vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 30px 0;
}
p {
    margin: 10px 10px 10px 10px;
    word-wrap: break-word;
}
footer {
    background: #efefef;
    text-align: center;
    padding: 5em 0 0.5em 0;
}
.fancybox.iframe {
    width: 100%;
    height: 100%;
}

/*========= 作品の説明文用吹き出し ===============*/
.caption {
    display: none;
    max-width: 70%;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.5vw;
    border: 5px;
    border-style: double;
    border-color: #eee;
    border-radius: 5px;
    background: #222;
    color: #eee;
    font-size: 95%;
    pointer-events: none;
}
.upper .caption {
    left: 0;
    top: 0;
    right: inherit;
    bottom: inherit;
}
.link:hover+.caption {
    display: block;
}