@charset "utf-8";

/* common
---------------------------------------- */

input[type="text"],
input[type="password"]{
	margin-bottom: 10px;
    padding: 10px 15px;
    border: 3px #f1f1f1 solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
}
h3.ttl{
	position:relative;
	font-size:bold;
	text-align:center;
	border-left:none;
	border-bottom:1px #7fbe26 solid;
}

div#contents div.form h3.ttl:before{
	content:"";
	position:absolute;
	bottom:0;
	right:0;
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
}
div#memberinfo h3.ttl:before{width:80px;height:74px;background-image:url(../img/silhouette1.png);}
div#school_info h3.ttl:before{width:36px;height:72px;background-image:url(../img/silhouette2.png);}
div#holiday_info h3.ttl:before{width:38px;height:66px;background-image:url(../img/silhouette3.png);}
div#send_info h3.ttl:before{width:24px;height:77px;background-image:url(../img/silhouette4.png);}


/* submit */
div#submit{
	margin:0 auto;
	padding:90px 0;
	text-align:center;
	background:url(../img/silhouette1.png) no-repeat right 30px bottom;
	background-color:#f5f5f5;
}
div#submit input,
div.login div#submit a.non_member,
div.login div#submit a.btn{
    width: auto;
	min-width: 0;
	display: inline;
	margin:0 5px;
    padding: 15px 20px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    border: 1px #cd3c5a solid;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    background-color: #cd3c5a;
	transition:all 0.3s linear;
}
div.login div#submit input,
div.login div#submit a.non_member,
div.login div#submit a.btn{
    width: 40%;
	display:block;
    margin: 30px auto 0;
    padding: 15px 0;
}
div.login div#submit a.non_member,
div.login div#submit a.btn{
    color: #cd3c5a;
    background-color: #fff;
}
div#submit input:hover,
div.login div#submit a.non_member:hover,
div.login div#submit a.btn:hover{
    color: #fff;
    background-color: #ff6400;
    border: 1px #ff6400 solid;
}
div#submit input.edit,
div#submit input.mypage,
div#submit input.logout{
	width:auto;
	padding: 3px 10px;
	color:#cd3c5a;
	font-size:16px;
	font-weight:normal;
	border:1px #cd3c5a solid;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	background-color:#fff;
}
div#submit input.edit:hover,
div#submit input.mypage:hover,
div#submit input.logout:hover{
	color:#fff;
	border:1px #ff6400 solid;
	background-color:#ff6400;
}

div#submit input.register{
	margin-left:0;
	margin-right:60px;
}

@media screen and (max-width: 800px) {
	div.login div#submit input, 
	div.login div#submit a.non_member {
		width: 85%;
		min-width:13em;
	}
	div.login div#submit a.non_member {
		width: 79%;
		padding:15px 3%;
	}
}
@media screen and (max-width: 510px) {
	div.login div#submit input, 
	div.login div#submit a.non_member {
		min-width:0;
		font-size: 18px;
	}
}

@media screen and (max-width: 800px) {
	div#submit input.register,
	div#submit input.edit,
	div#submit input.mypage,
	div#submit input.logout {
		width: 90%;
		margin:5px auto;
	}
}
@media screen and (max-width: 510px) {
	div#submit input.register{
		font-size:18px;
	}
}

p.thanks{
	margin:60px auto;
	color:#cd3c5a;
	font-weight:bold;
	text-align:center;
}



/* login
---------------------------------------- */
.login div#contents{
	width:100%;
}
.login div#member_login{
	width:100%;
	padding:30px 0;
	background:url(../img/silhouette1.png) no-repeat right 30px bottom;
	background-color:#f5f5f5;
}
.login div#member_login dl dt,
.login div#member_login dl dd{
	width:40%;
	margin:0 auto;
	text-align:center;
}
.login div#member_login dl input{
	width:97%;
	padding:10px 1%;
}
.login div#submit{
	padding:0;
	background:#fff;
}
.login p.red{
	margin:60px auto;
	color:#cd3c5a;
	font-weight:bold;
	text-align:center;
}

.login div#submit a.pw_reminder{
	display:block;
	margin:15px auto;
}
@media screen and (max-width: 510px) {
	.login div#member_login dl dt,
	.login div#member_login dl dd{
		width:90%;
	}
	.login div#member_login dl input{
		width:93%;
		padding:10px 3%;
	}
}
@media screen and (max-width: 350px) {
	.login div#member_login dl dt,
	.login div#member_login dl dd{
		width:85%;
	}
}



/* member_top 
---------------------------------------- */
div.member_top div.form dl{
	margin-bottom:90px;
}
div.member_top div.form dt,
div.member_top div.form dd{
	position: relative;
	padding: 15px 0 5px;
	border-top: 1px #ccc solid;
}
div.member_top div.form dt{
	width: 300px;
    padding: 15px 30px 15px 80px;
}
div.member_top div.form dd{width: 570px;}

div.member_top div.form dt:nth-child(1),
div.member_top div.form dd:nth-child(2){
	padding-top:0;
	border-top:none;
}
div.member_top div.form dl dt::before {
    width: 60px;
    content: "必須";
    position: absolute;
    left: 0;
    display: block;
    margin-right: 15px;
    padding: 2px 5px;
    color: white;
    text-align: center;
    border: 1px #7fbe26 solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    background-color: #7fbe26;
}
div.member_top div.form dl dt.option::before {
    content: "任意";
    color: #7fbe26;
    border: 1px #7fbe26 solid;
    background-color: #fff;
}
div.member_top div.form dl dt.nochange::before {
    content: "変更不可";
    color: #043264;
    border: 1px #043264 solid;
    background-color: #fff;
}

input#username,
input#password{
	width:95%;
}

@media screen and (max-width: 1280px) {
	div.member_top div.form dt{
		width: 23%;
		padding: 15px 5% 15px 12%;
	}
	div.member_top div.form dd{
		width: 60%;
	}
	div.member_top div.form dl dt::before {
		width: 25%;
		padding: 2px 0;
	}
}
@media screen and (max-width: 1054px) {
	div.member_top div.form dt{
		width: 30%;
		padding: 15px 5% 15px 15%;
	}
	div.member_top div.form dd{
		width: 50%;
	}
}
@media screen and (max-width: 510px) {
	div.member_top div.form dt,
	div.member_top div.form dd{
		width: 90%;
		width:calc(100% - 80px);
		padding: 15px 0 0 80px;
	}
	div.member_top div.form dd{
		padding: 15px 0 15px 80px;
		border-top:none;
	}
	div.member_top div.form dd:nth-child(2) {
		padding-top: 15px;
	}
	div.member_top div.form dl dt::before {
		width: 60px;
	}
}
@media screen and (max-width: 350px) {
	div.member_top div.form dl dt::before {
    	padding: 0;
	}
	div.member_top div.form dd{
		width: 100%;
		padding-left:0;
	}
}

/* entry_history */
div#entry_history ul{
	margin-bottom:90px;
}
div#entry_history ul li{
	position:relative;
	padding:15px 0 15px 9em;
	border-bottom:1px #ccc solid;
}
div#entry_history ul li span{
	position:absolute;
	top:15px;
	left:0;
	font-weight:bold;
}



/* mypage acc_edit page
---------------------------------------- */
div#acc_info dl dt{
	width:280px;
    padding-left:100px;
}
div#acc_info dl dt:before {
    width: 80px;
}

/* event_info
---------------------------------------- */
#event_info{
	margin: 0 0 90px;
}
#event_info dl{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 0 30px;
}
#event_info dl dt,
#event_info dl dd{
	padding: 15px 0;
	border-bottom: 1px solid #ccc;
}
#event_info dl dt{
	width: 200px;
	font-weight: bold;
}
#event_info dl dd{
	position: relative;
	width: calc(100% - 200px - 180px);
	padding-right: 180px;
}
#event_info dl dd .qr{
	position: absolute;
	top: 15px;
	right: 0;
	padding: 5px 15px;
	color: white;
	font-size: 14px;
	border-radius: 25px;
	background: #cd3c5a;
}
#event_info dl dd .qr:hover{
	background: #ff6400;
}
#event_info dl dd .qr.na{
	text-decoration: none;
	background: #999;
	pointer-events: none;
}
#event_info dl dd span{
	display: block;
	margin: 10px -180px 0 0;
	font-size: 14px;
	text-align: right;
}
@media screen and (max-width: 640px) {
	#event_info dl{
		display: block;
	}
	#event_info dl dt{
		width: auto;
		padding: 15px 0 0;
		border: none;
	}
	#event_info dl dd{
		width: auto;
		padding: 0 0 15px;
		border-bottom: 1px solid #ccc;
	}
	#event_info dl dd .qr{
		position: static;
		display: block;
		max-width: 180px;
		margin: 10px auto 0;
		text-align: center;
	}
	#event_info dl dd span{
		margin: 10px 0 0;
		font-size: 12px;
		text-align: center;
	}
}

/* event_qr
---------------------------------------- */
#event_qr-header{
	padding: 30px;
	text-align: center;
}
.event_qr{
	padding-top: 30px!important;
}
.event_qr .event_term{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.event_qr .qr-code{
	max-width: 300px;
	margin: 0 auto 30px;
}
.event_qr .btn{
	max-width: 400px;
	margin: 0 auto;
}
.event_qr .btn a{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
	#event_qr-header{
		padding: 20px 30px;
	}
	.event_qr{
		padding-top: 0!important;
	}
	.event_qr .event_term{
		font-size: 16px;
	}
	.event_qr .qr-code{
		max-width: 200px;
		margin: 0 auto 20px;
	}
}

#member-inquiry {
    font-size: 16px;
    text-align: left;
    margin-bottom: 90px;
    padding-top: 10px;
    border-top: 1px #ccc solid;
    max-width: 980px;
}
#member-inquiry a{
    text-decoration: underline;
    cursor: pointer;
}
#member-inquiry a:hover{
    text-decoration: none;
}
@media screen and (max-width: 1280px) {
        #member-inquiry {
        max-width: 100%;
    }
}