@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

body {
	min-height: 100vh; color: #333; background: #f2f8ff;
	font-size: 16px; font-weight: normal; line-height: 1.8;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%; position: relative;

	font-feature-settings: "palt";
	/* font-feature-settings: "palt"; こちらの指定をすると文字が詰まりすぎてしまう場合があるので、letter-spaceingの記述が必要です。デザイン上不要であれば削除してください。
	縦書きテキストだと崩れる可能性があります。縦書きの項目は下記のようにしてください。
	.v_rl{ writing-mode: vertical-rl; font-feature-settings: "palt" 0;}*/
}
.v_rl { writing-mode: vertical-rl; font-feature-settings: "palt" 0; }
.serif {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

/* noto-sans-jp-regular - japanese_latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/noto-sans-jp-v52-japanese_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* noto-sans-jp-700 - japanese_latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/noto-sans-jp-v52-japanese_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  .noto { font-family: "Noto Sans JP","sans-serif";}


input,
select,
textarea { font-size: 16px;}

div { box-sizing: border-box;}

a { color: #000; text-decoration: none;}
a:hover { text-decoration: underline;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; top:0; left: 0; z-index: 99; }
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

.ofi { object-fit: cover; width: 100%; height: 100%;}
.sp { display: none;}

.inner_md { width: 1200px; max-width: 92%; margin: 0 auto; }
.inner_sm { width: 1100px; max-width: 92%; margin: 0 auto; }

.btn_mail { display: block; width: 325px; padding: 21px 0; text-align: center; color: #fff; font-weight: bold; background: #ff8001; border-radius: 40px; font-size: 20px; transition: 0.3s ease-in-out;}
.btn_mail img { margin: 0 10px 0 0; vertical-align: middle;}
.btn_mail:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);}

@media screen and (min-width: 601px) {
	body { min-width: 1100px; font-size: 15px; }
	.fixed { min-width: 1100px; }
}
@media screen and (max-width: 600px) {
	.sp { display: block;}
	.pc { display: none !important;}

	.btn_mail { display: flex; justify-content: center; align-items: center; width: 280px; font-size: 16px; padding: 10px 0;}
	.btn_mail img { width: 18px; margin: 0 5px 0 0;}
	.js-scrollable table { width: 1200px !important;}
}


/* ---------------------------------------------------
header
------------------------------------------------------ */
header { display: flex; width: 100%; padding: 15px 15px 15px 25px; background-color: #fff; justify-content: space-between; box-sizing: border-box; align-items: center;}
header a { display: block; width: 180px; padding: 11px 0; text-align: center; color: #fff; font-weight: bold; background-image: linear-gradient(90deg, rgba(0, 81, 164, 1), rgba(0, 125, 197, 1) 50%, rgba(0, 168, 228, 1)); border-radius: 40px; transition: 0.3s ease-in-out;}
header a img { margin: 0 10px 0 0; vertical-align: middle;}
header a:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);}

@media screen and (max-width: 600px) {
	header { padding: 15px 4%;}
	header >img { width: 86px;}
	header a { display: flex; align-items: center; justify-content: center; width: 50%; font-size: 14px;}
	header a img { width: 18px; margin: 0 5px 0 0;}
}


/* ---------------------------------------------------
#main_img
------------------------------------------------------ */

#main_img { position: relative; background-image: linear-gradient(90deg, rgba(224, 247, 255, 1), rgba(195, 231, 252, 1) 50%, rgba(170, 199, 230, 1)); overflow: hidden;}
#main_img::before { position: absolute; content: ""; display: block; width: 1300px; height: 650px; background: url(../../img/main_bg.png)no-repeat left top; top: 30px; left: 50%; transform: translateY(0%) translateX(-50%); -webkit-transform: translateY(0%) translateX(-50%);}
#main_img div { position: relative; width: 1300px; max-width: 92%; margin: 0 auto; padding: 120px 0; z-index: 2;}
#main_img >img { position: absolute; left: calc(50% - 0px); top: -25px; z-index: 1;}
#main_img h1 { font-size: 65px; color: #02209e; letter-spacing: 3px;}
#main_img h1 span { display: block; background: linear-gradient(90deg, #0051a4, #007dc5 50%, #00a8e4); background: -webkit-linear-gradient(0deg, #0051a4, #007dc5 50%, #00a8e4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 32px; line-height: 1.2;}
#main_img h1 span:nth-of-type(1) { padding: 0 0 10px;}
#main_img p { margin: 0 0 25px; font-size: 28px; color: #0d64c9; letter-spacing: 2px;}
#main_list { position: relative; display: flex; width: 1010px; max-width: 92%; margin: -35px auto 0; justify-content: space-between; z-index: 2;}
#main_list li { position: relative; width: 29%; background-color: #0093d5; color: #fff; font-size: 25px; font-weight: bold; line-height: 1.5; padding: 22px 25px; box-sizing: border-box;}
#main_list li span { font-size: 35px;}
#main_list li::before { width: 0; height: 0; display: block; content: ""; position: absolute; left: 7px; top: 7px; border-top: 15px solid #fff; border-right: 15px solid transparent;}
#main_list li img { margin: 0 15px 0 0; vertical-align: sub;}
#main_list li p { display: table; margin: 0 auto;}
#main_list li:nth-of-type(1) { text-indent: 40px;}
#main_list li:nth-of-type(2) { text-indent: 50px;}
#main_list li:nth-of-type(3) { text-indent: 40px;}
#main_list li:nth-of-type(1) p { background: url(../../img/main_list1.svg)no-repeat left 17px; background-size: 32px 32px;}
#main_list li:nth-of-type(2) p { background: url(../../img/main_list2.svg)no-repeat left 13px; background-size: 39px 39px;}
#main_list li:nth-of-type(3) p { background: url(../../img/main_list3.svg)no-repeat left 13px; background-size: 35px 35px;}

@media screen and (max-width: 600px) {
	#main_img div { padding: 40px 0;}
	#main_img h1 { font-size: 32px; text-align: center; letter-spacing: 3px;}
	#main_img h1 span { text-align: center; font-size: 24px; letter-spacing: 3px;}
	#main_img h1 span:nth-of-type(2) { padding: 0 0 10px;}
	#main_img p { font-size: 22px; line-height: 1.4;}
	#main_img >img { position: static; width: 92%; margin: 0 0 0 auto; padding: 0 0 30px; display: block;}
	#main_img::before { width: 100%; transform: inherit; top: 0; left: 0; background: url(../../img/main_bg_sp.png)no-repeat center center; background-size: contain;}
	#main_img .btn_mail { align-items: center; justify-content: center; margin: 0 auto;}

	#main_list { display: block;}
	#main_list li { width: 220px; margin: 0 auto 10px; padding: 18px 0; font-size: 16px;}
	#main_list li span { font-size: 26px;}
	#main_list li:nth-of-type(1) p { background-size: 21px 21px; background-position: left 10px;}
	#main_list li:nth-of-type(2) p { background-size: 26px 26px; background-position: left 10px;}
	#main_list li:nth-of-type(3) p { background-size: 23px 23px; background-position: left 6px;}
	#main_list li:nth-of-type(1) { text-indent: 26px;}
	#main_list li:nth-of-type(2) { text-indent: 31px;}
	#main_list li:nth-of-type(3) { text-indent: 28px; margin: 0 auto;}
}


/* ---------------------------------------------------
#sec_lead
------------------------------------------------------ */
#contents_wrap { background: url(../../img/lead_bg1.png)no-repeat top left;}
#sec_wrap { overflow: hidden;}
#sec_lead { background: url(../../img/lead_bg2.png)no-repeat right 200px;}
#sec_lead .inner_md { display: flex; margin: 100px auto 0; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;}
#sec_lead .inner_md #lead_col1 { width: 50%;}
#sec_lead .inner_md #lead_col1 h2 { margin: 0 0 20px; font-size: 35px; color: #0d64c9; font-weight: bold;}
#sec_lead .inner_md #lead_col1 p { line-height: 2.5;}
#sec_lead .inner_md >img { width: 46%;}

#sec_lead #lead_col2 { margin: 110px auto; width: 1200px; max-width: 92%;}
#sec_lead #lead_col2 h2 { position: relative; font-size: 40px; text-align: center; font-weight: bold;}
#sec_lead #lead_col2 h2 span:nth-of-type(1) { display: block; font-size: 35px; color: #d5dae0; letter-spacing: 3px;}
#sec_lead #lead_col2 h2 span.tit_color { color: #0d64c9;}
#sec_lead #lead_col2 h2::after { position: absolute; display: block; content: ""; height: 1px; width: 100px; background-color: #333; bottom: 0; left: 50%;  transform: translateY(0%) translateX(-50%); -webkit-transform: translateY(0%) translateX(-50%);}
#sec_lead #lead_col2 div { position: relative; width: 840px; max-width: 100%; margin: 0 auto;}
#sec_lead #lead_col2 div >img { display: block; margin: 260px auto 0;}
#lead_list { width: 100%; position: absolute; top: 0;}
#lead_list li { position: absolute; padding: 25px 2%; border-radius: 30px; font-size: 20px; font-weight: bold; color: #fff; line-height: 1.5; box-sizing: border-box;}
#lead_list .lead_list1 { background-color: #8da0cd;}
#lead_list .lead_list2 { background-color: #5d63a2;}
#lead_list li:nth-of-type(1) { width: 230px; top: -180px; left: 50%; transform: translateY(0%) translateX(-50%); -webkit-transform: translateY(0%) translateX(-50%);}
#lead_list li:nth-of-type(1)::after { position: absolute; content: ""; display: block; bottom: -20px; left: 100px; width: 29px; height: 26px; background: url(../../img/lead2_arrow3.png)no-repeat;}
#lead_list li:nth-of-type(2) { width: 220px; top: -105px; right: 0;}
#lead_list li:nth-of-type(2)::after { position: absolute; content: ""; display: block; bottom: -20px; left: 25px; width: 63px; height: 25px; background: url(../../img/lead2_arrow4.png)no-repeat;}
#lead_list li:nth-of-type(3) { width: 260px; top: 78px; right: 15px;}
#lead_list li:nth-of-type(3)::after { position: absolute; content: ""; display: block; bottom: -20px; left: 25px; width: 76px; height: 25px; background: url(../../img/lead2_arrow5.png)no-repeat;}
#lead_list li:nth-of-type(4) { width: 215px; top: 78px; left: 75px;}
#lead_list li:nth-of-type(4)::after { position: absolute; content: ""; display: block; bottom: -20px; right: 25px; width: 76px; height: 25px; background: url(../../img/lead2_arrow2.png)no-repeat;}
#lead_list li:nth-of-type(5) { width: 240px; top: -105px; left: 0;}
#lead_list li:nth-of-type(5)::after { position: absolute; content: ""; display: block; bottom: -20px; right: 25px; width: 63px; height: 25px; background: url(../../img/lead2_arrow1.png)no-repeat;}

@media screen and (max-width: 600px) {
	#contents_wrap { background-size: 90%;}
	#sec_lead { background-size: 80%;}
	#sec_lead .inner_md { display: block; margin: 50px auto 0;}
	#sec_lead .inner_md #lead_col1 { width: 100%; margin: 0 0 15px;}
	#sec_lead .inner_md #lead_col1 h2 { font-size: 26px; line-height: 1.5;}
	#sec_lead .inner_md #lead_col1 p { line-height: 1.8;}
	#sec_lead .inner_md >img { width: 100%;}
	#sec_lead #lead_col2 { margin: 40px auto;}
	#sec_lead #lead_col2 h2 { font-size: 26px;}
	#sec_lead #lead_col2 h2 span:nth-of-type(1) { font-size: 26px;}
	#sec_lead #lead_col2 div >img { width: 62px; margin: 220px auto 0;}
	#lead_list li { font-size: 14px; padding: 15px 13px; border-radius: 15px;}
	#lead_list li:nth-of-type(1) { width: 153px; max-width: 41%; top: -200px;}
	#lead_list li:nth-of-type(2) { width: 146px; max-width: 40%;}
	#lead_list li:nth-of-type(3) { width: 173px; right: 0; top: 40px; max-width: 37%;}
	#lead_list li:nth-of-type(4) { width: 143px; left: 2%; top: 40px; max-width: 37%}
	#lead_list li:nth-of-type(5) { width: 160px;}
	#lead_list li:nth-of-type(1)::after { width: 19px; background-size: contain;}
	#lead_list li:nth-of-type(2)::after { width: 42px; background-size: contain;}
	#lead_list li:nth-of-type(3)::after { width: 50px; background-size: contain;}
	#lead_list li:nth-of-type(4)::after { width: 50px; background-size: contain;}
	#lead_list li:nth-of-type(5)::after { width: 42px; background-size: contain;}
	
}

@media screen and (max-width: 400px) {
	#lead_list li:nth-of-type(1) { top: -214px;}
	#sec_lead #lead_col2 div >img { margin: 260px auto 0;}
}

/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { overflow: hidden; padding: 0 0 110px;}
#sec1 >p { position: relative; padding: 56px 0; background-color: #0d64c9; color: #fff; font-size: 35px; text-align: center; font-weight: bold; letter-spacing: 3px;}
#sec1 >p span { display: block; margin: 0 auto; font-size: 25px;}
#sec1 >p::after { position: absolute; content: ""; display: block; width: 0; height: 0; border-style: solid; border-right: 7px solid transparent; border-left: 7px solid transparent; border-top: 13px solid #0d64c9; border-bottom: 0; bottom: -12px; left: 50%;  transform: translateY(0%) translateX(-50%); -webkit-transform: translateY(0%) translateX(-50%);}

#sec1 >div:nth-of-type(1) { display: flex; margin: 140px 0 100px;}
#sec1 >div:nth-of-type(1) div { width: 810px; margin-left: calc(50vw - 600px);}
#sec1 >div:nth-of-type(1) h2 { margin: 0 0 50px; font-size: 45px; font-weight: bold; line-height: 1.5;}
#sec1 >div:nth-of-type(1) h2 .tit_color { color: #0d64c9;}
#sec1 >div:nth-of-type(1) img { position: relative; right: -75px; max-width: calc(100% - 670px); height: fit-content;}
#sec1 >div:nth-of-type(1) div li { display: table; margin: 0 0 20px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 28px -19px #999999; width: 100%;}
#sec1 >div:nth-of-type(1) div li span { display: table-cell; width: 55px; padding: 18px 0; font-size: 25px; color: #fff; font-weight: bold; text-align: center; background-color: #0d64c9; border-radius: 10px 0 0 10px; vertical-align: middle;}
#sec1 >div:nth-of-type(1) div li p { display: table-cell; padding: 18px 10px; font-size: 22px; vertical-align: middle;}
#sec1 >div:nth-of-type(2) h3 { margin: 0 0 30px; font-size: 30px; text-align: center; font-weight: bold;}
#sec1 table { border: 1px solid #000; width: 100%;}
#sec1 table tr { border-bottom: 1px solid #000;}
#sec1 table tr:last-of-type { border-bottom: none;}
#sec1 table th { padding: 16px 0; background-color: #cdcccc; font-size: 20px; font-weight: bold;}
#sec1 table tr td { background-color: #fff;}
#sec1 table tr td:nth-of-type(1) { width: 11%; padding: 16px 0;  background-color: #cdcccc; font-size: 20px; text-align: center; font-weight: normal;}
#sec1 table tr th,
#sec1 table tr td { border-right: 1px solid #000;}
#sec1 table tr td { font-size: 16px; text-align: center;}
#sec1 table tr th:last-of-type,
#sec1 table tr td:last-of-type { border-right: none;}

#sec1 table tr th.table_color { border: 7px solid #327cd1; background-color: #327cd1; color: #fff; font-size: 22px;}
#sec1 table tr th.table_color span { margin: 0 0 0 10px; padding: 10px 18px; background-color: #ff8001; border: 2px solid #fff; border-radius: 5px;}
#sec1 table tr td.table_color { font-weight: bold; border-right: 7px solid #327cd1; border-left: 7px solid #327cd1; background-color: #eaf2fa;}
#sec1 table tr:last-of-type td.table_color { border-bottom: 7px solid #327cd1;}

#sec1 >a { margin: 60px auto 0;}

@media screen and (max-width: 1300px) {
	#sec1 >div:nth-of-type(1) div { margin-left: 4%;}
}

@media screen and (max-width: 600px) {
	#sec1 { padding: 0 0 50px;}
	#sec1 >p { font-size: 24px; padding: 15px 0; line-height: 1.4;}
	#sec1 >p span { padding: 0 0 5px; font-size: 18px;}
	#sec1 >div:nth-of-type(1) { margin: 60px auto 25px; width: 92%;}
	#sec1 >div:nth-of-type(1) h2 { margin: 0 0 20px; font-size: 26px; text-align: center;}
	#sec1 >div:nth-of-type(1) div { width: 100%; margin: 0;}
	#sec1 >div:nth-of-type(1) div li span { width: 8%; font-size: 16px;}
	#sec1 >div:nth-of-type(1) div li p { font-size: 18px; line-height: 1.5; padding: 10px;}
	#sec1 >div:nth-of-type(2) h3 { font-size: 24px;}
	#sec1 >a { margin: 30px auto 0;}
	#sec1 .js-scrollable table { width: 800px !important;}
	#sec1 table th { font-size: 18px;}
	#sec1 table tr td:nth-of-type(1) { font-size: 16px;}
	#sec1 table tr th.table_color { font-size: 18px}
	#sec1 table tr td { vertical-align: middle; padding: 0 4%; font-size: 14px;}
	
}

/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { padding: 100px 0 150px; background: url(../../img/sec2_bg1.png)no-repeat right top,url(../../img/sec2_bg2.png)no-repeat left bottom; background-color: #fff;}
#sec2 h2 { margin: 0 0 30px; text-align: center; font-size: 40px; display: block; background: linear-gradient(90deg, #054e9a, #007dc5 50%, #65d7ff); background: -webkit-linear-gradient(0deg, #054e9a, #007dc5 50%, #65d7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; letter-spacing: 2px; line-height: 1.2;}
#sec2 h2 span { font-size: 14px; display: block; padding: 0 0 10px; background: linear-gradient(90deg, #054e9a, #007dc5 50%, #65d7ff); background: -webkit-linear-gradient(0deg, #054e9a, #007dc5 50%, #65d7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

#sec2_txt { position: relative; padding: 30px 0; text-align: center; background: #0196ff; font-size: 25px; color: #fff; font-weight: bold; letter-spacing: 3px;}
#sec2_txt::after { position: absolute; content: ""; display: block; width: 0; height: 0; border-style: solid; border-right: 7px solid transparent; border-left: 7px solid transparent; border-top: 13px solid #0196ff; border-bottom: 0; bottom: -12px; left: 50%;  transform: translateY(0%) translateX(-50%); -webkit-transform: translateY(0%) translateX(-50%);}
#sec2_txt+p { padding: 50px 0 40px; text-align: center; font-size: 16px;}
#sec2 .inner_md >ul { display: flex; flex-wrap: wrap; margin: 0 0 60px; justify-content: space-between; font-size: 24px; font-weight: bold; color: #fff;}
#sec2 .inner_md >ul li { width: 32.5%; padding: 12px 0; background-color: #ff8001; border-radius: 7px; text-align: center;}
#sec2 .inner_md >ul li:nth-of-type(-n+3) { margin-bottom: 1%;}
#sec2 .inner_md >ul li img { margin: 0 10px 0 0; vertical-align: middle;}

#sec2_img { margin: 0 0 100px; padding: 50px 0 70px; background-color: #f3f3f3;}
#sec2_img h3 { position: relative; margin: 0 0 40px; font-size: 35px; text-align: center; font-weight: bold;}
#sec2_img h3 span.tit_color { color: #327cd1;}
#sec2_img h3::after { position: absolute; display: block; content: ""; height: 1px; width: 70px; background-color: #c2c2c2; bottom: 0; left: 50%;  transform: translateY(0%) translateX(-50%); -webkit-transform: translateY(0%) translateX(-50%);}
#sec2_img img { display: block; margin: 0 auto;}

#sec2_img+h3 { font-size: 35px; text-align: center; font-weight: bold; color: #000;}
#sec2_img+h3+p { padding: 30px 0 60px; text-align: center; font-size: 16px;}
.sec2_note { display: flex; justify-content: space-between;}
#sec2_note1 { display: flex; flex-wrap: wrap; align-content: center; width: 31%; padding: 0 4%; border: 1px solid #d6d6d6; background-color: #f3f3f3; box-sizing: border-box;}
.sec2_note .arrow { margin: auto 0 auto -25px; position: relative; width: 40px; height: 75px; background-color: #327cd1;}
.sec2_note .arrow::before { position: absolute; top: -18px; right: -27px; width: 0; height: 0; content: ""; border-left: 30px solid #327cd1; border-top: 55px solid transparent; border-bottom: 55px solid transparent;}
#sec2_note1 li { margin: 0 0 50px;}
#sec2_note1 li:last-of-type { margin: 0;}
#sec2_note2 { display: flex; flex-wrap: wrap; width: 58%; justify-content: space-between;}
#sec2_note2 li {  width: 49%;}
#sec2_note2 li img { width: 100%; box-shadow: 0px 0px 39px -17px #777;}
#sec2_note2 li:nth-of-type(-n+2) { margin: 0 0 15px;}

@media screen and (max-width: 600px) {
	#sec2 { padding: 50px 0; background-size: 80%;}
	#sec2 h2 { margin: 0 0 30px; font-size: 26px; line-height: 1.2;}
	#sec2 span { padding: 0 0 10px;}
	#sec2_txt { padding: 20px 4%; line-height: 1.4; font-size: 20px;}
	#sec2_txt+p { padding: 25px 0 20px; text-align: left;}
	#sec2 .inner_md >ul { display: block; font-size: 20px;}
	#sec2 .inner_md >ul li:nth-of-type(-n+3),
	#sec2 .inner_md >ul li { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; margin-bottom: 10px; border-radius: 3px;}
	#sec2 .inner_md >ul li span { padding: 0;}
	#sec2 .inner_md >ul li img { width: 1.2em;}
	#sec2_img { margin: 0 0 30px; padding: 40px 0 50px;}
	#sec2_img h3 { padding: 0 4% 10px; font-size: 26px; line-height: 1.2;}
	#sec2_img img { width: 92%;}
	#sec2_img+h3 { font-size: 26px; line-height: 1.2;}
	#sec2_img+h3+p { padding: 15px 0 30px;}
	#sec2_img+h3+p br { display: none;}
	.sec2_note { display: block;}
	#sec2_note1 { width: 100%; padding: 40px 0; justify-content: center;}
	#sec2_note1 li { margin: 0 0 30px; text-align: center;}
	#sec2_note1 li:last-of-type { margin: 0;}
	#sec2_note1 img { max-width: 92%;}
	.sec2_note .arrow { margin: 20px auto 50px; width: 50px; height: 25px;}
	.sec2_note .arrow::before { position: absolute; top: 25px; right: inherit; left: -10px; width: 0; height: 0; content: ""; border-top: 25px solid #327cd1; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: inherit;}
	#sec2_note2 { display: block; width: 100%;}
	#sec2_note2 li { width: 100%;}
	#sec2_note2 li img { box-shadow: 0px 0px 12px -6px #777;}
}

/* ---------------------------------------------------
#sec3
------------------------------------------------------ */
/* #sec3 { overflow: hidden;} */
#sec3 .inner_md { position: relative; padding: 100px 0 120px;}
#sec3 h2 { margin: 0 0 50px; text-align: center; font-size: 40px; display: block; background: linear-gradient(90deg, #000000, #0da6ff 59%, #c3f0ff); background: -webkit-linear-gradient(0deg, #000000, #0da6ff 59%, #c3f0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; letter-spacing: 2px;}
#sec3 h2 span { font-size: 14px; display: block; background: linear-gradient(90deg, #000000, #0da6ff 59%, #c3f0ff); background: -webkit-linear-gradient(0deg, #000000, #0da6ff 59%, #c3f0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#sec3 table { width: 100%; border: 1px solid #327cd1;}
#sec3 table tr th { font-size: 23px; font-weight: bold; background-color: #327cd1; color: #fff; border-left: 1px solid #fff; padding: 12px 0;}
#sec3 table tr th:nth-of-type(1) { border-bottom: 1px solid #fff; border-left: 1px solid #327cd1;}
#sec3 table tr th.table_color { background-color: #ff8001;}
#sec3 table tr td:nth-of-type(1) { padding: 10px; background-color: #327cd1; color: #fff; text-align: left; border-bottom: 1px solid #fff; font-size: 20px;}
#sec3 table tr:last-of-type td:nth-of-type(1) { border-bottom: 1px solid #327cd1;}
#sec3 table tr td { font-size: 18px; width: 20%; color: #327cd1; background-color: #fff; text-align: center; border-bottom: 1px solid #327cd1; border-right: 1px solid #327cd1;}
#sec3 table tr td:last-of-type { border-right: nome;}
#sec3 table tr td span { color: #000;}
#sec3 table tr td.table_color { color: #ff8001;}
#sec3 .js-scrollable+p { padding: 5px 0 100px; text-align: right;}

#sec3 h3 { margin: 0 0 80px; font-size: 35px; font-weight: bold; text-align: center;}
#sec3 h3+ul { display: flex; justify-content: space-between;}
#sec3 h3+ul > li { width: 29%; padding: 0 2.5% 40px; border: 2px solid #327cd1; background-color: #fff; border-radius: 10px; box-sizing: border-box; box-shadow: 0px 0px 28px -19px #999;}
#sec3 h3+ul > li p.step { display: table; margin: -30px auto 0; padding: 10px 15px; background: #327cd1; color: #fff; font-size: 23px; font-weight: bold; line-height: 1;}
#sec3 h3+ul > li p.step span { padding: 0 0 0 10px; font-size: 45px; vertical-align: sub;}
#sec3 h3+ul > li p.step img { padding: 0 10px 0 0; vertical-align: sub;}
#sec3 h3+ul > li dt { padding: 10px 0; font-size: 25px; font-weight: bold; color: #02209e; text-align: center; border-bottom: 1px solid #327cd1;}
#sec3 h3+ul > li dd { padding: 10px 0 0; font-weight: bold;}
#sec3 h3+ul > li dd li { margin: 0 0 10px; padding-left: 0.5em; text-indent: -0.5em;}
#sec3 h3+ul > li dd li::before { content: "・";}
#sec3 h3+ul > li dd li:last-of-type { margin: 0;}
#sec3 h3+ul+a { margin: 70px auto 0;}
#sec3 .inner_md >img { position: absolute; right: -290px; bottom: -50px;}

@media screen and (max-width: 600px) {
	#sec3 h2 { margin: 0 0 30px; font-size: 26px; line-height: 1.2;}
	#sec3 h2 span { padding: 0 0 10px;}
	#sec3 .inner_md { padding: 50px 0;}
	#sec3 h3 { margin: 50px 0; font-size: 26px;}
	#sec3 h3+ul { display: block;}
	#sec3 h3+ul > li { width: 100%; margin: 0 0 45px;}
	#sec3 .inner_md >img { display: none;}
	#sec3 h3+ul+a { margin: 45px auto 0;}
	#sec3 h3+ul > li dt { font-size: 24px;}
	#sec3 h3+ul > li p.step img { width: 28px;}
	#sec3 h3+ul > li p.step { font-size: 20px;}
	#sec3 h3+ul > li p.step span { padding: 0 0 0 5px; font-size: 40px;}
	#sec3 .js-scrollable+p { padding: 5px 0 0;}
	
}

/* ---------------------------------------------------
#sec4
------------------------------------------------------ */
#sec4 { padding: 100px 0 120px; background-color: #fff;}
#sec4 h2 { margin: 0 0 10px; text-align: center; font-size: 40px; display: block; background: linear-gradient(90deg, #054e9a, #007dc5 50%, #65d7ff); background: -webkit-linear-gradient(0deg, #000000, #0da6ff 59%, #c3f0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; letter-spacing: 2px;}
#sec4 h2 span { font-size: 14px; display: block; background: linear-gradient(90deg, #054e9a, #007dc5 50%, #65d7ff); background: -webkit-linear-gradient(0deg, #000000, #0da6ff 59%, #c3f0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#sec4 h2+p { margin: 0 0 50px; text-align: center;}
#sec4 form { width: 650px; margin: 0 auto; max-width: 90%;}
#sec4 .required { color: #ff0000;}

/* ▼ mailform PRO のCSS上書き ▼ */
form#mailformpro .mfp_area dl dt,
form#mailformpro .mfp_area dl dd { width: auto; text-align: left; font-size: 14px; border: none; float: none; padding: 0;}
#form_area form#mailformpro label { white-space: normal; border-radius: 0; margin: 0; display: inline; }
form#mailformpro .mfp_area .mfp_colored { background-color: none !important;}
form#mailformpro .mfp_area .mfp_not_checked,
form#mailformpro .mfp_area .mfp_checked,
form#mailformpro .mfp_area .mfp_colored {
	margin: 7px 10px 0 0 !important; padding: 0;
	background: none !important; box-shadow: none; border: none;
}
#form_area .must { background-color:transparent; border: none; text-shadow: none; padding: 0; font-size: 1em; color: #000; float: none; margin: 0; border-radius: 0; box-shadow: none; background-image: none; }
div#mfp_overlay_inner { color: #000; }
.mfp_ok { background-color: rgb(255, 250, 221) !important; }
.mfp_ng { background-color: #e5e5e5!important; }
div#mfp_warning { width: 1200px; max-width: 92%; margin: 0 auto; color: #000; }
#sec4 form#mailformpro label.mfp_not_checked { border: none;}
/* ▲ mailform PRO のCSS上書き ▲ */

/* ▼ mailform PRO のCSS上書き ▼ */
body { overflow-x: auto !important; }
#mailformpro .mfp_area dl dt,
#mailformpro .mfp_area dl dd { font-size: 14px; border: none; float: none; }
#mailformpro .mfp_area dl dt { color: #000;}
#mailformpro label { white-space: normal; border-radius: 0; margin: 0; display: inline; }
#mailformpro .mfp_area .mfp_colored { background-color: none !important;}
#mailformpro .mfp_area .mfp_not_checked,
#mailformpro .mfp_area .mfp_checked,
#mailformpro .mfp_area .mfp_colored { margin: 7px 10px 0 0 !important; padding: 0; background: none !important; box-shadow: none; border: none;}
.mfp_element_button{ text-shadow: none !important; }
div.mfp_buttons { text-align: center;}
form div.mfp_buttons button { width: 320px; max-width: 92%; margin: 50px auto 0; padding: 15px 0; background: #0196ff; border: none; border-radius: 40px; color: #fff; font-size: 20px; font-weight: bold; transition: 0.3s ease-in-out; text-shadow: none;}
form div.mfp_buttons button:hover { background: #0196ff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);}

#form_area form#mailformpro label{ border: none; display: block;}
form#mailformpro label.mfp_checked{ background-color: transparent !important;}
/* ▲ mailform PRO のCSS上書き ▲ */

/* ▼ 共通スタイル※消さないで ▼ */
form#mailformpro .mfp_area > dl input,
form#mailformpro .mfp_area > dl select,
form#mailformpro .mfp_area > dl textarea { font-size: 15px; font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; box-shadow: none; }

form#mailformpro .mfp_area > dl input:focus,
form#mailformpro .mfp_area > dl select:focus,
form#mailformpro .mfp_area > dl textarea:focus,
form#mailformpro .mfp_area .add_box dd > div select:focus { outline: none; border: 2px solid #d6d5d5; }

form#mailformpro .mfp_area > dl input { max-width: 100%; height: 40px; padding: 5px 3px; border: 1px solid #d6d5d5; box-sizing: border-box; }

form#mailformpro .mfp_area > dl input:not(input[type=checkbox],input[type=radio]),
form#mailformpro .mfp_area > dl select,
form#mailformpro .mfp_area > dl textarea { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid #d6d5d5; border-radius: 3px;}
form#mailformpro .mfp_area select::-ms-expand { display: none; }

form#mailformpro .mfp_area > dl { margin: 0 0 20px;}
form#mailformpro .mfp_area > dl:last-of-type { margin: 0;}
form#mailformpro .policy_col iframe { width: 100%; height: 250px; margin: 50px 0 10px; border: 1px solid #cacaca;}

@media screen and (max-width: 600px) {
	#sec4 { padding: 50px 0;}
	#sec4 h2 { margin: 0 0 20px; font-size: 26px; line-height: 1.2;}
	#sec4 h2 span { padding: 0 0 10px;}
	#sec4 h2+p { margin: 0 0 30px;}
	form div.mfp_buttons button { width: 280px; font-size: 16px; margin: 30px 0 0; padding: 10px 0;}
	form#mailformpro .policy_col iframe { margin: 30px 0 10px;}
}

/* ---------------------------------------------------
footer
------------------------------------------------------ */
#pagetop { position: fixed; bottom: 5px; right: 5px;}
#pagetop a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 2px solid #0196ff; border-radius: 50%; background: #ffff; transition: background-color .25s,color .25s;}
#pagetop span { display: block; font-size: 10px; position: relative; top: 3px; width: 11px; height: 11px; border-top: 2px solid #0196ff; border-right: 2px solid #0196ff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#pagetop a:hover { background-color: #0196ff;}
#pagetop a:hover span { border-top: 2px solid #fff; border-right: 2px solid #fff;}
footer { background-color: #fff;}
footer div { padding: 93px 4%; text-align: center; color: #fff; font-size: 28px; font-weight: bold; background: url(../../img/f_img.png)no-repeat top left; background-size: contain; background-color: #327cd1; box-sizing: border-box; letter-spacing: 2px;}
footer img { display: block; margin: 0 auto; padding: 18px 0;}

@media screen and (max-width: 600px) {
footer div { padding: 50px 4%; font-size: 18px;}
footer img { padding: 10px 0; width: 66px;}

}

/* ---------------------------------------------------
thanks
------------------------------------------------------ */

#thanks section { display: flex; align-items: center; height: calc(100vh - 110px); letter-spacing: 2px;}
#thanks section div { width: 1200px; max-width: 92%; margin: 0 auto; text-align: center; font-weight: bold;}
#thanks section div h2 { margin: 0 0 40px; font-size: 26px; font-weight: bold;}
#thanks section div p { margin: 0 0 140px;}
#thanks section div a { text-decoration: underline;}
#thanks section div a:hover { text-decoration: none;}