@charset "UTF-8";

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%; font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 20px;}
html, body { height: 100%;}

body { font-size: 1.4rem; line-height: 1.7em; color: #333; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; background: #fff;}

a:link { color: #009be2; text-decoration: none;}
a:visited { color: #009be2;}
a:hover { color: #009be2;}
a:active { color: #009be2;}

/* 見出しテキスト */
h1 { font-size: 2.2rem;}
h2 { }
h2.dete_attention { display: inline-block; font-size: 2.0rem; line-height: 1.4em; text-align: center; padding: 6px 16px; margin: auto; background: #f7ad01;}
h3 { font-size: 1.8rem; color: #0089c7; margin: 0 0 20px 0; padding: 0;}
h4 {  font-size: 1.6rem; color: #0089c7; margin: 0 0 20px 0; padding: 0;}
h5 { font-size: 1.5rem; color: #333; margin: 0 0 10px 0;}

p { font-size: 1.4rem; line-height: 2.0em; text-align: justify; font-feature-settings: "palt"; letter-spacing: 0.08em;}

p.strong { font-size: 1.5rem; color: #0089c7;}
p.center { text-align: center;}
p.right { text-align: right;}
p.note { font-size: 1.2rem; line-height: 1.5em;}
p.attention { color: #C71485;}

@media screen and (max-width: 800px) {
	body { font-size: 1.2rem;}
	h1 { font-size: 1.8rem;}
	h2 { }
	h3 { font-size: 1.6rem;}
 h4 { font-size: 1.5rem;}
 h5 { font-size: 1.4rem;}
 p { font-size: 1.2rem;}
}

ol { margin: 10px 0 0 20px; list-style-type: decimal;}
ol li { margin-bottom: 10px;}

img.img-responsive { width: 100%; height: auto;}

.pc_part { display: block;}
.smp_part { display: none;}
.width_narrow { width: 80%; margin-left: auto; margin-right: auto;}

@media screen and (max-width: 800px) {
.pc_part { display: none;}
.smp_part { display: block;}
	.width_narrow { width: 100%;}
}

/* pc版クリアランス */
.cl_pc120 { margin-bottom: 120px !important;}
.cl_pc100 { margin-bottom: 100px !important;}
.cl_pc80 { margin-bottom: 80px !important;}
.cl_pc50 { margin-bottom: 50px !important;}
.cl_pc30 { margin-bottom: 30px !important;}

@media screen and (max-width: 800px) {
.cl_pc120 { margin-bottom: 60px !important;}
.cl_pc100 { margin-bottom: 50px !important;}
.cl_pc80 { margin-bottom: 40px !important;}
.cl_pc50 { margin-bottom: 25px !important;}
.cl_pc30 { margin-bottom: 15px !important;}
}

/* smp版クリアランス */
.cl_sm20 { margin-bottom: 10px !important;}
.cl_sm40 { margin-bottom: 20px !important;}

@media screen and (max-width: 800px) {
.cl_sm20 { margin-bottom: 20px !important;}	
.cl_sm40 { margin-bottom: 40px !important;}	
}

/* 固定クリアランス */
.cl_10 { margin-bottom: 10px !important;}
.cl_20 { margin-bottom: 20px !important;}
.cl_30 { margin-bottom: 30px !important;}

/* コンテナ */
@media screen and (min-width: 1300px) {
  .container { width: 1270px; margin: auto;}
}

@media screen and (max-width: 1299px) {
	.container { width: 100%; margin: auto; padding: 0 15px;}
}

/* ダウンロードボタンラッパー */
.download_wrapper { width: 80%; padding: 40px 10px; margin: 20px auto; border-radius: 8px; text-align: center; background: #eff7fa;}
.download_wrapper a.common_btn { display: inline-block; width: 40%; margin: 0 1%; background: #53beef; color: #fff;}
.download_wrapper a.common_btn:link, .download_wrapper a.common_btn:visited, .download_wrapper a.common_btn:active, .download_wrapper a.common_btn:hover { background: #53beef; color: #fff;}
.download_wrapper a.common_btn:hover { background: #83ccee;}

@media screen and (max-width: 800px) {
	.download_wrapper { width: 100%;}
	.download_wrapper a.common_btn { display: block; width: 86%; margin: 1% auto;}
}

/* position:の基準点 */
.position_basis { position: relative;}

/* 標準ボタン */
.common_btn { display: block; width: 60%; margin: auto; padding: 20px 6px; text-align: center; background: #ffd678; border-radius: 8px; border: none; transition: 0.3s all ease-out;}

.common_btn:link { color: #333; text-decoration: none;}
.common_btn:visited { color: #333;}
.common_btn:hover{ color: #333; background: #ffecbf;}
.common_btn:active { color: #333;}

.common_btn.dead { background: #ddd;}
.common_btn.dead:hover{ background: #eee;}

.common_btn.large_font { font-size: 2.0rem; font-weight: bold;}

/* #next_btn { background: #ffd678;} */
#back_btn { background: #ddd;}

/* 汎用テーブル */
table.common_table { width: 100%; border-collapse: collapse; table-layout: fixed;}
table.common_table th { width: 20%; text-align: left; background: #f2fbff;}
table.common_table th, table.common_table td { border: 1px solid #84d1f5; padding: 12px;}
table.common_table tr.text_center { text-align: center;}

@media screen and (max-width: 800px) {
 table.common_table { table-layout: auto;}
	table.common_table th, table.common_table td { display: block; width: 100%; border: none;}
	table.common_table td:nth-of-type(odd){ background: #e0f0f8; border-top: 2px solid #fff;}
}

/* 固定幅テーブル */
table.fixed_table { width: 100%; table-layout: fixed; border-collapse: collapse;}
table.fixed_table th { text-align: center; background: #f2fbff;}
table.fixed_table th, table.fixed_table td { border: 1px solid #84d1f5; padding: 8px;}
table.fixed_table td.text_right { text-align: right;}

td.kind { width: 20% !important;}
td.image { width: 20% !important; text-align: center;}
td.note { width: 60% !important;}
td.image img { margin: auto;}

/* 幅オートテーブル */
table.width_auto_table { width: auto; margin-left: auto; margin-right: auto; border-collapse: collapse; table-layout: fixed;}
table.width_auto_table th { text-align: center; background: #f2fbff;}
table.width_auto_table th, table.width_auto_table td { border: 1px solid #84d1f5; padding: 8px;}
table.width_auto_table tr.text_center { text-align: center;}

/* ヘッダー */
header { width: 100%; padding: 16px 0; border-bottom: 6px solid #309be7;}
header h2 { height: 50px; margin: 0; padding: 0;}
header h2:after { content: none;}
header h2 img { display: inline-block; width: auto; height: 100%;}
header h2 span { font-size: 1.2rem; color: #333; font-weight: normal; position: relative; top: -20px;}

@media screen and (max-width: 800px) {
	header h2 { height: 40px;}
 header h2 span { font-size: 1.0rem;}
}

/* タイトル */
.title_wrapper { width: 100%; padding: 16px 0;}
.title_wrapper h1 { height: 70px; line-height: 1.2em; color: #309be7; padding: 10px 0 10px 70px; position: relative;}
.title_wrapper h1:before { content: ""; height: 70px; width: 89px; background: url("../images/logo_meister.png") no-repeat; background-size: auto 100%; position: absolute; top: 0; left: 0;}

/* 注意書き */
.attention_wrapper { font-size: 2.0rem; font-weight: bold; text-align: center; color: #ec6f00; padding: 20px; border: 2px solid #fda00d; border-radius: 6px;}


/* メイン */
main { padding: 40px 0;}

/* よくある質問 */
a.faq_float { display: block; width: 40px; height: 170px; padding-right: 6px; background: #ffd678; writing-mode: vertical-rl; text-align: center; position: fixed; right:0; top: 40%;}
a.faq_float:link, a.faq_float:visited, a.faq_float:hover, a.faq_float:active { color: #333;}

@media screen and (max-width: 800px) {
	a.faq_float { width: 100%; height: 40px; writing-mode: horizontal-tb; padding-right: 0; padding-top: 8px; top: auto; bottom: 0;}
}

/* フッター */
footer { padding: 40px 0; text-align: center; border-top: 6px solid #309be7;}
footer p { fon-size: 1.2rem; color: #333; text-align: center; margin-bottom: 0;}
footer h2 { height: 30px; text-align: center; padding: 0;}
footer h2:after { content: none;}
footer h2 img { width: auto; height: 100%; margin: 0 auto 10px auto;}
footer h4 { background: none;}

@media screen and (max-width: 800px) {
	footer { padding-bottom: 60px;}
}

ul.note_kome {}
ul.note_kome li { margin-left: 20px; position: relative;}
ul.note_kome li:before { content: "※"; position: absolute; top: 0; left: -20px;}

/* ネクストバック */
.next_back_wrapper { padding-top: 40px; border-top: 2px solid #009be2;}
.next_back_wrapper ul { display: flex; flex-wrap : wrap; margin: 0; padding: 0; list-style-type: none;}
.next_back_wrapper ul li { width: 48%; margin-left: auto; margin-right: auto; text-align: center;}
.next_back_wrapper ul li:first-child { order: 1;}
.next_back_wrapper ul li a { margin-bottom: 8px;}

@media screen and (max-width: 800px) {
	.next_back_wrapper ul { display: block;}
	.next_back_wrapper ul li { width: 90%; margin-bottom: 30px;}
 .next_back_wrapper .common_btn { width: 100%;}
}

/* プライバシーポリシー */
.privacy_agree_wrapper { height: 200px; border: 1px solid #009be2; padding: 16px; overflow-y: scroll; position: relative;}
.agree_check { display: block; width: 100%; padding: 10px; margin-top: 20px; text-align: center; background: rgba(247,173,1,0.8); margin-left: auto; margin-right: auto; bottom: 0;}
.privacy_agree_wrapper ul { margin-left: 20px; list-style-type: disc;}

/* 入力フォーム */
dl.form-horizontal { display: flex; flex-wrap: wrap; width: 100%;}
dl.form-horizontal dt { font-weight: normal; width: 30%; padding: 6px 0;}
dl.form-horizontal dd { width: 70%; padding: 6px 0;}

label { font-weight: normal;}
input[type=text], input[type=email],input[type=password], textarea { width: 100%; padding: 6px; font-size: 1.6rem; background: #fff; border-radius: 6px; border: 1px solid #ddd; outline: none; margin-bottom: 5px;}

input[type=password] { display: inline-block; width: 50%; margin-right: 10px;}
input[type=text].post_code { width: 7em;}

input[type=text].width50 { display: inline-block; width: 50%;}

[type=text]:focus, [type=email]:focus, textarea:focus { border: 1px solid #f7ad01; box-shadow: 1px 0 4px 1px #ffe3a3;}

.select_wrapper select { padding: 10px;}

.req { font-size: 1.0rem; line-height: 1.0em; font-weight: normal; vertical-align: 2px; margin-left: 5px; padding: 4px 10px; border-radius: 10px; background: #ffd678; color: #333;}

.radio_group { margin-bottom: 10px;}
.radio_group label { margin-right: 5px;}

@media screen and (max-width: 800px) {
 dl.form-horizontal { display: block; padding: 0;}
 dl.form-horizontal dt { width: 100%; text-align: left; padding-bottom: 8px;}
 dl.form-horizontal dd { width: 100%;}
	input[type=text].width50 { width: 100%;}
}

/* リキャプチャ */
.recap_char { display: inline-block; vertical-align: middle; margin-left: 10px;}

@media screen and (max-width: 800px) {
	.recap_char { margin: 10px auto 0 auto; text-align: center;}
}

/* 決済について */
.payment_attention { width: 80%; margin: auto; padding: 20px; background: #f7ad01}
.payment_attention h2 { text-align: center;}
.payment_attention p { text-align: center;}
.payment_attention a:link, .payment_attention a:visited, .payment_attention a:hover, .payment_attention a:active { color: #333; text-decoration: underline;}

@media screen and (max-width: 800px) {
 .payment_attention { width: 100%;}
}

/* 仮申し込み完了 */
dl.your_number_list { display: flex; padding: 4px; border: 1px solid #84d1f5;}
dl.your_number_list dt { width: 50%; font-size: 1.6rem; text-align: center; padding-top: 13px;}
dl.your_number_list dd { width: 50%;}
tr.your_number { font-size: 2.0rem; font-family: Arial, Helvetica, "sans-serif"; font-weight: bold; color: #ff9c00;}
tr.your_number td { padding: 10px; text-align: center;}

.triangle { width: 0; height: 0; border-style: solid; border-right: 30px solid transparent; border-left: 30px solid transparent; border-top: 30px solid #309be7; border-bottom: 0; margin: auto;}

@media screen and (max-width: 1000px) {
 dl.your_number_list { display: block;}
 dl.your_number_list dt { padding: 10px;}
 dl.your_number_list dt, dl.your_number_list dd { width: 100%;}
 dl.your_number_list dd { text-align: center;}
 dl.your_number_list dd table { width: 100%; margin: auto;}
}

@media screen and (max-width: 800px) {
 tr.your_number { font-size: 2.0rem;}
 tr.your_number td { padding: 10px;}
}
/* エラー文言エリア */
.errorMessageArea{
    width: 100%;
    margin: 0 auto;
    color: #ff0000;
    text-align: center;
    font-weight: bold;
}