@charset "UTF-8";
/* lp form.css */

#div_contactNagare {
    padding-top: 129px;
}


/*========= all ===============*/
* {
	letter-spacing: .1em !important;
	box-sizing: border-box;
}
a:hover {
	color: inherit;
	text-decoration: none;
}
a.a_underLine {
    text-decoration: underline !important;
}

/*========= common ===============*/
body {
  width: 100%;
  margin: 0 auto;
  color: #4d4d4d;
}

/* font */
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
ol,
li,
p,
dt,
dd  {
    font-family: 'Noto Sans JP' !important;
}

/* blk */
.sp_blk { display:block !important; }
.pc_blk { display:none  !important; }

/* br */
.sp_br    { display:inline; }
.pc_br    { display:none;   }
.tab_br   { display:none;   }

/* flex_box */
.flex_box {
    display: flex;
    flex-wrap: wrap;
}


/* heading & li & p */
/* heading */
h2,
h3 {
	font-weight: bold;
	text-align:  center;
	line-height: 1.5em;
	letter-spacing: .1em;
	color: #2196c9;
}

h2   { font-size:20px; }

h3 { line-height:1.75em; }

.h2decoL {
	display: flex;
	align-items: center;
	justify-content: center;
}
.h2decoL:before {
	content: "";
	width:  100%;
	max-width: 50px;
	height: 46px;
	display: inline-block;
	margin-right: 10px;
	background: no-repeat center;
	background-size: contain;
}

.h2decoL span {
	background: linear-gradient(transparent 80%, #faf499 0%);
}

/* cont */
li,
p {
	text-align:justify;
	line-height: 2em;
}

p {
	font-size:14px;
	font-weight:bold;
}


.small,
small {
    font-size: 85% !important;
    line-height: 1 !important;
}

.hB_cont,
#sec_topNews .cont_title, { font-size:16px; }

.hB_cont { color:#4d4d4d; }
.blue    { color:#2196c9; }

.cont_title {
	font-size: 16px;
	text-align: center;
	margin-bottom: 15px;
}


/* margin & pad */
/* mar */
.marS_B  { margin-bottom:10px !important; }
.marM_B  { margin-bottom:15px !important; }
.marL_B  { margin-bottom:20px !important; }
.marXL_B { margin-bottom:30px !important; }

/* mar(PCとSPで別) */
.marXL-L_B { margin-bottom:30px !important; }
.marM-L_B  { margin-bottom:15px !important; }
.marXL-M_B { margin-bottom:30px !important; }


/* pad */
.padS_TB  { padding:10px 0 !important; }
.padM_TB  { padding:15px 0 !important; }
.padL_TB  { padding:20px 0 !important; }
.padXL_TB { padding:30px 0 !important; }

.padS_T  { padding-top:10px !important; }
.padM_T  { padding-top:15px !important; }
.padL_T  { padding-top:20px !important; }
.padXL_T { padding-top:30px !important; }

.padS_B  { padding-bottom:10px !important; }
.padM_B  { padding-bottom:15px !important; }
.padL_B  { padding-bottom:20px !important; }
.padXL_B { padding-bottom:30px !important; }


/* btn */
.form .btn,
.btn_g {
	width: 100%;
	max-width: 320px;
	letter-spacing: 0;
	margin-left:  auto;
	margin-right: auto;
	font-weight: bold;
	text-align: center;
}
.form .btn > a,
button.btn {
	width: 100%;
	display: inline-block;
	text-align: center;
	border-radius: 10px;
	padding: 20px;
	color: #fff;
	background-color: #2196c9;
}

.btn_g > a {
	width: 100%;
	display: inline-block;
	text-align: center;
	border-radius: 10px;
	padding: 20px;
	color: #fff;
	background-color: #87c13f;
}

.btn_arrow a,
button.btn_arrow {
	display: flex;
	position: relative;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin: 0 auto; 
	padding-left: 0;
}

.btn_arrow a:after,
button.btn_arrow:after {
	content: "";
	width:  17px;
	height: 25px;
	display: inline;
	position: absolute;
	right: 20px;
	background: url(../../img/top/arrowR.svg) no-repeat center;
	background-size: contain;
}


/* wrap */
/* background-decoration */

/* ななめのボーダー */
.bg_border {
	background: repeating-linear-gradient(-45deg, #eef4f7, #eef4f7 2px, #fff 2px, #fff 5px);
}

/* 格子なチェック */
.bg_check {
background-image:
	repeating-linear-gradient(
	90deg,
	#dcf9f7 ,
	#dcf9f7 2px,
	transparent 2px,
	transparent 32px
	),
	repeating-linear-gradient(
	0deg,
	#dcf9f7 ,
	#dcf9f7 2px,
	#fff 2px,
	#fff 32px
	);
}

/* 単色ブルー */
.bg { background-color: #eff9ff !important; }

/* 背景に装飾をプラス */
.bg_deco:before,
.bg_deco:after  {
	content: "";
	display: block;
	position: absolute;
	background: no-repeat center;
}

/* cover */
.bgImg_fit {
	background: no-repeat center;
	background-size: cover;
}


/* div内の左右にダブルコーテーションの背景 */
.BGcoat {
	position: relative;
	z-index: 1:;
}
.BGcoat:before {
	content: "";
	display: block;
	width: 100%;
	height: 115%;
	position: absolute;
	background-position: left  0% top 2%,
						 right 0% top 3%;
	background-repeat:   no-repeat;
	background-size:     11%;
	z-index: -1;
}

/* PC画面でのみ、旗のsvgの背景画像を追加 */
/* PC画面でのみ、キラキラしたsvgの背景画像を追加 */
.BGflag,
.kiraDeco {
  position: relative;
  background-image: none;
  z-index: 1;
}

/* ページ内リンクの位置調整(ヘッダー分) */
/* PCのheader高さ66px + 余白30px */
.pageLink_position:before {
    content: "";
    display: block;
    height: 96px;
    margin-top: -96px;
}


/* ------------ media screen ------------ */
@media screen and (min-width: 550px) {
	/*==== common ====*/
	/* br */
	.tab_br { display:inline; }

	section > .wrap,
	div > .wrap,
	.form > .wrap {
		max-width: 550px;
		margin-left:  auto;
		margin-right: auto;
	}
	/*==== お知らせ ====*/
	.news_box .news_cont { width:100%; }
}


@media screen and (min-width: 769px) {
    /*==== common ====*/
    /* blk */
    .sp_blk { display:none  !important;  }
    .pc_blk { display:block !important; }
    .flex_box.sp_blk  { display:none; }
    .flex_box.pc_blk  { display:flex !important; }

    /* br */ 
    .sp_br    { display:none;   }
    .pc_br    { display:inline; }
    .tab_br   { display:none;   }

    /* heading & li & p */
    /* heading */
    h1,
    h2 { font-size:40px; }

    h1 {
    	max-width: 805px;
    	letter-spacing: .1em;
    	margin-left: auto;
    	margin-right: auto;
    }
	h1:before,
	h1:after  { height:8px; }

    h1 .sp_br { display:inline; }

	.h2decoL:before {
		max-width: 80px;
		height: 82px;
		margin-right: 20px;
	}

	h2.marL_B { margin-bottom:40px !important; }

	/* pなど */
	li,
	p  { font-size:16px; }

    .cont_title { font-size:25px; }
    .hB_cont    { font-size:26px; }
    
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    div,
    ol,
    li,
    p,
    dt,
    dd  {
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",'Noto Sans JP', Meiryo, sans-serif !important;
    }

	/* margin & pad */
	/* mar */
	.marXS_B { margin-bottom:10px !important; }
	.marS_B  { margin-bottom:20px !important; }
	.marM_B  { margin-bottom:40px !important; }
	.marL_B  { margin-bottom:60px !important; }
	.marXL_B { margin-bottom:80px !important; }
	
	/* mar(PCとSPで別) */
    .marXL-L_B { margin-bottom:60px !important; }
    .marM-L_B  { margin-bottom:60px !important; }
    .marXL-M_B { margin-bottom:40px !important; }
    
	/* pad */
	.padXS_TB { padding-top:10px !important; padding-bottom:10px !important; }
	.padS_TB  { padding-top:20px !important; padding-bottom:20px !important; }
	.padM_TB  { padding-top:40px !important; padding-bottom:40px !important; }
	.padL_TB  { padding-top:60px !important; padding-bottom:60px !important; }
	.padXL_TB { padding-top:80px !important; padding-bottom:80px !important; }

	.padXS_T { padding-top:10px !important; }
	.padS_T  { padding-top:20px !important; }
	.padM_T  { padding-top:40px !important; }
	.padL_T  { padding-top:60px !important; }
	.padXL_T { padding-top:80px !important; }

	.padXS_B { padding-bottom:10px !important; }
	.padS_B  { padding-bottom:20px !important; }
	.padM_B  { padding-bottom:40px !important; }
	.padL_B  { padding-bottom:60px !important; }
	.padXL_B { padding-bottom:80px !important; }

	/* btn */
	.form .btn > a,
	.btn_g > a {
		font-size: 24px;
	}
	.btn.btnWid > a {
		max-width: 340px;
	}
	/* main直下 */
	#mv {
		max-width: 1200px;
		margin-left:  auto;
		margin-right: auto;
		padding-left:  50px;
		padding-right: 50px;
	}
	section > .wrap,
	div > .wrap,
	.form > .wrap {
	    width: 92%;
		max-width: 1200px;
		margin-left:  auto;
		margin-right: auto;
		padding-left:  50px;
		padding-right: 50px;
	}

	.wid800 {
		max-width: 800px;
		margin-left:  auto;
		margin-right: auto;
	}
	
	/* background-decoration */
    /* PC画面でのみ、旗のsvgの背景画像を追加 */
    .BGflag:before {
        content: "";
        width:  100vw;
        height: 100%;
        max-width: 1300px;
        display:  block;
        position: absolute;
        background-size:   45%;
        background-repeat: no-repeat;
        background-position: left top;
        top: -150px;  /* section上余白60px + 隠したい分 */
        left:  calc(50% - 50vw);
        z-index: -1;
      }
      /* PC画面でのみ、キラキラしたsvgの背景画像を追加 */
      .kiraDeco:before {
        content: "";
        width:  100%;
        height: 105%;
        display: block;
        position: absolute;
        background-size:   45%;
        background-size: 110px,65px;
        background-repeat: no-repeat;
        background-position: left bottom 35%, left 35% bottom;
        top:   0;
        left: -8%;
        z-index: -1;
      }
}
@media screen and (min-width: 995px) {
    /* div内の左右にダブルコーテーションの背景 */
	.BGcoat:before {
		background-position: left  0% bottom 0%,
							 right 0% top    5%;
	}
}

/*========= 下層共通予定 ===============*/
/* heading  */
/* h2 */
h2.h2_bgBorder {
	font-size: 20px;
	text-align: left;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	padding: 15px;
	color: #4d4d4d;
	border-top: 4px solid #2196c9;
}
.h2_bgBorder::before {
	content: "";
	width: 100%;
	display: inline-block;
	/* pc・sp共通? */
	margin-right: 10px;
	background: no-repeat center;
	background-size: contain;
}
/* h3 */
h3.h3_underLine {
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	margin-bottom:  20px;
	padding-bottom: 15px;
	color: #4d4d4d;
	border-bottom: 1px solid #2196c9;
}
/* content */
ol.number {
	list-style: inside auto;
}
li,
p  {
	font-size: 14px;
	font-weight: normal;
	text-align: justify;
}
span.small {
  font-size: 85%;
  line-height: 1;
}
p.heading_read {
    font-weight: bold !important;
}
/* decoration */
/* 背景色を白に(見出し部分に使用) */
.ttl_bg_w {
    background-color: #fff;
}
/* テキスト下の区切りのボーダー(上下「SP余白L」分のアキ) */
.cont_borderB {
	margin-bottom:  20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #2196c9;
}
/* ----- text_color:#4d4d4d ----- */
.course_contents_box,
.group_box {
    color: #4d4d4d;
}
/*========= 追加した共通 ===============*/
h2.h2_bgBorder_g {
  font-size: 20px;
  text-align: left;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 15px;
  color: #4d4d4d;
  border-top: 4px solid #86c03f;
}
.bg_border_g {
  background: repeating-linear-gradient(
    -45deg, #eeffe6, #eeffe6 2px, #fff 2px, #fff 5px);
  }
.h2_bgBorder_g::before {
	content: "";
	width: 100%;
	display: inline-block;
	/* pc・sp共通? */
	margin-right: 10px;
	background: no-repeat center;
	background-size: contain;
}
/* heading */
.h2_bgBorder_g::before {
	height: 28px;
	max-width: 25px;
	/* あとで画像入れる */
	background-image: url(../../img/individual_guidance/icon_human_g.svg);
	background-size: contain;
}

/*========= contact ===============*/
/* 背景装飾(後ほど下層共通へ入れる予定) */
.border_card { border:4px solid #2196c9; }
.thin_blue   { background-color:#eef4f7; }

/* メインビジュアルの画像(適時変更) */
#lower_mv {
	background-image:url(../../img/contact/contact_mvSP.jpg);
	background-position: right bottom;
}
/* heading */
.h2_bgBorder::before {
	height: 25px;
	max-width: 32px;
	/* あとで画像入れる */
	background-image: url(../../img/contact/contact_icon.svg);
	background-size: contain;
}
h2 {
	font-size: 20px;
	margin-bottom: 30px; /* XL */
	color: #4d4d4d;
}
/* decoration */
.contact {
	color: #4d4d4d;
}
/* flexとflexされた4項目 */
.flow .flex_box {
	width: 100%;
	justify-content: space-between;
	margin-bottom: 30px; /* XL */
}
.flow .card {
	width: 48.5%;
	height: auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	/* absoluteされたマル部分の上余白と下余白L */
	margin:  15px 0 20px;
	padding:  0px 10px 10px;
}
.flow .card h3 {
    height: 80px;
	font-size: 16px;
	line-height: 1.4em;
	letter-spacing: .05em;
    display: flex;
    align-items: center;
    justify-content: center;
	white-space: nowrap;
	padding: 30px 0 20px; /* XL_T L_B */
	color: #4d4d4d;
}
.flow .card:nth-of-type(n + 3) { margin-bottom:0; }

.flow .flex_box .abso_number {
	position: relative;
	z-index: 1;
}
.flow .flex_box .abso_number span {
	width:  35px;
	height: 35px;
	font-size: 20px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -18px;
	left: calc(50% - 17.5px);
	border-radius: 35px;
	color: #fff;
	background-color: #2196c9;
	z-index: 1;
}
/* カード内薄青いボックス */
.flow .card .thin_blue {
	width:  auto;
	height: auto;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 10px;
}
.flow .card .thin_blue p {
	width:  100%;
	height: 100%;
	min-height: 98px;
}
/* [お問い合わせから入塾の流れ]の下のテキスト */
.flow_cont {
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px; /* XL */
}
a.flow_cont {
    display: block;
}
.flow_cont img {
    width: 100%;
}
select[name="input[cource]"] {
    font-weight: bold !important;
    appearance: auto;
}


/*========= min-769 ===============*/
@media screen and (min-width: 769px) {
    h2 { font-size:30px; }
	.flow .sp_br  { display:none; }
	
	/* メインビジュアルの画像(適時変更) */
	#lower_mv {
	    background-image:url(../../img/contact/contact_mvPC.jpg);
	}
	.flow .flex_box .abso_number span {
		width:  50px;
		height: 50px;
		font-size: 30px;
		top: -25px;
		left: calc(50% - 25px);
		border-radius: 50px;
		color: #fff;
	}
	.flow .card {
		margin-bottom: 20px;
		/* absoluteなマル部分の上余白 */
		margin-top: 25px;
		padding:  0px 20px 20px;
	}
	.flow .card h3 { 
		font-size:20px;
		height: 95px;
		padding: 40px 0 20px; /* M_T S_B */
	}
    /* カード内薄青いボックス */
    .flow .card .thin_blue p {
    	min-height: 84px;
    }
	/* [お問い合わせから入塾の流れ]の下のテキスト */
	.flow_cont {
	    text-align: left;
	    margin-bottom:40px; /* M */
	} 
}
/* #div_contactNagare */
#div_contactNagare {
	margin-bottom: 60px;
}
#div_contactNagare > * {
    width: 100%;
    max-width: 900px;
    padding-left:  50px;
    padding-right: 50px;
    margin-left:  auto;
    margin-right: auto;
}
#div_contactNagare h2 {
    margin-bottom: 60px;
}
#div_contactNagare .flex_box {
	flex-wrap: nowrap;
	justify-content: space-between;
}
#div_contactNagare .card {
	width: calc(100%/2 - 20px);
	position: relative;
	border: 3px solid #00a0dc;
	padding: 40px;
	padding-top: calc(min(2.5vw,25px)/2 + 30px);
}
#div_contactNagare .num_maru {
	width:  5vw;
	height: 5vw;
	max-width:  50px;
	max-height: 50px;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	position: absolute;
	top:  calc(max(-50px,-5vw)/2);
	left: calc(50% - min(2.5vw,25px));
	border-radius: 100px;
	background-color: #00a0dc;
}
#div_contactNagare .num_maru span {
	font-size: min(3vw,30px);
	color: #fff;
	transform: translateX(.05em);
}
#div_contactNagare p {
	font-size: min(2vw,20px);
	color: #4d4d4d;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width:768px) {
    #div_contactNagare {
        padding-top: 90px;
        margin-bottom: 40px;
    }
    #div_contactNagare h2 {
         margin-bottom: 30px;   
    }
    #div_contactNagare > * {
        width: 92%;
        padding-left:  0;
        padding-right: 0;
    }
    #div_contactNagare .card {
        width: calc(100%/2 - 10px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 15px 15px;
    }
    #div_contactNagare p {
        font-size: 12px;
        line-height: 1.5;
    }
    #div_contactNagare .num_maru {
        width:  35px;
        height: 35px;
        top:   -20px;
        left:  calc(50% - 17.5px);
    }
    #div_contactNagare .num_maru span {
        font-size: 24px;
    }
}


/* ========== パーツ ========== */
.form_cmt {
    margin-top: 20px;
}
.form_cmt p {
    font-weight: normal !important;
}
.form_cmt p a {
    font-weight: bold;
}