@charset "utf-8";
/* CSS Document */
#sideNavi img{display: block; float: none;}

#eligible{border-radius: 10px; padding: 20px 10px; margin: 0; background-color: #e0e9ee; position: relative; overflow: hidden; }
#eligible img{display: block; margin: 0 auto 20px auto; width: 650px; height: auto;}

/*選択済の選択肢*/
#selected{display: none; padding: 5px 10px; border-radius: 5px; background-color: #f0f0f0; margin-right: 5em;}
#selected span{display: inline-block; position: relative; font-size: 0.8em;}

/*選択肢*/
#eligible ul{list-style: none; margin:20px 0px; display: flex; justify-content:flex-start; align-items:center; flex-wrap: wrap; gap:10px; }
#eligible li{list-style: none; margin:0px!important; border:1px solid #ffdb4c; background:linear-gradient(to bottom,#fef9e3,#fef9e3,#fee37a,#feb445); border-radius: 5px; padding: 5px 10px 5px 1.4em!important; position: relative; min-width:calc(33% - 10px); box-sizing: border-box; cursor: pointer;}
#eligible li.w100{width: 100%;}
#eligible li::before{content: ""; margin: 0; position: absolute; left: 8px; top: 8.5px; bottom: 0; width:8px; height:14px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: #ff6600; }

/*戻るボタン*/
p.pbtn{text-align: right; position: absolute; top: -54px; right: 0px;}
span.btn{background-color: #0b68ad; display: inline-block; border-radius: 5px; padding: 5px 10px 5px 1.4em; color: #fff; position: relative; cursor: pointer;}
span.btn::before{content: ""; margin: 0; position: absolute; left: 8px; top: 8.5px; bottom: 0; width:8px; height:14px; clip-path: polygon(100% 0, 100% 100%, 0% 50%); background-color: #fff; }

.visible{display: block; transition:0.5s; animation: anime 0.5s forwards; transform: translateX(-50%);}
#selected.visible{display: inline-block;}
.hidden,#selected.hidden{transform: translateX(-50%); display: none; }
@keyframes anime { 0% {opacity: 0; transform: translateX(-50%);} 100% { opacity: 1; transform: translateX(0px);}}

/*結果画面*/
#result_tit{font-weight: bold; font-size: 140%!important; padding-left: 1em; position: relative; color: #0b68ad; margin-bottom: 10px;}
#result_tit::before{content: ""; margin: 0; position: absolute; left: 0px; top: 0; bottom: 0; width:5px; height:100%; background-color: #0b68ad; border-radius: 5px; }
.tit{font-weight: bold; font-size: 140%!important; text-align: center;} .tit span{display: inline-block; border-bottom: 2px solid #0b68ad; padding: 0.2em; 0.5em}
.mt20{margin-top: 20px;}
.m20{margin: 20px 0;}
.result_deco01{border-radius: 5px; font-size: 1.2em; font-weight: bold; color:#0b68ad; border: 2px solid #0b68ad;  padding: 0.5em; background-color: #fff;  margin: 20px 0; text-align: center;}

/*手続き案内へ*/
p.procedure{margin: 20px 0; }
p.procedure span{display: block; margin-bottom: 0.7em;}
p.procedure b{color:#F00;}
p.procedure b.blue{color:#0b68ad; border-bottom: 2px solid #0b68ad; padding: 0; margin-bottom: 0.7em; display: inline-block;}
dl.procedure{font-size: 1rem; border-radius: 5px; background-color: #fff; padding: 0; margin:0 0 20px 0; padding-bottom: 20px;}
dl.procedure dt{border-radius: 5px 5px 0 0; font-weight: bold; color:#fff; padding: 0.5em; background-color: #0b68ad;  margin-bottom: 20px; }
dl.procedure dd span{display: block; padding: 0 20px; background-color: #fff; margin: 0;  }