@import url(./base.css);
@import url(https://fonts.googleapis.com/css?family=Marcellus);


/*-- 文字・背景色 --*/
body {
	background-color : #000000 ;
	color : #ffffff ;
}


/*-- アンカー --*/
a:link {
	color : #ffffff ;
	text-decoration : underline ;
}

a:visited {
	color : #ffffff ;
	text-decoration : underline ;
}

a:active {
	color : #ff0000 ;
	text-decoration : underline ;
}

a:hover {
	color : #ffff80 ;
	text-decoration : underline ;
}


/*-- ページ構成 --*/
div#header {
	width : 100vw ;
	height : 50px ;
	background-color : rgba(255,255,255,0.5) ;
	position : fixed ;
	z-index : 99 ;
}

div#contents {
}

div#footer {
}


/*-- ヘッダー設定 --*/
div#header header {
	padding : 0 10px ;
	height : 50px ;
	display : block ;
}

div#header header a {
	font-family: 'Marcellus', serif ;
	font-weight: bold ;
	font-size : 32px ;
	line-height : 50px ;
	text-decoration : none ;
}

@media screen and (max-width: 1024px) {
	div#header h1 a {
		font-family: 'Marcellus', serif;
		font-size : 24px ;
		line-height : 50px ;
		text-decoration : none ;
	}
}

div#header ul.menu {
	margin-top : -50px ;
	padding-right : 120px ;
	text-align : right ;
}

div#header ul.menu li {
	padding : 0 10px ;
	display : inline ;
}

div#header ul.menu li a {
	font-family: 'Marcellus', serif;
	font-size : 18px ;
	line-height : 50px ;
	text-decoration : none ;
}

@media screen and (max-width: 1024px) {
	div#header ul.menu li a {
		font-size : 16px ;
		line-height : 50px ;
	}
}

div#header ul.menu li a:hover {
	text-decoration : underline ;
}

div#header ul.icon {
	margin-top : -50px ;
	padding-right : 20px ;
}

div#header ul.icon li {
	padding : 10px ;
	float : right ;
}

div#header ul.icon li img {
	display : block ;
}



/*-- コンテンツ設定 --*/
div#contents div h2 {
	margin-bottom : 40px ;
}

div#contents div h2 strong {
	font-family: 'Marcellus', serif;
	font-size : 48px ;
	line-height : 60px ;
	text-align : center ;
	display : block ;
}

div#contents div h2 span {
	font-size : 16px ;
	line-height : 24px ;
	text-align : center ;
	display : block ;
}



/* ページ上部に戻るボタン */
div#contents div.pagetop {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 20px;
}

div#contents div.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 20px;
	line-height : 30px ;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

div#contents div.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 20px;
	line-height : 30px ;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}


/*-- リンクボタン --*/
div#contents div p.link {
	text-align : center ;
}

div#contents div p.link a {
	display: inline-block;
	width: 300px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	outline: none;
	position: relative;
	z-index: 2;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
}

div#contents div p.link a:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
}

div#contents div p.link a::before,
div#contents div p.link a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #333;
}

div#contents div p.link a::before {
	right: 0;
}

div#contents div p.link a::after {
	left: 0;
}

div#contents div p.link a:hover::before,
div#contents div p.link a:hover::after {
	width: 0;
	background-color: #59b1eb;
}

div#contents div p.link a,
div#contents div p.link a::before,
div#contents div p.link a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/*-- 年齢認証モーダルウインドウ --*/
div#contents div.modal {
	position : fixed ;
	display : none ;
	z-index : 9999 ;
	top : 40% ;
	left : 50% ;
	width : 400px ;
	height : 200px ;
	margin : -120px 0 0 -220px ;
	border : solid 1px #ffffff ;
	padding : 20px ; text-align : center ;
}

div#contents div.modal h2 {
	font-size : 16px ;
	line-height : 21px ;
	margin-bottom:10px;
}

div#contents div.modal p {
	margin-bottom:10px;
}

div#contents div.modal ul {
	height : 96px ;
	background:url(../images/modal_check.png) center center no-repeat ;
}

div#contents div.modal ul li.enter {
	float : left ;
}

div#contents div.modal ul li.leave {
	float : right ;
}

div#contents div.modal ul li a {
	padding : 12px 0 ;
	width : 135px ;
	height : 72px ;
	cursor : pointer ;
	text-decoration : none ;
	display : block ;
}

div#contents div.modal ul li a:hover {
	background-color : rgba(255,255,255,0.25) ;
}

div#contents div.modal ul li a strong {
	font-family: 'Marcellus', serif;
	font-size : 32px ;
	line-height : 48px ;
	text-align : center ;
	display : block ;
}

div#contents div.modal ul li a span {
	font-size : 16px ;
	line-height : 24px ;
	text-align : center ;
	display : block ;
}


/*-- 印刷時非表示設定 --*/

@media print {
	div#header {
		display : none ;
	}		
}