﻿/*-----------------------------------------------
 * 鹿嶋市駅伝管理システム入力用
 *----------------------------------------------*/
section#entry {
	width:100%;
	max-width:960px;
	margin:0px auto;
}

/**
 * プログレスバー
 */
ul#pcBread {
	width:95%;
	margin:10px auto;
	list-style: none;
	overflow: hidden;
}
ul#pcBread li {
	float: left;
	line-height: 60px;
}
ul#pcBread li {
	display: block;
	float: left;
	padding: 0 30px 0 40px;
	font-weight:bold;
	color: #666666;
	text-decoration: none;
	/* CSS3 */
	background: -moz-linear-gradient(left, #EDEDED, #CCCCCC);
	background: -webkit-linear-gradient(left, #EDEDED, #CCCCCC);
	background: -ms-linear-gradient(left, #EDEDED, #CCCCCC);
	background: linear-gradient(left, #EDEDED, #CCCCCC);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEDED', endColorstr='#CCCCCC',GradientType=1 );
	background-color:#CCCCCC;
	text-shadow: 1px 1px 0 #FFFFFF;
}
ul#pcBread li::before {
	display: block;
	width: 15px;
	height: 30px;
	border-right: 5px solid #FFFFFF;
	margin:0 -40px -30px auto;
	background-color: #CCCCCC;
	/* CSS3 */
	content: " ";
	-webkit-transform: skew(30deg);
	-moz-transform: skew(30deg);
	transform: skew(30deg);
}
ul#pcBread li::after {
	display: block;
	width: 15px;
	height: 30px;
	border-right: 5px solid #FFFFFF;
	margin:-30px -40px 0 auto;
	background-color: #CCCCCC;
	/* CSS3 */
	content: " ";
	-webkit-transform: skew(-30deg);
	-moz-transform: skew(-30deg);
	transform: skew(-30deg);
}
ul#pcBread li.current {
	color: #FFFFFF;
	/* CSS3 */
	background: -moz-linear-gradient(left, #E69A4F, #BA4A0A);
	background: -webkit-linear-gradient(left, #E69A4F, #BA4A0A);
	background: -ms-linear-gradient(left, #E69A4F, #BA4A0A);
	background: linear-gradient(left, #E69A4F, #BA4A0A);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E69A4F', endColorstr='#BA4A0A',GradientType=1 );
	background-color:#BA4A0A;
	text-shadow: 1px 1px 0 #BA4A0A;
}
ul#pcBread li.current::before,
ul#pcBread li.current::after {
	background-color: #BA4A0A;
}

ul#mobileBread {
	display:none;
}

section#entry h2 {
	width:95%;
	margin:10px auto 10px auto;
	color: #333333;
	background: #e0ffcc;
	font-size: 16pt ;
	line-height: 1;
	padding: 10px 0px;
	box-shadow:1px 3px 7px 0px  #666666 ;
	border-top:3px solid #769164;
	text-indent:10px;
}

ul#confTab {
	width:95%;
	margin:20px auto -12px auto;
}

ul#confTab li {
	float:left;
	border-top:solid 1px #cccccc;
	border-left:solid 1px #cccccc;
	border-right:solid 1px #cccccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

ul#confTab li:first-child {
	border-right:none;
}

ul#confTab a {
	display:block;
	height:30px;
	padding:0px 15px;
	line-height:35px;
}

section#entry form {
	width:95%;
	margin:0px auto;
}

div#entryFrame1,
div#entryFrame2 {
	display:table;
	width:100%;
	margin:10px auto;
	border-top:solid 1px #cccccc;
	border-left:solid 1px #cccccc;
	border-right:solid 1px #cccccc;
}

div.entryRow,
div.entryRow2 {
	display:table-row;
}

p.entryCell,
p.entryCell2 {
	display:table-cell;
	padding:5px;
	border-bottom:solid 1px #cccccc;
}

p.entryCell:nth-child( odd ) {
	width:180px;
	background-color:#e0ffcc;
	border-right:solid 1px #cccccc;
	vertical-align:middle;
}

div.entryRow2:first-child p.entryCell2 {
	background-color:#e0ffcc;
}

input[type=text],
input[type=password],
select,
textarea {
	padding:2px;
	font-size:14px;
}

.inputName {
	width:80%;
}

.inputName2 {
	width:20%;
}

.inputTel {
	width:70px;
}

textarea {
	width:80%;
}

ul#memberFrame {
	display:table;
	table-layout:fixed;
	width:100%;
	margin:20px auto;
}

ul#memberFrame li {
	display:table-cell;
}

ul#memberFrame li:nth-child( 1 ) {
	padding-right:2px;
}

ul#memberFrame li:nth-child( 2 ) {
	padding-left:2px;
}

table.nameFrame {
	width:100%;
	border-collapse: separate;
	border-spacing: 1px;
	background-color:#cccccc;
}

table.nameFrame th {
	padding:5px;
	background-color:#E0FFCC;
	text-align:center;
}

table.nameFrame td {
	padding:5px;
	background-color:#ffffff;
}

table.nameFrame td input[type=text] { 
	width:95%;
}

section#entryLogin {
	width:70%;
	margin:10px auto;
	letter-spacing:1px;
	line-height:130%;
}

section#entryLogin h2 {
	width:100%;
	margin:10px auto 10px auto;
	color: #333333;
	background: #e0ffcc;
	font-size: 16pt ;
	line-height: 1;
	padding: 10px 0px;
	box-shadow:1px 3px 7px 0px  #666666 ;
	border-top:3px solid #769164;
	text-indent:10px;
}

div#attention {
	margin-top:20px;
	line-height:150%;
}

div#attention ul {
	list-style-type:decimal;
	margin-left:20px;
	padding-left:10px;
}

div#attention ul li {
}

div#newEntry {
	margin:20px 0px;
	padding:30px 0px;
/*
	background-color:#E0FFCC;
*/
	border:solid 1px #cccccc;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

div#newEntry p {
	margin-bottom:20px;
	text-align:center;
}

div#newEntry a {
	display:block;
	width:100px;
	height:30px;
	margin:0px auto;
	background-color:#009900;
	border:solid 1px; #999999;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color:#ffffff;
	line-height:30px;
	text-align:center;
}

div#newEntry a:hover {
	background-color:#32CD32;
	color:#333333;
}

section#entryLogin form {
	margin:20px 0px;
	padding:20px 10px;
	border:solid 1px #cccccc;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}


div.btnContainer {
	margin:20px 0px;
	text-align:center;
}
/*==============================
 * レスポンシブの部分
 *==============================*/
@media only screen and ( min-width:960px ) {
}

/* 769px～959px以下 */
@media only screen and ( max-width:959px ) {
}

/* 641px～768px以下（主にタブレット） */
@media only screen and ( max-width:768px ) {
}

/* 640px以下（主にスマホ横） */
@media only screen and ( max-width:640px ) {
	section#entryLogin {
		width:98%;
	}

	ul#pcBread {
		display:none;
	}

	ul#mobileBread {
		width:99%;
		margin:0px auto;
		display:table;
		table-layout:fixed;
	}

	ul#mobileBread li {
		display:table-cell;
		padding:5px 0px;
		background-color:#eeeeee;
		border-right:solid 1px #999999;
		font-weight:bold;
		text-align:center;
	}

	ul#mobileBread li:last-child {
		border-right:none;
	}

	ul#mobileBread li.mCurrent {
		background-color:#ffcc00;
	}

	ul#memberFrame li {
		display:block;
		width:97%;
		margin:0px auto;
	}

	ul#memberFrame li:nth-child( 1 ) {
		padding-right:0px;
	}

	ul#memberFrame li:nth-child( 2 ) {
		padding-top:5px;
		padding-left:0px;
	}
}

/* 480px以下（主にスマホ縦） */
@media only screen and ( max-width:480px ) {
	div#entryFrame1 {
		border:solid 1px #cccccc;
	}

	p.entryCell:nth-child( odd ) {
		width:97%;
		display:block;
		margin:0px auto;
		border:none;
	}

	p.entryCell:nth-child( even ) {
		width:100%;
		display:block;
		border:none;
	}

	.inputName {
		width:95%;
		margin:10px auto;
	}
}
