/* $Id: quote.css,v 1.1 2022/10/16 07:56:56 hisasima Exp hisasima $ */

@charset "UTF-8";

/*
 * pattern0
 */
/* ▼引用ボックス自体の装飾 */
blockquote.pattern0 {
    position: relative;        /* 後述の疑似要素の表示位置の基準にする(必須) */
    background-color: #ffffcc; /* 背景色(任意) */
    border: 1px solid #cccc00; /* 枠線(任意) */
    margin: 1em 1em 1em 2.5em; /* 外側の余白(任意) */
    padding: 2em 3.5em;        /* 内側の余白(任意) */
}
/* ▼引用ボックスの先頭(左上)に表示する文字▼ */
blockquote.pattern0::before {
    /* content: "『"; */      /* 記号 */
    /* content: "“"; */
    content: "▼";
    display: block;
    font-size: 300%;    /* 表示サイズ */
    color: #cc0000;     /* 表示色 */
    position: absolute; /* 絶対配置 */
    top: 0px;           /* ボックス上端からの距離 */
    left: 5px;          /* ボックス左端からの距離 */
}
/* ▼引用ボックスの末尾(右下)に表示する文字▼ */
blockquote.pattern0::after {
    /* content: "』"; */    /* 記号 */
    /* content: "”"; */
    content: "▲";
    display: block;
    font-size: 300%;    /* 表示サイズ */
    color: #cc0000;     /* 表示色 */
    position: absolute; /* 絶対配置 */
    bottom: 0px;        /* ボックス下端からの距離 */
    right: 5px;         /* ボックス右端からの距離 */
}

/*
 * pattern1
 */
blockquote.pattern1 {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote.pattern1::before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
}

blockquote.pattern1 p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote.pattern1 cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/*
 * pattern2
 */
blockquote.pattern2 {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    /* font-style: italic; */
    /* background: #f5f5f5; */
    color: #777777;
    border-left: 4px solid #9dd4ff;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14); */
}

blockquote.pattern2::before{
    display: inline-block;
    position: absolute;
    /* top: 7px; */
    top: 0px;
    left: 0;
    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
}

blockquote.pattern2 p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote.pattern2 cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}


/*
 * pattern3
 */
blockquote.pattern3 {
    position: relative;
    /* padding: 10px 15px 10px 60px; */
    padding: 5px 2em 5px 1em; */
    box-sizing: border-box;
    /* font-style: italic; */
    /* background: #f5f5f5; */
    /* color: #777777; */
    border-left: 4px solid #000080; /* navy */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14); */
}