@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,mainArea
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
    overflow-y: scroll;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input, textarea{
	margin: 0;
	padding: 0;
}

ol, ul{
    list-style:none;
}

table{
    border-collapse: collapse; 
    border-spacing:0;
    width: 100%;
}

caption, th{
    text-align: left;
}

a:focus {
	outline:none;
}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}

.inline_block {  
	display: inline-block;  
	*display: inline;  
	*zoom: 1;  
}

.mini{
	font-size:small;
}

.center{
	text-align:center;
}

/*リセットここまで*/

body{
	font-family:
	"メイリオ",
	Meiryo,
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"ＭＳ Ｐゴシック",
	MS PGothic,
	Osaka,
	sans-serif,
	Alegreya SC,
	serif;
	border-top: 10px solid #231815;
	color: #231815;
}

a:visited{ color: #333;}
a:active{ color: #333;}
a:hover{ color: #FF1111;}
a {text-decoration:underline; color: #333;}
a img.linkimg{
background:none!important;
}
 
a:hover img.linkimg{
/*opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";*/
background:none!important;
	margin:2px -2px -2px 2px;
}

.red{
	color:#ff0000;
	font-size:large;
	font-weight:bold;
}

.right{
	text-align: right;
}

/*----------------------------------
= 表のスタイル設定
----------------------------------*/

.borderHeader th {
	border-bottom:2px #333 solid;
	padding:10px;
	font-weight: bold;
}

.borderNone td{
	border:none;
}

tbody td,tbody th  {
	border-bottom:1px #333 solid;
	padding:10px;
	vertical-align: top;
}

input.detailStyle,input.returnStyle, button.courseChange {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff975b+0,ff670f+100 */
	background: #ff975b; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff975b 0%, #ff670f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ff975b 0%,#ff670f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ff975b 0%,#ff670f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff975b', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
	border:1px #ff670f solid;
	cursor: pointer;
	color:#fff;
	font-size:16px;
	border-radius: 5px;
}

input.detailStyleNone {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff975b+0,ff670f+100 */
	background: none; /* Old browsers */
	border:none;
	cursor: pointer;
	color:#fff;
	font-size:16px;

}

input.detailStyle {
	width: 100px;
	height: 50px;
}

input.returnStyle {
	width: 200px;
	height: 50px;
	margin: 2% auto;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

input.detailStyle:hover, button.courseChange:hover, .buttonArea li:hover{
filter: alpha(opacity=0.7);
-ms-filter: alpha(opacity=0.7);
opacity: 0.7;
}

input.deletelStyle {
	width: 80px;
	height: 50px;	
	cursor: pointer;
}

input[type="text"],input[type="textarea"],input[type="tel"],input[type="password"],input[type="number"],input[type="email"] {
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
	font-size: large;
}

input[type="text"]:focus,
input[type="textarea"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus
input[type="password"]:focus
,.normalStyle select:active,
.normalStyle textarea:active,
input[type="number"]:focus,
.normalStyle select:active {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input[type="text"],.inputWithIcon input[type="textarea"],.inputWithIcon input[type="tel"]  {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left:10px;
  top: 22px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus + i,
.inputWithIcon input[type="textarea"]:focus + i {
  color: dodgerBlue;
}

.inputWithIcon.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i,.inputWithIcon.inputIconBg input[type="textarea"]:focus + i,.inputWithIcon.inputIconBg input[type="tel"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}

.normalStyle select,.normalStyle textarea{
	font-size:14px;
  	padding: 8px;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	outline: none;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
  	border: 2px solid #aaa;
  	border-radius: 4px;
	background: #ffffff;	
}

button.courseChange {
	width: 200px;
	height: 50px;
}

.normalStyle{
	width: 100%;
	margin: 0 auto;
	font-size:80%;
}

.normalStyle td,.normalStyle th{
	border-bottom:1px #333 solid;
	padding:10px;
}

.normalStyle th{
	font-weight: bold;
	padding:10px 0;
	vertical-align: top;
}

.textBox50{
	width: 50px;
}

.textBox100{
	width: 100px;
}

.textBox150{
	width: 150px;
}

.textBox200{
	width: 200px;
}

.mt50{
	margin-top: 50px;
}

/*----------------------------------
= header
----------------------------------*/
header h1 a{
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
}



/*----------------------------------
= content
----------------------------------*/

.content{
	width:100%;
	height: auto;
	margin:40px auto;
	background-color:#FFFFFF;
	padding:10px 10px 0 10px;
	overflow:hidden;
		/*border:1px #00FF5C solid;*/
}

.content-manage{
	width:100%;
	height: auto;
	margin:40px auto;
	background-color:#FFFFFF;
	padding:10px 10px 0 10px;
	overflow:hidden;
		/*border:1px #00FF5C solid;*/
}

.contentParticipantsList{
	width:2000px;
	height: auto;
	margin:40px auto;
	background-color:#FFFFFF;
	padding:10px 10px 0 10px;
	overflow:hidden;
		/*border:1px #00FF5C solid;*/
}

.menuArea{
	width:1024px;
	margin: 20px auto;
	/*border:1px #ff0000 solid;*/
}

.mainArea{
	width: 90%;
	margin: 2% auto;
	/*border:1px #0000ff solid;*/
}

/*----------------------------------
= menuArea
----------------------------------*/
.menuArea li{
	display:inline;
	margin: 0 20px 0 0 ;
}

/*----------------------------------
= buttonArea
----------------------------------*/
ul.buttonArea-new {
	margin: 0;
	margin-bottom: 0.4em;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
ul.buttonArea-new li {
	width: 32.3%;
	margin-right: 1%;
	text-align: center;
	padding:3% 0 3%;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff975b+0,ff670f+100 */
	background: #ff975b; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff975b 0%, #ff670f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ff975b 0%,#ff670f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ff975b 0%,#ff670f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff975b', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
	border:1px #ff670f solid;
	cursor: pointer;
	font-size:16px;
	border-radius: 5px;
}

ul.buttonArea-new li:last-child {
	margin-right: 0;
}

ul.buttonArea-new li a{
	padding: 10px;
	text-decoration: none;
	color:#fff;	
}

.buttonArea{
	margin: 10px 10px 50px 10px;
	padding:10px 10px 50px 10px;
}

.buttonArea li{
	float: left;
	margin-right: 20px;
	width: 10em;
	padding: 20px 10px;	
	text-align: center;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff975b+0,ff670f+100 */
	background: #ff975b; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff975b 0%, #ff670f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ff975b 0%,#ff670f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ff975b 0%,#ff670f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff975b', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
	border:1px #ff670f solid;
	cursor: pointer;
	font-size:16px;
	border-radius: 5px;	
}

.buttonArea li a{
	padding: 10px;
	text-decoration: none;
	color:#fff;	
}

ul.buttonArea-footer {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	margin:3%;
}
ul.buttonArea-footer li {
	width: 15%;
	margin-right: 1%;
	text-align: center;
	padding:1% 0 1%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
	border:1px #28343b solid;
	cursor: pointer;
	font-size:16px;
	border-radius: 5px;
}

ul.buttonArea-footer li:last-child {
	margin-right: 0;
}

ul.buttonArea-footer li a{
	padding: 10px;
	text-decoration: none;
	color:#fff;	
}


/*----------------------------------
= mainArea
----------------------------------*/
.mainArea h1, .mainArea h2, .mainArea h3, .mainArea h4{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#499bea+0,207ce5+100;Blue+3d+%237 */
	background: #499bea; /* Old browsers */
	background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #499bea 0%,#207ce5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
	margin: 70px auto 0 auto;
	padding:5px 0;
	color: #fff;
	font-size:24px;
	text-align: center;
}

/*参加者名簿*/
.formArea {
	width: 800px;
	margin: 0 auto;
	text-align: center;
}

.formArea li{
	display: inline-block;

}
.pagePost .login-box h2 {
	margin-top:1%;
}
.login-box {
	padding: 2%;
	background: #fff;
	box-shadow: 0 0 8px grey;
	width: 50%;
	margin: 2% auto;
}

/*----------------------------------
お問い合わせ
----------------------------------*/
textarea{
	margin:0 0 20px 0;
	font-size:large;
}

.button{
	text-align:center;
	margin:20px 0 10px 0;
}

/*----------------------------------
= footer
----------------------------------*/

footer {
	border-top:3px #333 double;
}

footer ul{
	text-align: right;
	margin: 10px 0 0 0;
}

footer li{
	display: inline;
}

@media screen and (max-width:767px){
	.normalStyle th,
	.normalStyle td {
		width: 100%;
		display: inline-block;
	}
	.normalStyle th {
		border-bottom:none;
	}
	.normalStyle td {
		margin-left:0;
	}
	.inputWithIcon input[type="text"], .inputWithIcon input[type="tel"]  {
		display: block;
	}
	.normalStyle textarea {
		width: 100%;
	}
}