@charset "UTF-8";

/*
	カスタマイズ用クラス

	自由にCSSを設定してください。
	
	※このCSSで定義したクラスは、CMS管理画面でのページ編集においても利用できます。
	※編集後はブラウザリロードしてください。
*/

#ani_01 {

width:100%;
height:100%;
margin-top:10px; left:10%;
animation: ani01 5s;
}

@keyframes ani01 {
0% {
opacity:0.0;
}
  30%{
opacity:0.5;
}
 100% {
opacity:1.0;
}
}

.gatefold {
    width: 100%;
    height: 100%;
}

/* 左の画像 */
.gatefold::before {
    left: 0;
    clip: rect(0px 50vw 100vh 0px);
}

/* 右の画像 */
.gatefold::after {
    right: 0;
    clip: rect(0px 100vw 100vh 50vw);
}

/* 共通 */
.gatefold::before,
.gatefold::after {
    content: '';
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url(./images/10A.jpg) top center no-repeat;
    background-size: cover;
    -webkit-transition: all 1s;
    transition: all 1s;
    z-index: 1;
}