@charset "utf-8";
/**********************************/
/*フォント  					   */
/**********************************/

/* font-family */
#title h2,
#contents .bold,
#contents .bold2
{
    font-family: 'BIZ UDMincho','BIZ UD明朝','Hiragino Mincho ProN','ヒラギノ明朝 ProN', 'Open Sans', sans-serif;
    font-weight: lighter;
    color: #fff;
    animation-delay: 0.3s;
}

#title h3,
#title h4,
#title .bns,
#contents .btn3,
.bnl{
    font-family: 'BIZ UDGothic','BIZ UDゴシック','Hiragino Sans','ヒラギノ角ゴシック', 'Open Sans', sans-serif;
    font-weight: lighter;
    color: #fff;
    letter-spacing: 0.1em;
}

/**********************************/
/*バナー          			      */
/**********************************/

/*バナー大*/

/*バナー大の配置（中央寄せ div指定　ゆとりあり）*/
.bnl-c{
	margin: 1em auto;
}

.bnl{
    text-align:center;
    width:10em;/*タイトル幅*/
    border-radius: 5px; /* ボックスの四つ角を丸くする */
    border: 2px solid#ff6600;
    color:#fff;
    padding:0.5em;
    margin:1em;
    font-size: 1.2em;
    display:inline-block;
    text-decoration: none;
    outline: none;
}


/**********************************/
/*タイトル         			      */
/**********************************/

#title{
    text-align:center;
    position: relative;
}

#title h2{
    border-top: 1px solid #999;
    width:80%;
    margin:4em auto 0 auto;
    padding:2em 0 0 0;
    text-align:center;
}
@media only screen and (max-width: 500px) {
    #title h2{
        font-size:1.3rem;
        margin:4em auto 1rem auto;
    }
}

#title h3{
    width:100%;
    margin:0 1em;
    text-align:center;
    font-size: 0.9em;
}

#title h4{
    width:100%;
    text-align:right;
    padding:0 1em 0 0;
    font-size: 0.8em;
}

/*バナー小*/

/*バナー小の配置（中央寄せ div指定り）*/
#title .bns-c{
	margin: 0.5em auto;
    text-align:center;  /* 中央寄せ */
}

#title .bns{
    text-align:center;
    width:6em;/*タイトル幅*/
    border-radius: 5px; /* ボックスの四つ角を丸くする */
    background:#70cc11;
    color:#fff;
    padding:0.1em;
    margin:0.5em;
    font-size: 0.7em;
    display:inline-block;
    text-decoration: none;
    outline: none;
}

/**********************************/
/*段組み          			      */
/**********************************/
#contents{
	columns: 2;/*段組みの数*/
	padding:30px 0px 10px 0px;/*コンテンツに余白をつける*/
	position:relative;/*タイトルの親要素として*/
	max-width:1000px;
	margin: 1em auto;  /* ボックス中央寄せ */
}

    /*枠*/
    #contents .con{
		margin-bottom: 0px;
        margin-left: 20px;
    }

    @media only screen and (max-width: 500px) {
        #contents .con{
            margin:1rem;
        }
    }

	/*コンテンツ内イメージ*/
	#contents img{
		width:100%;
		height:auto;
	}

	/*コンテンツ内　サイズ変更*/
    #contents .bold{
        font-size: 1.5em;
    }
	/*コンテンツ内　文字色変更*/
    #contents .bold2{
        color:#ff6600;
        font-size: 1.5em;
    }

    #contents table{
        border-collapse:collapse;
        margin:0 auto;
    }

    #contents td,th{
        border-bottom:1px solid #666;
        padding:10px;
    }

    #contents span{
        font-size: 0.9em;
    }

/**********************************/
/*ボタン          			      */
/**********************************/

    /*詳細を見るボタン（枠）*/
    #contents .btn-con{
        text-align:center;
    }

    /*詳細を見るボタン*/
    #contents .btn3{
		position:relative;
        display:inline-block;
        overflow:hidden;
        text-align:center;
		width:10em;/*タイトル幅*/
		border-radius: 5px; /* ボックスの四つ角を丸くする */
		background:#ff6600;
		color:#fff;
		padding:0 1em;
		margin:2em auto;
		font-size: 0.9em;
	}

    /*キラッと光る（来場予約ボタン）*/
    #contents .btn3::before {
        content: '';
        /*絶対配置でキラッと光るの位置を決める*/
        position: absolute;
        top: 0;
        left: -75%;
        /*キラッと光る形状*/
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
        transform: skewX(-25deg);
    }

    /*hover（来場予約ボタン）*/
    #contents .btn3:hover {
		background:#ff6600;
    }

    /*hoverした際の移動のアニメーション（来場予約ボタン）*/
    #contents .btn3:hover::before {
        animation: shine 0.7s;
    }

@keyframes shine {
	100% {
		left: 125%;
	}
}

	@media only screen and (max-width: 600px) {
		#contents{
		columns: 1;
		}
	}