@charset "utf-8";

#awakoi .character{display:flex;max-width:680px;margin:0 auto;align-items:end}
#awakoi .character img {max-width:280px}
#awakoi .character figcaption{width:90%;margin:0 auto;}

#awakoi h4{ font-size: 1.4em; margin-top: 50px;}
#awakoi .thick {position: relative;border: 3px solid #32515a;padding: 4%; margin:0 auto;font-family: '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro',serif;background-image: url(../images/awakoi2/flame.jpg),url(../images/awakoi2/flame.jpg)  ;background-position: top center,bottom center;background-size: 100%,100%;background-repeat: repeat-x, repeat-x;}
#awakoi .thick:before,
#awakoi .thick:after,
#awakoi .circle:before,
#awakoi .circle:after { position: absolute;display: block;border-radius: 50%;width: 30px; height: 30px;content: ""; background-color: #fff ;border: 3px solid #32515a;}
#awakoi .thick:before { top: -15px;left: -15px;}
#awakoi .thick:after { top: -15px;right: -15px;}
#awakoi .circle:before {right: -15px;bottom: -15px;}
#awakoi .circle:after { left: -15px;bottom: -15px;}
#awakoi .thin { position: absolute;top: 3px; right: 3px;bottom: 3px;left: 3px; border: 1px solid #32515a; z-index: 1;}
#awakoi .over {overflow: hidden; margin: 0 auto;}


/*comment 8543*/
#awakoi.comment .over{margin:30px auto;}
#awakoi.comment .thick {border: 1px solid #32515a;background:none;}
#awakoi.comment .thick:before,
#awakoi.comment .thick:after,
#awakoi.comment .circle:before,
#awakoi.comment .circle:after {border: 1px solid #32515a;}
#detail .contentsBox .contents #awakoi.comment h5 {border:none;padding:0;margin:0 auto 18px; border-bottom:2px solid#32515a; font-family:sans-serif;text-align:center;font-size:1rem;font-weight:normal}
#detail .contentsBox .contents #awakoi.comment p{color:#000;font-size:1rem;line-height:1.6rem;margin:0 auto;width:86%}
#detail .contentsBox .contents #awakoi.comment p strong{color:#32515a;font-weight: bold;}
#awakoi.comment .thin{border:none;background:rgba(234,174,174,.1);}
#detail .contentsBox .contents #awakoi.comment img.main-image{border:none}



@media screen and (min-width: 1024px) {

#awakoi.comment {display:flex;flex-wrap:wrap;align-items:flex-start}
#awakoi.comment .over{width: 46%;margin:20px auto;}
#awakoi .character figcaption{padding: 20px;height:100px}
#awakoi .thick {padding: 30px;}
#awakoi .over {width:90%;}
#awakoi .thick { background-size: 41%,41%;}


}