@charset "utf-8";

/*
共通
*/


.gohancal_wrap{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0 0 50px;
  max-width:600px;
}
.secwrap{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  font-size:14px;
}
.secinner{
  display: block;
  position: relative;
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  max-width:1200px;
}
.nopc{
  display: none;
}
.secinner>h2{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 100px auto 50px;
  padding-bottom:5px;
  border-bottom:1px solid #222;
  font-weight:bold;
  font-size:18px;
}
@media screen and (max-width: 769px){
  .nosp{
    display: none;
  }
  .nopc{
    display: inline;
  }
}


/*
ヘッダー
*/
#gohancal_head{
  padding-top: 200px;
}
#gohancal_head h1{
  text-align:center;
  font-size:24px;
  margin: 0 auto 50px;
}
#gohancal_head ul{
  padding-left:20px;
  list-style:disc;
  line-height:1.5;
  font-size:14px;
  font-weight:bold;
}
#gohancal_head ul li{
  margin-bottom: 10px;
}
/*
入力
*/
.gohancal_blk{
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 50px;
  align-items:center;
  flex-wrap: wrap;
}
.gohancal_blk>p{
  display: block;
  position: relative;
  width: 160px;
}
p.gohancal_blk_half{
  margin-left:160px;
  margin-top:5px;
  width:calc(100% - 160px);
}
.gohancal_blk>*:nth-child(2){
  width:calc(100% - 190px);
  margin-right:10px;
}
.gohancal_prd{
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 50px;
  flex-wrap:wrap;
  justify-content: space-between;
}
.gohancal_prd>p{
  width: 100%;
  margin: 0 auto 10px;
  font-weight:bold;
  font-size:18px;
}
.gohancal_prd label{
  display: block;
  position: relative;
  width:calc(50% - 20px);
  height: auto;
  margin: 0;
  padding: 0;
}
.gohancal_prd label>img{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  border:10px solid #fff;
}
.gohancal_prd input{
  display: none;
}
input[type="radio"]:checked + label img {
  border:10px solid #cd7c63;
}
.gohancal_prd label>p{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 20px 10px;
  border:3px solid #cd7c63;
  border-radius:100px;
  color:#cd7c63;
  font-size:18px;
  text-align:center;
  font-weight:bold;
}
input[type="radio"]:checked + label>p{
  color:#fff;
  background:#cd7c63;
}
#gohancal_topam input{
  max-width:100px;
}
#gohancal_topother input{
  max-width:100px;
}
@media screen and (max-width: 769px){
  .gohancal_prd label{
    width:calc(50% - 10px);
  }
  #gohancal_how{
    display: block;
  }
  #gohancal_how label{
    width: 100%;
    margin: 0 auto 20px;
  }
}

/*
結果
*/
.gohancal_result_blk{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 30px;
  padding: 20px 15px;
  background:#fff;
  max-width:400px;
}
.gohancal_result_blk>div{
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  flex-wrap:wrap;
  align-items: center;
}
.gohancal_result_blk>div>h3{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  padding: 0;
  text-align: center;
  font-size:16px;
  font-weight:bold;
}
.ghancal_result_img{
  display: block;
  position: relative;
  width: 35%;
  height: auto;
  margin: 0;
  padding: 0;
}
.ghancal_result_img>img{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}
.ghancal_result_img>p{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 10px auto 0;
  padding: 0;
  text-align: center;
}
.gohancal_result_info{
  display: block;
  position: relative;
  width: 65%;
  height: auto;
  margin: 0;
  padding: 0;
  padding-left:15px;
  font-size:14px;
}
.gohancal_result_info>p{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 10px 5px;
  
  border-radius:5px;
  font-size:14px;
  line-height:1.5;
  text-align:center;
  color:#000;
}
.gohancal_result_info>p:last-child{
  margin-bottom:0;
}
.gohancal_result_info>p>span{
  font-size:24px;
}
.gohancal_result_info>p>span.large{
  font-size:32px;
  font-weight:bold;
}
#gohancal_result_top>.secinner>.gohancal_result_blk:nth-child(2) .gohancal_result_info>p:nth-child(2){
  background:#EC973C;
  color:#fff;
}
#gohancal_result_top>.secinner>.gohancal_result_blk:nth-child(3) .gohancal_result_info>p:nth-child(2){
  background:#D6786C;
  color:#fff;
}
#gohancal_result_top>.secinner>.gohancal_result_blk:nth-child(4) .gohancal_result_info>p:nth-child(2){
  background:#7AAEB9;
  color:#fff;
}
.gohancal_result_other{
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 30px;
  padding: 0;
  justify-content: space-between;
}
.gohancal_result_other>p{
  display: block;
  position: relative;
  width:calc(33.3333% - 10px);
  height: auto;
  margin: 0;
  padding: 15px;
  border-radius:5px;
  background:#fff;
  text-align:center;
  font-size:14px;
  line-height:1.5;
}
.gohancal_result_other>p>span{
  font-size:24px;
}
#gohancal_result_all .gohancal_result_info>p>span{
  font-size:18px;
}
#gohancal_result_all .gohancal_result_info>p>span.large{
  font-size:28px;
}
#gohancal_result_all>.secinner>.gohancal_result_blk:nth-child(2) .gohancal_result_info>p:nth-child(2){
  background:#EC973C;
  color:#fff;
}
#gohancal_result_all>.secinner>.gohancal_result_blk:nth-child(3) .gohancal_result_info>p:nth-child(2){
  background:#D6786C;
  color:#fff;
}
#gohancal_result_all>.secinner>.gohancal_result_blk:nth-child(4) .gohancal_result_info>p:nth-child(2){
  background:#7AAEB9;
  color:#fff;
}
.gohancal_blk input{
  background:#fff;
  border: #c8c9ca 1px solid;
}
.gohancal_result_kcal{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 30px;
  padding: 0;
}
.gohancal_result_kcal>img{
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}