@charset "utf-8";
/* ------------------------------------------------------------ index */

body{ min-width: 1200px; }
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;}

.canvas_box{min-width: 1200px; overflow: hidden;position: absolute; top: 1%; width: 100%; padding: 115% 0; }
.canvas_box #animation_container{position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; top: 0; }
.canvas_box #animation_container #canvas{}
main{position: relative; z-index: 1;}
/* ----------------------------------------------------------- */
/*



section:not(#fv) { padding: 50px 0;}
*/

.btns { display: block; width: 400px; padding: 30px 0; font-size: 20px; text-align: center; border: 1px solid #262626; border-radius: 50px; margin: 20px auto 0;}

.article_wrapper { padding: 10px 0 0; }
.article_wrapper .itemlist { display: flex;}
.article_wrapper .itemlist.is-static { justify-content: center;}
.article_wrapper .itemlist article { width: 440px; margin: 0 60px 0 0; border: 1px solid #262626; }
.article_wrapper .itemlist a { width: 100%; }
.article_wrapper .itemlist ar1ticle .img { width: 100%; height: auto;}
.article_wrapper .itemlist article .contents { padding: 20px; background: #fff;}
.article_wrapper .itemlist article .contents .day { font-size: 12px;}
.article_wrapper .itemlist article .contents h3 { font-size: 18px; padding-top: 10px;}
.article_wrapper .itemlist article .contents .text { font-size: 16px; padding-top: 10px;}
.article_wrapper .itemlist article .contents .tags { display: flex; padding-top: 10px;}
.article_wrapper .itemlist article .contents .tags li { display: block; padding: 5px 10px; font-size: 10px; text-align: center; border: 1px solid #262626; border-radius: 50px; }
.article_wrapper .itemlist article .contents .btn { display: block; width: 200px; padding: 5px 0; font-size: 12px; text-align: center; border: 1px solid #262626; border-radius: 50px; margin: 0 auto; padding-top: 10px; }

/* ------------------------------------------------------------ #fv */
#fv{margin: 357px auto 0; max-width: 1600px; padding: 0 40px;}

#fv h2 { font-size: 22px; letter-spacing: 0.38em; line-height: 205%;text-align: left; color: #262626; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal;}
#fv h2 .thick_tt{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700; font-style: normal; font-size: 81px; line-height: 100%; letter-spacing: 0em; padding: 15px 0 0; display: inline-block;}
#fv h2 .thick_tt .tt_2{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; font-style: normal; font-size: 81px; line-height: 100%;} 
#fv h2 .mini{font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal; font-size: 16px; letter-spacing: 0.38em; line-height: 100%;} 
#fv .fv_flex{padding: 268px 0 0; width: 593px; justify-content: space-between; margin: 0 0 0 auto;}
#fv .fv_flex a{display: block; }

/* ------------------------------------------------------------ #about */
#about{padding: 36px 0 0;}
#about .white_box{width: 100%; height: auto; border-radius: 23px; padding: 62px 60px 63px; background: #fff; box-shadow: 0 0 15px 5px rgba(0,0,0,0.1);}
#about .white_box .flex{justify-content: space-between; flex-wrap: wrap;}
#about .white_box .flex .tt_box{width: 531px; height: auto;}
#about .white_box .flex .tt_box p{padding: 40px 0 0; font-size: 16px; font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; line-height: 225%;}
#about .white_box .flex .img_box{}
#about .white_box .flex .movie_box{width: 980px; height: auto; background: #A3CCED; border-radius: 21px; padding: 37px 32px 39px; margin: 87px auto 0;}
#about .white_box .flex .movie_box h4{font-size: 30px; font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal; line-height: 147%; color: #262626; text-align: center;}
#about .white_box .flex .movie_box .movie{margin: 34px 0 0;}
#about .white_box .flex .movie_box .movie video{width: 100%; height: auto;}

/* ------------------------------------------------------------ #case */
#case{position: relative; padding: 93px 0 0;}
#case .case_box{position: relative; padding: 90px 0 92px; background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/case_bg.jpg) no-repeat center center; background-size: cover;}
#case .case_box .bg_box{position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;}
#case .case_box .bg_box img{width: 100%; height: 100%;}
#case .case_box .flex{position: relative; z-index: 1;align-items: center;}
#case .case_box a.btns{border: 1px solid #3766B1; border-radius: 1000px; color: #262626; font-size: 18px; text-align: center; padding: 20px 0; line-height: 145%; background: #fff; width: 332px; position: relative;margin: 0 0 0 auto;}
#case .case_box a.btns.SP{display: none;}
#case .case_box a.btns:before{position: absolute; content: ""; display: block; background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/btn_icn.svg) no-repeat center center; background-size: 100%; width: 31px; height: 11px; right: 24px; top: 44%; transform: translateY(-50%);}
#case .case_box .slider_box{position: relative; z-index: 1; padding: 52px 0 0;}
#case .case_box .slider_box.is-static { width: 1100px; margin: 0 auto;}
#case .case_box .slider_box .slick-track{padding: 20px 0;}
#case .case_box .slider_box img.SP{display: none;}
#case .case_box .slider_box .box{width: 442px; height: auto; background: #fff; box-shadow: 0 0 15px 5px rgba(0,0,0,0.1); margin: 0 46px 0 0;}
#case .case_box .slider_box .box .text_box{padding: 34px 28px 43px;}
#case .case_box .slider_box .box .text_box h4{font-size: 26px; line-height: 160%; font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; text-align: center;}
#case .case_box .slider_box .box .text_box p{display: -webkit-box; display: box; -webkit-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; line-height: 160%; margin: 28px 0 0;}
#case .case_box .slider_box .box .text_box a{background: #00559D; text-align: center; font-size: 16px; font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; border-radius: 1000px; width: 222px; padding: 7px 0 11px; display: block; color: #fff; margin: 37px auto 0;line-height: 150%;}

/* ------------------------------------------------------------ calculation */
#calculation {background:url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/bg_2.jpg) repeat center center; background-size: 30px; padding: 98px 0 67px;}
#calculation .title_box{align-items: center;}
#calculation .title_box h3.title span.big_tt{display: inline-block; padding: 7px 0 0;}
#calculation .title_box p{line-height: 230%; font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; margin: 0 0 0 78px;}
#calculation .content_box{padding: 78px 0 0; flex-wrap: wrap; justify-content: space-between;}
#calculation .content_box .box{width: 524px; height: auto; background: #fff; border-radius: 20px; box-shadow: 0 0 15px 5px rgba(0,0,0,0.1); padding: 0 50px 82px 47px;}
#calculation .content_box .box .tt_box{text-align: center; padding: 239px 0 19px; position: relative;}
#calculation .content_box .box .tt_box h4{font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal; font-size: 28px; color: #3766B1;}
#calculation .content_box .box .tt_box h4 a { text-decoration: underline; }
#calculation .content_box .box .tt_box img{position: absolute; transform: translateX(-50%);}
#calculation .content_box .box.box_1 .tt_box img{top: -13px; left: 47%;}
#calculation .content_box .box.box_2 .tt_box img{top: -7px; left: 45%;}
#calculation .content_box .box .tbe_box{width: 100%; height: auto;}
#calculation .content_box .box .tbe_box li{align-items: center; justify-content: space-between;border-top: 1px solid #EBEBEB;}
#calculation .content_box .box .tbe_box li p.title_tt{text-align: left; font-size: 18px; line-height: 145%; font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal;}
#calculation .content_box .box .tbe_box li p.tt{text-align: right;font-size: 16px;}
#calculation .content_box .box .tbe_box li p.tt span.tt_1{ font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; font-size: 16px; margin: 6px 0 0 0;}
#calculation .content_box .box .tbe_box li p.tt span.tt_2{width: 34px; line-height: 120%; font-size: 30px; font-family: "Helvetica Neue" , Helvetica ,serif; text-align: center; display: inline-block; margin: 6px 0 0 7px; font-weight: 700;}
#calculation .content_box .box .tbe_box li img{display: inline-block;}

#calculation .content_box .box.box_youtube{width: 100%; height: auto; margin: 47px 0 0; padding: 42px 91px 55px 93px;}
#calculation .content_box .box.box_youtube h4{font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; font-size: 31px; line-height: 146%; text-align: center;}
#calculation .content_box .box.box_youtube .movie{width: 100%; height: auto; margin: 30px 0 0;}
#calculation .content_box .box.box_youtube .movie video{width: 100%; height: auto;}

#calculation .content_box .box .tbe_box li:nth-child(1) {padding: 38px 0 40px;}
#calculation .content_box .box.box_2 .tbe_box li:nth-child(1) {padding: 37px 0;}
#calculation .content_box .box .tbe_box li:nth-child(2) {padding: 11px 0 17px;}
#calculation .content_box .box .tbe_box li:nth-child(3) {padding: 31px 0 0px;}


/* ------------------------------------------------------------ #simple */
#simple {padding: 128px 0 0;}
#simple .calculation_wrap { display: flex; justify-content: space-between; align-items: flex-start;position: relative;width: 1100px; margin: 0 auto; }
#simple .calculation_wrap .frm_box { width: 650px;}
#simple .calculation_wrap .frm_box table{width: 100%; height: auto;}
#simple .calculation_wrap .frm_box table th{display: block; font-size: 16px; line-height: 150%; font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal; text-align: left;padding: 27px 0 22px;}
#simple .calculation_wrap .frm_box table th .q_flex{display: flex; align-items: center; }

#simple .calculation_wrap .frm_box table th img{display: inline-block; margin: 2px 0 0 7px;}
#simple .calculation_wrap .frm_box table th input{margin: 0 0 0 15px;}
#simple .calculation_wrap .frm_box table th input.range-value{border-radius: 5px; border: 1px solid #E2E2E2; width: 115px; height: auto; font-size: 13px;font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal; padding: 4px 9px 5px;} 
/* Chrome, Safari, Edge */
#simple .calculation_wrap .frm_box table th input[type="number"]::-webkit-inner-spin-button,
#simple .calculation_wrap .frm_box table th input[type="number"]::-webkit-outer-spin-button {　-webkit-appearance: none;　margin: 0;}

/* Firefox */
#simple .calculation_wrap .frm_box table th input[type="number"] {-moz-appearance: textfield;}




#simple .calculation_wrap .frm_box table td{display: block; border: none; padding: 0 0 26px;}
#simple .calculation_wrap .frm_box table tr:not(:last-child) td{ border-bottom: 1px solid #EBEBEB;}
#simple .calculation_wrap .frm_box table td label{padding: 15px 0 13px;}
#simple .calculation_wrap .frm_box table td label .type-card {display: inline-block; margin: 0 10px;}
#simple .calculation_wrap .frm_box table td .range_box input{width: calc(100% - 137px);}
#simple .calculation_wrap .frm_box table td .range_box span{font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 160%;}
#simple .calculation_wrap .frm_box table td .range_box span.tt_1{width: 35px; height: auto; text-align: left;}
#simple .calculation_wrap .frm_box table td .range_box span.tt_2{width: 105px; height: auto; text-align: right;}

#simple .calculation_wrap .frm_box table td label input[type="radio"] {display: none;}

#simple .calculation_wrap .frm_box table td label { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #ddd; background: #fff; color: #262626; cursor: pointer; transition: 0s; font-size: 15px;}
#simple .calculation_wrap .frm_box table tr.form_1 td label {width: 49%; height: auto;}
#simple .calculation_wrap .frm_box table tr.form_1 td label:not(:last-child){margin-right: 2%;}

#simple .calculation_wrap .frm_box table tr.form_4 td label {width: 24%; height: auto;}
#simple .calculation_wrap .frm_box table tr.form_4 td label:not(:last-child){margin-right: 2%;}

#simple .calculation_wrap .frm_box table tr.form_5 td{border-bottom: none;}
#simple .calculation_wrap .frm_box table tr.form_5 td label {width: 24.5%; height: auto;}
#simple .calculation_wrap .frm_box table tr.form_5 td label:not(:last-child){margin-right: 1.5%;}

#simple .calculation_wrap .frm_box table tr.form_6 td {border: none;padding: 26px 0 75px;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box{border: 1px solid #E6E6E6; border-radius: 17px; padding:25px 43px 25px 47px;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn{font-size: 16px; position: relative; font-family: source-han-sans-japanese, sans-serif; font-weight: 500; font-style: normal; border: none; padding: 0px;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn:before{content: ""; display: block; width: 14px; height: 14px; top: 40%; right: 0px; transform: translateY(-50%) rotateZ(45deg); border-bottom: 1px solid #51ABDE; border-right: 1px solid #51ABDE; position: absolute; transition: 0.5s;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn.active:before{transform: translateY(-50%) rotateZ(-135deg); top: 60%; transition: 0.5s;}

#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn label {width: 100%; height: auto; border: none; position: relative;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .list_box{display: block; padding: 0 0 25px;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .flex{flex-wrap: wrap; padding: 37px 0 0; justify-content: space-between;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li{font-size: 16px; font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; line-height: 250%; justify-content: space-between;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li span{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 17px; line-height: 250%; color: #51ABDE; margin: 0 10px 0 0;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li.tt_1{width: 292px;}
#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li.tt_2{width: 230px;}


#simple .calculation_wrap .frm_box table tr.form_7 th span{font-size: 20px; line-height: 160%; color: #51ABDE; display: inline-block; margin: 0 6px 0 0;}
#simple .calculation_wrap .frm_box table tr.form_7 th .flex{align-items: center;}
#simple .calculation_wrap .frm_box table tr.form_7 th .flex img{margin: 0px 13px 0 0;}
#simple .calculation_wrap .frm_box table .form_tt_box{background: #A2CCED; border-radius: 9px; color: #fff; font-size: 14px; line-height: 160%; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; padding: 9px 15px 11px; margin: 16px 0 0 ; display: none;}
#simple .calculation_wrap .frm_box table tr.form_7 td label {width: calc(100% / 3); height: auto;}

/* for double */
#simple .calculation_wrap .frm_box table tr.form_7 td .double label{width: calc(100%/2);height: auto;}
#simple .calculation_wrap .frm_box table tr.form_7 td .double  label:nth-child(2){border-radius: 0 5px 5px 0;}

#simple .calculation_wrap .frm_box table tr.form_7 th .flex img.easy_mini_icn{width: 18px; height: auto; margin: 0 0 0 12px;}
#simple .calculation_wrap .frm_box table tr.form_7 th .flex img.easy_mini_icn:hover{opacity: 0.7;}
#simple .calculation_wrap .frm_box table tr.form_7 td label:nth-child(1){border-radius: 5px 0 0 5px; border-right: none;}
#simple .calculation_wrap .frm_box table tr.form_7 td label:nth-child(2){border-radius: 0px; /* border-right: none; */}
#simple .calculation_wrap .frm_box table tr.form_7 td label:nth-child(3){border-radius: 0 5px 5px 0;}
#simple .calculation_wrap .frm_box table tr.form_7 td label:not(:last-child){}
#simple .calculation_wrap .frm_box table tr td label.mini_tt{font-size: 11px;}
#simple .calculation_wrap .frm_box table td label .img {padding: 0 0 6px;}
#simple .calculation_wrap .frm_box table td label .img img.on {	display: none;}

#simple .calculation_wrap .frm_box table td label:has(input[type="radio"]:checked) {background: linear-gradient(90deg, #10d5d5, #6bbaff); border: none;}

#simple .calculation_wrap .frm_box table tr.active{position: relative;}
#simple .calculation_wrap .frm_box table tr.active td div.flex{background: #A7DFFF; padding: 10px; box-shadow: 0 0 0 10px #A7DFFF;}

#simple .calculation_wrap .frm_box table td label:has(input[type="radio"]:checked) .img img.off {display: none;}
#simple .calculation_wrap .frm_box table td label:has(input[type="radio"]:checked) .img img.on {display: block;}


#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;position: sticky; top: 140px; align-self: flex-start;}
#simple .calculation_wrap .followbox .followbox__scroll { padding: 16px 0px 28px; max-height: calc(100vh - 140px); overflow: auto; -webkit-overflow-scrolling: touch;}
#simple .calculation_wrap .followbox .chartbox{position: relative; display: flex; flex-wrap: wrap;}
#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_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(https://www.ntt-f.co.jp/nebs/nebs-portal/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(https://www.ntt-f.co.jp/nebs/nebs-portal/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 .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%;}
.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;}
#simple .nebs-legend-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;}

#simple .calculation_wrap .followbox .chartbox .pie-container.chartbox_2 { width: 105px; height: 245px; padding: 19px 0 0 0px; }
#simple .calculation_wrap .followbox .chartbox .pie-container.chartbox_1 { width: 222px; height: 222px; padding: 19px 0 0; }

#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}

/* ---------- Slider Track をグラデーション化 ---------- */
#simple .range-input {-webkit-appearance: none; width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #10D5D5 0%, #6BBAFF 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: #F8F8F8; border: 2px solid #ddd; cursor: pointer; margin-top: -12px;}
#simple .range-input::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #F8F8F8; border: 2px solid #ddd; cursor: pointer;}

/* ---------- 数値に応じてグラデーションを動的に更新 ---------- */
#simple .range_box{padding: 10px 0 0;align-items: center;}
#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: 50px; background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/bg_2.jpg) repeat; background-size: 30px; padding: 47px 0 88px}
#simple .result .result_box{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: 466px;}
#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 .pie-container1{ width: 357px; height: 357px; margin: 0 auto;}

#simple .result .result_box .right-chart .pie-container1.container1_2{ width: 108px !important; height: 357px; margin: 0 auto;}
#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_3{width: 100%; height: 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 #262626;font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal;}
#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: 20px;}
#simple .result .result_box .total_tbe{padding: 10px 0 0; border-top: 1px solid #262626;}
#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 .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 #262626;}
#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;}


#simple .result .result_box .right-chart .chartbox_flex {
    display: flex;
    flex-wrap: wrap;
}


#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 #262626; }


#simple .login_box{background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/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: #262626; font-size: 21px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; background:#fff; }


/* ------------------------------------------------------------ #column */
#column{padding: 88px 0 82px; }
#column .title_box{justify-content: space-between;align-items: center;}
#column a{border-radius: 1000px; border: 1px solid #3766B1; text-align: center;}
#column a.btns{border: 1px solid #3766B1; border-radius: 1000px; color: #262626; font-size: 18px; text-align: center; padding: 20px 30px 20px 0; line-height: 145%; background: #fff; width: 332px; position: relative;margin: 0 0 0 auto; display: block;}
#column a.btns:before{position: absolute; content: ""; display: block; background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/btn_icn.svg) no-repeat center center; background-size: 100%; width: 31px; height: 11px; right: 24px; top: 44%; transform: translateY(-50%);}
#column a.btns.SP{display: none;}
#column .slider_box .slick-track{padding: 20px 0;}
#column .slider_box{position: relative; z-index: 1; padding: 55px 0 0;}
#column .slider_box.is-static { width: 1100px; margin: 0 auto;}
#column .slider_box .box{width: 337px; height: auto; background: #fff; box-shadow: 0 0 15px 5px rgba(0,0,0,0.1); margin: 0 46px 0 0;}
#column .slider_box .box .text_box{padding: 19px 32px 36px 21px;}
#column .slider_box .box .text_box p.data{font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 300; font-style: normal; font-size: 11px; color: #A3A3A3; text-align: left;}
#column .slider_box .box .text_box p.tt{font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 300; font-style: normal; font-size: 18px; line-height: 189%; margin: 20px 0 0; display: -webkit-box; display: box; -webkit-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
#column .slider_box .box .text_box a{background: #00559D; text-align: center; font-size: 16px; font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; border-radius: 1000px; width: 222px; padding: 7px 0 11px; display: block; color: #fff; margin: 20px auto 0; border: none; line-height: 150%;}

/* ------------------------------------------------------------ #link */
#link{background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/bg_2.jpg) repeat; background-size: 30px; padding: 61px 0 135px;}
#link ul{flex-wrap: wrap; padding: 32px 0 0;}
#link ul li{width: 212px; height: auto; margin-bottom: 10px;}
#link ul li:not(:nth-child(5n)){margin-right: 10px;}

/* ------------------------------------------------------------ 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;
					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:99999;
					pointer-events:none;

					white-space:normal;
					word-break:break-word;
					} */
.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){
		
	body{ min-width: auto; }
	h3.title span.min_tt{font-size: 16px; padding: 0 0 0 39px; margin: 0 0 10px;}
	h3.title span.min_tt:before{width: 26px;}
	h3.title span.big_tt{font-size: 24px;} 
	
	.canvas_box{min-width: 100%; overflow: hidden;position: absolute; top: 0px; width: 100%; padding: 115% 0; }
	.canvas_box #animation_container{width:300% !important; height: auto !important; top: 3%; left: 45%;}
	.canvas_box #animation_container #canvas {width: 100% !important; height: auto !important;}
	/* ----------------------------------------------------------- */
	.btns { width: 100%; padding: 30px 0; font-size: 20px; text-align: center; margin: 20px auto 0;}
	
	.article_wrapper { padding: 10px 0 0; }
	.article_wrapper .itemlist { display: flex;}
	.article_wrapper .itemlist.is-static { justify-content: center;}
	.article_wrapper .itemlist article { width: 440px; margin: 0 60px 0 0;}
	.article_wrapper .itemlist a { width: 100%; }
	.article_wrapper .itemlist ar1ticle .img { width: 100%; height: auto;}
	.article_wrapper .itemlist article .contents { padding: 20px; }
	.article_wrapper .itemlist article .contents .day { font-size: 12px;}
	.article_wrapper .itemlist article .contents h3 { font-size: 18px; padding-top: 10px;}
	.article_wrapper .itemlist article .contents .text { font-size: 16px; padding-top: 10px;}
	.article_wrapper .itemlist article .contents .tags { display: flex; padding-top: 10px;}
	.article_wrapper .itemlist article .contents .tags li { padding: 5px 10px; font-size: 10px; }
	.article_wrapper .itemlist article .contents .btn { width: 200px; padding: 5px 0; font-size: 12px; padding-top: 10px; }
	
	/* ------------------------------------------------------------ #fv */
	#fv{margin: 131px auto 0; padding: 0 0; width: 90%;}
	
	#fv h2 { font-size: 14px; line-height: 179%;}
	#fv h2 .thick_tt{font-size: 50px; padding: 15px 0 0; }
	#fv h2 .thick_tt .tt_2{font-size: 50px; } 
	#fv h2 img{margin: 10px 0 0; width: 160px; height: auto; }
	#fv h2 .mini{font-size: 12px; } 
	#fv .fv_flex{padding: 102.2% 0 0; width: 98%; display: flex;}
	#fv .fv_flex a{width: 49%; font-size: 13px;}
	#fv .fv_flex a.btn_1{margin-right: 2%;}
	#fv .fv_flex a img{ width: 100%; height: auto; }
	
	/* ------------------------------------------------------------ #about */
	#about{padding: 27px 0 0;}
	#about .white_box{width: auto; height: auto; padding: 30px 5% 40px;}
	#about .white_box .flex{ flex-wrap: wrap; display: flex;}
	#about .white_box .flex .tt_box{width: 100%; height: auto; }
	#about .white_box .flex .img_box{ width: 100%; height: auto;margin: 20px 0 0;}
	#about .white_box .flex .img_box img{width: 100%; height: auto;}
	#about .white_box .flex .tt_box p{font-size: 16px;padding: 35px 0 0;}
	#about .white_box .flex .movie_box{width: 100%; padding: 20px 8px 20px 11px; margin: 35px auto 0; }
	#about .white_box .flex .movie_box h4{font-size: 16px;}
	#about .white_box .flex .movie_box .movie{margin: 17px 0 0;}
	#about .white_box .flex .movie_box .movie .me{width: 100%; height: auto;}
	
	/* ------------------------------------------------------------ #case */
	#case{ padding: 53px 0 0;}
	#case .case_box{padding: 45px 0 59px; background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/case_bg_sp.jpg) no-repeat center center; background-size: cover;}
	#case .case_box .bg_box{position: absolute; top: 0px; left: 0px; height: 100vh; width: 100%;}
	#case .case_box .bg_box img{width: 100%; height: 100%;}
	#case .case_box .flex{position: relative; z-index: 1;align-items: center;}
	#case .case_box a.btns{ font-size: 15px; padding: 17px 0 20px; width: 74.1%; margin: 26px auto 0;}
	#case .case_box a.btns.PC{display: none;}
	#case .case_box a.btns.SP{display: block;}
	#case .case_box .slider_box img.PC{display: none;}
	#case .case_box .slider_box img.SP{display: block;}

	#case .case_box a.btns:before{ width: 27px; height: 13px; right: 21px; top: 44%; }
	#case .case_box .slider_box img{width: 40.16%; height: auto;}
	#case .case_box .slider_box{ padding: 21px 0 0;width: 90%; margin: 0 auto;}
	#case .case_box .slider_box.is-static { width: 90%;}
	#case .case_box .slider_box .slick-track{padding: 20px 0;}
	#case .case_box .slider_box .box{width: 100%; height: auto; margin: 0 0 9px; display: flex; align-items: center;}
	#case .case_box .slider_box .box .text_box{padding: 0 10px; width: calc(100% - 40.16%);}
	#case .case_box .slider_box .box .text_box h4{font-size: clamp(12px, 2.8vw ,18px); line-height: 142%;}
	#case .case_box .slider_box .box .text_box p{display: none;}
	#case .case_box .slider_box .box .text_box a{width: 68%; font-size: 10px; padding: 6px 0 7px; margin: 8px auto 0; line-height: 100%;}
	
	
	/* ------------------------------------------------------------ calculation */
	#calculation {padding: 44px 0 20px;}
	#calculation .title_box{align-items: center;}
	#calculation .title_box p{line-height: 172%; margin: 26px 0 0; font-size: 14px;}
	#calculation .content_box{padding: 7.2% 0 0; display: flex;align-items: end;}
	#calculation .content_box .box{width: 49%; padding: 0 13px 22px;border-radius: 10px;}
	#calculation .content_box .box .tt_box{ padding: 64% 0 6px; }
	#calculation .content_box .box .tt_box h4{ font-size: 11px; }
	#calculation .content_box .box .tt_box img{}
	#calculation .content_box .box.box_1 .tt_box img{top: -23%; left: 47%; width: 60%; height: auto;}
	#calculation .content_box .box.box_2 .tt_box img{top: -14%; left: 44%; width: 73.5%; height: auto;}
	#calculation .content_box .box.box_2{margin: 0;}
	#calculation .content_box .box .tbe_box{width: 100%; height: auto;}
	#calculation .content_box .box .tbe_box li{display: flex;}
	#calculation .content_box .box .tbe_box li p.title_tt{font-size: 12px;}
	#calculation .content_box .box .tbe_box li p.tt{font-size: 10px; text-align: left; line-height: 130%;padding: 5px 0 0;}
	
	#calculation .content_box .box .tbe_box li p.tt span.tt_1{font-size: 10px; text-align: left; line-height: 130%; margin: 3px 0 0 0; width: calc(100% - 20px); display: inline-block;}
	#calculation .content_box .box .tbe_box li p.tt span.tt_2{width: 15px; font-size: 15px; margin: 3px 0 0 5px; line-height: 130%; display: inline-block;}
	
	#calculation .content_box .box .tbe_box li:last-child p.tt:last-child{font-size: 12px; text-align: left; line-height: 130%; padding: 4px 0 0;}
	#calculation .content_box .box .tbe_box li img{width: 13px; height: auto;}
	
	#calculation .content_box .box.box_youtube{width: 100%; height: auto; margin: 55px 0 0; padding: 0; background: none; box-shadow: none; border-radius: 0px;}
	#calculation .content_box .box.box_youtube h4{font-size: 18px; line-height: 146%; text-align: center;}
	#calculation .content_box .box.box_youtube .movie{width: 100%; height: auto; margin: 18px 0 0;}
	#calculation .content_box .box.box_youtube .movie img{width: 100%; height: auto;}
	
	#calculation .content_box .box .tbe_box li:nth-child(1) {padding: 6px 0 10px;}
	#calculation .content_box .box.box_2 .tbe_box li:nth-child(1) {padding: 6px 0 10px;}
	#calculation .content_box .box .tbe_box li:nth-child(2) {padding: 6px 0 10px;}
	#calculation .content_box .box .tbe_box li:nth-child(3) {padding: 9px 0 0px;}
	
	#calculation .content_box .box .tbe_box li:nth-child(2),
	#calculation .content_box .box .tbe_box li:nth-child(3) {display: block;}
	/* ------------------------------------------------------------ #simple */
	#simple {padding: 50px 0 0;}
	#simple .calculation_wrap .frm_box table td .flex{display: flex; justify-content: space-between; flex-wrap: wrap;}
	#simple .calculation_wrap { display: block;position: relative; width: auto; margin: 0 auto; }
	#simple .calculation_wrap .frm_box { width: 90%; margin: 0 auto;padding: 0 0%; }
	#simple .calculation_wrap .frm_box .top_caution { font-size: 11px;}
	#simple .calculation_wrap .frm_box table{width: 100%; height: auto;}
	#simple .calculation_wrap .frm_box table th{font-size: 16px; padding: 14px 0 11px;}
	#simple .calculation_wrap .frm_box table th img{width: 38px; height: auto; margin: 0px 0 0 7px;}
	#simple .calculation_wrap .frm_box table th img.easy_mini_icn{width: 18px; height: auto;}
	#simple .calculation_wrap .frm_box table th input{margin: 0 0 0 15px;}
	#simple .calculation_wrap .frm_box table td{display: block; border: none; padding: 0 0 26px;}
	#simple .calculation_wrap .frm_box table tr:last-child td{padding: 0;}
	#simple .calculation_wrap .frm_box table td label{padding: 12px 10px 10px;}
	#simple .calculation_wrap .frm_box table td label .type-card {display: inline-block; margin: 0 10px;}
	#simple .calculation_wrap .frm_box table td .range_box input{width: 100%;order: 3;margin: 10px 0 0;}
	#simple .calculation_wrap .frm_box table td .range_box span{font-size: 14px; line-height: 160%;}
	#simple .calculation_wrap .frm_box table td .range_box span.tt_1{width: auto; height: auto; text-align: left;font-size: 12px; order: 1;}
	#simple .calculation_wrap .frm_box table td .range_box span.tt_2{width: auto; height: auto; text-align: right;font-size: 12px; order: 2;}
	
	#simple .calculation_wrap .frm_box table td label input[type="radio"] {display: none;}
	
	#simple .calculation_wrap .frm_box table td label { font-size: 12px;}
	
	
	#simple .calculation_wrap .frm_box table td label { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #ddd; background: #fff; color: #262626; cursor: pointer; font-size: 15px;}
	#simple .calculation_wrap .frm_box table tr.form_1 td{padding: 0 0 20px;}
	#simple .calculation_wrap .frm_box table tr.form_1 td label {width: 49%; height: auto; margin-right: 2%; margin-bottom: 3%; font-size: 16px;}
	#simple .calculation_wrap .frm_box table tr.form_1 td label:not(:last-child){margin-right: 2%;}
	#simple .calculation_wrap .frm_box table tr.form_1 td label:nth-child(2n){margin-right: 0%;}
	
	#simple .calculation_wrap .frm_box table tr.form_4 td{padding: 0 0 10px;}
	#simple .calculation_wrap .frm_box table tr.form_4 td label {width: 49%; height: auto;margin-right: 2%; margin-bottom: 3%; font-size: 14px;}
	#simple .calculation_wrap .frm_box table tr.form_4 td label:not(:last-child){margin-right: 2%;}
	#simple .calculation_wrap .frm_box table tr.form_4 td label:nth-child(2n){margin-right: 0%;}
	
	#simple .calculation_wrap .frm_box table tr.form_5 td{border-bottom: none; padding: 0;}
	#simple .calculation_wrap .frm_box table tr.form_5 td label {width: 49%; height: auto;margin-right: 2%; margin-bottom: 3%; font-size: 16px;}
	#simple .calculation_wrap .frm_box table tr.form_5 td label:not(:last-child){margin-right: 2%;}
	#simple .calculation_wrap .frm_box table tr.form_5 td label:nth-child(2n){margin-right: 0%;}
	
	#simple .calculation_wrap .frm_box table tr.form_6 td {border: none;padding: 26px 0 35px;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box{padding:25px 30px ;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn{font-size: 16px; padding: 0px;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn:before{width: 16px; height: 16px; top: 40%;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn.active:before{ top: 60%; }
	
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .clos_btn label {width: 100%; height: auto; border: none; position: relative;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .list_box{display: block; padding: 0;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box .flex{flex-wrap: wrap; padding: 30px 0 0; justify-content: space-between;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li{font-size: 16px;line-height: 160%; position: relative; padding: 0 0 12px 34px;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li span{font-size: 17px; margin: 0; position: absolute; top: 0px; left: 0px; line-height: 170%;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li.tt_1{width: 100%; margin: 0;}
	#simple .calculation_wrap .frm_box table tr.form_6 td .clos_box li.tt_2{width: 100%;}
	
	
	#simple .calculation_wrap .frm_box table tr.form_7 th span{font-size: 16px; margin: 0 6px 0 0;}
	#simple .calculation_wrap .frm_box table tr.form_7 th .flex{display: flex;}
	#simple .calculation_wrap .frm_box table tr.form_7 th .flex img{margin: 0px 7px 0 0; width: 26px; height: auto;}
	#simple .calculation_wrap .frm_box table tr.form_7 th .flex img.easy_mini_icn{width: 18px; height: auto; margin: 0 0 0 12px;}
	#simple .calculation_wrap .frm_box table tr.form_7 .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 0 ; display: none;}
	#simple .calculation_wrap .frm_box table tr.form_7 td label {width: calc(100% / 3); height: auto; font-size: 15px;}
	#simple .calculation_wrap .frm_box table tr.form_7 td label:nth-child(1){border-radius: 5px 0 0 5px; border-right: none;}
	#simple .calculation_wrap .frm_box table tr.form_7 td label:nth-child(2){border-radius: 0px; border-right: none;}
	#simple .calculation_wrap .frm_box table tr.form_7 td label:nth-child(3){border-radius: 0 5px 5px 0;}
	#simple .calculation_wrap .frm_box table tr.form_7 td label:not(:last-child){}
	/* for double */
	#simple .calculation_wrap .frm_box table tr.form_7 td .double label{border-right: 1px solid #ddd;}

	#simple .calculation_wrap .frm_box table td label .img {padding: 0 0 6px;}
	#simple .calculation_wrap .frm_box table td label .img img.on {	display: none;}
	
	#simple .calculation_wrap .frm_box table tr.active td::before { top: -8%; height: 92%;}
	#simple .calculation_wrap .frm_box table tr.form_4 td,
	#simple .calculation_wrap .frm_box table tr.form_4 td { padding: 0;}
	
	#simple .calculation_wrap .frm_box table tr.active td div.flex{padding: 5px; box-shadow: 0 0 0 5px #A7DFFF;}
	
	#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: 40%; height: 150px; padding: 0px 0px 0 0px; }
	#simple .calculation_wrap .followbox .chartbox .pie-container.chartbox_1 { width: 58%; height: 70%; padding: 0 0 0; }
	#simple .calculation_wrap .followbox.reached-bottom{box-shadow: none; padding: 0px 8px 12px; }

	
	
	#simple .calculation_wrap .followbox { bottom: 0; left: 0; top: auto; width: 100%; padding: 8px 8px 12px; border-radius: 20px 20px 0 0; transform: translateY(120%); transition: transform .18s ease; will-change: transform;}
	#simple .calculation_wrap .followbox.is-active{ transform: translateY(0);}
	#simple .calculation_wrap .followbox.is-fixed{ position: fixed; z-index: 1000;}
	#simple .calculation_wrap .followbox.is-absolute{ position: absolute; z-index: 999; box-shadow: none; background: transparent; border-radius: 0; padding: 20px 8px 12px;}
	#simple .calculation_wrap .followbox.is-stopped {position: relative; bottom: 0; left: 0; right: 0; box-shadow: none; background: transparent; border-radius: 0;  z-index: 1000;padding: 20px 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: 16px 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: 14px 0 0;}
	#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.btn_1{background: none;}
	
	#simple .result .result_box .right-chart .pie-container1{ width: 208px; height: 200px; margin: 0 auto;}
	#simple .result .result_box .right-chart .pie-container1.container1_2{ width: 30% !important; height: 230px; 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 .calculation_wrap .followbox .link_box a.btn_2{background: none; margin: 0 0 0 2%;}

	#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{display: none;}
	#simple .calculation_wrap .followbox .link_box a img{width: 100%; height: auto; text-align: center;}
	
	#simple .calculation_wrap .followbox .link_box a.btn_1 span:before{display: none;}
	
	#simple .calculation_wrap .followbox .link_box a.btn_2{}
	#simple .calculation_wrap .followbox .link_box a.btn_2 span:before{display: none;}



	#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 { width: 30px; height: 30px;}
	#simple .range-input::-moz-range-thumb { width: 30px; height: 30px; }
	
	/* ---------- 数値に応じてグラデーションを動的に更新 ---------- */
	#simple .range_box{padding: 4px 0 0;}
	#simple .range_box input[type="range"] {background-size: 0% 100%;}
	
	#simple .result .result_box .right-chart .chartbox_flex{display: flex; flex-wrap: wrap;}
	/*
simple .result .result_box .right-chart .pie-container1{ width: 70%; height: auto; margin: 0 auto;}
	#simple .result .result_box .right-chart .pie-container1.container1_2{width: 30%; height: 120px;}
	#simple .result .result_box .right-chart .pie-container1.container1_3{width: 100%; height: auto;}
*/
	#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 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 .result { margin-top: 30px; padding: 30px 0 44px;}
	#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: 100%; 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 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:46px; 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 tr:not(:last-child) td{padding: 0 10px 0 0;}
	#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(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/estimate_img_bg_sp.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: 32px auto 0px;}
	
	
	/* ------------------------------------------------------------ #column */
	#column{padding: 50px 0 67px; }
	#column .title_box{justify-content: space-between;align-items: center;}
	#column a.btns{ font-size: 15px; padding: 17px 10px 20px 0px; width: 73.56%; margin: 39px auto 0;}
	#column a.btns:before{background: url(https://www.ntt-f.co.jp/nebs/nebs-portal/images/top/btn_icn.svg) no-repeat center center; background-size: 100%; width: 26px; height: 9px; right: 20px; top: 44%; }
	#column a.btns.PC{display: none;}
	#column a.btns.SP{display: block;}

	#column .slider_box .slick-track{padding: 20px 0;}
	#column .slider_box{padding: 20px 0 0; width: 90%; margin: 0 auto;}
	#column .slider_box.is-static { width: 90%;}
	#column .slider_box .box{width: 100%; height: auto; margin: 0 0 17px; display: flex; align-items: center; padding: 6px 6px 5px 6px;}
	#column .slider_box .box:last-child{margin: 0px;}
	#column .slider_box .box img{ width: 49%; height: auto;}
	#column .slider_box .box .text_box{padding: 0 0 0 12px; width: 49%;}
	#column .slider_box .box .text_box p.data{font-size: 11px;line-height: 100%;}
	#column .slider_box .box .text_box p.tt{height: 35px; font-size: 12px; margin: 8px 0 0; line-height: 142%;}
	#column .slider_box .box .text_box a{font-size: 11px; width: 79%; padding: 3px 0 4px; margin: 8px auto 0; line-height: 155%;}
	
	/* ------------------------------------------------------------ #link */
	#link{padding: 49px 0 78px;}
	#link ul{flex-wrap: wrap; padding: 16px 0 0; display: flex;}
	#link ul li{width: 49%; height: auto; margin-bottom: 2%;margin-right: 2%;}
	#link ul li img{width: 100%; height: auto;}
	#link ul li:not(:nth-child(5n)){margin-right: 2%;}
	#link ul li:nth-child(2n){margin-right: 0%;}

}








	/* ---------- double and long text in form ---------- */