@charset "UTF-8";
/* -----------------------------------------------------------
CSS Information

File name:      
Created:        
Style Info:     　CSS
----------------------------------------------------------- */

#gototravel .sec_calc {width: 860px; margin: 50px auto; font-size: 16px;}
#gototravel .calc_bl_01{background:#f4f4f4; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 25px 15px 15px; position: relative; margin-bottom: 75px;}




#gototravel .calc_bl_01:before {content: ""; display: block; width: 50px; height: 25px; background:#1662d2; position: absolute; bottom: -40px; left: 50%; margin-left: -25px; } 
#gototravel .calc_bl_01:after {content: ""; display: block; width: 1; height: 1; border:solid 35px transparent; border-top: solid 25px #1662d2; border-bottom: none;  position: absolute; bottom: -60px; left: 50%; margin-left: -35px; background: none; } 

#gototravel .calc_list li {display: flex; align-items: center;}

#gototravel .calc_bl_01 .calc_list {display: flex; flex-wrap: wrap; width:calc(100% - 230px);}
#gototravel .calc_bl_01 .calc_list li {width: 45%; margin-bottom: 10px;}
#gototravel .calc_bl_01 .calc_list li:nth-child(even) {width: 55%;}


#gototravel .sec_calc .calc_sllect_wrap {position: relative; background: #ffffff;}
#gototravel .sec_calc .calc_sllect_wrap:after {position: absolute; content: '▼'; top: 50%; right: 10px; transform: translateY(-50%); font-size: 10px;}	

#gototravel .sec_calc .calc_sllect_wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  background: transparent;
  position: relative;
  z-index: 1;
  padding: 0 40px 0 10px;
  border: 1px solid #b4b4b4;
  border-radius: 2px;

}
select::-ms-expand {
    display: none;
}
#gototravel .sec_calc .calc_sllect_wrap ,
#gototravel .sec_calc input {width: 140px; height: 40px; margin-right: 10px;}
#gototravel .sec_calc input {text-align: right; border: solid 1px #b4b4b4;}

#gototravel .sec_calc .calc_sllect_wrap select ,
#gototravel .sec_calc input {padding: 5px 8px;}

#gototravel .calc_bl_01 .calc_list li .f_tit {width: 60px;}
#gototravel .calc_bl_01 .calc_list li:nth-child(even) .f_tit {width: 110px;}


#gototravel .bl_calc_btn {width: 230px; display: flex; align-items: center; justify-content: space-between;}
#gototravel #calc_btn { display: block; width: 160px; height: 50px; background: #1662d2; color: #fff; border: none; border-radius: 8px; font-weight: bold; font-size: 16px; text-align: center; line-height: 50px; cursor: pointer;}
#gototravel #clear_btn {width: 50px; height: 30px; background: #dddddd; border: none; font-size: 10px; text-align: center; cursor: pointer;}



#gototravel .calc_bl_02  {border-bottom: solid 1px #b4b4b4; padding-bottom: 20px; margin-bottom: 20px;}

#gototravel .calc_bl_02 ul ,
#gototravel .calc_bl_03 {width: 400px; margin: 0 auto; position: relative; left: -70px;}

#gototravel .calc_bl_02 .calc_list li ,
#gototravel .calc_bl_03 .calc_list {display: flex; align-items: center; flex-wrap: nowrap;}

#gototravel .calc_bl_02 .calc_list .f_tit ,
#gototravel .calc_bl_03 .calc_list .f_tit {width: 190px; text-align: right; padding-right: 10px;}
#gototravel .calc_bl_02 .calc_list .f_box ,
#gototravel .calc_bl_03 .calc_list .f_box {width: 210px; display: flex; align-items: center; flex-wrap: nowrap;}
#gototravel .calc_bl_02 .calc_list .pr_box ,
#gototravel .calc_bl_03 .calc_list .pr_box {width: 175px; height: 40px; border: solid 1px #b4b4b4; border-bottom: none; margin-right: 10px; padding: 0 10px; display: flex; align-items: center; justify-content: flex-end;}
#gototravel .calc_bl_02 .calc_list li:last-child .pr_box {border-bottom: solid 1px #b4b4b4; }


#gototravel .calc_bl_03 .calc_list {margin-bottom: 20px;}
#gototravel .calc_bl_03 .calc_list .pr_box {border: solid 2px #7d7d7d;}
#gototravel .sec_calc_txt {text-align: center; font-size: 14px; color: #747474; padding-top: 10px;}

#gototravel #calc_txt {width: 100%;}
#gototravel #calc_txt p {text-align: center; color: #ff0000;}


#gototravel .calc_bl_04 {margin-top:30px; border:dotted 2px #747474; padding:10px;}
#gototravel .calc_bl_04 p {text-align:center; margin-bottom:10px;}
#gototravel .calc_bl_04 ul {width: 100%;}
#gototravel .calc_bl_04 li ,
#gototravel .calc_bl_04 .f_box {display: flex; align-items: center; justify-content: flex-start;}
#gototravel .calc_bl_04 li {margin-bottom: 5px;}
#gototravel .calc_bl_04 .f_tit {width: 300px; text-align: right; padding-right: 10px;line-height: 1.2;}
#gototravel .calc_bl_04 .f_tit span {font-size: 13px; display: block;}
#gototravel .calc_bl_04 .pr_box {width: 200px; height: 40px; border: solid 1px #747474; margin-right: 10px;display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;}

@media screen and (max-width:760px) {
	#gototravel .sec_calc {width: 100%; max-width: 600px; font-size: 14px; margin-bottom: 0;}
	#gototravel .calc_bl_01 {background: none; padding: 0;}
	#gototravel .calc_bl_01 .calc_list ,
	#gototravel .calc_bl_01 .calc_list li ,
	#gototravel .calc_bl_01 .calc_list li:nth-child(even) ,
	#gototravel .calc_bl_02 ul ,
	#gototravel .calc_bl_03 {width: 100%; left: 0;}
	
	#gototravel .sec_calc .calc_sllect_wrap select ,
	#gototravel .sec_calc input {padding: 5px 10px;}

	
	#gototravel .bl_calc_btn {width: 80%; margin: 15px auto; justify-content: center;}
	#gototravel #calc_btn {width: 220px; margin-right: 5%;}
	#gototravel #clear_btn {width: 70px; }
	
	
	#gototravel .calc_bl_01 .calc_list li .f_tit ,
	#gototravel .calc_bl_01 .calc_list li:nth-child(even) .f_tit ,
	#gototravel .calc_bl_02 .calc_list .f_tit ,
	#gototravel .calc_bl_03 .calc_list .f_tit {width: 100px; text-align: right; padding-right: 10px;line-height: 1.2;}
	
	#gototravel .calc_bl_01 .calc_list li .f_box ,
	#gototravel .calc_bl_02 .calc_list .f_box ,
	#gototravel .calc_bl_03 .calc_list .f_box {width: calc(100% - 120px);}
	
	#gototravel .sec_calc .calc_sllect_wrap ,
	#gototravel .sec_calc input ,
	#gototravel .calc_bl_02 .calc_list .pr_box ,
	#gototravel .calc_bl_03 .calc_list .pr_box {width: calc(100% - 30px);}
	
	#gototravel .sec_calc_txt{text-align: left;}

	
	
}

