/* ##############################
    Created on : 2024/12/10
    Author     : Myazou3
##############################  */
#head_title { display: flex; flex-wrap: wrap; justify-content: flex-start; border-bottom: 5px #95905d solid; padding: 5px; }
#head_title img { display: block; width: 100px; max-width: 100px; }
#head_title h1 { display: block; width: auto; font-size: clamp(2.5rem, 2.045rem + 2.27vw, 3.75rem); line-height: 100px; padding-left: 10px; }
#page_menu { display: flex; flex-wrap: wrap;  justify-content: center; width: 100%; max-width: 800px; margin: 5px auto; }
.menu_cont { display: block; width: 130px; margin: 5px 10px; }
.menu_cont a { display: block; width: 100%; text-align: center; font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); line-height: 34px; border: 1px #95905d solid; border-radius: 5px; background: #d3b038; }
.menu_cont a.active { background: #cccc00; color: #000; }
.cont_wrap { display: block; width: 90%; max-width: 780px; margin: 0 auto 10px; }
.cont_wrap h3 { width: 100%; border-left: 5px #95905d solid; border-bottom: 1px #95905d solid; text-indent: 5px; font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); }
.cont_wrap h4 { display: block; margin: 5px 10px; }
.cont_info { display: block; width: 90%; margin: 0 auto;  font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); line-height: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); text-align: left; }
.input_form_wrap { display: flex; width: 90%; padding: 5px; box-sizing: border-box; margin: 0 auto; justify-content: center; }
.sec_tear { display: block; width: 38%; font-size: 14px; line-height: 22px; height: 47px; padding: 0 5px; box-sizing: border-box; }
.ekikyou_tear { display: block; width: 85%; font-size: 14px; line-height: 22px; height: 69px; padding: 0 5px; box-sizing: border-box; }
.bt_area { display: block; width: auto; height: 63px; font-size: 14px; line-height: 63px; margin: 0 5px; }
.btn_area { display: flex; flex-wrap: wrap;  justify-content: center; width: 100%; max-width: 300px; margin: 5px auto;}
.send_btn { display: inline-block; width: 100px; font-size: 14px; line-height: 36px; border-radius: 5px; background: #ff60bd; margin: 5px 10px; color: #000; }
.reset_btn { display: inline-block; width: 100px; font-size: 14px; line-height: 36px; border-radius: 5px; background: #66ff66; margin: 5px 10px; color: #000; }
.ans_area { display: block; text-align: center; width: 90%; max-width: 300px; margin: 0 auto; }
.ans_text { display: block; width: 100%; text-align: center; border: 1px #95905d solid; border-radius: 5px;}
.ans_data { display: block; width: 100%; text-align: center; margin: 5px auto;}
.import_text { font-size: 18px; color: #F00; font-weight: bold; background: #FFF; }


.bagua_index { display: block; margin: 10px 0; border-bottom: 5px #95905d solid; border-top: 5px #95905d solid; text-align: center; font-weight: bold; }
.bagua_info_commetn { display: block; width: 90%; margin: 5px auto; font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); line-height: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); text-align: left;  }
#bagua_detail { display: block; width: 85%; margin: 5px auto; border-radius: 5px; font-size: 12px; line-height: 16px; height: 58px; padding: 5px; }
#bagua_image_area { display: block; width: 100%; }
#bagua_image_all { display: block; width: 300px; height: 300px; margin: 0 auto; }
#bagua_image_all img { display: block; width: 300px; height: 300px; }

.kei_view_area { display: flex; flex-wrap: wrap; justify-content: center; }
.kei_view_wrap { display: block; width: 30%; margin: 5px 1%; text-align: center; }
.kei_img, .kei_name { display: block; width: 100%; font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); line-height: 40px; }
.kei_img { font-weight: bold; }

.bagua_table { border-collapse: collapse; width: 100%;}
.bagua_table th, .bagua_table td { border: 1px #000 solid; padding: 2px 4px; font-size: 12px; line-height: 30px; text-align: center; width: 10%; height: 30px; }
.bagua_table th.duble, .bagua_table td.duble { width: 20%; }
.bagua_table td.duble { height: 60px;}
.kei_mei { display: block; text-align: center; font-size: 12px; line-height: 16px; }
.kei_img { display: block; text-align: center; font-size: 40px !important; line-height: 40px !important; }
.bagua_table th { background: #d3b038; color: #000; }
.bagua_table td { background: #FFF; color: #000; }
.kei_wrap h4 { display: block; margin: 5px 10px; border-left: 5px #95905d solid; border-bottom: 1px #95905d solid; padding: 0 0 0 5px; }
.explanation_top { display: block; width: 95%; margin: 5px auto; font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem); line-height: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); color: #ffcc00; }
.explanation { display: block; width: 90%; margin: 5px auto; font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem); line-height: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); text-align: left; color: #ffcc00; }