@charset "UTF-8";

/*   お問い合わせ／入校申し込み（contact.css）   */

/* -------------------------------------------------

Main

------------------------------------------------- */
#Main {
	width: 100%;
}
#Main .Section {
	margin: 0 0 120px;
	position: relative;
	/*overflow: hidden;	*/
}
#Main .Section:first-child {
	margin: 80px 0 120px;
}
@media screen and (max-width: 898px)  {
#Main .Section {
	margin: 0 0 100px;
}
#Main .Section:first-child {
	margin: 50px 0 100px;
}
}
@media screen and (max-width: 480px)  {
#Main .Section {
	margin: 0 0 80px;
}
#Main .Section:first-child {
	margin: 30px 0 80px;
}
}
@media print {
#Main .Section {
	overflow:visible;
}
#Main .Section:last-child {
	padding-bottom: 120px;
}
}

/* 見出し（h2）
================================================== */
.Heading__h2_contact	{
	margin: 0 0 50px;
}
.Heading__h2_entry	{
	margin: 0 0 50px;
	text-align: center;
}
.Heading__h2_contact img	{
	width: auto;
	height: 44px;
	}
.Heading__h2_entry img	{
	width: auto;
	height: 88px;
}

@media screen and (max-width: 768px)  {
.Heading__h2_contact	{
	margin: 0 0 30px;
}
.Heading__h2_entry	{
	margin: 0 0 30px;
}
.Heading__h2_contact img	{
	height: 30px;
}
.Heading__h2_entry img	{
	width: auto;
	height: 66px;
}
}
@media screen and (max-width: 480px)  {
.Heading__h2_contact img	{
	height: 22px;
}
.Heading__h2_entry img	{
	height: 44px;
}
}
@media screen and (max-width: 359px)  {
.Heading__h2_entry img	{
	height: 34px;
}
}


/* -------------------------------------------------

Contact

------------------------------------------------- */
.Contact__wrp	{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto 80px;
	padding-bottom: 50px;
	position: relative;
	border-bottom: 1px solid #272343;
}
.Contact__wrp:last-child	{
	margin: 0 auto;
	padding-bottom: 0px;
	border-bottom: none;
}
.Contact__wrp .textbox	{
	font-size: 1.8rem;
	line-height: 2;
	margin-bottom: 50px;
}

@media screen and (max-width: 1250px)  {
.Contact__wrp	{
	width: 95%;
}
}
@media screen and (max-width: 768px)  {
.Contact__wrp	{
	/*padding-bottom: 30px;*/
}
.Contact__wrp .textbox	{
	font-size: 1.6rem;
	margin-bottom: 30px;
}
}
@media screen and (max-width: 640px)  {
.Contact__wrp	{
	margin: 0 auto 50px;
}
.Contact__wrp .textbox	{
	font-size: 1.4rem;
	line-height: 1.7;
}
}


/* Contact__Box
================================================== */
.Contact__Box {
}
@media screen and (max-width: 768px)  {
}
@media screen and (max-width: 480px)  {
}



/* free_dial__wrap（電話）
================================================== */
.free_dial__wrap	{
	max-width: 400px;
	width: 100%;
	margin: 0 0 0 50px;
	padding-right: 10px;
}
.free_dial a	{
	display:inline-flex;
	align-items: center;
	font-family: "Noto Serif", serif;
	font-size: 4rem;
	line-height: 1;
	margin-bottom: 20px;
}
.rec_hours	{
	font-size: 1.6rem;
	margin-left: 20px;
	line-height: 1;
}
@media screen and (max-width: 768px)  {
.free_dial a	{
	font-size: 3rem;
}
}
@media screen and (max-width: 480px)  {
.free_dial__wrap	{
	margin: 0 0 0 40px;
}
.free_dial a	{
	font-size: 2.4rem;
}
.rec_hours	{
	font-size: 1.4rem;
	margin-left: 0px;
}
}


/* asterisk 箇条書き（※印）
================================================== */
dl.asterisk	{
	width: 100%;
	margin: 15px 0;
	display: flex;
	flex-flow: row wrap;
	font-weight: 400; 
	font-size: 1.6rem !important;
}
dl.asterisk dt	{
	flex-basis: 22px;
	font-weight:normal;
	padding:3px 0;
 margin: 0;
}
dl.asterisk dd	{
	padding:3px 0;
 flex-basis: calc(100% - 22px); 
}
@media screen and (max-width: 768px)  {
dl.asterisk	{
	font-size: 1.4rem !important;
}
}


/* -------------------------------------------------

お問い合わせ入力フォーム

------------------------------------------------- */
.Contact__Form	{
	margin: -20px 0 0;
}
.Contact__Form .text	{
	font-size: 1.8rem;
	line-height: 2;
}
.Contact__Form a	{
	text-decoration: underline;
	color: #C50118;
}
.Contact__Form a:hover	{
	text-decoration: none;
	transition: .3s;  
}

form.mail_form	{
 width:100%;
	font-weight:400;
	margin-top: 50px;
}
form.mail_form dl	{
 width:100%;
 overflow:hidden;
 border-top:1px solid #cccccc;
 border-bottom:1px solid #cccccc;
	margin: 0 0 40px;
	padding-top: 20px;
	display: flex;
	flex-flow: row wrap;
}
form.mail_form dl dt	{
	flex-basis: 300px; 
 text-align:left;
 border-top:1px solid #cccccc;
	padding:40px 0;
	font-weight:normal;
}
form.mail_form dl dd	{
	flex-basis: calc(100% - 300px); 
 border-top:1px solid #cccccc;
	padding:40px 0;
}
form.mail_form dl dt:first-child,
form.mail_form dl dt:first-child+dd	{
 border:none;
 background:none;
	padding:20px 0 40px;
}
form.mail_form input	{
 border:2px solid #cccccc;
 border-radius:5px;
 background:#fafafa;
	height:50px;
	padding:7px 10px 10px 10px;
}
form.mail_form input:focus	{
 box-shadow:0px 0px 5px #cccccc;
	background-color:#ffffff;
	outline:0;
}
form.mail_form ul li	{
 list-style-type:none;
}
form.mail_form textarea#mail_contents_inq {
	width:100%;
 height:200px;
 border:2px solid #cccccc;
 border-radius:5px;
 background:#fafafa;
	padding:7px 10px 10px 10px;
	resize:none;
}
form.mail_form textarea#mail_address	{
	width:100%;
 height:100px;
 border:2px solid #cccccc;
 border-radius:5px;
 background:#fafafa;
	padding:7px 10px 10px 10px;
	resize:none;
}
form.mail_form textarea#mail_contents_inq:focus,
form.mail_form textarea#mail_address:focus	{
 box-shadow:0px 0px 5px #cccccc;
	background-color:#ffffff;
	outline:0;
}
form.mail_form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:#999999 !important;
		font-size: 1.6rem !important;
		font-weight: normal !important;
}
form.mail_form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#999999 !important;
		font-size: 1.6rem !important;
		font-weight: normal !important;
}
::placeholder{ /* Others */
	 color:#999999 !important;
		font-size: 1.6rem !important;
		font-weight: normal !important;
}
@media screen and (max-width: 800px)  {

.Contact__Form .text	{
	font-size: 1.6rem;
}
form.mail_form	{
	margin-top: 0px;
}
form.mail_form dl	{
 width:auto;
 border-top:none;
 border-bottom:none;
 margin: 0 0 25px;
	flex-flow: column wrap;
}
form.mail_form textarea#mail_contents_inq,
form.mail_form textarea#mail_address	{
 max-width:100%;
}
form.mail_form dl dt	{
	flex-basis: 100%; 
}
form.mail_form dl dd	{
	flex-basis: 100%; 
}
form.mail_form dl dt	{
 width:auto;
	padding:35px 0 10px;
	border-top:none;
	font-weight:500;
}
form.mail_form dl dd	{
 width:auto;
	border-top:none;
	padding:5px 0 0;
}
form.mail_form dl dt:first-child	{
 border:none;
 background:none;
	padding:1px 0 10px;
}
form.mail_form dl dt:first-child+dd	{
 border:none;
 background:none;
	padding:0 0 10px;
}
}
@media screen and (max-width: 768px) { 
.Contact__Form	{
	margin: -10px 0 0;
}
}
@media screen and (max-width: 480px) { 
.Contact__Form .text	{
	font-size: 1.4rem;
line-height: 1.7;
	}
form.mail_form input,
form.mail_form textarea#mail_contents_inq,
form.mail_form textarea#mail_address	{
	font-size:1.4rem;
}
form.mail_form input::-webkit-input-placeholder { 
		font-size: 1.4rem !important;
}
form.mail_form input:-ms-input-placeholder {
		font-size: 1.4rem !important;
}
::placeholder{
		font-size: 1.4rem !important;
}
}

/* 候補日
================================================== */
.kohobi {
		display: inline-flex;
		align-items: center;
		margin-bottom: 10px;
}
.kohobi span {
		margin: 0 5px;
}
.kohobi p {
	margin: 0;
}
@media screen and (max-width: 480px)  {
.kohobi {
	flex-direction: column;
	align-items:flex-start;
}
.kohobi div:last-of-type {
	margin-top: 10px;
}
}

/* 送信ボタン
================================================== */
#send_btn[type="submit"]{
 width : auto;
 height : auto;
 padding : 10px 100px;
 vertical-align : middle;
 color : #ffffff;
 background:#00AE8D;
 border : 1px solid #00AE8D;
 border-radius : 3px;
	font-style: normal;
 font-weight : 500;
	transition: .3s;
	position:relative;
	font-size: 2rem;
}
#send_btn[type="submit"]:hover{

 cursor : pointer;
 color : #333;
 background:	#fff;
 border : 1px solid #999;
}
#send_btn[type="submit"][disabled] {
 color : #ddd;
 background:#fff;
 border : 1px solid #cccccc;
	cursor:default;	
}
@media screen and (max-width: 768px)  {
#send_btn[type="submit"]{
	font-size: 1.8rem;
}
}
@media screen and (max-width: 480px)  {
#send_btn[type="submit"],
#send_btn[type="submit"][disabled]{
 width :	100%;
 padding : 15px 0px;
	font-size:1.6rem;
}
}

/*  ラジオボタン／チェックボックス
================================================== */
.label_list {
 margin: auto;
 max-width: 100%;
}

/*  ラジオボタンのレイアウト
================================================== */
.label_list_item3 {
	display: inline-flex;
	margin:3px 0;
}
.label_list_item3 label {
	position: relative;
	width: auto;
	margin-right: 30px;
}
.label_list_item3:last-of-type label {
	margin-right: 0px;
}
.label_list_item3 label input[type="radio"] + span {
 position: relative;
 padding: 0 0 0 30px;
}
@media screen and (max-width: 568px)  {
.label_list_item3 {
	display: flex;
	flex-direction: column;
}
.label_list_item3 label {
	margin-bottom: 15px;
}
.label_list_item3:last-child label {
	margin-bottom: 0px;
}
}
@media screen and (max-width: 480px)  {
.label_list_item3 {
}
.label_list_item3 label input[type="radio"] + span {
	font-size:14px;
}
.label_list_item3 label {
	font-size:14px;
}
}

/*  ラジオボタンの色
================================================== */
.radio label span {
	font-weight:normal;
}
.radio label input[type="radio"] {
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
}
.radio label input[type="radio"] + span::before {
 position: absolute;
 display: inline-block;
 content: '';
 box-sizing: border-box;
 border-radius: 22px;
}
.radio label input[type="radio"] + span::before {
 z-index: 0;
 top: 2px;
 left: 0;
 background-color: transparent;
 width: 22px;
 height: 22px;
 border: 2px solid #00AE8D;
}
.radio label input[type="radio"]:checked + span::before {
 border-width: 6px;
}
@media screen and (max-width: 480px)  {
.radio label input[type="radio"] + span::before {
 top: 0;
}
}

/*  チェックボックス
================================================== */
.label_list_item2 {
	display: inline-flex;
	margin:3px 0;
}
.label_list_item2 label {
	position: relative;
	width: auto;
	margin-right: 30px;
}
.label_list_item2 label input[type="checkbox"] + span {
 position: relative;
 padding: 0 0 0 30px;
}
@media screen and (max-width: 568px)  {
.label_list_item2 {
	display: flex;
	flex-direction: column;
	align-items:stretch;
}
}
@media screen and (max-width: 480px)  {
.label_list_item2 label input[type="checkbox"] + span {
	font-size:1.4rem;
}
.label_list_item2 label {
	margin-right: 0px;
}
}

/*  チェックボックス（同意）
================================================== */
.label_list_item {
	margin-bottom:10px;
}
.label_list_item label {
 position: relative;
	width: auto;
	display: flex;
	justify-content: center;
}
.label_list_item label input[type="checkbox"] + span {
 position: relative;
 padding: 0 0 0 30px;
}
.checkbox_item {				/* 同意用 */
	margin-bottom: 30px;
}
@media screen and (max-width: 480px)  {
.label_list_item label input[type="checkbox"] + span {
	font-size:1.4rem;
}
}

/*  チェックボックスの色
================================================== */
.checkbox {
	text-align: center;
}
.checkbox label {
	display: inline-block;
}
.checkbox label span {
	font-weight:normal;
}
.checkbox label input[type="checkbox"] {
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
}
.checkbox label input[type="checkbox"] + span::before,
.checkbox label input[type="checkbox"] + span::after {
 position: absolute;
 /*top: 0;*/
 top: 2px;
 left: 0;
 display: inline-block;
 content: '';
 box-sizing: border-box;
}
.checkbox label input[type="checkbox"] + span::before {
 z-index: 0;
 background-color: #fff;
 width: 22px;
 height: 22px;
 border: 2px solid #00AE8D;
 border-radius: 5px;
}
.checkbox label input[type="checkbox"] + span::after {
 z-index: 1;
 margin: 5px 8px;
 width: 6px;
 height: 9px;
}
.checkbox label input[type="checkbox"]:checked + span::before {
 background-color: #00AE8D;
}
.checkbox label input[type="checkbox"]:checked + span::after {
 border: 2px solid #ffffff;
 border-width: 0 2px 2px 0;
 -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
         transform: rotate(45deg);
}
@media screen and (max-width: 568px)  {
.checkbox label span {
 display: inline-block;
	padding:0 0 5px 35px;
	font-weight:normal;
}
.checkbox label span.nisuu {
	padding:0;
}
}
@media screen and (max-width: 480px)  {
.checkbox label input[type="checkbox"] + span::before,
.checkbox label input[type="checkbox"] + span::after {
 top: 0;
}
}

/*  チェックボックスの中にあるtext入力欄
================================================== */
.checkbox label input[type="text"] {
 font-weight:normal;
}

/*  必須/任意
================================================== */
/* 必須項目 */
.Font_Req {
	color:#E40003;
	margin:0 5px 0 0;
	font-weight:500;
}
.Font_Req.waku {
	color:#E40003;
	font-size:12px !important;
	text-align: center;
	padding: 0px 7px;
	border: 1px solid #E40003;
	border-radius: 4px;
}
.Font_Req.waku.blank {
	margin-left: 10px;
}

/* 任意項目 */
.Font_Any	{				
	margin:0 5px 0 0;
	font-weight:500;
}
.Font_Any.waku {
	font-size:12px !important;
	text-align: center;
	padding: 0px 7px;
	border: 1px solid #333333;
	border-radius: 4px;
}
.Font_Any.waku.blank {
	margin-left: 10px;
}

/* inputの幅
================================================== */
.Form_w01 {		/*  年月日、電話  */
	width:240px;
}
.Form_w02 {		/*  名前  */
	max-width: 400px;
	width:100%;
}
.Form_w03 {		/*  メール  */
	max-width: 500px;
	width:100%;
}
.Form_w04 {
	width:100%;
}



@media screen and (max-width: 768px)  {
.Font_Req {
	font-weight:400;
}
.Form_w02 {
	max-width: 400px;
	width:100%;
}
}

@media screen and (max-width: 480px)  {
.Font_Req.waku {				/*   必須項目   */
	line-height:1.2rem;
	font-size:1.2rem !important;
	padding: 1px 7px;
	font-weight:500 !important;
}
}

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

/* -------------------------------------------------

文字下線

------------------------------------------------- */
.under {
  background: linear-gradient(transparent 90%, #E67A7A 90%);
}

/* -------------------------------------------------

文字サイズ

------------------------------------------------- */
.fs18,.fs14	{
	font-weight: 400;
}
.fs18	{
	font-size: 1.8rem;
	line-height: 2;
}
.fs16	{
	font-size: 1.6rem;
}
.fs14	{
	font-size: 1.4rem;
}
@media screen and (max-width: 768px)  {
.fs18	{
	font-size: 1.6rem;
	line-height: 1.8;
}
}
@media screen and (max-width: 480px)  {
.fs18	{
	line-height: 1.6;
}
.fs16	{
	font-size: 1.4rem;
}
}

/* -------------------------------------------------

余白

------------------------------------------------- */
.mb_10px	{
	margin: 0 0 10px;
}
.mr_5px	{
	margin-right: 5px;
}
.mt_10px	{
	margin: 10px 0 0;
}
.mt-b_10px	{
	margin: 10px 0;
}
@media screen and (max-width: 768px)  {

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

}

.button02 {
	border: 2px solid #E67A7A;
 background-color:#E67A7A;
 border-radius: 14px;
 position: relative;
 display: flex;
 justify-content:center;
	align-items: center;
 padding: 10px 25px;
 color: #272343;
 transition: 0.3s ease-in-out;
 font-weight: 700;
	font-size: 1.8rem;
}
.button02:hover {
	/*border: 2px solid #df001b;
 background-color:#df001b;
	color: #ffffff;*/
	opacity: 0.7;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
	transition: .3s;
}
@media screen and (max-width: 480px)  {
.button02 {
	font-size: 1.6rem;
}
	}

.pdf_Box02	{
	display: flex;
	/*margin: 30px auto;*/
}
.pdf_Box02 a	{
	margin: 0 10px;
}
@media all and (max-width: 768px) {
.pdf_Box02	{
	flex-direction: column;
}
.pdf_Box02 a	{
	margin: 10px 0;
}
}
@media all and (max-width: 480px) {
.pdf_Box02	{
	/*margin: 15px auto;*/
	align-items: center;
}
}
	
	
/* ボタンサイズ
================================================== */
.btn-300px_80px {
 max-width: 300px;
 width: 100%;
	height: 80px;
}

@media screen and (max-width: 480px)  {
.btn-300px_80px {
	height: 60px;
}
}
@media screen and (max-width: 414px)  {
.btn-300px_80px {
	max-width: 100%;
}
}



/* 入校手順
================================================== */
.KK_flow__wrp	{
	max-width: 800px;
	width: 100%;
	margin: 0 auto 100px;
}
.KK_flow__wrp:last-child	{
	margin: 0 auto;
}
.KK_flow__Box	{
	border: 4px solid #272343;
	border-radius: 14px;
	background-color: #ffffff;
	box-shadow: 10px 10px 0px -1px #7ec2c2;
	padding: 40px 50px;
	position: relative;
}
.KK_flow__Box::after	{
		content: "";
	 width: 50px;
  height: 40px;
  background-color: #272343;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  border-radius: 0 0 20px 20px;
		position: absolute;
		left: 50%;
  transform: translateX(-50%);
		margin-top: 80px;
}
.KK_flow__wrp:last-child .KK_flow__Box::after	{
	display: none;
}

.KK_flow__Box h3	{
	display: flex;
	justify-content: center;
	font-weight:600;
	font-size:3.3rem;
	color: #272343;
	line-height: normal;
	position:relative;
	margin-bottom: 30px;
}
.KK_flow__Box p	{
	font-weight:600;
	font-size:2rem;
	color: #272343;
	line-height: 2;
	position: relative;
}
.KK_flow__Box p.center	{
	text-align: center;
}
.KK_flow__Box .small	{
	display: block;
	font-size: 1.5rem !important;
}
@media screen and (max-width: 1100px)  {
.KK_flow__wrp	{
	width: 95%;
}
}
@media screen and (max-width: 768px)  {
.KK_flow__wrp	{
	margin: 0 auto 70px;
}
.KK_flow__Box	{
	padding: 30px 40px;
}
.KK_flow__Box::after	{
	 width: 40px;
  height: 30px;
		margin-top: 60px;
}
.KK_flow__Box h3	{
	font-size:2.8rem;
	margin-bottom: 30px;
}
.KK_flow__Box p	{
	font-size:1.8rem;
}
.KK_flow__Box .small	{
	font-size: 1.4rem !important;
}
}
@media screen and (max-width: 640px)  {
.KK_flow__Box p	{
	font-size:1.6rem;
}
.KK_flow__Box .small	{
	font-size: 1.2rem !important;
}
}
@media screen and (max-width:480px)  {
.KK_flow__wrp	{
	margin: 0 auto 55px;
}
	
.KK_flow__Box	{
	border: 2px solid #272343;
	box-shadow: 8px 8px 0px -1px #7ec2c2;
	padding: 25px 20px;
}
.KK_flow__Box::after	{
	 width: 30px;
  height: 20px;
		margin-top: 50px;
}

.KK_flow__Box h3	{
	font-size:2rem;
	margin-bottom: 20px;
}
.KK_flow__Box p	{
	font-size:1.4rem;
}
.KK_flow__Box .small	{
	font-size: 1rem !important;
}
}
@media screen and (max-width:414px)  {
.KK_flow__Box h3	{
	justify-content:flex-start;
	margin-left: 40px;
	margin-bottom: 20px;
}
.KK_flow__Box p.center	{
	text-align: left;
}
}

/* margin
================================================== */
.mt_15px {
	margin-top: 15px;
}

/* width
================================================== */
.width {
	max-width: 552px !important;
	width: 100% !important;
	margin: auto;
}
@media screen and (max-width: 768px)  {
.width {
	max-width: 497px !important;
}
}
@media screen and (max-width: 640px)  {
.width {
	max-width: 442px !important;
}
}