砂海の歌　ソースコード

自動改行しないで作成しています。
アイデアありがとうございました。
タイトルは花鹿さまより。
素材はパブリックドメインのより使用していますので、下記から保存してください。

文章ページサンプル。宮沢賢治「よだかの星」より。

リストタグ（#list#）を使用していません。
リンク部分を１ページずつざくざく張り付けていってください。
HEAD

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro|Monsieur+La+Doulaise|Instrument+Serif');

@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');

body {
    background: #fff;
    color: #333;
    font-size: 12px;
    font-family: 'Anonymous Pro', メイリオ, sans-serif;
    line-height: 200%;
    letter-spacing: 2px;
    margin: 0;
   
}

a {
    color: #a69abd;
    text-decoration: none;
}

a:hover {
    color: #cbb994;
}

h1 {
    font-family: 'Anonymous Pro', 'Zen Kurenaido', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    font-size: 16px;
    font-weight:200;
    color:#fff;
    margin: 0 auto;
    padding: 5px;
    border-bottom: solid 1px #fff;
    border-top: solid 1px #fff;
    line-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
        -webkit- transform: translateY(-50%) translateX(-50%);
}

h2,h3 {
    font-family: 'Instrument Serif', 'Zen Kurenaido', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif;
    font-size: 14px;
    margin: 50px auto 20px;
    padding: 0 5px;
}

h2 p,h3 p {
    font-family: 'Monsieur La Doulaise';
    font-size: 36px;
    font-weight:200;
    color: #a69abd;
    margin: 0 -15px 0 0;
    padding:0;
    display: inline-block;
    position:relative;
    bottom:5px;
    z-index: -99;
}

h3 {
    margin-bottom: 50px;
}

input[type] {
    font-family: 'Anonymous Pro', メイリオ, sans-serif;
    color: #fff;
    background: #a69abd;
    padding: 5px;
    margin:0 5px;
    border:none;
    border-bottom: 1px solid #a69abd;
    border-radius: 0;
    width: 60px;
    height: auto;
        -webkit-appearance: none;
    box-shadow: none;
    text-shadow: none;
    text-align: center;
}

input[type=submit] {
    width: 60px;
    height: auto;
    color: #333;
    border:1px solid #333;
    background: #fff;
    cursor: pointer;
}

.wrp {
    max-width:300px;
    margin: 50px auto 30px;
}

.arrow {
    width: 15px;
    height: 15px;
    border: 1px solid;
    border-color: transparent transparent #fdeff2 #fdeff2;
    transform: rotate(-45deg);
    margin: 20px auto;
}

.top {
    background:url(#mtr画像番号_url#) center/cover no-repeat;
        -webkit-background-size:cover;
    background-size:cover;
    height:200px;
    position: relative;
    box-shadow:0px 0px 8px 3px #fff inset,0px 0px 8px 3px #fff inset;
}

.mn {
    text-align: right;
    margin: 10px 0 20px;
}

.sec,.sec2,.sec3 {
    margin: 10px 0 30px 20px;
}

.sec a,.sec2 a,.sec3 a {
    margin: 0 5px 0 0;
    padding: 1px 5px;
    color: #fff;
}

.sec a {
    background: #abced8;
}

.sec a:hover {
   background: #ccc;
}

.sec2 a {
    background: #a69abd;
}

.sec2 a:hover {
   background: #cbb994;
}

.sec3 a {
   background: #cbb994;
}

.sec3 a:hover {
   background: #a69abd;
}

.text {
    max-width: 600px;
    text-align: left;
    margin: 30px auto;
    padding: 50px 25px 0;
    font-size: 13px;
    line-height: 250%;
}

</style>

全体レイアウト

表紙画面レイアウト

文章画面レイアウト

名前変換画面レイアウト