@charset "utf-8";
/* ------------------------------------------------------------ index */
body { overflow-x: clip; }
#header { min-width: 1300px;}
footer{min-width: 1300px; }
body{min-width: 1300px;}
::-ms-expand {display: none;}

h3.title span.min_tt{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 18px; color: #3766B1; line-height: 140%; position: relative; padding: 0 0 0 38px; display: inline-block;}
h3.title span.min_tt:before{content: ""; display: block; width: 26px; height: 1px; background: #3766B1; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
h3.title span.big_tt{font-size: 40px;font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal; line-height: 160%;} 
h3.title span.big_tt span{font-family: source-han-sans-japanese, sans-serif; font-weight: 900; font-style: normal;}


h3{text-align: center; color: #3766B1;font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 16px; line-height: 119%;}
h2.span{font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; font-size: 40px; line-height: 160%; color: #262626;}

/* ------------------------------------------------------------ #simple */
#simple {padding: 79px 0 0; overflow: visible;}
#simple .simple-inner{width: 1200px; margin: 0 auto; overflow: visible;}
#simple .simple_box_1 ul{margin: 97px auto 0; border-radius: 1000px; overflow: hidden;}
#simple .simple_box_1 ul li{text-align: center; width: calc(100% / 3); font-size: 18px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; padding: 21px 0 25px; background: #EDEDED; color: #3766B1; cursor: pointer;}
#simple .simple_box_1 ul li:not(:last-child){border-right: 1px solid #fff;}
#simple .simple_box_1 ul li.active{background: #3766B1; color: #fff; border-right: none;}


#simple .calculation_wrap { position: relative; margin: 90px auto 0; display: flex; justify-content: space-between; align-items: flex-start;}
#simple .calculation_wrap .list_box{display: none;}
#simple .calculation_wrap .list_box.active{display: block;}

#simple .calculation_wrap #data_1 .frm_box { width: 736px;}
#simple .calculation_wrap #data_1 .frm_box  .form_box{width: 100%; height: auto;}
#simple .calculation_wrap #data_1 .frm_box  .form_box label{font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; line-height: 150%;display: block; width: 100%;display: flex;align-items: center;}
#simple .calculation_wrap #data_1 .frm_box  .form_box label img{margin: 0 0 0 13px; display: inline-block;}
#simple .calculation_wrap #data_1 .frm_box  .form_box:not(:last-child){margin: 0 0 33px;}
#simple .calculation_wrap #data_1 .frm_box  .form_box input{display: block; width: 100%; height: auto; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; line-height: 150%; padding:19px 19px; border-radius: 5px; border: 1px solid #C9C9C9;margin: 17px 0 0;}

#simple .calculation_wrap #data_2 .frm_box { width: 779px;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box{flex-wrap: wrap; justify-content: space-between;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box{width: 367px; height: auto; margin: 0 0 40px;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box label{font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; line-height: 150%;display: flex;align-items: center; width: 100%; margin: 0 0 11px; }
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box label span{font-size: 12px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; }
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box label img{margin: 0 0 0 13px; display: inline-block;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box select{display: block; width: 100%; height: auto; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 200; line-height: 150%; padding: 12px 19px 13px; border-radius: 5px; border: 1px solid #C9C9C9; background: #fff;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .select_box{position: relative;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .select_box:before{content: ""; display: block; width: 10px ;height: 10px; border-right: 1px solid #3766B1; border-bottom: 1px solid #3766B1; position: absolute; top: 50%; right: 17px; transform: translateY(-50%) rotateZ(45deg);}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box input{display: block; width: 100%; height: auto; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 200; line-height: 150%; padding: 13px 19px 15px; border-radius: 5px; border: 1px solid #C9C9C9;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .flex{justify-content: space-between;}
#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .flex .select_box{width: 49%;}

#simple .calculation_wrap #data_3 .frm_box { width: 776px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box{border: 1px solid #E6E6E6; border-radius: 17px; padding: 30px 50px 28px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box:not(:last-child){margin: 0 0 22px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box h4{font-size: 23px; text-align: center; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; line-height: 150%; position: relative; }
#simple .calculation_wrap #data_3 .frm_box .clos_box h4:before{content: ""; display: block; position: absolute; right: 0px; top: 50%; transform: translateY(-50%) rotateZ(45deg); border-bottom: 2px solid #51ABDE; border-right: 2px solid #51ABDE; width: 12px; height: 12px; transition: 0.5s;}
#simple .calculation_wrap #data_3 .frm_box .clos_box h4.active:before{ width: 12px; height: 12px; transform: translateY(-50%) rotateZ(-135deg); transition: 0.5s;top: 60%;}



#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box{padding:  0 0;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box h5{font-size: 20px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; line-height: 150%; border-bottom: 1px solid #707070; padding: 0 0 12px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table{margin: 12px 0 0px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table th{vertical-align: top; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 700; line-height: 187%; text-align: left; padding-right: 36px; width: 293px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table td{vertical-align: top; font-size: 15px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; line-height: 187%; }
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table tr:not(:last-child) th,
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table tr:not(:last-child) td{padding-bottom: 28px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content{padding: 0 0 51px;}

#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content:first-child{padding: 28px 0 51px;}

#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content.not-first-child-space{padding: 0;}

#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .flex_content{justify-content: space-between;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .flex_content .content{width: 325px;}

#simple .calculation_wrap #data_3 .frm_box .clos_box_2{padding: 30px 30px 28px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 h4{font-size: 26px; text-align: left; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; line-height: 150%; position: relative; }
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul{ padding: 24px 0 0;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li:not(:last-child){margin: 0 0 13px;}

#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li{background: #EDF7FF; padding: 24px 32px 2px 24px; border-radius: 10px;}

#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li p.title_tt{font-size: 18px; line-height: 160%; font-family: "source-han-sans-japanese", sans-serif; font-weight: 700; padding: 0 0 16px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex{justify-content: space-between; flex-wrap: wrap;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box{width: 323px; height: auto; padding: 0 0 23px;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box .select_box{position: relative;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box .select_box:before{content: ""; display: block; width: 10px ;height: 10px; border-right: 1px solid #3766B1; border-bottom: 1px solid #3766B1; position: absolute; top: 50%; right: 17px; transform: translateY(-50%) rotateZ(45deg);}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box .select_box select{display: block; width: 100%; height: auto; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; line-height: 150%; padding: 9px 19px 11px; border-radius: 5px; border: 1px solid #C9C9C9; background: #fff;-webkit-appearance: none; -moz-appearance: none; appearance: none; color: #000;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box label{padding: 0 0 11px; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; display: flex;align-items: center;}
#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box label img{margin: 0 0 0 13px; display: inline-block;}
#simple .calculation_wrap #data_2 .frm_box .flex_box .form_box .form_tt_box,
#simple .calculation_wrap #data_3 .frm_box .form_box .form_tt_box{background: #A2CCED; border-radius: 9px; color: #fff; font-size: 14px; line-height: 143%; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; padding: 7px 12px 6px; margin: 14px 0 10px; display: none;}
	
#simple .calculation_wrap .followbox { width: 379px; background: #fff;box-shadow: 0 0 15px 5px rgba(0,0,0,0.1); border-radius: 20px; padding: 10px 19px 10px 20px; position: sticky; top: 140px; align-self: flex-start;}
#simple .calculation_wrap .followbox .followbox__scroll { padding: 16px 15px 28px; max-height: calc(100vh - 140px); overflow: auto; -webkit-overflow-scrolling: touch;}
#simple .calculation_wrap .followbox .chartbox{position: relative;}
#simple .calculation_wrap .followbox .chartbox .simple_list{text-align: center;}



#simple .calculation_wrap .followbox .link_box{padding: 48px 0 0;}
#simple .calculation_wrap .followbox .link_box a{position: relative; width: 100%; height: auto; display: block; padding: 7px 0 0;}
#simple .calculation_wrap .followbox .link_box a:before{width: 100%; content: ""; border-radius: 1000px; height: 57px; display: block;}
#simple .calculation_wrap .followbox .link_box a img{position: absolute; top: -6px; left: 0px; width: 100%; text-align: center;}
#simple .calculation_wrap .followbox .link_box a span{width: 100%; height: auto; position: absolute; top: 0; left: 0px; font-size: 16px; text-align: center; padding: 14px 0 15px; border-radius: 1000px;font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600; font-style: normal;}


#simple .calculation_wrap .followbox .link_box a.btn_2{ margin: 15px 0 0;}
#simple .calculation_wrap .followbox .link_box a.btn_3{margin: 15px 0 0;}

#simple .calculation_wrap .followbox .link_box a.btn_1 span{background: #6BBAFF; color: #262626;}
#simple .calculation_wrap .followbox .link_box a.btn_1 span:before{content: ""; display: block; width: 22px; height: 18px; background: url(../images/top/easy_icn_07.svg) no-repeat center center; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 67px;}
#simple .calculation_wrap .followbox .link_box a.btn_1:before{background: #00559D;}

#simple .calculation_wrap .followbox .link_box a.btn_2{margin: 16px 0 0;}
#simple .calculation_wrap .followbox .link_box a.btn_2 span{background: #FF84C6; color: #262626;}
#simple .calculation_wrap .followbox .link_box a.btn_2 span:before{content: ""; display: block; width: 27px; height: 25px; background: url(../images/top/easy_icn_08.svg) no-repeat center center; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 64px;}
#simple .calculation_wrap .followbox .link_box a.btn_2:before{background: #B30262;}

#simple .calculation_wrap .followbox .link_box a.btn_3{margin: 16px 0 0;}
#simple .calculation_wrap .followbox .link_box a.btn_3 span{background: #28D09C; color: #262626;}
#simple .calculation_wrap .followbox .link_box a.btn_3 span:before{content: ""; display: block; width: 25px; height: 25px; background: url(../images/mypage/easy_icn_09.svg) no-repeat center center; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 64px;}
#simple .calculation_wrap .followbox .link_box a.btn_3:before{background: #20AC80;}

#simple .calculation_wrap .followbox h4{font-size: 20px; text-align: center; color: #3766B1; line-height: 184%;font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal;}
#simple canvas{max-width: 100%; display:block}
#simple #panel{margin: 10px 0 0; font-size: 13px; opacity:.7}


#simple .nebs-legend { display: grid; grid-template-columns: repeat(2, auto); column-gap: 17px; row-gap: 4px; align-items: center; font-size: 13px; margin-top: 19px; justify-content: center;width: 100%;line-height: 150%;}
#simple .nebs-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap;}
#simple .nebs-legend-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;}
#simple .calculation_wrap .followbox .chartbox .pie-container.chartbox_2 { width: 91px; height: 245px; padding: 19px 0 0 11px; }
#simple .calculation_wrap .followbox .chartbox .pie-container.chartbox_1 { width: 222px; height: 222px; padding: 19px 0 0; }


.nebs-legend .nebs-legend-item:nth-child(1)  { grid-column: 1; grid-row: 1; }
.nebs-legend .nebs-legend-item:nth-child(3)  { grid-column: 1; grid-row: 2; }
.nebs-legend .nebs-legend-item:nth-child(5)  { grid-column: 1; grid-row: 3; }
.nebs-legend .nebs-legend-item:nth-child(7)  { grid-column: 1; grid-row: 4; }
.nebs-legend .nebs-legend-item:nth-child(9)  { grid-column: 1; grid-row: 5; }
.nebs-legend .nebs-legend-item:nth-child(11) { grid-column: 1; grid-row: 6; }
.nebs-legend .nebs-legend-item:nth-child(13) { grid-column: 1; grid-row: 7; }

/* 右列：2〜7行目に 7,8,9,10,11,12 */
.nebs-legend .nebs-legend-item:nth-child(2)  { grid-column: 2; grid-row: 2; }
.nebs-legend .nebs-legend-item:nth-child(4)  { grid-column: 2; grid-row: 3; }
.nebs-legend .nebs-legend-item:nth-child(6)  { grid-column: 2; grid-row: 4; }
.nebs-legend .nebs-legend-item:nth-child(8)  { grid-column: 2; grid-row: 5; }
.nebs-legend .nebs-legend-item:nth-child(10) { grid-column: 2; grid-row: 6; }
.nebs-legend .nebs-legend-item:nth-child(12) { grid-column: 2; grid-row: 7; }

#simple .nebs-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap;}



/* ---------- Slider Track をグラデーション化 ---------- */
#simple .range-input {-webkit-appearance: none; width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #6ed795 0%, #5ab7d9 50%, #d9d9d9 50%, #d9d9d9 100%); outline: none; transition: background 0.3s;}

/* Chrome, Edge 用の Track */
#simple .range-input::-webkit-slider-runnable-track {height: 8px; border-radius: 5px; background: transparent;}

/* Firefox 用 */
#simple .range-input::-moz-range-track { height: 10px; border-radius: 5px; background: transparent;}

/* ---------- Slider Thumb（丸い部分） ---------- */
#simple .range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #ddd; cursor: pointer; margin-top: -12px;}
#simple .range-input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #ddd; cursor: pointer;}

/* ---------- 数値に応じてグラデーションを動的に更新 ---------- */
#simple .range_box{padding: 10px 0 0;}
#simple .range_box input[type="range"] {background-size: 0% 100%;}

/* ---------- 吹き出し ---------- */
#simple .bubble{position:absolute; min-width: 220px; max-width: 80vw; background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 12px 30px rgba(0,0,0,.18); transform-origin:50% 100%; transform: scale(.96); opacity:0; pointer-events:none; transition: opacity .15s ease, transform .15s ease;}
#simple .bubble.show{opacity:1; transform: scale(1); pointer-events:auto}
#simple .bubble .title{font-weight:700; font-size:15px; margin-bottom:4px}
#simple .bubble .value{font-weight:800; font-size:22px; line-height:1.2}
#simple .bubble .sub{font-size:12px; opacity:.7; margin-top:4px}
#simple .bubble .close{position:absolute; top:8px; right:8px; border:0; background:#f3f4f6; border-radius:9999px; width:28px; height:28px; font-size:16px; cursor:pointer}
/* 矢印 */
#simple .bubble::after{content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; height:0; border:8px solid transparent; border-top-color:#fff; bottom:-16px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.1));}
/* 下側表示のときは矢印を上に */
#simple .bubble.bottom::after{top:-16px; bottom:auto; border-top-color:transparent; border-bottom-color:#fff}


/* ---------- 最終結果 ---------- */
#simple .result { margin-top: 60px; background: url(../images/top/bg_2.jpg) repeat; background-size: 30px; padding: 52px 0 0;}
#simple .result .result_box{width: 1100px; margin: 0 auto; background: #fff; border-radius: 20px; box-shadow: 0 0 15px 5px rgba(0,0,0,0.1);}
#simple .result .result_box h4{ background: linear-gradient(to left,#6BBAFF,#10D5D5); border-radius: 20px 20px 0 0; font-size: 30px; line-height: 160%; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; text-align: center; color: #fff; padding: 15px 0 21px;}
#simple .result .result_box .container {width: 100%;margin: 0 auto;font-size: 14px; padding: 21px 63px 75px 46px;}
#simple .result .result_box .top-section {display: flex;gap: 58px;}
#simple .result .result_box .top-section h5{font-family: "source-han-sans-japanese", sans-serif; font-weight: 700; font-style: normal; font-size: 23px; line-height: 160%; color: #3766B1;}

#simple .result .result_box .left-table,
#simple .result .result_box .right-chart {background: #fff;}
#simple .result .result_box .left-table {width: 466px;}
#simple .result .result_box .right-chart {width: 479px;display: flex;justify-content: center;align-items: center;}
#simple .result .result_box .right-chart .chartbox{width: 100%; height: auto;}
#simple .result .result_box .right-chart .chartbox p{font-family: arial, sans-serif; font-weight: 400; font-style: normal; text-align: center; font-size: 12px;}
#simple .result .result_box .right-chart .simple_list{text-align: center;}
#simple .result .result_box .right-chart .simple_list img{display: inline-block;}

#simple .result .result_box .right-chart .chartbox_flex{display: flex; flex-wrap: wrap;}
#simple .result .result_box .right-chart .pie-container1{ width: 333px; height: 333px; margin: 0;}
#simple .result .result_box .right-chart .pie-container1 canvas{margin: 25px 0 0;}
#simple .result .result_box .right-chart .pie-container1 .nebs-legend{margin-top: 28px;}
#simple .result .result_box .right-chart .pie-container1.container1_2{width: 108px; height: 333px; padding: 0 0 0 29px; margin: 0px;}
#simple .result .result_box .right-chart .pie-container2{width: 108px; height: auto;}
#simple .result .result_box .right-chart .pie-container1.container1_3{width: 306px; height: auto; margin: 0 auto;}

#simple .result .result_box table {width: 100%;border-collapse: collapse;}
#simple .result .result_box td.title_tt{font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; font-size: 14px; line-height: 193%; width: 60px; vertical-align: top;}
#simple .result .result_box td {font-size: 14px;}
#simple .result .result_box td.data_tt {text-align: right; }
#simple .result .result_box th {text-align: right; font-size: 12px; border-bottom: 1px solid #000;}
#simple .result .result_box .calculation tr:last-child th,
#simple .result .result_box .calculation tr:last-child td{ padding: 0 0 21px;}
#simple .result .result_box .calculation tr:nth-child(2) th,
#simple .result .result_box .calculation tr:nth-child(2) td{padding: 21px 0 0;}

#simple .result .result_box .bottom-table {margin-top: 40px;}
#simple .result .result_box .total_tbe{padding: 10px 0 0; border-top: 1px solid #000;}
#simple .result .result_box .total_tbe th{text-align: left; font-size: 14px; line-height: 193%;font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal;}
#simple .result .result_box .total_tbe tr th,
#simple .result .result_box .total_tbe tr td{border-bottom: none;vertical-align: top;}
#simple .result .result_box .total_tbe tr th.data_tt{text-align: right; }

#simple .result .contact_box{text-align: center; padding: 95px 0 155px;}
#simple .result .contact_box h4{font-family: "source-han-sans-japanese", sans-serif; font-weight: 700; font-style: normal; text-align: center; font-size: 29px; line-height: 145%;}
#simple .result .contact_box a.btn{width: 379px; height: auto; position: relative; display: block; margin: 41px auto 0; border-radius: 1000px; background: #B30262; height: 70px;}
#simple .result .contact_box a.btn span{width: 100%; height: auto; color: #262626; font-size: 20px; text-align: center; background: #FF84C6; border-radius: 1000px; padding: 18px 0; position: absolute; top: -7px; left: 0px; font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 600; font-style: normal;line-height: 170%;}

#simple .result .bottom-table{}
#simple .result .bottom-table h5{font-family: "source-han-sans-japanese", sans-serif; font-weight: 700; font-style: normal; font-size: 23px; line-height: 160%; color: #3766B1; width: 100%; padding: 0 0 20px;}
#simple .result .bottom-table .flex{ justify-content: space-between; }
#simple .result .bottom-table .flex .table_box{padding: 21px 0 0;border-top: 1px solid #000;}
#simple .result .bottom-table .flex table{width: 466px; height: auto; }
#simple .result .bottom-table .flex table th{vertical-align: top; }
#simple .result .bottom-table .flex .table_box:first-child th.top{ width: 48px; text-align: left;}
#simple .result .bottom-table .flex .table_box:last-child th.top{ width: 111px; text-align: left;}
#simple .result .bottom-table .flex table th{border: none;font-size: 14px; text-align: left; line-height: 193%; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal;}
#simple .result .bottom-table .flex table td{border: none;font-size: 14px; text-align: left; line-height: 193%; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal;}
#simple .result .bottom-table .flex table td.data_tt{text-align: right;}
#simple .result .red_caution { font-size: 13px; color: red; padding-top: 20px;}

#related ul { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: 10px; padding: 10px 0 0; }
#related ul li { text-align: center; padding: 5px 0; border: 1px solid #000; }


#simple .login_box{background: url(../images/top/estimate_img_bg.jpg) no-repeat center center; background-size: cover; padding: 66px 0 90px; align-items: center;}
#simple .login_box .flex{justify-content: space-between;align-items: center;}
#simple .login_box h4{text-align: left; font-size: 30px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; line-height: 160%;}
#simple .login_box h4 span{font-size: 40px; line-height: 160%;}
#simple .login_box a{margin: 0; line-height: 143%; border: none; padding: 18px 0 20px; color: #fff; font-size: 21px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; background:linear-gradient(to left, #FFAC5A,#E84DB6); }

/* ------------------------------------------------------------ additnal chart and pie chart calcuation top page */
/* #simple  .hide{display: none !important;} */
#simple .cal-btn a.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.nebs-tooltip{
  position: absolute; /*  important */
  max-width: 260px;
  background: rgba(0,0,0,0.85);
  color:#fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  z-index: 999999;
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
}
/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	#header { min-width: auto;}
	footer{min-width: auto; }
	body{min-width: auto;}
	h3.title span.min_tt{ font-size: 18px; padding: 0 0 0 38px; }
	h3.title span.min_tt:before{width: 26px; height: 1px;}
	h3.title span.big_tt{font-size: 40px;} 
	
	h3{ font-size: 16px; }
	h2.span{font-size: 30px;}
	/* ------------------------------------------------------------ #simple */
	#simple {padding: 33px 0 0;}
	#simple .simple-inner{width: auto; margin: 0 auto;}
	#simple .simple_box_1{width: 96%; margin: 0 auto;}
	#simple .simple_box_1 ul{margin: 36px auto 0; display: flex;}
	#simple .simple_box_1 ul li{font-size: 12px; padding: 16px 0; }
	#simple .simple_box_1 ul li:last-child{font-size: 12px; padding: 8px 0 9px;line-height: 142%; }
	/* ------------------------------------------------------------ #simple */
	#simple .calculation_wrap { display: block; position: relative; width: auto; margin: 0 auto; }
	#simple .calculation_wrap .frm_box { margin: 0 auto; padding-bottom: 320px; }
	
	#simple .calculation_wrap #data_1 .frm_box { width: 90%; margin: 0 auto; }
	#simple .calculation_wrap #data_1 .frm_box { padding: 31px 0 0; }
	#simple .calculation_wrap #data_1 .frm_box  .form_box{width: 100%; height: auto;}
	#simple .calculation_wrap #data_1 .frm_box  .form_box label{font-size: 16px; }
	#simple .calculation_wrap #data_1 .frm_box  .form_box label img{margin: 0 0 0 13px; display: inline-block;}
	#simple .calculation_wrap #data_1 .frm_box  .form_box:not(:last-child){margin: 0 0 33px;}
	#simple .calculation_wrap #data_1 .frm_box  .form_box input{width: 100%; font-size: 16px; padding: 12px 19px; margin: 11px 0 0;}
	
	#simple .calculation_wrap #data_2 .frm_box { width: 90%;padding: 31px 0 0; }
	#simple .calculation_wrap #data_2 .frm_box  .flex_box{flex-wrap: wrap; justify-content: space-between;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box{width: 100%; height: auto; margin: 0 0 19px;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box label{font-size: 16px; width: 100%; margin: 0 0 11px;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box label span{font-size: 12px;}

	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box label img{margin: 0 0 0 13px; display: inline-block;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box select{ width: 100%; height: auto; font-size: 16px; padding: 12px 19px 13px; border-radius: 5px; color: #000;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .select_box{position: relative;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .select_box:before{content: ""; display: block; width: 10px ;height: 10px; border-right: 1px solid #3766B1; border-bottom: 1px solid #3766B1; position: absolute; top: 50%; right: 17px; transform: translateY(-50%) rotateZ(45deg);}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box input{display: block; width: 100%; height: auto; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; line-height: 150%; padding: 12px 19px 13px; border-radius: 5px; border: 1px solid #C9C9C9;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .flex{display: flex; justify-content: space-between;}
	#simple .calculation_wrap #data_2 .frm_box  .flex_box .form_box .flex .select_box{width: 49%;}
	
	#simple .calculation_wrap #data_3 .frm_box { width: 94%; padding: 24px 0 0;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box{padding: 25px 25px 25px 21px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box:not(:last-child){margin: 0 0 14px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box h4{font-size: 20px; }
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box{padding: 0 0 0;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box h5{font-size: 20px; padding: 0 0 12px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table{margin: 12px 0 0px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table th{font-size: 16px; padding-right: 0px; width: 100%; display: block;line-height: 182%;padding-bottom: 5px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table td{font-size: 15px; display: block;width: 100%;line-height: 182%;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table tr:not(:last-child) th{padding-bottom: 5px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content table tr:not(:last-child) td{padding-bottom: 20px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content{padding: 0 0 30px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .content:first-child{padding: 50px 0 30px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .flex_content{justify-content: space-between;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_1 .list_box .flex_content .content{width: 100%;}
	
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2{padding: 25px 18px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 h4{font-size: 26px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul{ padding: 24px 0 0;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li:not(:last-child){margin: 0 0 13px;}
	
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li{padding: 24px 20px 12px; border-radius: 10px;}
	
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li p.title_tt{font-size: 18px; padding: 0 0 16px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex{justify-content: space-between; flex-wrap: wrap;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box{width: 100%; height: auto; padding: 0 0 18px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box .select_box:before{width: 10px ;height: 10px;}
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box .select_box select{font-size: 16px; padding: 9px 19px 11px; border-radius: 5px; }
	#simple .calculation_wrap #data_3 .frm_box .clos_box_2 ul li .flex .box label{padding: 0 0 8px; font-size: 16px;}
	
	#simple .result .contact_box{padding: 43px 0 71px;}
	#simple .result .contact_box h4{font-size: 25px; line-height: 145%;}
	#simple .result .contact_box a.btn{width: 100%; margin: 26px auto 0; height: 70px;}
	#simple .result .contact_box a.btn span{width: 100%;font-size: 20px; padding: 18px 0; top: -7px; left: 0px;}
	
	#simple .calculation_wrap .followbox { width: 100%; padding: 8px 8px 12px; border-radius: 20px 20px 0 0; bottom: 0; left: 0; top: auto; z-index: 999; }
	#simple .calculation_wrap .followbox.is-stopped { position: relative; bottom: 0; left: 0; right: 0; box-shadow: none; background: transparent; border-radius: 0; padding: 20px 8px 12px;}
	#simple .calculation_wrap .followbox.reached-bottom{box-shadow: none; padding: 0px 8px 12px; }
	#simple .calculation_wrap .followbox .followbox__scroll { padding: 0px; max-height: auto; overflow: visible; -webkit-overflow-scrolling: auto;}
	#simple .calculation_wrap .followbox .simple_list{width: 100%; height: auto;}
	#simple .calculation_wrap .followbox .simple_list img{width: 100%; height: auto;}
	#simple .calculation_wrap .followbox .flex_box{display: flex;padding: 0 0;}
	#simple .calculation_wrap .followbox .chartbox{position: relative; width: 50%;}
	#simple .calculation_wrap .followbox .box{position: relative; width: 50%;} 
	#simple .calculation_wrap .followbox .box.is-chart-pending{ width: 100%;} 
	#simple .calculation_wrap .followbox .chart_list{display: flex; flex-wrap: wrap; justify-content: space-between;}
	#simple .calculation_wrap .followbox .chart_list li{font-size: 11px; padding: 0px 0 0 13px;}
	#simple .calculation_wrap .followbox .chart_list li:before{width: 11px; height: 11px; }
	#simple .calculation_wrap .followbox .chart_list li{width: 169px; height: auto;}
	#simple .calculation_wrap .followbox .chart_list li.tag_right{width: 117px; height: auto;}
	
	#simple .calculation_wrap .followbox .link_box{display: flex;padding: 15px 0 0;flex-wrap: wrap;}
	#simple .calculation_wrap .followbox .link_box a{width: 49%; margin: 0px; height: auto;}
	#simple .calculation_wrap .followbox .link_box a img{top: auto; left: auto; width: 100%; height: auto; position: relative;}
	#simple .calculation_wrap .followbox .link_box a::before {display: none;}
	
	#simple .calculation_wrap .followbox .link_box a.btn_1{background: none;}
	
	#simple .calculation_wrap .followbox .link_box a.btn_2{background: none; margin: 2% 0 0 0;}
	#simple .calculation_wrap .followbox .link_box a.btn_3{background: none; margin: 0 0 0 2%;}

	#simple .calculation_wrap .followbox .box.is-chart-pending .link_box{justify-content: space-between;}
	#simple .calculation_wrap .followbox .box.is-chart-pending .link_box a{width: 32%;}
	#simple .calculation_wrap .followbox .box.is-chart-pending .link_box a.btn_2,
	#simple .calculation_wrap .followbox .box.is-chart-pending .link_box a.btn_3{ margin: 0;} 

	#simple .calculation_wrap .followbox h4{font-size: 20px; }
	#simple canvas{max-width: 100%; display:block}
	#simple #panel{margin: 10px 0 0; font-size: 13px; opacity:.7}
	
	/* ---------- Slider Track をグラデーション化 ---------- */
	#simple .range-input {width: 100%; height: 8px; border-radius: 5px;}
	
	/* Chrome, Edge 用の Track */
	#simple .range-input::-webkit-slider-runnable-track {height: 8px; border-radius: 5px; background: transparent;}
	
	/* Firefox 用 */
	#simple .range-input::-moz-range-track { height: 10px; border-radius: 5px; background: transparent;}
	
	/* ---------- Slider Thumb（丸い部分） ---------- */
	#simple .range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #ddd; cursor: pointer; margin-top: -12px;}
	#simple .range-input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #ddd; cursor: pointer;}
	
	/* ---------- 数値に応じてグラデーションを動的に更新 ---------- */
	#simple .range_box{padding: 4px 0 0;}
	#simple .range_box input[type="range"] {background-size: 0% 100%;}
	
	/* ---------- 吹き出し ---------- */
	#simple .bubble{min-width: 220px; max-width: 80vw; padding:14px 16px;}
	#simple .bubble .title{font-size:15px; margin-bottom:4px}
	#simple .bubble .value{font-size:22px; line-height:1.2}
	#simple .bubble .sub{font-size:12px; opacity:.7; margin-top:4px}
	#simple .bubble .close{position:absolute; top:8px; right:8px; border:0; width:28px; height:28px; font-size:16px;}
	/* 矢印 */
	#simple .bubble::after{border:8px solid transparent;  bottom:-16px; }
	/* 下側表示のときは矢印を上に */
	#simple .bubble.bottom::after{top:-16px; }
	
	#simple .nebs-legend { font-size: clamp(7px, 1.6vw ,11px); column-gap: 7px;}
	#simple .nebs-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap;}
	#simple .nebs-legend-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;}
	#simple .calculation_wrap .followbox .chartbox .pie-container.chartbox_2 { width: 115px; height: 200px; padding: 19px 0 0 0px; }
	#simple .calculation_wrap .followbox .chartbox .pie-container.chartbox_1 { width: 70%; height: 200px; padding: 19px 0 0; }
	
	/* ---------- 最終結果 ---------- */
	#simple .result { margin-top: 30px; background: url(../../images/top/bg_2.jpg) repeat; background-size: 15px; padding: 30px 0 0px;}
	#simple .result .result_box{width: 90%; }
	#simple .result .result_box h4{ font-size: 20px; padding: 10px 0 15px;}
	#simple .result .result_box .container {width: 100%;margin: 0 auto;font-size: 14px; padding: 16px 5% 28px;}
	#simple .result .result_box .top-section {display: flex; flex-direction: column-reverse; gap: 0;}
	#simple .result .result_box .top-section h5{ font-size: 21px; padding: 0 0 12px; line-height: 143%;}
	
	
	
	#simple .result .result_box .left-table {width: 100%; padding: 34px 0 0;}
	#simple .result .result_box .right-chart .simple_list img{width: 100%; height: auto;}
	#simple .result .result_box .right-chart {width: 100%; margin: 0px; display: flex;justify-content: center;align-items: center;}
	#simple .result .result_box .right-chart .chartbox{width: 100%; height: auto;}
	#simple .result .result_box .right-chart .chartbox p{font-size: 12px;text-align: left;}
	#simple .result .result_box .right-chart .chartbox .chart_list{display: flex; flex-wrap: wrap; justify-content: space-between; width: 270px; margin: 0 auto;}
	#simple .result .result_box .right-chart .chartbox .chart_list li{font-size: 11px; padding: 0 0 0 15px;}
	#simple .result .result_box .right-chart .chartbox .chart_list li:before{ width: 9px; height: 9px;}
	#simple .result .result_box .right-chart .chartbox .chart_list li{width: 150px; height: auto;}
	#simple .result .result_box .right-chart .chartbox .chart_list li.tag_right{width: 107px; height: auto;}
	
		
	#simple .result .result_box .right-chart .chartbox_flex{display: flex; flex-wrap: wrap;padding: 32px 0 0;}
	#simple .result .result_box .right-chart .pie-container1{ width: 65%; height: 240px; margin: 0 auto;}
	#simple .result .result_box .right-chart .pie-container1.container1_2{ width: 115px; height: 250px; margin: 0 auto;}
	#simple .result .result_box .right-chart .pie-container1.container1_3{ width: 100%; height: auto; margin: 0 auto;}
	#simple .result .result_box .right-chart .pie-container1.container1_3 .nebs-legend {padding: 18px 0 0; display: flex; flex-wrap: wrap; font-size: 12px; column-gap: 0; justify-content: flex-start; width: 100%; margin: 0 auto;}
	#simple .result .result_box .right-chart .pie-container1.container1_3 .nebs-legend .nebs-legend-item{margin: 0 2% 0 0;}
	#simple .result .result_box .right-chart .pie-container1.container1_3 .nebs-legend .nebs-legend-item:nth-child(2n){ margin: 0;}
	#simple .result .result_box .right-chart .pie-container1.container1_3 .nebs-legend-item { width: 55%; display: block; position: relative;}
	#simple .result .result_box .right-chart .pie-container1.container1_3 .nebs-legend-item:nth-child(2n) { width: calc(100% - 57%);}
	#simple .result .result_box .right-chart .pie-container1.container1_3 .nebs-legend-item span{padding: 0 0 0 15px; white-space: normal;        display: block;}
	#simple .result .result_box .right-chart .pie-container1.container1_3 .nebs-legend-item .nebs-legend-color{display: block; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); padding: 0px;}
	
	
	#simple .result .result_box table {width: 100%;border-collapse: collapse;}
	#simple .result .result_box td.title_tt{font-size: 12px; width: 47px; line-height: 209%;}
	#simple .result .result_box td {font-size: 12px; line-height: 209%; padding: 0;}
	#simple .result .result_box th { font-size: 11px; line-height: 209%;}
	#simple .result .result_box .calculation tr:last-child th,
	#simple .result .result_box .calculation tr:last-child td{padding: 0 0 24px;}
	#simple .result .result_box .calculation tr:nth-child(2) th,
	#simple .result .result_box .calculation tr:nth-child(2) td{padding: 17px 0 0;}
	
	#simple .result .result_box .bottom-table {margin-top: 40px;}
	#simple .result .result_box .total_tbe{margin: 10px 0 0;}
	#simple .result .result_box .total_tbe th{text-align: left; font-size: 12px;}
	#simple .result .result_box .total_tbe tr th,
	#simple .result .result_box .total_tbe tr td{border-bottom: none;}
	#simple .result .result_box .total_tbe tr th.data_tt{text-align: right; }
	
	#simple .result .bottom-table{}
	#simple .result .bottom-table h5{font-size: 21px; padding: 0 0 20px; line-height: 143%;}
	#simple .result .bottom-table .flex{ justify-content: space-between; }
	#simple .result .bottom-table .flex .table_box{padding: 14px 0;}
	#simple .result .bottom-table .flex table{width: 100%; height: auto; }
	#simple .result .bottom-table .flex table th{ }
	#simple .result .bottom-table .flex .table_box:first-child th.top,
	#simple .result .bottom-table .flex .table_box:last-child th.top{line-height: 193%; width: 56px; text-align: left; vertical-align: top;}
	#simple .result .bottom-table .flex table th{border: none;font-size: 12px; vertical-align: top;}
	#simple .result .bottom-table .flex table td{border: none;font-size: 12px; vertical-align: top;}
	#simple .result .bottom-table .flex table td.data_tt{text-align: right;}
	#simple .result .red_caution { font-size: 11px;}
	
	#related ul { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: 10px; padding: 10px 0 0; }
	#related ul li { text-align: center; padding: 5px 0;}
	
	
	#simple .login_box{background: url(../images/top/estimate_img_bg.jpg) no-repeat center center; background-size: cover; padding: 33px 0 45px; align-items: center;}
	#simple .login_box .flex{justify-content: space-between;align-items: center;}
	#simple .login_box h4{text-align: center; font-size: 22px; }
	#simple .login_box h4 span{font-size: 29px;margin: 0px 0 13px; display: inline-block;}
	#simple .login_box a{padding: 14px 0 16px; font-size: 18px; margin: 20px auto 0px;}
	
}