#present #contents{padding:1.5em 0 2em;}
#contents .inner{width:90%;}
#present #contents .inner p{line-height:160%; word-break: break-all;}
#present #contents .inner p.headline{font-size:130%; font-weight:600; text-align:center; line-height:180%;}
#present #contents .inner p.headline span.line {background: linear-gradient(transparent 50%, rgba(255,238,178,0.8) 50%); padding:0 .2em .3em;}
#present #contents .inner p.endtxt{font-size:130%; font-weight:500; text-align:center; padding:1.5em 0;}
#present h2{font-size:200%; font-weight: 600; text-align:center; line-height:0; padding:0; margin:1.2em auto 0; position: relative; color:#8d1524;}
#present h3{font-size:140%; font-weight: 600; padding:0 0 0 1.25em; margin:1em 0 0; color:#8d1524; position: relative;}
#present h3:before{
content: "";
width:25px;
height:1px;
background-color:#8d1524;
position: absolute;
left: 0;
top: 50%;
}

ul.sp_topics li figure{display:block; width:100%; height:0; padding:60% 0 0; background-size: cover; background-repeat: no-repeat; background-position: center top; border-bottom:1px solid #a07548; border-radius: 6px 6px 0 0;}
ul.sp_topics li figure img{position:absolute;left:0;top:0; width:100%; height:100%;}

#quiz{width:100%; margin:0 auto 2em; overflow:hidden; border:3px solid #8d1524; border-top: none; position: relative; padding:1.5em 1.5em 2.5em;}
#quiz p{font-size:160% !important; font-weight:600; text-align:center;}
#quiz p:first-of-type{}
#quiz ol  {
  margin: 0 auto;
  padding: 0;
}
#quiz ol li  {
  width:30%;
  list-style: none;
  font-size:170%;
  font-weight:800;
  padding:.8em .5em .8em 2em;
  text-indent: -1.3em;
  margin:0 .4em 0;
  color:#8d1524;
  background-color:rgba(255,238,178,0.8);
 border:1px solid rgba(106,48,0,0.1); 
 border-radius:8px;
 box-shadow:4px 4px rgba(106,48,0,0.3);
}
#quiz ol.ver2 li{
  width:58%;
  margin:.25em auto .5em;
}
#quiz span.pre{text-align:center; display:inline-block; width:100%;}

#present #contents .inner a{color:#8d1524; font-weight:600; background-color:rgba(255,238,178,0.5); }
.stblu{color:#1DA1F2;}

ul.asterisk{margin:1em auto 0;}
ul.asterisk li {
    list-style-type: none; 
    position: relative;
    padding-left:.8em;
    font-size:95%;
    margin:0 0 .5em;
    line-height:140%;
    word-wrap: break-word;
    }
ul.dotlist li:before {
    border-radius: 50%;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.6em;
    content: "";
    background: #000;
}
ul.asterisk li:before {
    display: block;
    position: absolute;
    content: "※";
    left: -.3em;
    top: 0;
}

.sidebdr {
width:100%;
margin:0 auto;
display: flex;
align-items: center;
}
.sidebdr:before,
.sidebdr:after {
border-top: 3px solid;
content: "";
flex-grow: 1;
}
.sidebdr:before {
margin-right:2rem;
}
.sidebdr:after {
margin-left:2rem;
}

.answer{
    display: flex;
    justify-content: center;
    position: relative;
    width:150px;
    margin:0 auto 1em;
    padding: .8em;
    background-color: #8d1524;
    color: #fff;
    font-size:160%;
    font-weight:600;
}
.answer::before {
    position: absolute;
    bottom: -14px;
    width: 20px;
    height: 15px;
    background-color: #8d1524;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

#present .bdr{padding:.5em 1.2em 1.2em; margin:2.5em 0 .5em; border:1px solid #9a6234; border-left:3px solid #9a6234; background-color:rgba(255,238,178,0.1);}
#present .bdr p{padding:0 0 .5em; font-size:100%;}
#present .bdr h4{padding:.4em 0 0; font-size:150%; font-weight:600; color:#8d1524;}
ul#pastq li{padding:1em; margin:1em 0 .5em; background-color:rgba(255,255,255,0.5); line-height:140%;}
ul#pastq li span.vnm{display:block; color:#fff; padding:.2em; margin:0 0 .4em; background-color:#8d1524; width:10%; text-align:center; line-height:110%;}
ul#pastq li span.asw{display:inline-block; background-color:#8d1524; color:#fff; padding:.1em .3em; margin:.6em .3em 0 0; line-height:110%;}
ul#pastq li strong.f120{color:#8d1524; font-size:150%;}

@media all and (min-width: 768px) {
#quiz ol  {
  display:flex; flex-flow: row wrap; justify-content: center; align-items: center;
}
#quiz ol li  {
}
}

@media all and (max-width: 767px) {
#present #contents{padding:5% 0 8%;}
#contents .inner{width:90% !important;}
#present #contents .inner p.headline{font-size:4vw; line-height:150% !important;}
#present #contents .inner p.headline span.f120{line-height:160% !important;}
#present h2{font-size:6vw; padding:0 0; margin:4% auto 0;}
#present h3{font-size:5vw; padding:0 0 0 6%; margin:3% 0 .5%;}
#present h3:before{
content: "";
width:5%;
}
#quiz{margin:0 auto 6%; border:2px solid #8d1524; border-top: none; padding:5% 2.5%;}
#quiz p{font-size:4.1vw !important; padding:2.5% 0 !important; text-align:center !important; line-height:140% !important;}
/*#quiz p:first-of-type{padding:2.5% 0 5% !important;}*/
#present #contents .inner p.endtxt{font-size:4.3vw !important; padding:2% 0 6% !important;}
#quiz ol li  {
  width:70%;
  font-size:6vw;
  padding:.8em .5em .8em 2em;
  text-indent: -1.3em;
  margin:0 auto 3%;
 border-radius:2vw;
}
#quiz ol.ver2 li  {
  width:96%;
  font-size:4.8vw;
}

.sidebdr:before,
.sidebdr:after {
border-top: 2px solid;
}
ul.asterisk{margin:2.5% auto 0;}

.answer{
    width:35%;
    margin:0 auto 5%;
    padding:3%;
    font-size:5vw;
}
.answer::before {
    bottom: -15px;
    width: 20px;
    height: 15px;
}

#present .bdr{width:100%; margin:5% 0 0; padding:.5em 3% 2%;}
#present .bdr h4{font-size:5vw;}
ul#pastq li{padding:2.5%; line-height:140%; font-size:105%;}
ul#pastq li span.asw{ line-height:110%; padding:.2em .3em; }
ul#pastq li span.vnm{width:15%;}
}