@charset "utf-8";

/* yakuhanmp-noto */
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp-noto.min.css");

/* Noto Sans Japanese */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,600,700,900");

body {
	font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
  }


/* -- form#mail_form, dl, dt, dd -------------------------------------------------------------------------------- */

form#mail_form * ,form#confirm_form *{
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}

form#mail_form,form#confirm_form {
	width: 100%;
	max-width: 1000px;
	margin: 15px auto 50px;
	background: #ffffff;
	/* border: 1px solid #cccccc;
	border-radius: 7px;
	box-shadow: 0 0 7px rgba( 0, 0, 0, 0.2 ); */
	line-height: 1.8;
}

form#mail_form dl,
form#confirm_form dl{
	width: 90%;
	margin: 0 auto;
	border-top: 1px solid #dcdcdc;
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
	display: flex;
	flex-wrap: wrap;
	/* align-items: center; */
	box-sizing: border-box;
}

.btno {
	border-top: none !important;
}
form#mail_form dl.lastitem,
form#confirm_form dl.lastitem{
	border-bottom: 1px solid #dcdcdc;
}

form#mail_form dl:after,
form#mail_form dl dt:after,
form#confirm_form dl:after,
form#confirm_form dl dt:after{
	content: ".";
	display: block;
	height: 0;
	/* clear: both; */
	visibility: hidden;
}

form#mail_form dl dt,
form#confirm_form dl dt {
	width: 13rem;
	/* width: 20rem; */
	/* float: left; */
	padding: 12px 0 5px;
	text-align: left;
	background-color: #f1f7f5;
}
form#mail_form dl dt{
	text-indent: -4rem;
	padding-left: 4rem;
}

form#confirm_form dl dt {
	width: 14rem;
	padding: 5px 7px 5px !important;
}

form#mail_form dl dd,
form#confirm_form dl dd {
	/* width: calc(100% -20rem - 1px) !important; */
	flex: 1; 
	/* float: right; */
	padding: 12px 8px 8px 6px;
	border-left: 1px solid #dcdcdc;
	/* background-color: #269abc; */
}

form#mail_form dl dt i {
	float: left;
	position: relative;
	top: 0;
}


form#mail_form dl.hidden,
form#confirm_form dl.hidden{
	/* display: none; */
	border-top: none;
	/* border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc; */
	border-bottom: 1px solid #dcdcdc;
}


/* form#mail_form dl:last-child  {
	border-bottom: 1px solid #cccccc;
} */


/* form#confirm_form dl dt{
	width: 500px;
} */

/* -- span.required, span.optional -------------------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional {
	display: inline-block;
	font-size: 80%;
	color: #ffffff;
	padding: 6px;
	border-radius: 3px;
	/* margin-top: 2px; */
	margin-right: 8px;
	margin-left: 8px;
	line-height: 1;
	text-indent: 0;
}

form#mail_form dl dt span.required {
	background: #d9534f;
	border: 1px solid #d43f3a;
}

form#mail_form dl dt span.optional {
	background: #337ab7;
	border: 1px solid #2e6da4;
}




/* -- error message -------------------------------------------------------------------------------- */

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
	display: block;
	color: #ff0000;
	margin-top: 5px;
}

/* -- input, select, textarea -------------------------------------------------------------------------------- */
select {
  -webkit-appearance: none;
  appearance: none;
}
.select_wrap{
	width: fit-content;
	position: relative;
}
.select_wrap::after{
	content: '▼';
	font-size: 10px;
	position: absolute;
	display: block;
	width: fit-content;
	height: fit-content;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
}
form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"] {
	width: calc( 100% - 4% - 2px );
	padding: 4px 2%;
	border: 1px solid #cccccc;
	border-radius: 3px;
	background: #fafafa;
	-webkit-appearance: none;
	font-family: inherit;
	line-height: normal;
}

form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus {
	box-shadow: 0px 0px 5px #55ccff;
	border: 1px solid #55ccff;
	background: #ffffff;
}

form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"] {
	margin: 0 10px 0 0;
}

form#mail_form ul li input[type="radio"]:disabled + span {
	opacity: 0.5;
	text-decoration: line-through;
}

form#mail_form select {
	/* padding: 7px 30px 7px 2%; */
	padding: 7px 30px 7px 10px;
	border: 1px solid #cccccc;
	border-radius: 3px;
	font-family: inherit;
	line-height: normal;
	color: #000000;
	background: #fafafa;
}

form#mail_form textarea {
	display: block;
	width: calc( 100% - 4% - 2px );
	height: 200px;
	padding: 7px 2%;
	resize: vertical;
	border: 1px solid #cccccc;
	border-radius: 3px;
	background: #fafafa;
	-webkit-appearance: none;
	font-family: inherit;
	line-height: normal;
}

input:nth-child(2){
	margin-top: 10px!important;
	display: block;
}
@media screen and (min-width:545px){
	input:nth-child(2){
		margin-top: 0!important;
		display: inline-block;
	}
}


/* -- ul, li -------------------------------------------------------------------------------- */

form#mail_form ul {
	list-style-type: none;
}

form#mail_form ul li label {
	display: block;
	margin-top: 10px;
	padding: 7px 2%;
	border-radius: 3px;
	background: #f0f0f0;
	padding-left: 3em;
	/* text-indent: -2em; */
	text-indent: -1.7em;
}

form#mail_form ul li:first-child label {
	margin-top: 0px;
}

form#mail_form ul li label:hover {
	cursor: pointer;
	background: #e0e0e0;
}


/* -- input design -------------------------------------------------------------------------------- */

/* form#mail_form input[name="company"] {
	width: 70%;
} */

form#mail_form input[name="name_1"],
form#mail_form input[name="name_2"],
form#mail_form input[name="read_1"],
form#mail_form input[name="read_2"],
form#mail_form input[name="postal"],
form#mail_form input[name="phone"],
form#mail_form input[name="schedule"] {
	width: 30%;
}

/* form#mail_form input[name="company"],
form#mail_form input[name="mail_address"],
form#mail_form input[name="mail_address_confirm"] {
	width: 100% !important;
} */

form#mail_form input[name="postal"] + a {
	display: inline-block;
	/* padding: 7px 20px;
	border: 1px solid #46b8da;
	border-radius: 3px;
	background: #5bc0de; */
	line-height: normal;
	/* color: #ffffff; */
	/* text-decoration: none; */
}

form#mail_form input[name="postal"] + a:hover {
	cursor: pointer;
	/* background: #31b0d5;
	border: 1px solid #269abc; */
}


/* -- button -------------------------------------------------------------------------------- */

form#mail_form p#form_submit, form#mail_form p#confirm_submit_button{
	width: 90%;
	margin: 0 auto;
	padding: 0 0 75px;
	text-align: center;
}

form#mail_form input[type="button"] {
	width: 100% !important;
	padding-top: 20px;
	padding-bottom: 20px;
	border: 1px solid #4cae4c;
	border-radius: 2px;
	background: #5cb85c;
	color: #ffffff;
	font-size: 1.1rem;
	-webkit-appearance: none;
}

form#mail_form input[type="button"]:hover {
	cursor: pointer;
	background: #449d44;
	border: 1px solid #398439;
}

/* form#mail_form input[type="button"] {
	margin-left: 35%;
} */


/* ---エラー----------- */

form#mail_form div.notinput {
  width: calc(90% - 24px);
  margin:0 auto 15px;
  padding: 15px 10px !important;
  overflow: hidden;
  text-align: left;
  background-color: #fff9f9;
  border: solid 2px #ff0000;
  text-align: center;
  color:#ff0000;
}

form#mail_form div.notinput ul{
  margin: 0;
  padding: 5px 10px;
}


/* -- 説明文　------*/

form#mail_form div.explanation{
	overflow: auto;
  width: 90%;
  margin:0 auto 15px;
  padding: 15px 0 !important;
  /* overflow: hidden; */
  text-align: left;
  background-color: #f6f6f6;
}

form#mail_form div.explanation p.h-1 {
  width: 90%;
  font-size: 26px;
  font-weight: bold;
  padding: 0 25px 0;
  line-height: 1.45;
}

form#mail_form div.explanation p.h-1 > span{
  display: block;
  font-size: 20px;
  font-weight: bold;
}

form#mail_form div.explanation p.h-2 {
  width: 90%;
  font-size: 15px;
  font-weight: bold;
  padding: 0 25px 0;
  text-align: left;
}

form#mail_form div.explanation p.kikan,form#confirm_form div.explanation p.kikan{
  width: calc(100% - 50px);
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 0 25px;
  text-align: left;
  line-height: 2.4;
  color:#004280;
  line-height: 1.65;
}

form#mail_form div.explanation p.kikan > span{
	background: #004280;
	color:#fff !important;
	padding: 5px 15px;
  }

form#mail_form div.explanation p.komento-top {
  width: 90%;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 5px 15px ;
  margin-left:5% ;
  border: #ccc solid 1px;
  text-align: center;
  color: crimson;
  background-color: #f5fcf9;
  margin-bottom: 15px;
}

form#mail_form div.explanation p.komento {
  width: calc(100% - 50px);
  font-size: 15px;
  text-align: left;
  padding: 0 25px;
  margin: 0;
  line-height: 1.45;
}

form#mail_form div.explanation p.komento b {
  font-size: 17px !important;
}

form#mail_form div.explanation p.komento02 {
  width: 98%;
  margin: 25px;
  text-align: left;
  /* padding-left: 1rem;
  text-indent: -1rem; */
}

/* ---フォーム下段（コメント欄）----------- */

form#mail_form div.note {
  width: calc(90% - 50px);
  margin: 25px auto;
  overflow: hidden;
  padding: 25px 25px 0;
  background-color: #f6f6f6;
  font-weight: 400;
}

form#mail_form div.note p.note_top {
  margin-bottom: 25px;
}

form#mail_form div.note p {
  margin-bottom: 25px;
}

form#mail_form div.note p span {
  font-weight: 500;
}

/* -- 補足------*/

span.hosoku {
  color: #008080;
  font-size: 0.9em;
  line-height: 1.2 !important;
  display: inline;
}

.hosoku span {
  display: inline-block !important;
}

.indent {
  padding-left: 1em;
  text-indent: -1em;
}

.hosoku02 {
  margin: 0;
  padding: 7px 0 0 1rem !important;
  display: block;
}

.hosoku02 li {
  list-style: none;
  color: #008080;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.45 !important;
  letter-spacing: 0rem;
  padding-left: 1rem;
  text-indent: -1rem;
}


/* -- 登録区分（テーブル）------*/


form#mail_form div.payment {
	width: calc(100% - 10px);
	margin: 0;
	padding: 15px 5px 15px;
}

form#mail_form div.payment > p {
	width: 100%;
	font-size: 1em;
	line-height: 2.2;
	margin-top: 0;
}

form#mail_form div.payment > table {
	width: 100%;
  /* width: 62%; */
	/* text-align: center; */
	font-size: 1em;
	line-height: 2;
	margin: 0 !important;
	padding: 0;
	font-size: 0.95rem;
	white-space: nowrap;
}

form#mail_form div.payment table th {
	width: 12%;
	background: #f0f0f0;
	border: 1px solid #cccccc;
	padding: 10px;
	vertical-align: middle;
	line-height: 1.45;
}

form#mail_form div.payment table td {
	background: #ffffff;
	border: 1px solid #cccccc;
	padding: 10px;
	line-height: 1.45;
	text-align: center;
}

form#mail_form div.payment table tr:first-child th {
	width: 12%;
	background: #f0f0f0;
	border: 1px solid #cccccc;
	padding: 10px;
	vertical-align: middle;
	line-height: 1.45;
	text-align: center;
}


form#mail_form div.payment table tr:first-child td {
	background: #f0f0f0;
	border: 1px solid #cccccc;
	padding: 10px;
	line-height: 1.45;
	text-align: center;
}

@media screen and (max-width:559px){
	form#mail_form div.payment > table {
		width: 95%;
	}
}



/* -- 参加費 -----*/

form#mail_form div.pay {
	width: 90%;
	margin: 25px auto 0;
	overflow: hidden;
	padding: 15px 25px;
	background-color: #fff;
	border: solid 1px #dcdcdc;
	font-weight: 400;
	box-sizing: border-box;
}
  
/* form#mail_form div.pay {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
} */
  
form#mail_form div.pay > ul{
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
  
form#mail_form div.pay > ul > li:first-child{
  width: 10rem;
  text-align: center;
  font-weight: 600;
  background-color: #008080;
  color: #fff;
  /* margin-right: 1.5rem; */
  padding: 0.2rem 0 0.15rem;
}
  
form#mail_form div.pay > ul > li:nth-child(2){
	font-size: 1.25rem !important;
}

form#mail_form div.pay > ul > li:nth-child(2)::after{
	content: "円";
}


form#mail_form div.pay p.payment01 {
	padding: 0;
	line-height: 2.45;
}

form#mail_form div.pay p.payment02 {
	line-height: 2.45;
	padding: 0 25px;
	border: 1px solid #cccccc;
	border-radius: 5px;
	display: none;
}
@media screen and (min-width:768px){
	form#mail_form div.pay > ul{
		flex-flow: row nowrap;
		justify-content: flex-start;
	}
	form#mail_form div.pay > ul > li:first-child{
		margin-right: 1.5rem;
	}
}

/* -- ワークショップ -----*/

form#mail_form div.way {
  width: 90%;
  margin: 25px auto 0;
  overflow: hidden;
  padding: 15px 25px;
  background-color: #fff;
  border: solid 1px #dcdcdc;
  font-weight: 400;
  box-sizing: border-box;
}

form#mail_form div.workshop {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

form#mail_form div.workshop > ul{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: row;
}

form#mail_form div.workshop > ul > li:first-child{
width: 10rem;
text-align: center;
font-weight: 600;
background-color: #008080;
color: #fff;
margin-right: 1.5rem;
padding: 0.2rem 0 0.15rem;
}

form#mail_form div.workshop > ul > li:nth-child(2){
	font-size: 1.25rem !important;
	}

form#mail_form div.workshop p.workshop01 {
	padding: 0;
	line-height: 2.45;
}

form#mail_form div.workshop p.workshop02 {
	line-height: 2.45;
	padding: 0 25px;
	border: 1px solid #cccccc;
	border-radius: 5px;
	display: none;
}


/* -- 郵便番号-----*/

form#mail_form input#postal+a {
	display: inline-block;
	margin-left: 0.5rem;
	/* padding: 2px 15px;
	border: 1px solid #46b8da;
	border-radius: 3px;
	background: #5bc0de; */
	/* color: #ffffff;
	text-decoration: none; */
}

form#mail_form input#postal+a:hover {
	cursor: pointer;
	/* background: #31b0d5;
	border: 1px solid #269abc; */
}

::placeholder {
  font-size: 0.9rem;
  font-weight: 300;
}

/* -- マイページ --------------------------------------------------------------*/

/* ---マイページ (コメント欄）----------- */

form#mail_form div.notes_toparea{
  width: 90%;
  margin:0 auto 15px;
  padding: 15px 0 !important;
  overflow: hidden;
  text-align: left;
  background-color: #f6f6f6;
}

form#mail_form div.notes_toparea > p{
  width: calc(100% - 50px);
  font-size: 15px;
  font-weight: bold;
  padding: 0 25px;
  text-align: left;
  line-height: 2.4;
  color:#004280;
}

form#mail_form div.notes_toparea > ul{
  margin: 0;
  padding: 0 25px;
  list-style: none !important;
}

form#mail_form div.notes_toparea >ul > li::before{
  list-style-type: none !important;
  font-size: 13px;
  line-height: 1.65 !important;
}

/* -- confirm_field --------------------------------------------------------------*/

/* ---confirm_form (コメント欄）----------- */

form#confirm_form div.confirm_notes_toparea{
  width: 90%;
  margin:0 auto 15px;
  padding: 15px 0 !important;
  overflow: hidden;
  text-align: left;
  background-color: #f6f6f6;
}

form#confirm_form div.confirm_notes_toparea > p{
  width: calc(100% - 50px);
  font-size: 15px;
  font-weight: bold;
  padding: 0 25px;
  text-align: left;
  line-height: 2.4;
  color:#004280;
}

form#confirm_form div.confirm_notes_toparea > ul{
  margin: 0;
  padding: 0 25px;
  list-style: none !important;
}

form#confirm_form div.confirm_notes_toparea >ul > li::before{
  list-style-type: none !important;
  font-size: 13px;
  line-height: 1.65 !important;
}

/* -- confirm_field submit ------*/

div#confirm_field p#confirm_submit {
	width: 90%;
	margin: 0 auto;
	padding: 0 0 75px;
	text-align: center;
}

div#confirm_field input[type="button"] {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	border-radius: 2px;
	font-size: 1.1rem;
	color: #ffffff;
	-webkit-appearance: none;
}

div#confirm_field input#confirm_submit_button {
	display: block;
	background: #5cb85c;
	border: 1px solid #4cae4c;
	margin: 25px auto 13px;
}

div#confirm_field input#confirm_submit_button:hover {
	cursor: pointer;
	background: #449d44;
	border: 1px solid #398439;
}

div#confirm_field input#confirm_cancel_button {
	display: block;
	margin: 13px auto 25px;
	background: #d9534f;
	border: 1px solid #d43f3a;
}

div#confirm_field input#confirm_cancel_button:hover {
	cursor: pointer;
	background: #c9302c;
	border: 1px solid #ac2925;
}

.button_cancel_mypage{
	display: block;
	margin: 13px auto 25px;
	padding: 20px 0 !important;
	background: #3c3c3c;
	border: 1px solid #3c3c3c;
	color: #fff;
}

.button_cancel_mypage:hover{
	cursor: pointer;
	background: #5f5f5f;
	border: 1px solid #5f5f5f;
}


/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */

/* 1000pixel start */
@media screen and ( max-width: 767px ) {


	/* -- form#mail_form, dl, dt, dd -------------------------------------------------------------------------------- */
	form#mail_form,
	form#confirm_form {
		width: 95%;
		font-size: 100%;
	}
	
	form#mail_form dl,
	form#confirm_form dl{
		display: block;
		border-top: none;
		border-left: none;
		border-right: none;
		/* margin-bottom: 10px; */
		margin: 10px auto;
	}
	
	form#mail_form dl dt,
	form#confirm_form dl dt {
		width: auto;
		/* float: none; */
		padding: 0;
		text-align: left;
		font-weight: bold;
		/* background-color: #ffffff; */
		margin-bottom: 8px;
		text-indent: 0;
	}
	
	form#mail_form dl dd,
	form#confirm_form dl dd {
		width: auto;
		/* float: none; */
		padding: 0 0 8px;
		border-left: none;
	}
	
	form#mail_form dl dt i,
	form#confirm_form dl dt i {
		float: none;
		position: static;
		font-weight: normal;
	}
	
	
	form#mail_form dl.hidden,
	form#confirm_form dl.hidden{
		/* display: none; */
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
	
	form#mail_form dl.lastitem,
	form#confirm_form dl.lastitem {
		border-bottom: none;
	}
	
	form#mail_form ul li label,
	form#confirm_form ul li label {
		margin-top: 5px;
	}
	
	
	
	/* -- span.required, span.optional -------------------------------------------------------------------------------- */
	
	form#mail_form dl dt span.required,
	form#mail_form dl dt span.optional {
		margin: 0 15px 0 0;
	}
	
	
	
	
	/* -- input design -------------------------------------------------------------------------------- */
	
	form#mail_form input[name="phone"],
	form#mail_form input[name="schedule"] {
		width: 60%;
	}
	
	
	
	
	/* -- button -------------------------------------------------------------------------------- */
	
	form#mail_form p#form_submit {
		padding: 0 0 75px;
	}
	
	/* form#mail_form input[type="button"] {
		margin-left: 0;
	} */
	
	
	
	form#mail_form dl dt span.required,
	form#mail_form dl dt span.optional {
		margin-right: 6px;
	}
	

	form#mail_form div.workshop > ul > li:first-child{
		width: 5rem;
		}

  header {
    width: 95% !important;
  }
  form#mail_form div.explanation {
    margin:0 auto 25px;
  }
  form#mail_form dl dt > br{
    display: none !important;
  }
  footer > div > p {
    font-size: 11px !important;
  }
}


@media screen and ( max-width: 399px ) {
form#mail_form div.explanation p.kikan {
  font-size: 14px;
  letter-spacing: -0.01rem;
}

form#mail_form div.explanation p.komento {
  font-size: 14px;
}
}

	/* 1000pixel end */





.unchangeable ul li:nth-child(2n) span.unchangeable_indent{
	display: block;
	padding-left: 1em!important;
	text-indent: -1em;
}

.seminar_status{
	margin-top: 10px;
}
.seminar_status dl{
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	border-bottom: 1px solid #000000;
	font-weight: bold;
}
.seminar_status dl dt{
	/* width: 150px; */
	margin: 0 auto;
}
.seminar_status dl dd{
	flex: 1;
}