@charset "utf-8";

@import "mod_base.css";

/*-------------------------------------------------------------------
ページ
*/

.page {
	/*  */
	display: block;
	position: relative;
	left: 0px;
	top: 0px;
	height:100%;
}


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

#title {
	position: absolute;
	top: -195px;
	left: -220px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	text-align: center;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.lsize #title {
	width: 400px;
	height: 250px;
	top: 0px;
	left: 0px;
	padding: 20px;
}
.ssize #title {
	width: 280px;
	height: 175px;
	top: -140px;
	left: -150px;
	padding: 10px;
}

#title h1,
#title h2,
#title p {
	line-height: 90%;
	font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
	font-weight: normal;
}

#title h1 {
	font-size: 120px;
	color: #DF8416;
}
.ssize #title h1 {
	font-size: 85px;
}
	

#title h2 {
	font-size: 110px;
	color: #38BCB6;
}
.ssize #title h2 {
	font-size: 80px;
}


#title p {
	font-size: 39px;
	color: #991578;
}
.ssize #title p {
	font-size: 28px;
}


#title_nav div {
	position: absolute;
	top: 110px;
	padding: 20px;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 170px;
	cursor: pointer;
}
.ssize #title_nav div {
	top: 65px;
	padding: 10px;
	width: 125px;
}

#title_nav div:hover{
	-webkit-animation-iteration-count: 1;
	-webkit-animation-name: 'mnavov';
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes 'mnavov'{
	0%{background-color: rgba(255,255,255,0.2);}
	100%{background-color: rgba(0,0,0,0.6);}
}

#title_nav div#process {
	right: 10px;
	text-align: right;
}
.ssize #title_nav div#process {right: 5px;}

#title_nav div#new {left: 10px;}
.ssize #title_nav div#new {left: 5px;}

#title_nav div h3 {
	line-height: 90%;
	font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #99CC00;
	font-size: 28px;
}
.ssize #title_nav div h3 {font-size: 20px;}

#title_nav div img {
	position: absolute;
	top: 22px;
}
.ssize #title_nav div img {
	top: 10px;
}

#title_nav div#process img {left: 15px;}
.ssize #title_nav div#process img {left: 5px;}
#title_nav div#new img {right: 15px;}
.ssize #title_nav div#new img {right: 5px;}

/*-------------------------------------------------------------------
各ウィンドウ
*/

.win {
	position: relative;
}
.lsize .win {
	width: 900px;
	padding: 20px;
	text-align: left;
	min-height:96%;
}
.ssize .win {
	height: 280px;
	width: 250px;
	top: -168px;
	left: -135px;
	padding: 10px;
}


.win img.img {
	float: left;
	width: 270px;
	height: 400px;
	margin-right: 20px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.ssize .win img.img {
	display: none;
}


.win div.float {
	float: left;
	width: 350px;
}
.ssize .win div.float {
	float: none;
	width: auto;
}

.win h1 {
	font-size: 30px;
	font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #ff33cc;
	padding-bottom:5px;
}
.win h1.last {
	padding-bottom:5px;
}
.ssize .win h1 {
	font-size: 25px;
	line-height: 120%;
	margin: 0;
	padding: 0;
	text-align: center;
}
.win h2 {
	font-size: 18px;
	font-weight: normal;
	color:#fff;
}

.win p {
	line-height: 180%;
	margin: 0 0 15px 0;
	color:#404040;
}

.win p.kome {
	font-size: 10px;
	line-height: 120%;
}



/*-------------------------------------------------------------------
ナビ
*/

.ssize #nav {
	position: absolute;
	top: 50%;
	left: 50%;
}

#nav div {
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	-moz-border-radius: 38px;
	border-radius: 38px;
	padding: 20px;
	cursor: pointer;
	margin-top: -38px;
	display: none;
}
.lsize #nav div {
	top: 50%;
}
.ssize #nav div {
	top: -125px;
	background: none;
}

.lsize #nav div:hover{
	-webkit-animation-iteration-count: 1;
	-webkit-animation-name: 'navov';
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes 'navov'{
	0%{background-color: rgba(255,255,255,0.8);}
	100%{background-color: rgba(0,0,0,0.6);}
}

.lsize #prev {left: 10px;}
.ssize #prev {right: 70px;}

.lsize #next {right: 10px;}
.ssize #next {left: 70px;}


/*-------------------------------------------------------------------
続きウィンドウ
*/

.lsize #continue {
	width: 400px;
	height: 150px;
	top: -95px;
	left: -220px;
}
.ssize #continue {
}

.lsize #continue h1 {
	font-size: 56px;
	color: #C30;
}
.ssize #continue h1 {
	text-align: left;
	font-size: 45px;
}

.f_id {
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding: 8px;
	border: 0;
	background-color: #A48655;
	-moz-box-shadow:inset 2px 2px 5px rgba(0,0,0,0.6);
	-webkit-box-shadow:inset 2px 2px 5px rgba(0,0,0,0.6);
	box-shadow:inset 2px 2px 5px rgba(0,0,0,0.6);
	color: #FFF;
	margin: 0 10px 15px 0;
}

.f_submit {
	font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	width: 90px;
	border: 0;
	-webkit-background-clip: padding-box;
	-webkit-box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .2),
		inset 0 2px 0 rgba(255, 255, 255, .5),
		inset 0 0 1px 2px rgba(255, 255, 255, .3);
	
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #f5f5f5
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(transparent),
			to(rgba(0, 0, 0, .15))
		);
	color: #666;
	display: inline-block;
	font-size: 20px;
	line-height: 20px;
	padding: 6px 20px;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
	position: relative;
	top: 1px;
	text-align: center;
	margin: 0 0 15px 0;
}

.f_submit:active {
	position: relative;
	top: 2px;
}

.f_submit:hover {
	background:
		-webkit-gradient(
		    linear,
		    0 0,
		    0 100%,
    		from(#b6dbef),
    		to(#7daec9)
		);
	background:
		-moz-linear-gradient(
    		#b6dbef,
    		#7daec9
		);
}

.ssize .f_submit {
	padding: 4px 6px;
	font-size: 17px;
}


/*-------------------------------------------------------------------
コピーライト
*/

#copy {
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 10px;
}

#copy img {
	padding: 0 0 5px;
}