@charset "utf-8";
/* CSS Document */

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

#contact,
#photo,
#mailmagazine{
	margin-bottom: 50px;
}

#contents #title {
	margin: 18px 0 20px;
	font-size: 20px;
	line-height:1.6;
	letter-spacing:0.2em;
}

#contents h2{
	font-size:18px;
	margin:0 0 20px;
	letter-spacing:0.2em;
	padding:45px 0 0;
}

#contents .confirm h2,
#contents .error h2,
#contents .thanks h2{
	padding:0;
}

#contents .photo_img{
	width:740px;
	height:200px;
	background:url(../img/photo.png) no-repeat left top;
	padding-bottom:10px;
}

#contents .photo_img img{
	display:none;
}

#contents .form{
	background:#f9f9f9;
	width:100%;
	padding:40px;
	box-sizing:border-box;
	margin-bottom:35px;
}

#contents .form dl dt{
	clear:both;
	float:left;
	width:160px;
	padding:15px 0 0;
}

#contents .confirm .form dl dt{
	padding:0;
}

#contents .form dl dt.pt0{
	padding-top:0;
}

#contents .form dl dt.height0{
	padding:0;
	height:0;
}

#contents .form dl dd{
	padding:0 0 23px 170px;
}

#contents .confirm .form dl dd{
	padding-bottom:30px;
}

#contents .form dl dd:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}

#contents .form dl dd p{
	font-size:12px;
	margin:0;
}

#contents input, #contents button, #contents textarea, #contents select {
	margin: 0 0 7px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#contents .form input[type="text"]{
	width:100%;
	box-sizing:border-box;
	border:1px solid #cccccc;
	background:#fff;
	line-height:50px;
	height:50px;
	padding:0 5px;
	border-radius:3px;
}

#contents .form input[type="file"]{
	width: 300px;
}

#contents .form textarea{
	width:100%;
	box-sizing:border-box;
	border:1px solid #cccccc;
	background:#fff;
	height:150px;
	padding:5px;
	border-radius:3px;
	vertical-align:top;
}

#contents .form .required {
	color: #e90000;
}

#contents .btn_select{
	line-height:34px;
	height:36px;
	border:1px solid #cccccc;
	background:#fff;
	border-radius:3px;
	outline: 0;
	padding:0 10px;
	float:left;
}

#contents #input_file_name{
	float:right;
	border:none;
	background:none;
	line-height:1.7;
	height:auto;
	width:calc(100% - 130px) ;
	padding:8px 0 0;
}

#contents .form .btn_form,
#contents .form a.btn_form,
#contents .form btn_form:hover{
	display:block;
	width:200px;
	height:50px;
	line-height:50px;
	background:#c12a17;
	border-radius:3px;
	overflow:hidden;
	margin:0 0 0 170px;
	border:0;
	padding:0;
	color:#fff;
	font-size:16px;
	letter-spacing:0.1em;
	text-align:center;
	font-family: sans-serif;
}

#contents dl ul{
	display:inline-block;
}

#contents dl ul li{
	display:inline-block;
	padding:0 40px 5px 0;
}

#contents .confirm .form ul.list_btn{
	width:420px;
	margin:0 auto;
	overflow:hidden;
}

#contents .confirm .form ul.list_btn li{
	width:200px;
	float:left;
	margin:0 20px 0 0;
}

#contents .confirm .form ul.list_btn li:nth-child(even){
	margin:0;
}

#contents .confirm .form ul.list_btn li .btn_form{
	margin:0;
}

#contents .error .form p{
	padding:80px 0;
	text-align:center;
	color:#c12a17;
	font-size:16px;
}

#contents .thanks .form p{
	padding:80px 0;
	text-align:center;
	font-size:16px;
}

#contents .error .form .btn_form,
#contents .thanks .form .btn_form{
	margin:0 auto;
}

/*---radio---*/

#contents input[type=radio] {
	display: inline-block;
	margin-right: 6px;
}

#contents input[type=radio] + label {
	position: relative;
	display: inline-block;
	margin-right: 12px;
	cursor: pointer;
}

#contents input[type=radio] {
	display: none;
	margin: 0;
	padding:0;
}

#contents input[type=radio] + label {
	padding: 0 0 0 32px;
	margin:0;
}

#contents input[type=radio] + label::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	border: 1px solid #bbb;
	background:#fff;
}

#contents input[type=radio] + label::after {
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	content: "";
	position: absolute;
	display: block;
	top: 2px;
	left: 5px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	background: #aaa;
	border-radius: 10px;
	opacity: 0;
}

#contents input[type=radio]:checked + label::after {
	opacity: 1;
}

/* button */
#contents .btn_form.cancel {
	background-color: #807979;
}

#contents #mailmagazine .edit .btn_form {
	background-color: #807979;
}

#contents #mailmagazine .deregister .btn_form {
	background-color: #807979;
}


/* form style */
#contents em.error {
	background-position: 0 5px;
}

#contents em.done {
	display: none;
}



@media screen and (max-width: 480px) {

#contact,
#photo,
#mailmagazine {
    margin-bottom: 15%;
}

#contents #title {
  margin: 5px 0 13px;
}

#contents input, #contents button, #contents textarea, #contents select {
	margin: 0;
}

#contents .form input[type="text"]{
	line-height:40px;
	height:40px;
}

#contents .form input[type="file"]{
	width: 100%;
}

#contents .photo_img{
	width:100%;
	height:auto;
	background:none;
}

#contents .photo_img img{
	display:block;
	width:100%;
}

#contents .form{
	padding:15px 15px 20px;
	margin-bottom: 10px;
}

#contents .form dl dt{
	float:none;
	width:100%;
	line-height:1.7;
	padding:0 0 5px;
}

#contents .form dl dd,
#contents .confirm .form dl dd{
	padding:0 0 25px;
}

#contents .form .btn_form{
	margin:0 auto;
}

#contents .form dl dd p{
	margin:7px 0 0;
}

#contents dl ul li{
	padding:0 40px 0 0;
}

#contents .confirm .form ul.list_btn{
	width:100%;
	margin:0;
}

#contents .confirm .form ul.list_btn li{
	width:48%;
	margin:0 2% 0 0;
}

#contents .confirm .form ul.list_btn li:nth-child(even){
	width:48%;
	margin:0 0 0 2%;
}

#contents .confirm .form ul.list_btn li .btn_form{
	width:100%;
}

#contents #mailmagazine h2 {
	font-size: 16px;
}


/* form style */
#contents .error .form p,
#contents .thanks .form p{
	padding:50px 0;
}

#contents em.error {
	font-size: 12px;
}


}