/************************************
** 会話
************************************/

.talk {
    margin: 60px 0 60px;
    padding-right: 2em;
}

.talk.right {
    padding: 0 0 0 2em;
}

.talk figure {
    margin: 0;
    width: 60px;

    height: 60px;
}

.talk figure img {
    border-radius: 50%;
    box-shadow: none;
}

.talk figure img.man {
    border: 2px solid #97cbff;
}

.talk figure img.woman {
    border: 2px solid #eab9e4;
}

.talk.left figure {
    float: left;
}

.talk.right figure {
    float: right;
}

.talk figcaption,
.avatar figcaption{
    font-size: .8em;
    text-align: center;
    font-weight: bold;
    margin: 0 -.8em;;
    font-style: normal;
}

.talk .inner-left {
    margin-left: 80px;
}

.talk .inner-right {
    margin-right: 80px;
}

.talk .text {
    position: relative;
    padding: 12px 1em;
    border: 1px solid #ccc;
    border-radius: 10px;
    top: 5px;
    display: inline-block;
    color: #555555;
}

.talk.right .text {
    float: right;
}

.talk .text p {
    margin-bottom: 1.5em;
}

.talk .text p:last-child {
    margin-bottom: 0;
}

.talk .text:before,
.talk .text:after {
    position: absolute;
    content: '';
    top: 15px;
    border: 10px solid transparent;
}

.talk.left .text:before {
    border-right: 10px solid #ccc;
    left: -20px;
}

.talk.left .text:after {
    border-right: 10px solid #fff;
    left: -19px;
}

.talk.right .text:before {
    border-left: 10px solid #ccc;
    right: -20px;
}

.talk.right .text:after {
    border-left: 10px solid #fff;
    right: -19px;
}

.talk:after,
.talk:before {
    clear: both;
    content: "";
    display: block;
}



/************************************
** レビュー、ユーザプロファイル
************************************/

.review-comment,
.user-profile{
    padding: 2em;
    display: table;
    box-sizing: border-box;

    width: 100%;
    background: #fafafa;
    margin-bottom: 2em;
    font-size: 15px;
}

.review-comment .inner-left,
.review-comment .inner-right,
.user-profile .inner-left,
.user-profile .inner-right
{
    display: table-cell;
    vertical-align: top;
}

.review-comment .inner-left,
.user-profile .inner-left
{
    position: relative;
    width: 80px;
}

.review-comment .inner-left img,
.user-profile .inner-left img
{
    border-radius: 50%;
}


.review-comment .inner-right,
.user-profile .inner-right
{
    padding-left: 2em;
    position: relative;
}

.review-comment .inner-right p,
.user-profile .inner-right p
{
    margin-bottom: 1em;
}

.review-comment .inner-right p:last-child,
.user-profile .inner-right p:last-child
{
    margin-bottom: 0;
}

.review-comment .source,
blockquote .source{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    margin: 0;
}

.review-comment .source-dummy,
blockquote .source-dummy
{
    padding: 1em;
}

.review-comment .avatar,
.user-profile .avatar{
    text-align: center;
    font-size: 13px;
    font-weight: bold;
}

.review-comment .avatar img,
.user-profile .avatar img {
    box-shadow: none;
}
.user-profile .avatar img {
    width: 72px;
    margin-bottom:1em;
}

.person-meta {
    text-align: center;
    margin-bottom:1em;
}

.review-comment .avatar img.man{
    border: 2px solid #5777af;
}


.review-comment .avatar img.woman{
    border: 2px solid #c98b9d   ;
}

html body article .review-comment blockquote{
    padding: 0;
    background: transparent;
    margin: 0;
    border: none;
    box-shadow: none;
}



html body article  .review-comment blockquote:before,
html body article  .review-comment blockquote:after{
    display: none;
}



/*枠付き*/
/*ビジュアルエディターのスタイルを書く*/

ul.frame, ol.frame {
    background: #fcfcfc;/*背景色*/
    padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
    border: solid 3px gray;/*線の種類 太さ 色*/
}

ul.frame li, ol.frame li {
    line-height: 1.5; /*文の行高*/
    padding: 0.5em 0; /*前後の文との余白*/
}


ul.frame.green, ol.frame.green {
    background: transparent;
    border: solid 3px #6cd050;/*線の種類 太さ 色*/
}

ul.frame li:last-child, ol.frame li:last-child {
    margin-bottom:0;
}
.frame-with-header {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}

.entry-content .frame-with-header ul{
    margin: 0;
    padding-left: 1em;
}
.frame-with-header .frame-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.frame-with-header.yellow {
    border: solid 3px #f6c214;
}

.frame-with-header.yellow .frame-title {
    background: #f6c214;

}

.frame-with-header.redder {
    border: solid 3px #f6839c;
}

.frame-with-header.redder .frame-title {
    background: #f6839c;

}

.entry-content ul{
    margin-bottom:2em;
}

* p:last-child {
    margin: 0;
}


/*引用・ヒント*/

article div.hint, article div.profile,article blockquote {
    padding: 2em 32px 1em;
    margin: 4em 0 2em;
    position: relative;
    z-index: 2;
    background: #f8f8f8;
}

article div.hint, article div.profile p ,article blockquote {
    margin-bottom: 1.7em;
    line-height: 150%;
}

article div.hint ol, article div.hint ul {
    margin-bottom: 1em;
}

.entry-content blockquote {
    padding: 2em 1em 2em;
    margin: 4em 0 2em;
    position: relative;
    z-index: 2;
    background: #f0f0f0;
}
article div.hint:before {
    font-family: FontAwesome, serif;
    content: "\f0eb";
    position: absolute;
    top: -28px;
    left: 0;
    font-size: 36px;
    color: #fff;
    z-index: 2;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.6;
}

article div.hint:after {
    content: "";
    display: block;
    position: absolute;
    top: -25px;
    left: calc(50% - 25px);
    width: 50px;
    border-radius: 50%;
    height: 50px;
    background: #ffcc00;
    z-index: 1;
}

article div.profile .name {
    font-weight: bold;
    position: absolute;
    top: -14px;
    left: 32px;
    font-size: 18px;
    color: #fff;
    z-index: 2;
    display: inline-block;
    padding: 0.2em 0.5em;
    background-image: linear-gradient(135deg, #777 25%, #555 25%, #555 50%, #777 50%, #777 75%, #555 75%, #555);
    background-size: 4px 4px;
    text-align: center;

}

article div.profile .thumbnail {
    max-width: 240px;
    float: right;
    margin:0 0 1em 1em;
}

article .profile ul {
    margin-top: 0.2em;
    padding-left: 1em;
}


article blockquote:before {
    font-family: FontAwesome, serif;
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    font-size: 24px;
    color: #fff;
    z-index: 2;
    display: block;
    width: 100%;
    text-align: center;
}

article blockquote:after {
    content: "";
    display: block;
    position: absolute;
    top: -25px;
    left: calc(50% - 25px);
    width: 50px;
    border-radius: 50%;
    height: 50px;
    background: #33a4ff;
    z-index: 1;
}

article blockquote p.source {
    position: absolute;
    right: 20px;
    bottom: 0;
    font-size: 12px;
    color: #808080;
}

article div.hint strong,
article div.hint p,
article blockquote p {
    margin: 0 0 1em;
    display: block;
}


article div.hint p strong{
    display: inline;
}


article div.hint, article div.profile, article blockquote {
    padding: 2em 1em 1em;
    margin-right: -1em;
    margin-left:  -1em;
}

@media screen and (max-width:639px) {


    /************************************
    ** 会話
    ************************************/


    .talk{
        padding-right: 1em;
    }

    .talk.right{
        padding: 0 0 0 1em;
    }


    .talk figure {
        margin: 0;
        width: 50px;
        height: 50px;
    }

    .talk figure img.man {
        border: 1px solid #97cbff;
    }

    .talk figure img.woman{
        border: 1px solid #eab9e4;
    }

    .talk figcaption {
        margin: -3px -6px;
    }

    .talk .inner-left{
        margin-left: 70px;
    }

    .talk .inner-right{
        margin-right: 70px;
    }

    .talk .text{
        font-size: 14px;
    }



    .user-profile {
        padding: 1.5em 1em 1em}

}