@charset "utf-8";
/* CSS Document */
header {padding-bottom: 3.784%;}
main {padding-bottom: 3.153%;}
.banner {position: relative; z-index: 1; line-height: 0;}
.banner::before {content: ''; background: url("../images/banner_shadow.png") no-repeat center; background-size: cover; width: 97.24%; height: 0; padding-bottom: 13.907%; position: absolute; bottom: -11.2%; left: 50%; -moz-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); z-index: -1;}

.mainDiv {border: 1px solid #6d76cf; background-color: #fff;}
.title_a {text-align: center; color: #2f3160; font-weight: 600; letter-spacing: 4px; padding: 5px 20px; background-color: #f3f4f7; border-bottom: 1px solid #6d76cf;}
.mainDivC {padding: 3.847vh 20px 6.595vh 20px; max-width: 810px; margin: auto;}
.mainDivC > div.photo {text-align: center; line-height: 0;}
.mainDivC > div.text {line-height: 1.66; letter-spacing: 1.5px; padding: 4.396vh 0 6.595vh 0;}
.mainDivC > div.text p {line-height: 1.66;}
.mainDivC > div.count {line-height: 2; letter-spacing: 1.5px; text-align: center; padding: 0 0 4.396vh 0;}
.mainDivC > div.count b {color: #ed1b23; font-weight: 600;}
.btn_a:link, .btn_a:visited {text-decoration:none; color:#fff; background-color: #ed1b23; border-radius: 5px; width: 120px; height: 40px; margin: auto; font-weight: bold; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; transform: scale(1.0, 1.0); cursor: pointer; transition: all 0.5s ease 0s;}
.btn_a:active, .btn_a:hover {text-decoration:none; color:#fff; background-color: #6d76cf; transform: scale(0.95, 0.95); transition: all 0.5s ease 0s;}

.title_b {text-align: center; color: #ed1b23; font-weight: 600; letter-spacing: 4px; padding: 5.495vh 20px 3px 20px; border-top: 3px solid #6d76cf;}
.note_a {color: #888888; text-align: center;}
.progress {background-color: #f5f5f5; height: 20px; margin: 0 auto 27px auto; border-radius: 4px; -webkit-box-shadow: inset 0 3px 5px rgb(34 24 21 / 13%); box-shadow: inset 0 3px 5px rgb(34 24 21 / 13%);}
.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}
@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}
@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}
.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}
.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}
.progress .progress-bar-danger {background-color: #ed1b23;}
.topic {letter-spacing: 1.5px; margin: 0 auto 12px auto;}
.img_con {width: 52%; line-height: 0; padding: 10px 0;}
.pick {width: 48%; padding: 10px 0 10px 20px; display: flex; flex-direction: column; letter-spacing: 1.5px; }
.pick a:link, .pick a:visited {text-decoration:none; color:#333333; background-color: #fff; display: flex; flex-wrap: wrap; padding: 5px 0 5px 35px; position: relative; transition: all 0.5s ease 0s;}
.pick a:active, .pick a:hover {text-decoration:none; color:#fff; background-color: #ed1b23; cursor:pointer; transition: all 0.5s ease 0s;}
.pick a::before {content: ''; width: 13px; height: 13px; border-radius: 13px; border: 1px solid #333333; position: absolute; top: 14px; left: 15px; transition: all 0.5s ease 0s;}
.pick a:hover::before {border: 1px solid #fff; transition: all 0.5s ease 0s;}
.mainDivCB {display: flex; flex-wrap: wrap; align-items: center; padding: 10px 0 0 0;}
.btn_b:link, .btn_b:visited {text-decoration:none; color:#2f3160; background-color: #fff; border: 1px solid #b7b7b7; width: 120px; height: 40px; margin: 0 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; cursor: pointer; transition: all 0.5s ease 0s;}
.btn_b:active, .btn_b:hover {text-decoration:none; color:#fff; background-color: #ed1b23; border: 1px solid #ed1b23; transition: all 0.5s ease 0s;}

.resultT {color: #2f3160; font-weight: bold; text-align: center; letter-spacing: 2px; padding: 10px 0 0 0;}
.resultT span {color: #ed1b23;}
.resultC {line-height: 2.142857; letter-spacing: 1.3px; padding: 3.298vh 0 6.595vh 0;}
.resultC p {line-height: 2.142857;}
.btn_c {text-decoration:none; color:#2f3160; background-color: #f3f4fc; border: 1px solid #b7b7b7; height: 40px; padding: 0 15px; margin: 0 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; transition: all 0.5s ease 0s;}
.btn_c img {margin-right: 7px;}
.btn_c span {font-size: 81.25%; padding: 0 0 0 7px;}
.note_b {padding: 0 0 0 10px;}
.fb_share {display: flex; flex-wrap: wrap; padding: 6.595vh 0 0 0;}
.fb_share a:link, .fb_share a:visited {text-decoration:none; color:#fff; background-color: #3c5996; letter-spacing: 1.5px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; border-radius: 7px; padding: 2px 10px; transition: all 0.5s ease 0s;}
.fb_share a:active, .fb_share a:hover {text-decoration:none; color:#fff; background-color: #6d76cf; border-radius: 40px; cursor:pointer; transition: all 0.5s ease 0s;}
.fb_share a img {margin: 0 5px;}