@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
    :root {
        --font: 1.5vw;
    }
    body {
        font-family: 'Kosugi', sans-serif;
            margin: 0;
            padding: 0;
            padding-bottom: 1vh;
            line-height: 2;
            font-size: var(--font)
        }

        ul{
            display: block;
            margin-top: 3em;
            margin-bottom: 3em;
        }

        .card-size {
            width: 40vw;
            padding: 2vh;
        }

        section > *:not(ul) {
            margin: 1vh;
        }

        section {
            margin: 0;
            padding: 0;
            margin-left: 12.5vw;
            width: 75vw;
            
        }

            section > .thumbnail {
                margin-left: -20vw;
                width: 100vw;
            }
        /*-------------------------------------------------
  |                       タイトル                   |
  -------------------------------------------------*/
        .thumbnail > .title {
            color: #FFF;
            font-size: 6vw;
            position: absolute;
            top: calc(50% - 0.7em);
            text-align: center;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .thumbnail {
            align-items: center; /* 中の要素を上下中央に並べる */
            color: #fff;
            font-size: 15vh;
            height: 30vh;
            width: 100%;
            padding: 0;
            margin: 0;
            /*background-position:center bottom; */ /*サイズ合わない時用。第2引数でtarget位置設定*/ /* 画像の表示位置を指定 */
            background-size: cover;
            position: absolute;
            background-color: black;
            top: 9vh;
            z-index: 1;
        }

        main{
            margin-top: 36vh;
        }

        a::before {
            animation-duration: 3s;
            animation-name: slideinb;
        }

        a::after {
            animation-duration: 3s;
            animation-name: slideina;
        }

        @keyframes slideinb {
            from {
                left: 0;
                width: 0;
            }

            to {
                width: 50%;
                left: 50%;
            }
        }

        @keyframes slideina {
            from {
                width: 0;
                right: 0;
            }

            to {
                width: 50%;
                right: 50%;
            }
        }

        /*-------------------------------------------------
  |                    メイン部分                    |
  -------------------------------------------------*/

        main {
            padding: 8vh;
        }


        /*-------------------------------------------------
  |                       囲みわく                   |
  -------------------------------------------------*/
        blockquote {
            position: relative;
            padding: 0.25em 1em;
        }

            blockquote:before, blockquote:after {
                content: '';
                width: 20px;
                height: 30px;
                position: absolute;
                display: inline-block;
                line-height: 1.25;
            }

            blockquote:before {
                border-left: solid 1px #5767bf;
                border-top: solid 1px #5767bf;
                top: 0;
                left: 0;
            }

            blockquote:after {
                border-right: solid 1px #5767bf;
                border-bottom: solid 1px #5767bf;
                bottom: 0;
                right: 0;
            }

            blockquote p {
                margin: 0;
                padding: 0;
            }

        .memobox {
            margin: 1em 0;
            background-color: #fff9c4;
            padding: 1em;
        }

        .memobox-title {
            font-size: 18px;
            font-weight: bold;
            color: #ffc107;
        }

        .memobox p {
            margin: 0;
            padding: 0;
        }

        .sec_index {
            position: relative;
            margin: 2em 0;
            padding: 0.5em 1em;
            border: solid 3px #95ccff;
            border-radius: 8px;
        }
        .sec_index .box-title {
            position: absolute;
            display: inline-block;
            top: -1em;
            left: 10px;
            padding: 0 9xp;
            line-height: 1;
            background: #FFF;
            color: #95ccff;
            font-weight: bold;
            font-size: 2em;
        }
        .sec_index p {
            margin: 0; 
            padding: 0;
            font-size: 1em;
        }

        .sec_title{
            margin-top: 2em;
            font-size: 2em;
        }

        /*.me .saymobox-title:before{
    font-family: FontAwesome;
    content: "\f303";
    font-size: 17px;
  }*/


        /*-------------------------------------------------
  |                       チャット                   | 
  |　 you クラス me　クラス　は登場人物の数だけ追加する　|
  -------------------------------------------------*/
        .chat .people {
            background-size: cover;
            width: 12vh;
            height: 12vh;
            border-radius: 50%; /*丸く表示*/
            background-position: center; /*背景画像の位置*/
            box-shadow: 0 0 0px rgba(0, 0, 0, .16);
        }

        .you .people {
            background-image: url('https://drive.google.com/uc?id=1Uhwj-ijKXQLKmD6dgfS9qgsfmHPgQdM6&.jpg'); /*人の画像のURL*/
        }

        .me .people {
            background-image: url('https://drive.google.com/uc?id=1S8biaL2BBKuILBMMywIZRj0-YYs8mfxM&.jpg'); /*人の画像のURL*/
        }
        /*need it https://www.pinterest.jp/pin/303007881155307205/*/
        .you .say, .me .say {
            position: relative;
            display: inline-block;
            margin: 1.5em 0 1.5em 15px;
            padding: 7px 10px;
            min-width: 120px;
            max-width: 100%;
            color: #555;
            font-size: 16px;
            background: #FFF;
            border: solid 3px #555;
            box-sizing: border-box;
        }

            .you .say:before { /*内側三角形*/
                content: "";
                position: absolute;
                top: 50%;
                left: -24px;
                margin-top: -12px;
                border: 12px solid transparent;
                border-right: 12px solid #FFF;
                z-index: 2;
            }

            .you .say:after { /*外側三角形*/
                content: "";
                position: absolute;
                top: 50%;
                left: -30px;
                margin-top: -14px;
                border: 14px solid transparent;
                border-right: 14px solid #555;
                z-index: 1;
            }

        .you, .me {
            display: flex;
        }

        .you {
            position: relative;
            left: 0;
            flex-direction: row;
            justify-content: flex-start;
        }

        .me {
            position: relative;
            right: 0;
            flex-direction: row-reverse;
            justify-content: flex-end;
        }

            .me .say:before {
                content: "";
                position: absolute;
                top: 50%;
                right: -24px;
                margin-top: -12px;
                border: 12px solid transparent;
                border-left: 12px solid #FFF;
                z-index: 2;
            }

            .me .say:after {
                content: "";
                position: absolute;
                top: 50%;
                right: -30px;
                margin-top: -14px;
                border: 14px solid transparent;
                border-left: 14px solid #555;
                z-index: 1;
            }

            .sectiontitle {
                border-bottom: solid 3px #99ddff;
                position: relative;
                font-size: 5vh;
                margin-bottom: 10px;
            }
        
                .sectiontitle:before {
                    content: "∴";
                    color: #99ddff;
                }
        
                .sectiontitle:after {
                    position: absolute;
                    content: " ";
                    display: block;
                    border-bottom: solid 3px #9999ff;
                    bottom: -3px;
                    width: 20%;
                }
        /*-------------------------------------------------
  |                       文字装飾                   |
  -------------------------------------------------*/
        .h3 {
            border-bottom: solid 2px #99ddff;
            font-size: 5vh;
        }

        mark {
            background: linear-gradient(transparent 70%, #fff799 70%);
            font-weight: bold; /*背景色がその文字をハイライトする色*/
        }

        .marker {
            display: inline;
            background: linear-gradient(transparent 70%, #99ddffab 70%); /*二つのpercentは同一な65%-85%の数値に収めること。数字が小さくなると文字全体を覆う。*/
        }

        .marker::after{
            content: "";
            display: block;
        }

        .marker::before{
            content: "";
            display: block;
        }

        .under {
            border-bottom: solid 2px #99ddff;
            display: inline;
        }

        .dethtory {
            text-decoration: line-through;
        }

        /*-------------------------------------------------
  |                       リンク　                   |
  -------------------------------------------------*/
        .btn-border ,.next {
            display: inline-block;
            text-align: left;
            border: 2px solid #99ddff; /*枠線*/
            font-size:20px;
            color: #9999ff; /*文字色*/
            background-color: #fff; /*背景*/
            text-decoration: none;
            font-weight: bold;
            border-radius: 4px; /*丸くする処理*/
            transition: .4s;
            padding: 0;
        }

        .next::before{
            content: "次ページ: ";
        }

        .next::after{
            content: " >";
        }

        .btn-border:hover ,.next:hover{
            background-color: #99ddff;
            border-color: #99ddff;
            color: #FFF;
            font-weight: normal;
        }

        .btn-border::content{
            height: 100%;
        }

        .btn-flat-logo {
            position: relative;
            display: inline-block;
            font-weight: bold;
            padding: 0.25em 0.5em;
            text-decoration: none;
            color: #FFF;
            background: #99ddff;
            transition: .4s;
        }

            .btn-flat-logo:hover {
                background: #99ddff;
            }

            .btn-flat-logo .bold {
                display: inline-block;
                font-weight: bold;
            }
        /*-------------------------------------------------
  |                       フォント                   |
  -------------------------------------------------*/
        /*#c06014
  #eddbcd
  #000000
  #cdcdcd*/
        /*-------------------------------------------------
  |                       　ﾀｲﾑﾗｲﾝ　                   |
  -------------------------------------------------*/

        .timeline {
            margin: 5vw;
            border-left: medium solid #99ddff;
            ;
            padding: 0;
            list-style-type: none;
        }

        .toblack {
            background-color: #a8a8ff;
        }

        .to-asia {
            background-color: #9999ff;
        }

        .timeline-date {
            position: absolute;
            top: calc(50% - 2.5vw);
            width: 5vw;
            height: 5vw;
            border-radius: 50%;
            margin: 0 0 0 -2.5vw;
        }


        .timeline time {
            display: block;
            margin-top: calc(50% - 0.75vw);
            font-size: 1.5vw;
            text-align: center;
            color: #fff;
        }

        .timeline-content {
            position: relative;
            display: inline-block;
            margin: 0 0 0 calc(3vw + 14px);
            padding: 7px 10px;
            min-width: 120px;
            max-width: 100%;
            color: #555;
            font-size: 16px;
            background: #FFF;
            border: solid 3px #555;
            box-sizing: border-box;
        }

            .timeline-content:before { /*内側三角形*/
                content: "";
                position: absolute;
                top: 50%;
                left: -24px;
                margin-top: -12px;
                border: 12px solid transparent;
                border-right: 12px solid #FFF;
                z-index: 2;
            }

            .timeline-content:after { /*外側三角形*/
                content: "";
                position: absolute;
                top: 50%;
                left: -30px;
                margin-top: -14px;
                border: 14px solid transparent;
                border-right: 14px solid #555;
                z-index: 1;
            }

        .timeline > li {
            position: relative;
            display: flex;
            margin-bottom: 10px;
        }
    /*カード*/
    .img_card{
        max-width:50%;
    }

    .img_card img {
        height: 30vh;
    }