NOTE1 code | ナノ

必ず自動改行「しない」設定にしてください

HEAD

/* ウェブフォントの読み込み */
    @import url('https://fonts.googleapis.com/css?family=Meddon|Noto+Serif+JP&display=swap');

/* 全体に適用する */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-weight: normal;
        font-family: 'Noto Serif JP', serif;
    }

/* 基本設定 */
    body {
        text-align: center;
        background-color: #fff;
        line-height: 1.7;
        letter-spacing: 0.1em;
        font-size: 13px;
        color: #000;
    }

/* リンク */
    a {
        text-decoration: none;
        border-bottom: thin solid #000;
        color: #000;
    }

/* 大見出し */
    h1 {
        margin: 0.5em auto;
        font-family: 'Meddon', 'Noto Serif JP', serif;
    }

/* 線 */
    div.line {
        margin: 0 auto;
        transform: rotate(45deg);
        width: 25px;
        height: 25px;
        border-bottom: thin solid #000;
        border-right: thin solid #000
    }

/* セクション */
    section {
        margin: 3em auto;
        width: 80%;
        max-width: 500px;
        border: thin solid #000;
    }

/* セクション見出し */
    section h2 {
        margin-left: -60px;
        padding: 0.3em;
        background-color: #000;
        font-size: 1.2em;
        color: #fff;
    }

/* セクション段落 */
    section p {
        margin: 1em auto 1.5em;
        text-align: justify;
        word-break: break-all;
    }

/* 追記 */
    div.tuiki {
        text-align: justify;
        word-break: break-all;
    }

/* 追記リンク */
    div.tuiki a {
        display: inline-block;
        padding: 0.2em 0.5em;
        background-color: #e3e548;
        border: thin solid #fff;
    }

/* リンクホバー */
    div.tuiki a:hover {
        transition: .5s all;
        background-color: #fff;
        border: thin solid #e3e548;
        color: #e3e548;
    }

/* 右揃え */
    section .right {
        text-align: right;
    }

/* メニュー */
    #menu {
        margin: 2em auto;
    }

#menu ul li {
        display: inline-block;
        margin: 0 1em;
    }

/* フォーム系 */
    textarea,
    input[type] {
        -webkit-appearance: none;
        padding: 0.2em 0.5em;
        background: #fff;
        border: none;
        border-radius: 0;
        color: #000;
    }

textarea {
        width: 200px;
        height: 70px;
    }

input[type=text] {
        width: 80px;
    }

input[type=submit] {
        width: auto;
    }

/* 横幅768px以上で読み込む */
    @media screen and (min-width:768px) {

/* フォントサイズ */
        body {
            font-size: 14px;
        }

}
</style>

一覧画面レイアウト（上部）

一覧画面レイアウト（一覧）

一覧画面レイアウト（下部）

追記画面レイアウト